JavaScript數組操作全解析

一、創建數組

1、使用字面量創建數組：

const arr = []; // 創建一個空數組
const arr2 = [1, 2, 3]; // 創建包含3個元素的數組
const arr3 = ['a', 'b', 'c']; // 創建包含字元元素的數組

2、使用構造函數創建數組：

const arr = new Array(); // 創建一個空數組
const arr2 = new Array(1, 2, 3); // 創建包含3個元素的數組
const arr3 = new Array('a', 'b', 'c'); // 創建包含字元元素的數組

注意：使用 new Array()創建空數組時要特別小心，因為如果傳遞一個數字參數，將創建一個指定長度的數組，如：

const arr = new Array(3); // 創建一個包含3個空元素的數組，即 [ , , ]

二、訪問數組

1、使用索引訪問數組元素：

const arr = ['a', 'b', 'c'];
console.log(arr[0]); // 輸出 'a'
console.log(arr[1]); // 輸出 'b'

2、使用forEach()方法遍曆數組：

const arr = [1, 2, 3];
arr.forEach(element => {
  console.log(element);
});
// 輸出 1 2 3

三、修改數組

1、使用索引修改數組元素：

const arr = ['a', 'b', 'c'];
arr[1] = 'd';
console.log(arr); // 輸出 ['a', 'd', 'c']

2、使用push()方法向數組尾部添加元素：

const arr = ['a', 'b'];
arr.push('c');
console.log(arr); // 輸出 ['a', 'b', 'c']

3、使用splice()方法插入元素：

const arr = ['a', 'b', 'd'];
arr.splice(2, 0, 'c');
console.log(arr); // 輸出 ['a', 'b', 'c', 'd']

四、刪除數組元素

1、使用splice()方法刪除元素：

const arr = ['a', 'b', 'c', 'd'];
arr.splice(1, 2);
console.log(arr); // 輸出 ['a', 'd']

2、使用pop()方法刪除數組尾部元素：

const arr = ['a', 'b', 'c'];
arr.pop();
console.log(arr); // 輸出 ['a', 'b']

五、查找數組元素

1、使用indexOf()和lastIndexOf()方法查找元素的位置：

const arr = ['a', 'b', 'c', 'd', 'c'];
console.log(arr.indexOf('c')); // 輸出 2
console.log(arr.lastIndexOf('c')); // 輸出 4
console.log(arr.indexOf('e')); // 輸出 -1，因為元素不存在

2、使用filter()方法查找符合條件的所有元素：

const arr = [1, 2, 3, 4, 5];
const result = arr.filter(element => element % 2 === 0);
console.log(result); // 輸出 [2, 4]

六、數組排序

1、使用sort()方法按升序或降序排序：

const arr = [3, 1, 4, 2, 5];
arr.sort((a, b) => a - b);
console.log(arr); // 輸出 [1, 2, 3, 4, 5]
arr.sort((a, b) => b - a);
console.log(arr); // 輸出 [5, 4, 3, 2, 1]

2、使用reverse()方法翻轉數組：

const arr = [1, 2, 3];
arr.reverse();
console.log(arr); // 輸出 [3, 2, 1]

七、數組拼接

1、使用concat()方法拼接數組：

const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = arr1.concat(arr2);
console.log(arr3); // 輸出 [1, 2, 3, 4]

2、使用展開運算符(…)拼接數組：

const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [...arr1, ...arr2];
console.log(arr3); // 輸出 [1, 2, 3, 4]

八、數組複製

1、使用slice()方法複製數組：

const arr1 = ['a', 'b'];
const arr2 = arr1.slice();
console.log(arr2); // 輸出 ['a', 'b']

2、使用展開運算符(…)複製數組：

const arr1 = ['a', 'b'];
const arr2 = [...arr1];
console.log(arr2); // 輸出 ['a', 'b']

九、數組去重

1、使用 Set 去重：

const arr = [1, 1, 2, 3, 3];
const set = new Set(arr);
const arr2 = [...set];
console.log(arr2); // 輸出 [1, 2, 3]

2、使用 filter 去重：

const arr = [1, 1, 2, 3, 3];
const arr2 = arr.filter((item, index, arr) => arr.indexOf(item) === index);
console.log(arr2); // 輸出 [1, 2, 3]

十、數組扁平化

使用 flat() 方法扁平化數組：

const arr = [1, 2, [3, 4, [5, 6]]];
const arr2 = arr.flat(2);
console.log(arr2); // 輸出 [1, 2, 3, 4, 5, 6]

結束語

本文通過代碼示例和詳細解釋，對 JavaScript 數組操作的常見用法進行了全面介紹。作為一名全能的編程工程師，熟練使用數組操作是必備技能之一，希望能對您有所幫助。