ES6 中那些被忽略的优雅方法

Array


1. find(value, index, arr)

在某些情况我需要判断一个数组是不是符合一些逻辑的条件

比如需要判断[{id: 1}, {id: 2}, {id: 3}]中是否有含有符合 id=1的数据;

以前我会使用filter方法。

const array = [{id: 1, name: 'a'}, {id: 2, name: 'b'}, {id: 3, name: 'c'}];
const isTrue = array.filter(obj => obj.id === 1).length;

然而在ES6中包含了一个find方法, 实际上更优雅的写法应该是

const array = [{id: 1}, {id: 2}, {id: 3}];
const isTrue = array.find(obj => obj.id === 1);

find方法将会对数组进行遍历,如果有符合条件的数据将结束遍历并返回数据,没有的话返回undefined而不像filter完整的遍历完数组。
所以如果你只需要对数据进行bool判断或者拿一个数据时候, 建议使用find
除了 find 还有一个方法是findIndex与find用法类似, 不过findIndex 返回的是数组成员的位置, 没有返回-1

这两种方法类似,看情况决定使用哪一种

2. from和[…obj]

Array.from 可以对类似数组的对象转成数组,比如 DOM 中上传图片的input.files

实际上也可以使用[…]代替,而且更简洁。但是使用... 必须对象实现了Iterator方法否则会报错。

使用场景: 以前如果上传多个文件需要显示所有文件的名字和进度的话,需要创建有一个存放相关数据的数组

const array = [];
for (obj of input.files) { // for of 实际上也是对实现Iterator方法的对象遍历
  array.push(obj);
};
// from
const array = Array.from(input.files);
// ...
const array = [...input.files]; //cool
[...'123'] // ['1', '2', '3'];

3. fill();

如果我需要实现一个简单的桶算法的话, 比如对范围在0-100的20个整数排序的话

我首先需要创建一个长度为101, 默认值为0的 数组需要

const array = [];
for (let i = 0; i<101; i++) {
  array.push(0);
}

如果使用fill只需要

const array = new Array(101).fill(0);

Array.fill(value) 方法会对数组填充数组成员, 填充长度等于数组长度

转自:http://www.jianshu.com/p/0f197e102b4f

版权声明:除特别注明外,本站所有文章均为田珊珊个人博客原创

转载请注明:出处来自田珊珊个人博客 » ES6 中那些被忽略的优雅方法

点赞
  1. 中青看点说道:

    这样精彩的博客越来越少咯!

    1. 白云说道:

      @中青看点 看起来确实可以

  2. 约炮把妹说道:

    很少能看到这么专注的博客啦!

  3. 中医秘方说道:

    一言不发岂能证明我来过了?!

发表评论

电子邮件地址不会被公开。 必填项已用*标注