詳細學習請看：
vue數組操作方法
JavaScript Array 對象參考手冊
-
【使數組發生更新】方法：修改了原始數組，會觸發視圖更新
push() 、 pop()、shift()、unshift()、 splice() 、sort()、 reverse()、 join()
-
【傳回新數組、替換數組】：不會變更原始數組，而總是傳回一個新數組
filter()、concat() 、 slice()、 map()
【 .filter() 】方法
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() 方法按照原始數組元素順序依次處理元素。
filter方法不會改變原數組，不對空數組進行檢測。
舉例：
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] 【 .concat() 】方法：合并數組
舉例：
// 數組直接和參數合并
const array = ['a','b','e'];
console.log(array.concat('h','i')); // "a", "b", "e", "h", "i"
// 2個數組合并
const array = ['a','b','e'];
const b = ['c','d']
console.log(array.concat(b)); // a b e c d
// 3個數組合并
const array = ['a','b','e'];
const b = ['c','d'];
const c = ['f','g'];
console.log(array.concat(c,b)); // "a", "b", "e", "f", "g", "c", "d" 【 .push() 】方法
push在數組的末尾增加一個元素，一次可以增加多個
舉例：
const array = ['a','b','c'];
array.push('d');
console.log(array); // a b c d
array.push('e','f','g');
console.log(array); // a b c d e f g 【 .join() 】方法
join() 方法用于把數組中的所有元素放入一個字元串。
元素是通過指定的分隔符進行分隔的。
const array = ['a','b','e'];
console.log(array.join('-')); // a-b-e 【 .pop() 】方法
pop在數組末尾删除一個元素
舉例：
const array = ['a','b','c','d'];
array.pop();
console.log(array); // a b c 【 .shift() 】方法
shift删除第一個元素
舉例：
const array = ['a','b','c','d'];
array.shift();
console.log(array); // b c d 【 .unshift() 】方法
unshift在數組頭部增加一個元素或者多個
舉例：
const array = ['c','d'];
array.unshift('b');
console.log(array); // b c d
array.unshift('e','a');
console.log(array); // e a b c d 【 .splice() 】方法：根據索引設定元素
splice删除、插入或者替換元素。文法：this.arr.splice(index, num, value);
舉例：
// 删除 index=1的1個元素
const array = ['a','b','c','d'];
array.splice(1, 1)
console.log(array); // a c d
// 插入 在index=1後插入e
const array = ['a','b','c','d'];
array.splice(1, 0, 'e')
console.log(array); // a e b c d
// 替換 index=1的1個元素
const array = ['a','b','c','d'];
array.splice(1, 1, 'e')
console.log(array); // a e c d $set方法：删除、插入或者替換元素。
文法：arr.$set(index, num, value);和splice() 一樣的文法。
【 .sort() 】方法
sort數組排序
舉例：
const array = ['a','c','b','d'];
array.sort();
console.log(array); // "a", "b", "c", "d" 【 .reverse() 】方法
reverse 數組反轉
舉例：
const array = ['a','c','b','d'];
array.reverse();
console.log(array); // "d", "b", "c", "a" 【 .slice() 】方法：可從已有的數組中傳回標明的元素。
文法：arr.slice(start,end);
2個參數分别是：即要傳回項的起始和結束位置。
- 參數：
start 必需。規定從何處開始選取。如果是負數，那麼它規定從數組尾部開始算起的位置。也就是說，-1 指最後一個元素，-2 指倒數第二個元素，以此類推。
end 可選。規定從何處結束選取。該參數是數組片斷結束處的數組下标。如果沒有指定該參數，那麼切分的數組包含從 start 到數組結束的所有元素。如果這個參數是負數，那麼它規定的是從數組尾部開始算起的元素。
-
傳回值
傳回一個新的數組，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素。
-
說明
請注意，該方法并不會修改數組，而是傳回一個子數組。
當隻給slice()傳遞一個參數時，該方法傳回從該參數指定位置開始到目前數組末尾的所有項。
舉例：
const array = ['a','b','c','d'];
console.log(array.slice(1,3)); // b c
console.log(array.slice(1)); // b c d
console.log(array.slice(-3)); // b c d
console.log(array.slice(-1)); // d 【 .find() 】方法
find傳回符合要求的第一個數組元素，
find方法使用時，數組中的每個元素都會執行find中的函數:
- 當數組中的元素滿足函數條件時則傳回true，find()傳回符合要求的數組元素值，之後的值不會再調用執行函數。
- 當數組元素沒有滿足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() 方法傳回傳入一個測試條件（函數）符合條件的數組第一個元素位置。
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檢測數組中的元素是否都滿足條件，有一個不滿足條件的則傳回false，空數組不會執行。
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 1人點贊
每天進步一點點~
作者：WYL_99
連結：https://www.jianshu.com/p/253fb9e27e4e
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。