CodingWife 寇丁人妻日安

【ES6】陣列麻吉罵下篇:Sort、Every、Find、Some

2018-02-15

在我們初學 Javascript ,最常用到的就是for迴圈,但當案子的複雜度增加,
我們常常都要在迴圈外面先建立一個空陣列,而且迴圈都不知道迴到哪去(?)
因此 ES6 中,有新增幾個陣列的方法,在這邊介紹幾個陣列的麻吉罵。

此篇文章的資料及範例程式碼皆擷取自MDN

SortEveryFindSome

  • Sort
    使用 sort 將陣列中的元素排列至其應當的位置上並返回此陣列。
  • Every
    使用 every 遍歷陣列的每個元素,當陣列的元素只要有一個不符合函式條件,即回傳false,全部的元素都通過條件,即返回true
  • Find
    find 遍歷陣列的每個元素,回傳陣列第一個符合函式條件的元素,callback 隨即結束,若都不符合,則回傳undefined
  • Some
    使用 some 遍歷陣列的每個元素,當陣列的元素只要有一個符合函式條件,即回傳true,陣列中全部的元素都不符合條件,即返回false

sort

arr.sort([compareFunction]);

compareFunction:指定函數來定義排序順序。

var items = [
{ name: 'Edward', value: 21 },
{ name: 'Sharpe', value: 37 },
{ name: 'And', value: 45 },
{ name: 'The', value: -12 },
{ name: 'Magnetic' },
{ name: 'Zeros', value: 37 },
];
items.sort(function(a, b) {
if (a.name > b.name) {
return 1;
}
if (a.name < b.name) {
return -1;
}
// a must be equal to b
return 0;
});
比較 a , b 元素 結果
compareFunction(a, b) >0 b 排在比 a index 還小處
compareFunction(a, b) =0 互相不改變順序
compareFunction(a, b) <0 a 排在比 b index 還小處

every

arr.every(callback[, thisArg])
  • callback
    測試元素的函式,可帶入三個傳入參數。
    • element
      目前被處理中的元素。
    • index 選填
      目前被處理中元素的索引值。
    • array 選填
      呼叫every的陣列本身。
  • thisArg 選填
    執行functionthis
function isBigEnough(element, index, array) {
return element >= 10;
}

[12, 5, 8, 130, 44].every(isBigEnough); // false
[12, 54, 18, 130, 44].every(isBigEnough); // true

因為第一個isBigEnough陣列的5不符合函式條件,因為every回傳false
第二個isBigEnough的陣列元素,全部都符合函式條件,回傳true

find

arr.find(callback[, thisArg])
  • callback
    測試元素的函式,可帶入三個傳入參數。
    • element
      目前被處理中的元素。
    • index 選填
      目前被處理中元素的索引值。
    • array 選填
      呼叫find的陣列本身。
  • thisArg 選填
    執行functionthis
var array1 = [5, 12, 8, 130, 44];

var found = array1.find(function(element) {
return element > 10;
});

console.log(found);
// expected output: 12

find執行後,第一個符合element > 10條件的數值為12
found的變數值為12,且傳入變數found為數值,而非陣列。

some

arr.some(callback[, thisArg])
  • callback
    測試元素的函式,可帶入三個傳入參數。
    • element
      目前被處理中的元素。
    • index 選填
      目前被處理中元素的索引值。
    • array 選填
      呼叫some的陣列本身。
  • thisArg 選填
    執行functionthis
function isBiggerThan10(element, index, array) {
return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10); // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true

因為第一個isBiggerThan10陣列全部不符合函式條件,所以回傳false
第二個isBiggerThan10的第一個元素12,符合函式條件,則回傳true

Tags: ES6