最近重新回顧了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) 方法會對數組填充數組成員, 填充長度等于數組長度
