VUE中常用的數組方法

.filter()、.map()、.forEach()、.find()、.findIndex()、.some()、.every()
本文僅為自己在項目中經常用到的一些數組方法的使用，以便隨時查看。

.filter()
filter() 方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。
是否改變原數組：否
是否對空數組進行檢測：否

語法：

const arr= [32, 33, 16, 40];
const arr1 = arr.filter(item => item >= 18)
console.log(arr) // [32, 33, 16, 40]
console.log(arr1) // [32, 33, 40]

 

.map()
map() 方法返回一個新數組，數組中的元素為原始數組元素調用函數處理后的值。
map() 方法按照原始數組元素順序依次處理元素。
是否改變原數組：否
是否對空數組進行檢測：否

語法：

const arr= [4, 9, 16, 25];
const arr1 = arr.map(item => item+2)
console.log(arr) // [4, 9, 16, 25]
console.log(arr1) // [6, 11, 18, 27]

.forEach()
forEach() 方法用於調用數組的每個元素，並將元素傳遞給回調函數。
注意: forEach() 對於空數組是不會執行回調函數的。
tips: forEach()中不支持使用break(報錯)和return(不能結束循環)，有需要時可使用常規的for循環。

語法：

const arr= [4, 9, 16, 25];
const arr1 = [];
arr.forEach(item => arr1.push(item))
console.log(arr) // [4, 9, 16, 25]
console.log(arr1) // [4, 9, 16, 25]

 

.find()
find() 方法返回通過測試（函數內判斷）的數組的第一個元素的值。

find() 方法為數組中的每個元素都調用一次函數執行：

當數組中的元素在測試條件時返回 true 時, find() 返回符合條件的元素，之后的值不會再調用執行函數。
如果沒有符合條件的元素返回 undefined
注意: find() 對於空數組，函數是不會執行的。
注意: find() 並沒有改變數組的原始值。

語法：

const arr= [4, 9, 16, 25];
const b = arr.find(item => item>10)
const c = arr.find(item => item<1)
console.log(arr) // [4, 9, 16, 25]
console.log(b) // 16
console.log(c) // undefined

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

findIndex() 方法為數組中的每個元素都調用一次函數執行：

當數組中的元素在測試條件時返回 true 時, findIndex() 返回符合條件的元素的索引位置，之后的值不會再調用執行函數。
如果沒有符合條件的元素返回 -1
注意: findIndex() 對於空數組，函數是不會執行的。
注意: findIndex() 並沒有改變數組的原始值。

語法：

const arr= [4, 9, 16, 25];
const b = arr.findIndex(item => item>10)
const c = arr.findIndex(item => item<1)
console.log(arr) // [4, 9, 16, 25]
console.log(b) // 2
console.log(c) // -1

 

.some()
some() 方法用於檢測數組中的元素是否滿足指定條件（函數提供）。
some() 方法會依次執行數組的每個元素：

如果有一個元素滿足條件，則表達式返回true , 剩余的元素不會再執行檢測。
如果沒有滿足條件的元素，則返回false。
注意： some() 不會對空數組進行檢測。
注意： some() 不會改變原始數組。

語法：

const arr= [4, 9, 16, 25];
const b = arr.some(item => item>10)
const c = arr.some(item => item<1)
console.log(arr) // [4, 9, 16, 25]
console.log(b) // true
console.log(c) // false

 

.every()
every() 方法用於檢測數組所有元素是否都符合指定條件（通過函數提供）。
every() 方法使用指定函數檢測數組中的所有元素：

如果數組中檢測到有一個元素不滿足，則整個表達式返回 false ，且剩余的元素不會再進行檢測。
如果所有元素都滿足條件，則返回 true。
注意： every() 不會對空數組進行檢測。
注意： every() 不會改變原始數組。

語法：

const arr= [4, 9, 16, 25];
const b = arr.every(item => item>10)
const c = arr.every(item => item>1)
console.log(arr) // [4, 9, 16, 25]
console.log(b) // false
console.log(c) // true