js數組常用方法 ES5/ES6+

ES5及以下

join()： 將數組轉化爲字符串

注：不改變原數組，返回一個新的字符串

let array = ['I', 'am', 'shan', 'er'];
array.join(); //"I,am,shan,er" 默認以逗號分隔；
array.join(' '); //"I am shan er"
array.join('-'); //"I-am-shan-er"

push() 和 pop(): 向數組中插入或刪除元素（從尾部）

注：改變原數組

let array = ['I', 'am', 'shan', 'er'];
array.push('so?'); // array: ["I", "am", "shan", "er", "so?"]
array.pop(); // array: ['I', 'am', 'shan', 'er']

unshift() 和 shift()：向數組中插入或刪除元素（從頭部）

注：改變原數組

let array = ['I', 'am', 'shan', 'er'];
array.unshift('Hi'); // array: ["Hi", "I", "am", "shan", "er"]
array.shift(); // array: ['I', 'am', 'shan', 'er']

reverse(): 將數組中的元素順序顛倒

注：改變原數組

let array = ['I', 'am', 'shan', 'er'];
array.reverse(); // array: ["er", "shan", "am", "I"]

sort(): 排序

注：改變原數組

let array = ['I', 'am', 'shan', 'er'];
array.sort(); // array: ["I", "am", "er", "shan"] 默認按照字母順序（Ascall編碼）排序
array.sort((a, b) => { return b.length - a.length; }); //["shan", "am", "er", "I"]

concat(): 合併數組

注：不改變原數組，返回一個新數組

let array = ['I', 'am', 'shan', 'er'];
let array2 = ['How', 'are', 'you'];
array.concat(array2); // array: ["I", "am", "shan", "er", "How", "are", "you"]

slice(): 截取，返回子數組

注：不改變原數組，返回一個新數組

let array = ['I', 'am', 'shan', 'er'];
array.slice(0, 3); // ["I", "am", "shan"]

splice(): 向數組插入或刪除

注：改變原數組

let array = ['I', 'am', 'shan', 'er']; 
array.splice(0, 1); // ["am", "shan", "er"] 第一個參數索引，第二個參數刪除個數
array.splice(0, 0, 'I'); //["I", "am", "shan", "er"] 第三個參數插入

toString() 和 toLocaleString()：將數組轉化爲以逗號分隔的字符串

注：不改變原數組，返回一個字符串

let array = ['I', 'am', 'shan', 'er'];
array.toString(); // "I,am,shan,er"
array.toLocaleString(); // "I,am,shan,er"

indexOf() 和 lastIndexOf(): 獲取數組中具有給定值的索引(indexOf: 從前往後找；lastIndexOf: 從後往前找)

注：不改變原數組，返回索引

let array = ['I', 'am', 'shan', 'er'];
array.indexOf('am'); // 1(-1時表示查找不到)
array.lastIndexOf('am'); // 1

forEach(): 遍歷循環，類似for循環

let array = ['I', 'am', 'shan', 'er'];
array.forEach(item => console.log(item));

map(): 遍歷循環，返回一個數組

注：不改變原數組，返回一個新數組

let array = ['I', 'am', 'shan', 'er'];
array.map(item => { return 'new';}); // ["new", "new", "new", "new"]

filter(): 循環過濾，返回一個數組

注：不改變原數組，返回一個新數組

let array = ['I', 'am', 'shan', 'er'];
array.filter(item => { return item != 'shan';}); // ["I", "am", "er"]

some()：循環給定函數，如果該函數對任何一項返回 true，則返回true

注：不改變原數組，返回布爾值/font>

let array = ['I', 'am', 'shan', 'er'];
array.some(item => { return ~item.indexOf('shan');}); // true
array.some(item => { return ~item.indexOf('shaner');}); // false

every()：循環給定函數，如果該函數對每一項返回 true，則返回true

注：不改變原數組，返回布爾值/font>

let array = ['I', 'am', 'shan', 'er'];
array.every(item => { return item <= 'shan';}); // true
array.every(item => { return item < 'shan';}); // false

reduce()和reduceRight(): 使用指定的函數將數組元素進行組合，生成單個值(reduce：從前往後；reduceRight：從後往前)

注：不改變原數組/font>

let array = ['I', 'am', 'shan', 'er'];
array.reduce((prev, cur, index, array) => {return `${prev},${cur}`}); //"I,am,shan,er"
array.reduceRight((prev, cur, index, array) => {return `${cur},${prev}`});//"I,am,shan,er"

ES6及以上

Array.from(): 將類對象轉爲真正的數組

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的寫法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的寫法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

Array.of(): 將一組值，轉換爲數組

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

copyWithin(): 在數組內部，將指定位置的成員複製到其他位置(會覆蓋原有成員)

target（必需）：從該位置開始替換數據。如果爲負值，表示倒數。
start（可選）：從該位置開始讀取數據，默認爲 0。如果爲負值，表示倒數。
end（可選）：到該位置前停止讀取數據，默認等於數組長度。如果爲負值，表示倒數。
注：改變原數組/font>

// 將3號位複製到0號位
[1, 2, 3, 4, 5].copyWithin(0, 3,4);  // [4, 2, 3, 4, 5]

// -2相當於3號位，-1相當於4號位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1);  // [4, 2, 3, 4, 5]

// 將3號位複製到0號位
[].copyWithin.call({length: 5, 3: 1}, 0, 3);  // {0: 1, 3: 1, length: 5}

find() 和 findIndex(): 在數組內部, 找到第一個符合條件的數組成員

[1, 4, -5, 10, -4].find((n) => n < 0); // -5
[1, 5, 10, 15].findIndex((value, index, arr) => {
  return value > 9;
}); // 2

fill(): 使用給定值，填充一個數組

注：改變原數組/font>

let array = ['I', 'am', 'shan', 'er'];
array.fill('new'); //  ["new", "new", "new", "new"]

entries()，keys() 和 values(): 遍歷數組

for (let index of array.keys()) {
  console.log(index);
}

for (let index of array.entries()) {
  console.log(index);
}
// 輸出
 [0, "I"]
 [1, "am"]
 [2, "shan"]
 [3, "er"]

for (let index of array.values()) {
  console.log(index);
}

includes(): 返回一個布爾值，表示某個數組是否包含給定的值

let array = ['I', 'am', 'shan', 'er'];
array.includes('am'); // true

flat()：用於將嵌套的數組“拉平”，變成一維的數組，默認爲1

注：不改變原數組

let array=[1, 2, [3, [4, 5]]];
array.flat(2); // [1, 2, 3, 4, 5]

flatMap(): 對原數組的每個成員執行一個函數（相當於執行Array.prototype.map()），然後對返回值組成的數組執行flat()方法

注：不改變原數組

// 相當於 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2]);  // [2, 4, 3, 6, 4, 8]
// 相當於 [[[2]], [[4]], [[6]], [[8]]].flat()
[1, 2, 3, 4].flatMap(x => [[x * 2]]); // [[2], [4], [6], [8]]