JavaScript Array 屬性、方法 (二)

JavaScript Array 屬性、方法 (一)

every()

方法用於檢測數組全部元素是否都符合指定條件（經過函數提供）

若收到一個空數組，此方法在一切狀況下都會返回 true

• 語法

array.every(function(currentValue,index,arr), thisValue) 複製代碼

• 參數

  • function
    • currentValue: 必須 當前元素的值
    • index :可選 當前元素的索引值
    • arr: 可選。當前元素屬於的數組對象
  • thisValue: 可選。對象做爲該執行回調時使用，傳遞給函數，用做 "this" 的值。若是省略了 thisValue ，"this" 的值爲 "undefined"

• 返回值:

  布爾值。若是全部元素都經過檢測返回 true，不然返回 false。

• Example

function isBelowThreshold(currentValue) {
  return currentValue < 40;
}
let array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// output: true
複製代碼

fill()

用一個固定值填充一個數組中從起始索引到終止索引內的所有元素。不包括終止索引。

• 語法

array.fill(value[, start[, end]])
複製代碼

• 參數

  • value: 用來填充數組元素的值。

  • start 可選 起始索引，默認值爲0。

  • end 可選 終止索引，默認值爲 this.length。

• 返回值

  修改後的數組

let array1 = [1, 2, 3, 4];
// 將數組array1中索引爲（2 - 4）元素的值修改成0
console.log(array1.fill(0, 2, 4));
// output[Array]: [1, 2, 0, 0]

// 將數組array1索引從1開始到最大索引的元素的值修改成5
console.log(array1.fill(5, 1));
// output[Array]: [1, 5, 5, 5]

// 將數組array1中的元素的值修改成6
console.log(array1.fill(6));
// output[Array]: [6, 6, 6, 6]
複製代碼

filter()

建立一個新的數組，新數組中的元素是經過檢查指定數組中符合條件的全部元素。

• 語法

array.filter(function(currentValue,index,arr), thisValue) 複製代碼

• 參數

  • function
    • currentValue: 必須。當前元素的值
    • index: 可選。當前元素的索引值
    • arr: 可選。當前元素屬於的數組對象
  • thisValue: 可選。對象做爲該執行回調時使用，傳遞給函數，用做 "this" 的值。若是省略了 thisValue ，"this" 的值爲 "undefined"

• 返回值

返回數組，包含了符合條件的全部元素。若是沒有符合條件的元素則返回空數組。

let words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
// 返回 words 中元素字符長度大於6的元素
const result = words.filter(word => word.length > 6);
console.log(result);
// output[Array]: ["exuberant", "destruction", "present"]
複製代碼

let fruits = [
  {
    name: 'apple',
    price: '13'
  },
  {
    name: 'banana',
    price: '8'
  },{
    name: 'cherry',
    price: '20'
  }
];
// 查找單價 大於10的水果
const result = fruits.filter(fruit => fruit.price > 10);
console.log(result);
// output[Array]: [{{name: "apple", price: "13"},{name: "cherry", price: "20"}]
複製代碼

find()

返回數組中知足條件的第一個元素的值。不然返回 undefined。

• 語法

array.find(function(currentValue, index, arr),thisValue) 複製代碼

• 參數

  • function
    • currentValue: 必須。當前元素的值
    • index: 可選。當前元素的索引值
    • arr: 可選。當前元素屬於的數組對象
  • thisValue: 可選。 傳遞給函數的值通常用 "this" 值。若是這個參數爲空， "undefined" 會傳遞給 "this" 值

• 返回值

返回符合測試條件的第一個數組元素值，若是沒有符合條件的則返回 undefined

let array1 = [5, 12, 8, 130, 44];

let found = array1.find(function(element) {
  return element > 10;
});
console.log(found);
// output[Array]: 12
複製代碼

findIndex()

方法返回傳入一個測試條件（函數）符合條件的數組第一個元素位置

• 語法

array.findIndex(function(currentValue, index, arr), thisValue) 複製代碼

• 參數

  • function
    • currentValue: 必須。當前元素的值
    • index: 可選。當前元素的索引值
    • arr: 可選。當前元素屬於的數組對象
  • thisValue: 可選。 傳遞給函數的值通常用 "this" 值。若是這個參數爲空， "undefined" 會傳遞給 "this" 值

• 返回值

返回符合測試條件的第一個數組元素索引，若是沒有符合條件的則返回 -1

let array1 = [5, 12, 8, 130, 44];

function isLargeNumber(element) {
  return element > 13;
}

console.log(array1.findIndex(isLargeNumber));
// output: 3
複製代碼

flat()

按照一個可指定的深度遞歸遍歷數組，將全部元素與遍歷到的子數組中的元素合併爲一個新數組返回。

• 語法

let newArray = arr.flat([depth])
複製代碼

• 參數

  • depth: 指定要提取嵌套數組的結構深度，默認值爲 1。

• 返回值

一個包含將數組與子數組中全部元素的新數組。

// 扁平化嵌套數組
let arr1 = [1, 2, [3, 4]];
console.log(arr1.flat()); 
// output[Array]: [1, 2, 3, 4]

let arr2 = [1, 2, [3, 4, [5, 6]]];
console.log(arr2.flat());
// output[Array]: [1, 2, 3, 4, [5, 6]]

let arr3 = [1, 2, [3, 4, [5, 6]]];
console.log(arr3.flat(2));
// output[Array]: [1, 2, 3, 4, 5, 6]

//使用 Infinity 做爲深度，展開任意深度的嵌套數組
let arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
console.log(arr4.flat(Infinity));
// output[Array]: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
複製代碼

flat() 方法會移除數組中的空項:

var arr5 = [1, 2, , 4, 5];
console.log(arr5.flat());
// output[Array]: [1, 2, 4, 5]
複製代碼

flat()替代方案

flat()替代方案