<think>我们正在讨论的是如何改变数组的引用地址。在JavaScript中，数组是引用类型，变量存储的是数组在内存中的地址。改变引用地址意味着让变量指向一个新的数组（即新的内存地址），而不是修改原数组的内容。
改变数组引用地址的方法：
1. **重新赋值一个新数组**：最简单的方法是直接将一个新数组赋值给变量。这样，变量将指向新数组的引用地址。
```javascript
let arr = [1, 2, 3];
arr = [4, 5, 6]; // 改变了arr的引用地址
```
2. **使用返回新数组的方法**：调用一些不会改变原数组而是返回新数组的方法，然后将返回的新数组赋值给原变量。这样，原变量将指向新数组的引用地址。
- `concat()`: 合并数组，返回新数组。
- `slice()`: 返回数组的一部分组成的新数组。
- `map()`, `filter()`, `reduce()`等：这些高阶函数返回新数组。
- 示例：
```javascript
let arr = [1, 2, 3];
arr = arr.concat([4, 5]); // 现在arr指向新数组[1,2,3,4,5]的引用地址
```
3. **使用扩展运算符（...）**：扩展运算符可以快速创建一个新数组，然后将新数组赋值给变量。
```javascript
let arr = [1, 2, 3];
arr = [...arr, 4, 5]; // 新数组[1,2,3,4,5]，改变了引用地址
```
4. **使用`Array.from()`**：从类数组对象或可迭代对象创建一个新的数组实例。
```javascript
let arr = [1, 2, 3];
arr = Array.from(arr); // 创建一个新数组，改变了引用地址
```
5. **深拷贝数组**：通过深拷贝创建一个新数组，然后赋值给变量。这种方法适用于数组包含嵌套对象的情况，确保完全创建一个新的内存地址。
```javascript
let arr = [{a: 1}, {b: 2}];
// 使用JSON方法进行深拷贝（注意：不能处理函数和特殊对象如Date）
arr = JSON.parse(JSON.stringify(arr));
// 或者使用其他深拷贝方法，如递归拷贝或使用库（lodash的_.cloneDeep）
```
注意：直接修改原数组内容的方法（如`push`, `pop`, `splice`等）不会改变数组的引用地址，它们只是在原数组的内存空间上进行修改。
示例对比：
```javascript
let arr1 = [1, 2, 3];
let arr2 = arr1; // arr2和arr1指向同一个数组
// 方法1：重新赋值（改变引用）
arr1 = [4, 5, 6];
console.log(arr1); // [4,5,6]
console.log(arr2); // [1,2,3] 因为arr2仍然指向原来的数组
// 方法2：使用修改原数组的方法（不改变引用）
let arr3 = [1, 2, 3];
let arr4 = arr3;
arr3.push(4); // 修改原数组
console.log(arr3); // [1,2,3,4]
console.log(arr4); // [1,2,3,4] 因为arr4和arr3指向同一个数组
```
因此，要改变数组的引用地址，必须让变量指向一个新的数组（在内存中开辟了新的空间）。而创建新数组的方法有很多，如上所述。
总结：
- 改变数组引用地址的本质是让变量指向一个新的内存地址。
- 可以通过直接赋值新数组、使用返回新数组的方法、扩展运算符、Array.from以及深拷贝等方法实现。
相关问题：
1. JavaScript中如何判断两个数组是否具有相同的引用地址？
2. 如何避免在JavaScript中意外修改原数组？
3. 深拷贝数组的方法有哪些？
4. 在React或Vue中，为什么改变状态数组时需要改变引用地址？</think>### JavaScript 如何改变数组的引用地址
在 JavaScript 中，数组是**引用类型**，变量存储的是数组在内存中的地址（引用）。改变数组引用地址的本质是让变量指向一个新的内存地址，而不是修改原数组的内容。以下是实现方法：
#### 1. **直接赋值新数组（最直接方法）**
直接创建一个新数组赋值给变量，会改变其引用地址：
```javascript
let arr = [1, 2, 3]; // 初始引用地址
arr = [4, 5, 6]; // 引用地址改变
console.log(arr); // [4, 5, 6] (新地址)
```
#### 2. **使用返回新数组的方法**
调用返回**新数组**的方法（不修改原数组），并将结果赋值给原变量：
```javascript
let arr = [1, 2, 3];
// concat() 返回新数组
arr = arr.concat([4]); // 引用地址改变
console.log(arr); // [1, 2, 3, 4]
// slice() 返回新数组
arr = arr.slice(0, 2); // 引用地址改变
console.log(arr); // [1, 2]
```
> ✅ 推荐方法：`concat()`, `slice()`, `map()`, `filter()` 等均返回新数组[^1]。
#### 3. **深拷贝创建新引用**
通过深拷贝生成全新数组对象，打破与原数组的引用关系：
```javascript
let arr = [{a: 1}, {b: 2}];
// 方法1: JSON序列化（适用于简单对象）
arr = JSON.parse(JSON.stringify(arr));
// 方法2: 扩展运算符+map（嵌套对象适用）
arr = arr.map(item => ({...item}));
```
> ⚠️ 注意：直接 `arr = [...arr]` 只能浅拷贝，嵌套对象仍共享引用。
#### 4. **避免修改原数组的方法**
以下方法**不会改变引用地址**，只修改原数组内容：
```javascript
let arr = [1, 2, 3];
arr.push(4); // 修改原数组，引用地址不变
arr.splice(0,1); // 修改原数组，引用地址不变
```
> 这些方法包括：`push()`, `pop()`, `splice()`, `sort()` 等[^1]。
---
### 引用地址验证方法
通过严格相等运算符 `===` 检测引用是否改变：
```javascript
const arr1 = [1, 2];
const arr2 = [1, 2];
console.log(arr1 === arr1); // true (相同引用)
console.log(arr1 === arr2); // false (不同引用)
let arr3 = arr1;
arr3 = [...arr1]; // 创建新数组
console.log(arr1 === arr3); // false (引用已改变)
```
---
### 应用场景
1. **状态管理（如 React/Vue）**
需改变引用地址触发视图更新：
```javascript
// React 示例：更新状态数组
setItems(prev => [...prev, newItem]); // 改变引用触发渲染
```
2. **避免副作用**
函数内返回新数组避免污染输入参数：
```javascript
function safeUpdate(arr) {
return arr.map(item => item * 2); // 返回新引用
}
```
---
### 总结
| **方法** | 是否改变引用地址 | 特点 |
|------------------------|----------------|-------------------------|
| 直接赋值新数组 | ✅ | 最直接 |
| `concat()`/`slice()` | ✅ | 安全且符合函数式编程 |
| 深拷贝 | ✅ | 解决嵌套对象引用问题 |
| `push()`/`splice()` | ❌ | 修改原数组但引用不变 |
> 最佳实践：优先使用 `concat()`, `map()`, 扩展运算符等返回新数组的方法[^1][^2]，既安全又明确。
---
### 相关问题
1. 如何在 JavaScript 中检测两个数组是否引用相同内存地址？
2. 深拷贝和浅拷贝数组有什么区别？如何实现深拷贝？
3. 在 React 中，为什么修改状态数组时必须改变引用地址？
4. JavaScript 中哪些数组方法会改变原数组的引用地址？
[^1]: `concat()`、`slice()` 等方法返回新数组，改变引用地址[^1]。
[^2]: `map()` 返回新数组，可用于创建新引用[^2]。
在项目里，存在将a赋值给b后，b改变a值也改变的情况。作者通过强制改变变量指向的地址解决了该问题，此为信息技术领域常见的变量赋值问题处理。
扫一扫
1037
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
