【JavaScript】扩展运算符

ES6 扩展运算符

一、扩展运算符是什么?

💡扩展运算符是ES6新增的特殊符号， 拓展运算符 ’ … ’ 即三个点。

1.运算符写法 …

• 展开运算符: 数组 对象 实参
• 合并运算符: 解构，形参

2.展开运算符

• 作用 把数据集合展开(数组，对象，Set, Map …)
• 就是把数据最外面的符号去掉

3.合并功能

• 把多个数据合并成一个数据

二、扩展运算符作用

允许一个表达式在期望多个参数（用于函数调用）或多个元素（用于数组字面量）或多个变量（用于解构赋值）的位置扩展。

三、运用场景

1.展开数组

  let arr = [1, 2, 3, 4, 5]
// 使用运算符将数组展开
	console.log(...arr);
// 等价于
console.log(...[1, 2, 3, 4, 5]);
// 也等价于
console.log(1,2,3,4,5);

2.数组合并

 let arr = [1, 2, 3, 4, 5]
//  数组arr拼接到数组arr2
 let arr2 = [...arr, 1000, 2000]
 console.log(arr2);

打印合并后的数组

3.Math.max/Math.min

console.log(Math.max(...[100, 200, 300]));
// 等价于
console.log(Math.max(100, 200, 300));
// -------------------------------------------
console.log(Math.min(...[100, 200, 300]));
// 等价于
console.log(Math.min(100, 200, 300));

4.对象合并

    let obj = {name: 'tom'}
    let obj1 = {age: 18, ...obj} 
    console.log(obj1);

5.函数参数

   function fn(...arg) {
     console.log(arg);
   }    
   console.log(fn(100, 200, 300, 400)); 

接受两个参数，第一个参数表示[0]实参,第二个参数表示从[1] ~ [最后]

  function fn(a, ...arg) {
    console.log(a);
    console.log(...arg);
  }
  fn(100, 200, 300, 400, 500)

// …只能放到参数列表的最后 否者会报错
// 报错演示
function fn(...arg,a) {
    console.log(a);
    console.log(...arg);
  }
  fn(100, 200, 300, 400, 500)

6.字符串转数组

let str = 'Hello world'
  let arr = [...str]
  console.log(arr);