TablePie

/home

/tech

/reading

/writing

Spread Syntax

语法 #

...

浅拷贝 #

只复制第一层的值，基本数据类型（整数、字符串）拷贝值，引用数据类型（数组、对象等）拷贝引用地址。

使用场景 #

  1. 数组操作
  • 合并数组：
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined) // [1, 2, 3, 4, 5, 6]
  • 复制数组：
const arr1 = [1, 2, 3];
const arr2 = [...arr1];
console.log(arr2) // [1, 2, 3];
  • 将字符串转为数组：
const obj = "hello";
const arr = [...obj];
console.log(arr) // ['h', 'e', 'l', 'l', 'o']
  • 函数参数列表：
function foo(a, b, c) {
	console.log(a) // 1
	console.log(b) // 2
	console.log(c) // 3 
}
const arr = [1, 2, 3] foo(...arr)
  1. 对象操作
  • 合并对象：
const obj1 = {a: 1, b: 2};
const obj2 = {c: 3, d: 4};
const combined = {...obj1, ...obj2};
console.log(combined); // {a: 1, b: 2, c: 3, d: 4}

注意：如果存在相同的键，后面的对象会覆盖前面的。

  • 复制对象：
const obj1 = {a: 1, b: 2}
const obj2 = {...obj1};
console.log(obj2);
  1. 函数参数
  • 收集剩余参数：
  function logNames(fruit, ...names) {     
  console.log(fruit); // apple     
  console.log(names); // ['Alice', 'Bob', 'Charlie']   }   
  logNames('apple', 'Alice', 'Bob', 'Charlie');

在函数参数列表中使用扩展运算符可以将传递给函数的所有剩余参数收集到一个数组中。

  1. 解构赋值
  • 在解构赋值中使用：
const [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 1
console.log(rest); // [2, 3, 4]
←
→
back to top