JS展开运算符...使用技巧与场景解析

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《JS展开运算符...用法与场景详解》，以下内容主要包含等知识点，如果你正在学习或准备学习文章，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

展开运算符（...）是ES6引入的语法，用于将可迭代对象展开为独立元素，支持数组复制合并、函数参数传递、对象浅拷贝与合并等操作；1. 数组中可用作复制、合并或插入元素；2. 函数调用时可将数组转为参数列表，替代apply；3. ES9支持对象展开，实现对象合并与属性添加；4. 可处理类数组和字符串，但仅支持可迭代对象，对null/undefined会报错，且对象展开为浅拷贝，嵌套属性仍共享引用。

JS展开运算符（Spread Operator）是ES6引入的一个实用语法，用三个点 ... 表示，能将可迭代对象（如数组、字符串、类数组对象等）展开为独立的元素。它简洁高效，广泛应用于数组操作、函数调用、对象合并等场景。

1. 数组中的展开运算符

展开运算符最常见于数组处理，可以轻松复制、合并或转换数组。

避免引用共享，创建新数组：

const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // [1, 2, 3]

将多个数组拼接成一个新数组：

const a = [1, 2];
const b = [3, 4];
const combined = [...a, ...b]; // [1, 2, 3, 4]

比传统的 concat 更灵活：

const nums = [2, 3];
const withOne = [1, ...nums, 4]; // [1, 2, 3, 4]

2. 函数调用中的参数展开

展开运算符可用于将数组“打散”为函数的多个参数，替代 apply 的部分功能。

function add(a, b, c) {
  return a + b + c;
}
const values = [1, 2, 3];
add(...values); // 6

特别适合处理 Math.max、Math.min 等不支持数组参数的函数：

Math.max(...[10, 20, 30]); // 30

3. 对象中的展开运算符

ES9（ES2018）扩展了展开运算符对对象的支持，用于浅拷贝或合并对象。

const obj1 = { x: 1, y: 2 };
const obj2 = { ...obj1 }; // { x: 1, y: 2 }

后出现的属性会覆盖前面的：

const a = { name: "Alice", age: 25 };
const b = { age: 30, city: "Beijing" };
const merged = { ...a, ...b }; // { name: "Alice", age: 30, city: "Beijing" }

在解构基础上添加新字段很方便：

const user = { name: "Bob" };
const updated = { ...user, age: 28, active: true };

4. 常见使用场景与注意事项

展开运算符虽好用，但也需注意其限制和适用范围。

如 arguments 或 NodeList，可转为真正的数组：

function example() {
  const args = [...arguments];
}

字符串是可迭代的，展开后变成字符数组：

[...'hello']; // ['h', 'e', 'l', 'l', 'o']

展开运算符只做一层深拷贝。嵌套对象仍为引用：

const original = { user: { name: "Tom" } };
const copy = { ...original };
copy.user.name = "Jerry";
// original.user.name 也会变成 "Jerry"

否则会报错：

[...null]; // 报错：null is not iterable

理论要掌握，实操不能落！以上关于《JS展开运算符...使用技巧与场景解析》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！