您的位置:

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 数组操作的常见用法进行了全面介绍。作为一名全能的编程工程师,熟练使用数组操作是必备技能之一,希望能对您有所帮助。