(…) spread扩展运算符与rest剩余运算符

最新推荐文章于 2024-04-26 22:37:04 发布

爱上的云

最新推荐文章于 2024-04-26 22:37:04 发布

阅读量370

点赞数

分类专栏：扩展运算符 rest运算符文章标签： javascript js es6

本文链接：https://blog.csdn.net/dong123ohyes/article/details/111667038

版权

扩展运算符同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

rest运算符

1 篇文章 0 订阅

订阅专栏

2.3扩展运算符可以与解构赋值结合起来，用于生成数组

2.4扩展运算符还可以将字符串转为真正的数组

前言

ES6的扩展运算符（ spread ）是三个点（...），展开元素会“展开”数组变成多个元素。

rest运算符也是三个点（...），剩余元素会收集多个元素后“压缩”成一个单一的元素，rest参数用于获取函数的多余参数。rest运算符的功能与扩展运算符恰好相反，把逗号隔开的值序列组合成一个数组。

//spread运算符应用实例
function addNumbers(x,y,z){
    return x+y+z;
}
var numbers = [1,2,3,4];
addNumbers(...numbers); //6

//rest运算符应用实例
function rest01(...arr) {
    for (let item of arr) {
        console.log(item);
    }
}
rest01(1, 3, 5);

一、spread扩展运算符

1.对象的扩展运算符

对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }

方法实际上等价于:

let bar = { a: 1, b: 2 };
let baz = Object.assign({}, bar); // { a: 1, b: 2 }

Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。

Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。(如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性)。

同样，如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉。

let bar = {a: 1, b: 2};
let baz = {...bar, ...{a:2, b: 4}};  // {a: 2, b: 4}

2.数组的扩展运算符

扩展运算符同样可以运用在对数组的操作中。

2.1可以将数组转换为参数序列

//情形一
function add(x, y) {
  return x + y;
}
const numbers = [4, 38];
add(...numbers) // 42

//情形二
function addNumbers(x,y,z){
    return x+y+z;
}
var numbers = [1,2,3,4];
addNumbers(...numbers); //6

2.2可以复制数组

如果直接通过下列的方式进行数组复制是不可取的：

const arr1 = [1, 2];
const arr2 = arr1;
arr2[0] = 2;
arr1 // [2, 2]

原因上面已经介绍过，用扩展运算符就很方便：

const arr1 = [1, 2];
const arr2 = [...arr1];

2.3扩展运算符可以与解构赋值结合起来，用于生成数组

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

需要注意的一点是：

如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

const [...rest, last] = [1, 2, 3, 4, 5];
// 报错
const [first, ...rest, last] = [1, 2, 3, 4, 5];
// 报错

2.4扩展运算符还可以将字符串转为真正的数组

[...'hello']
// [ "h", "e", "l", "l", "o" ]

任何 Iterator 接口的对象都可以用扩展运算符转为真正的数组。

比较常见的应用是可以将某些数据结构转为数组，比如：

// arguments对象
function foo() {
  const args = [...arguments];
}

3.扩展运算符应用场景

可以替代语法繁琐的apply方法。当需要拿一个数组的元素作为函数调用的参数时（即 数组实参），扩展运算符是一个不错的选择。

二、rest剩余运算符

1.rest运算符介绍

//rest运算符使用举例
function rest01(...arr) {
    for (let item of arr) {
        console.log(item);
    }
}
rest01(1, 3, 5);

rest参数可理解为剩余的参数，所以必须在最后一位定义，如果定义在中间会报错。

rest参数和arguments对象的区别：

2.rest运算符应用场景

rest运算符主要是处理不定数量参数，rest参数使得收集参数变得非常简单。它是类数组对象arguments一个合理的替代品。

rest参数还可以与解构赋值组合使用。

总结

rest运算符：等号左边，形参，被赋值一方。

spread运算符：等号右边，实参，赋值一方。

/******************扩展运算符(spread)********************/

     //demo 1  传递数据代替多个字符串的形式
     function  test(a,b,c){
         console.log(a);
         console.log(b);
         console.log(c);
     }

     var arr = [1, 2, 3];
     test(...arr);
    

     //demo2 将一个数组插入到另一个数据中
     var arr1 = [1, 2, 3,4];
     var arr2 = [...arr1, 4, 5, 6];
     console.log(arr2);


     //demo3  字符串转数据
     var str='loycoder';
     var arr3= [...str];
     console.log(arr3);

 /******************剩余运算符(rest)********************/

  //demo4  当函数参数个数不确定时，用 rest运算符
    function rest01(...arr) {
        for (let item of arr) {
            console.log(item);
        }
    }
    rest01(1, 3, 5);

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

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