JS数组用法，常用方法有哪些？高效操作技巧解析？

JavaScript中的数组（Array）是一种用于存储多个值的有序集合，它提供了丰富的方法来操作数据，是开发中最常用的数据结构之一，掌握数组的用法对于高效处理数据至关重要，下面将详细介绍JavaScript数组的创建、访问、修改及常用方法。

数组的创建

JavaScript中创建数组主要有两种方式：字面量方式和构造函数方式。

1. 字面量方式：最常用的方式，通过方括号[]直接定义数组元素，元素之间用逗号分隔。

   const arr1 = [1, 'hello', true, null, undefined];
   const arr2 = [1, 2, [3, 4]]; // 支持嵌套数组

2. 构造函数方式：通过Array构造函数创建，需要注意参数差异：
   • 无参数或参数为数字时,创建指定长度的空数组（长度为数字时，数组元素为空位empty）。

     const arr3 = new Array(); // 空数组 []
     const arr4 = new Array(3); // [empty × 3] (长度为3的空数组)

   • 参数为多个值时,创建包含这些值的数组。

     const arr5 = new Array(1, 2, 3); // [1, 2, 3]

     实际开发中推荐使用字面量方式,更直观且不易出错。

数组的访问与修改

1. 访问元素：通过索引（从0开始）访问数组元素，索引超出范围时返回undefined。

   const arr = [10, 20, 30];
   console.log(arr[0]); // 10
   console.log(arr[3]); // undefined

2. 修改元素：通过索引直接赋值修改元素，若索引不存在会扩展数组（填充empty）。

   arr[1] = 200; // 修改第二个元素
   arr[3] = 40; // 扩展数组，变为 [10, 200, 30, empty, 40]

3. length属性：表示数组长度，可手动修改：
   • 增大length：数组末尾填充empty。
   • 减小length：截断数组，超出部分丢弃。

     console.log(arr.length); // 4
     arr.length = 2; // 截断为 [10, 200]
     arr.length = 5; // 扩展为 [10, 200, empty × 3]

数组方法详解

数组方法分为修改原数组和不修改原数组两大类,以下是常用方法及示例：

（一）修改原数组的方法

方法名	作用	参数	返回值	示例
push()	末尾添加一个或多个元素	多个元素	新长度	arr.push(40) → [10, 200, 40]
pop()	删除末尾元素	无	被删除元素	arr.pop() → 返回40，数组变为[10, 200]
unshift()	开头添加一个或多个元素	多个元素	新长度	arr.unshift(0) → [0, 10, 200]
shift()	删除开头元素	无	被删除元素	arr.shift() → 返回0，数组变为[10, 200]
splice()	删除、替换或添加元素	索引、删除个数、…添加元素	被删除元素组成的数组	arr.splice(1, 1, 'a') → 删除索引1的元素并添加’a’，结果为[10, 'a']
sort()	排序	可选比较函数	排序后的数组	arr.sort((a, b) => a - b) 升序排序
reverse()	反转数组	无	反转后的数组	arr.reverse() → [200, 10]

（二）不修改原数组的方法

方法名	作用	参数	返回值	示例
concat()	合并数组	一个或多个数组/值	合并后的新数组	arr.concat([30, 40]) → [10, 200, 30, 40]
slice()	提取子数组	开始索引（含）、结束索引（不含）	新数组	arr.slice(1, 3) → 提取索引1到2的元素，返回[200, 30]
join()	将数组转为字符串	分隔符（默认’,’）	字符串	arr.join('-') → "10-200-30"
toString()	转为字符串	无	字符串（逗号分隔）	arr.toString() → "10,200,30"
map()	遍历并返回新数组	回调函数（参数：当前值、索引、原数组）	新数组	arr.map(item => item * 2) → [20, 400, 60]
filter()	过滤元素	回调函数（返回布尔值）	新数组	arr.filter(item => item > 100) → [200]
some()	检查是否有元素满足条件	回调函数	布尔值	arr.some(item => item === 10) → true
every()	检查是否所有元素都满足条件	回调函数	布尔值	arr.every(item => item > 0) → true
find()	查找第一个满足条件的元素	回调函数	元素或undefined	arr.find(item => item > 100) → 200
reduce()	累计算算	回调函数（参数：累加器、当前值、索引、原数组）、初始值	累加结果	arr.reduce((sum, item) => sum + item, 0) → 240
includes()	检查是否包含某元素	元素、起始索引（可选）	布尔值	arr.includes(200) → true

数组的遍历方式

1. for循环：基础遍历方式，灵活可控。

   for (let i = 0; i < arr.length; i++) {
     console.log(arr[i]);
   }

2. for...of循环：ES6新增，直接遍历数组值。

   for (const item of arr) {
     console.log(item);
   }

3. forEach方法：遍历每个元素，执行回调函数（无返回值）。

   arr.forEach((item, index) => {
     console.log(`索引${index}: ${item}`);
   });

4. for...in循环：遍历数组索引（不推荐用于数组，更适合对象）。

   for (const index in arr) {
     console.log(arr[index]);
   }

数组的特殊处理

1. 空位数组：数组中存在未赋值的索引位置（如new Array(3)），遍历时会被跳过（forEach、map等方法忽略空位）。

   const emptyArr = [1, , 3];
   console.log(emptyArr.length); // 3
   console.log(emptyArr[1]); // undefined
   emptyArr.forEach(item => console.log(item)); // 输出1、3（跳过空位）

2. 类数组转数组：通过Array.from()或扩展运算符将类数组（如arguments、DOM元素集合）转为数组。

   function fn() {
     const args = Array.from(arguments);
     console.log(args); // 转为数组
   }
   fn(1, 2, 3);

相关问答FAQs

Q1：JavaScript中数组和对象的区别是什么？
A：数组（Array）是特殊的对象，其键名默认为数字索引（从0开始），且具有length属性；对象（Object）的键名可以是字符串或符号，没有内置的length属性，数组的typeof返回"object"，可通过Array.isArray()判断是否为数组。

Q2：如何高效实现数组去重？
A：常见方法有三种：

1. （ES6）：利用Set成员唯一性，转回数组。

   const arr = [1, 2, 2, 3];
   const uniqueArr = [...new Set(arr)]; // [1, 2, 3]

2. includes判断：遍历数组，用新数组存储不重复的元素。

   const uniqueArr = [];
   arr.forEach(item => {
     if (!uniqueArr.includes(item)) uniqueArr.push(item);
   });

3. reduce方法：利用累加器去重。

   const uniqueArr = arr.reduce((acc, item) => {
     if (!acc.includes(item)) acc.push(item);
     return acc;
   }, []);

   推荐使用Set去重，代码简洁且性能最优。