|
阅读：6704回复：0
ES6 中那些被忽略的优雅方法--find方法、findIndex方法、from方法、fill方法
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 数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。 [1, 5, 10, 15].findIndex(function(value, index, arr) { return value > 9; }) // 2 这两个方法都可以接受第二个参数，用来绑定回调函数的this对象。 另外，这两个方法都可以发现NaN，弥补了数组的IndexOf方法的不足 [NaN].indexOf(NaN) // -1 [NaN].findIndex(y => Object.is(NaN, y)) // 0 上面代码中，indexOf方法无法识别数组的NaN成员，但是findIndex方法可以借助Object.is方法做到 这两种方法类似,看情况决定使用哪一种 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 http://blog.csdn.net/qq_30100043/article/details/53303768 |
|
|
公众号
