理解JavaScript中的展开和剩余语法

展开语法

展开运算符（...）允许你将一个数组展开为其值。展开运算符的一些常见用例包括：

• 将数组的值展开为参数，传递给不接受数组的函数。
• 通过展开数组的值来克隆一个数组（[]）。
• 通过展开数组来连接数组，生成一个新数组（[]）。
• 通过展开嵌套数组来将一个数组的数组扁平化一级。
• 将非数组可迭代对象（例如字符串或Set）转换为数组。

// 将数组的值作为参数
const a = [1, 2, 3];
Math.max(...a); // 3

// 克隆一个数组
const b = [4, 5, 6];
const c = [...b]; // c = [4, 5, 6], b !== c

// 连接两个数组
const d = [...a, ...b]; // d = [1, 2, 3, 4, 5, 6]

// 扁平化数组
const e = [[1, 2], [3, 4]];
const f = [...e[0], ...e[1]]; // f = [1, 2, 3, 4]

// 将可迭代对象转换为数组
const g = [...'hello']; // g = ['h', 'e', 'l', 'l', 'o']

剩余语法

剩余参数语法允许你将任何剩余的参数折叠成一个数组。虽然它看起来非常类似于展开运算符，但剩余参数语法只用于函数声明（箭头函数或其他函数）。

// 剩余参数语法，不要与展开运算符混淆
const fn = (str, ...nums) => `${str}_${nums.join('')}`;
fn('hi', 1, 2, 3); // 'hi_123'，`nums` 将会是 [1, 2, 3]

const data = [4, 5, 6];
// 展开运算符，展开数组
fn('hey', ...data); // 'hey_456'，`nums` 将会是 [4, 5, 6]