1. 程式人生 > 其它 >ES6 陣列 常用Api

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:當前陣列
function callback(element, index, array) { // callback函式必須返回true或者false告知every是否通過測試 return true || false; }

// 控制是否銷燬定時器 const stopTimer = result.every(item => ( item.documentStatus !== 1 )) // 如果都已經購買完成 停止計時器 if (stopTimer) { this.stopSetInterval() }

備註: 如遇到需求需要陣列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為[]