1. 程式人生 > 其它 >VUE中常用的陣列方法

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