手把手搞懂JavaScript陣列的常用API

1. 創建陣列

使用Array建構式創建陣列：
let arr = new Array();

let arr = new Array(5); // 也可以給建構式傳值,這里創建了一個初始length為5的陣列

let arr = new Array(“aa”,“bb”); // 創建一個兩個字串值的陣列

使用陣列字面量表示法創建陣列：
let arr = []; // 創建空陣列

let arr = [“aa”,“bb”, ]; //創建一個包含2個元素的陣列

2. 添加元素

陣列內添加元素可以使用開頭入堆疊和結尾入堆疊

arr.unshift(); // 開頭入堆疊,把元素添加到陣列的開頭位置
arr.push(); // 結尾入堆疊,把元素添加到陣列的結尾位置

這兩個方法均會改變原陣列，并回傳新陣列的length，

var arr = ['a','b','c','d'];
arr.unshift('e');
console.log(arr);   // [ 'e', 'a', 'b', 'c', 'd' ]

var arr = ['a','b','c','d'];
arr.push('e');
console.log(arr);   // [ 'a', 'b', 'c', 'd', 'e' ]

3. 洗掉元素

洗掉元素可以有開頭出堆疊和結尾出堆疊

arr.shift(); // 開頭出堆疊，將陣列的第一個元素移除，并使陣列前移一位
arr.pop(); // 結尾出堆疊，將陣列的最后一位移除
delete arr[index]; // 洗掉陣列指定的下標元素

兩個方法均會改變原陣列，并會回傳被修改的值，

var arr = ['a','b','c','d'];
arr.shift();
console.log(arr);   // [ 'b', 'c', 'd' ]

var arr = ['a','b','c','d'];
arr.pop();
console.log(arr);   // [ 'a', 'b', 'c' ]

4. 陣列連接

arr.join(""); // 內部不填寫連接符會視作無縫連接

不會改變原陣列

var arr = [1,2,3,4];
var b = arr.join("");
console.log(arr);  // [ 1, 2, 3, 4 ]
console.log(b);   // 1234

5. 截取陣列

arr.slice(start, end); // 取值可以理解為含頭不含尾，即取的值是[start, end),從下方例子可以看出來，b只有1和2，并沒有三個元素

不會改變原陣列

var arr = [1,2,3,4];
var b = arr.slice(0, 2);
console.log(arr);  // [ 1, 2, 3, 4 ]
console.log(b);  // [ 1, 2 ]

6. 拼接陣列

arr.concat(“a”, “b”);

不會改變原陣列

var arr = [1,2,3];
arr.concat(4,5); // [1,2,3,4,5]
arr.concat([4,5]); // [1,2,3,4,5]
arr.concat(4, [5, [6, 7]]); // [1,2,3,4,5,[6,7]]

7. 陣列反轉

arr.reverse();

會改變原陣列

var arr = [1, 2, 3, 4];
arr.reverse();
console.log(arr);  // [ 4, 3, 2, 1 ]

8. 陣列排序

arr.sort(); // 他是按照陣列中每個元素的第一位進行比較（ASCII碼從小到大）

會改變原陣列

arr.sort(function(a,b){return a-b;}); // a在前為升序,只對數字有效果
arr.sort(function(a,b){return b-a;}); // a在后為降序,只對數字有效果

var arr = [1, 2, 13, 4];
arr.sort(); // [1, 13, 2, 4]
arr.sort(function(a,b){return a-b;});  // [ 1, 2, 4, 13 ]
arr.sort(function(a,b){return b-a;}); // [ 13, 4, 2, 1 ]

9. 陣列轉為字串

arr.toString();

不改變原陣列

var arr = [1, 2, 3, 4];
var b = arr.toString();
console.log(b);  // 1,2,3,4

10. 陣列內元素查找

arr.indexOf(value);

成功找到元素則回傳該元素的下標，如果沒找到則回傳-1，

var arr = [1, 2, 3, 4];
console.log(arr.indexOf(1));   // 1
console.log(arr.indexOf(5));   // -1

11. arr.splice();

具體方法有：

arr.splice(index, length, value); （插入和替換）

從index這個索引位置開始，將length個元素替換成新元素value的值

var arr = [1, 2, 3, 4];
arr.splice(1, 2, 5);
console.log(arr);  // [ 1, 5, 4 ]

如果length的值為0時，將會視為插入元素，不會洗掉原陣列的其他元素：

var arr = [1, 2, 3, 4];
arr.splice(1, 0, 5);
console.log(arr);  // [ 1, 5, 2, 3, 4 ]

arr.splice(index,length); （洗掉）

從index這個下標開始，洗掉length個長度的元素

var arr = [1, 2, 3, 4];
arr.splice(1, 2);
console.log(arr);  // [ 1, 4 ]

arr.splice(0); (清空陣列)

var arr = [1, 2, 3, 4];
arr.splice(0);
console.log(arr);  // []

12. Array.from();

用于將類陣列結構轉換成陣列實體

console.log(Array.from("Hello")); // [ 'H', 'e', 'l', 'l', 'o' ]

const arr1 = [1, 2, 3, 4];
const arr2 = Array.from(arr1, x => x**2);
console.log(arr2);  // [ 1, 4, 9, 16 ]

13. Array.of();

將一組引數轉化為陣列

console.log(Array.of(1, 2, 3, 4)); // [ 1, 2, 3, 4 ]
console.log(undefined); // undefined

完結撒花

您的每一次閱讀都是對我莫大的幫助！