ES6 陣列 常用Api
1.合併多個數組
array.concat(array1, array2,...arrayN);
const array = [1,2].concat(['a', 'b'], ['name']); // [1, 2, "a", "b", "name"]
備註:結構後的...arrayN 只能放在最後不然會報錯
2.過濾 陣列中指定條件的值並返回新的陣列
array.filter(callback[, thisArg]);
// callback定義如下,三個引數: element:當前元素值;index:當前元素下標; array:當前陣列 function callback(element, index, array) {// callback函式必須返回true或者false,返回true保留該元素,false則不保留。 return true || false; } const filtered = [1, 2, 3].filter(element => element > 1); // filtered: [2, 3];
備註:過濾後的是新陣列, es6箭頭函式 高效使用。
3.檢測陣列中的每一個元素是否都通過了callback測試,全部通過返回true,否則返回false。
array.every(callback[, thisArg]);
// callback定義如下: element:當前元素值;index:當前元素下標; array:當前陣列// 控制是否銷燬定時器 const stopTimer = result.every(item => ( item.documentStatus !== 1 )) // 如果都已經購買完成 停止計時器 if (stopTimer) { this.stopSetInterval() }function callback(element, index, array) { // callback函式必須返回true或者false告知every是否通過測試 return true || false; }
備註: 如遇到需求需要陣列ids:'1,2,3,4'輪循請求介面,介面返回 true ,true ,flase,turs 每個id的狀態,需要根據是否全部為true為條件 觸發是否關閉輪詢請求
4. 查詢複合條件的第一個元素/返回通過callback函式測試的第一個元素,否則返回undefined,callback函式定義同上。
array.find(callback[, thisArg]);
const finded = [1, 2, 3].find(element => element > 1); // finded: 2
備註:如果你需要找到一個元素的位置或者一個元素是否存在於陣列中,使用Array.prototype.indexOf() 或 Array.prototype.includes()。
5.陣列中找符合條件的第一個索引值(index)
array.findIndex(callback[, thisArg]);
const findIndex = [1, 2, 3].findIndex(element => element > 1); // findIndex: 1
備註:返回通過callback函式測試的第一個元素的索引,否則返回-1,callback函式定義同上
6.返回在陣列中可以找到一個給定元素的第一個索引,如果不存在,則返回-1。searchElement:要查詢的元素;fromIndex:開始查詢的索引位置。
array.indexOf(searchElement[, fromIndex = 0])
[2, 9, 7, 8, 9].indexOf(9); // 1
7.陣列通過指定連線符拆分成String
array.join(separator=',')
[1, 2, 3].join(';'); // "1;2;3"
8.返回一個新陣列,新陣列中的每個元素都是呼叫callback函式後返回的結果。注意:如果沒有return值,則新陣列會插入一個undefined值。
array.map由於不具有過濾的功能,因此array呼叫map函式時,如果array中的資料並不是每一個都會return,則必須先filter,然後再map,即map呼叫時必須是對陣列中的每一個元素都有效。
const maped = [{name: 'aa', age: 18}, {name: 'bb', age: 20}].map(item => item.name + 'c'); // maped: ['aac', 'bbc'];
9.將陣列中元素的位置顛倒。
array.reverse();
['one', 'two', 'three'].reverse(); // ['three', 'two', 'one'],原陣列被翻轉
10.對陣列中的元素進行排序,compareFunction不存在時,元素按照轉換為的字串的諸個字元的Unicode位點進行排序,慎用!請使用時一定要加compareFunction函式,而且該排序是不穩定的。
array.sort([compareFunction]);
[1, 8, 5].sort((a, b) => { return a-b; // 從小到大排序 }); // [1, 5, 8]
11.判斷陣列中是否包含可以通過callback測試的元素,與every不同的是,這裡只要某一個元素通過測試,即返回true。callback定義同上。
array.some(callback[, thisArg]);
[2, 5, 8, 1, 4].some(item => item > 6); // true
12.返回一個新陣列,包含原陣列從begin 到 end(不包含end)索引位置的所有元素。
array.slice(begin, end)
const newArray = ['zero', 'one', 'two', 'three'].slice(1, 3); // newArray: ['one', 'two'];
13.通過刪除現有元素和/或新增新元素來更改一個數組的內容。start:指定修改的開始位置;deleteCount:從 start位置開始要刪除的元素個數;item...:要新增進陣列的元素,從start 位置開始。!!!!強大的輸出處理返回值為被操作的值。
返回值是由被刪除的元素組成的一個數組。如果只刪除了一個元素,則返回只包含一個元素的陣列。如果沒有刪除元素,則返回空陣列。
如果 deleteCount 大於start 之後的元素的總數,則從 start 後面的元素都將被刪除(含第 start 位)。
const myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; const deleted = myFish.splice(2, 0, 'drum'); // 在索引為2的位置插入'drum' // myFish 變為 ["angel", "clown", "drum", "mandarin", "sturgeon"],deleted為[]