【ES6】...扩展运算符

扩展运算符

• ES6 里面号新添加了一个运算符...，叫做扩展运算符，又称（Spread 语法）
• 可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；
• 还可以在构造字面量对象时, 将对象表达式按key-value的方式展开

let arr = [1,2,3,4,5];
console.log(...arr);	// 1 2 3 4 5

一、在函数中使用

1.1 传递实参

• 使用Function.prototype.apply方法

let arr = [1,2,3];
function fn(a,b,c){
	console.log(a,b,c);
}
fn.apply(null, arr);	// 等价于 fn(1,2,3)

• 使用...运算符

let arr = [1,2,3];
function fn(a,b,c){
	console.log(a,b,c);
}
fn(...arr); // 等价于 fn(1,2,3)

1.2 接收形参

• ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。
• rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }
  
  // 也可以使用数组的方法
  // values.map(item=>sum += item)

  return sum;
}

add(2, 5, 3) // 10

• 我们也可以选择获取部分参数作为变量，并将剩余的参数收集起来。

function showName(firstName, lastName, ...titles) {
  alert( firstName + ' ' + lastName ); // Julius Caesar

  // 剩余的参数被放入 titles 数组中
  // i.e. titles = ["Consul", "Imperator"]
  alert( titles[0] ); // Consul
  alert( titles[1] ); // Imperator
  alert( titles.length ); // 2
}

showName("Julius", "Caesar", "Consul", "Imperator");

• Rest 参数必须放到参数列表的末尾，否则会报错。

// 报错
function f(a, ...b, c) {
  // ...
}

1.3 new 表达式

• 使用 new 关键字来调用构造函数时，不能直接使用数组+ apply 的方式
• 有了展开语法, 将数组展开为构造函数的参数就很简单了

let dateFields = [2022, 2, 2];
let d = new Date(...dateFields);
console.log(d);	// Wed Mar 02 2022 00:00:00 GMT+0800 (中国标准时间)

二、在数组中使用

2.1 合并数组

• 使用Array.concat()方法连接数组

let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = arr1.concat(arr2);
console.log(arr3);	// [1, 2, 3, 4, 5, 6]

• 使用...运算符连接数组

let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [...arr1,...arr2];
console.log(arr3);	// [1, 2, 3, 4, 5, 6]

2.2 拷贝数组

• 直接赋值

let arr1 = [1,2,3];
let arr2 = arr1;
arr2.push(4);
console.log(arr1);	// [1, 2, 3, 4]
console.log(arr2);	// [1, 2, 3, 4]

• 使用...运算符拷贝

let arr1 = [1,2,3];
let arr2 = [...arr1];
arr2.push(4);
console.log(arr1);	// [1, 2, 3]
console.log(arr2);	// [1, 2, 3, 4]

• ...运算符执行的是浅拷贝(只遍历一层)

let arr1 = [1,2,3];
let arr2 = [[4],[5],[6]];
let arr3 = [...arr1,...arr2];
console.log(arr3);	// [1, 2, 3, [4],[5],[6]]

三、在对象中使用

3.1 合并对象

• 对象合并

let obj1 = { name: 'Jack', age: 42, gender:'男'};
let obj2 = { name: 'Rose', age: 13 };

let mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj);
// 合并后的对象: {name: "Rose", age: 13, gender: "男"}

3.2 拷贝对象

• 浅拷贝(不包含 prototype)对象

let obj1 = { name: 'Jack', age: 42 };
let obj2 = { name: 'Rose', age: 13 };

let clonedObj = { ...obj1 };
console.log(clonedObj);
// 克隆后的对象: { name: "Jack", age: 42 }