JavaScript中数组赋值的方法有哪些

# JavaScript中数组赋值的方法有哪些

在JavaScript中，数组赋值是日常开发中的高频操作。本文将系统介绍7种常见的数组赋值方法，包括基础赋值、解构赋值、ES6扩展运算符等，并附上代码示例和注意事项。

---

## 一、基础索引赋值法
最直接的方式是通过索引位置赋值：
```javascript
let arr = [1, 2, 3];
arr[1] = 99; // 修改索引1的值
arr[3] = 100; // 新增索引3
console.log(arr); // [1, 99, 3, 100]

注意：索引超出当前长度时会自动扩展数组

二、Array.prototype方法

1. push() - 尾部追加

let fruits = ['apple'];
fruits.push('orange'); // 返回新长度2

2. unshift() - 头部插入

fruits.unshift('banana'); // ['banana', 'apple', 'orange']

3. splice() - 任意位置操作

// 在索引1处删除1个元素并插入'pear'
fruits.splice(1, 1, 'pear'); 

三、解构赋值（ES6）

交换变量值的经典用法：

let [a, b] = [1, 2];
[a, b] = [b, a]; // 交换后 a=2, b=1

嵌套数组解构：

const [first, [second]] = [1, [2, 3]];

四、扩展运算符（ES6）

1. 数组合并

const newArr = [...arr1, ...arr2];

2. 浅拷贝数组

const arrCopy = [...originalArr];

五、Array.from()

将类数组对象转为真实数组：

const nodeList = document.querySelectorAll('div');
const arr = Array.from(nodeList);

六、fill()填充方法

快速初始化数组：

const uniformArr = new Array(5).fill(0); // [0,0,0,0,0]

七、高阶函数赋值

1. map() 转换赋值

const doubled = [1,2,3].map(x => x*2);

2. filter() 条件赋值

const evens = [1,2,3,4].filter(x => x%2===0);

注意事项

1. 引用类型陷阱：

   const matrix = new Array(3).fill([]);
   matrix[0].push(1); // 所有子数组都会受影响！
   

   正确做法应使用map：

   const safeMatrix = Array(3).fill().map(() => []);
   

2. 性能考量：

   • 大型数组操作优先使用for循环
   • 超过10万条数据时，push()比直接索引赋值慢30%

3. ES6+浏览器兼容性： 生产环境建议使用Babel转译扩展运算符等新特性

总结

根据实际需求选择合适的方法，在需要高性能操作时建议使用基础索引赋值，现代项目推荐多使用ES6+语法简化代码。 “`