JS之(...)三个点的用法 - 扩展运算符&剩余运算符(rest)

在JS中,扩展运算符(spread)是三个点(...),剩余运算符也是三个点(...)。

一、扩展运算符

...是扩展运算符,是在ES6中新增加的内容,它可以在函数调用/数组构造时,将数组表达式或者string在语法层面展开;还可以在构造字面量对象时将对象表达式按照key-value的方式展开。

      字面量一般指 [1,2,3] 或者 {name: 'Nike', age: '12'} 这种简洁的构造方式,多层嵌套的数组或者对象三个点就无能为力了。

(一)、作用

1. 数组的复制 / 对象的复制

var arr1 = ['hello'];
var arr2 = [...arr1];
console.log(arr2);  // ['hello']

var obj1 = {name: '93 Million Miles'}
var obj2 = {...obj1};
console.log(obj2);  // {name: '93 Million Miles'}

2. 数组的合并 / 对象的合并

var arr1 = ['1','2','3'];
var arr2 = ['one','two','three'];
var mergeArr = [...arr1,...arr2];
mergeArr;  // ['1', '2', '3', 'one', 'two', 'three']

var obj1 = {name:'chuichui'};
var obj2 = {height:176};
var mergeObj = {...obj1,...obj2};
mergrObj;  // { name: "chuichui", height: 176 }

3. 字符串转数组

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

4. 函数传参

可以和正常的函数相结合,灵活使用

function f(v,w,x,y,z) {
  console.log(v+w+x+y+z)
};
var args = [2,3];
f(1,...args,4,...[5]);  // 15

可以把数组中的参数迭代为函数参数:

function f(x,y,z) {
  console.log(x+y+z);
};
var args = [1,2,3];
f(...args);  // 6

5、由于扩展运算符可以展开数组,所以可以代替函数的apply方法

// ES5 的写法
function f(x, y, z) {
  // ...
}
var args = [0, 1, 2];
f.apply(null, args);

// ES6 的写法
function f(x, y, z) {
  // ...
}
let args = [0, 1, 2];
f(...args);

扩展运算符取代apply方法的实际例子,应用Math.max() 方法

// ES5 的写法
Math.max.apply(null, [14, 3, 77])

// ES6 的写法
Math.max(...[14, 3, 77])

// 等同于
Math.max(14, 3, 77);

二、 剩余运算符

剩余运算符相比来说是扩展运算符的逆运算

1. 把逗号隔开的值序列组合成一个数组

//当函数参数个数不确定时,用 rest运算符
function f1(...args) {
  console.log(args); // [1,2,3]
}

f1(1,2,3);

//当函数参数个数不确定时的第二种情况
function f2(item, ...arr) {
  console.log(item); // 1
  console.log(arr);  // [2,3]
}
f2(1, 2, 3);

//rest运算符配合 解构使用
let [a,...temp] = [1, 2, 4];
console.log(a);    // 1
console.log(temp); // [2,4]

三、 总结

扩展运算符(spread)用三个点号表示,功能是把数组或类数组对象展开成一系列用逗号隔开的值。

剩余运算符(rest)也是三个点号,不过其功能与扩展运算符恰好相反,把逗号隔开的值序列组合成一个数组。

当三个点(…)在等号左边,或者放在形参上,为 rest 运算符。

当三个在等号右边,或者放在实参上,是 spread运算符。

或者说:放在被赋值一方是rest 运算符。放在赋值一方式 spread运算符。
 

文章内容结合来自于文章一  文章二

猜你喜欢

转载自blog.csdn.net/m0_52545254/article/details/126668320
今日推荐