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

最近重新回顾了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) 方法会对数组填充数组成员, 填充长度等于数组长度

博客地址