ES6基础-----rest、spread的使用

目录

一、 rest参数 ...

 用于接受多个实参及不确定数量的实参

箭头函数没有 arguments，所以箭头函数中不确定参数，可以使用 rest

二、spread扩展运算符...  

在 JavaScript 中，扩展运算符（spread operator）用三个连续的点号（…）表示，它可以将一个可迭代对象（如数组、字符串或类数组对象）展开成独立的元素，它用于接受不确定数量的实参，把复杂的数据直接解包出来处理.

它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数系列，对数组进行解包

        （1）数组：将数组拆开为单独的值

        （2）对象:直接显示对象里面的值，不用去.属性

        （3)字符串的展开:将字符串展开为单独的字符

        (4) 函数调用时的参数传递：将定义的数组拆开进行函数运算

三、rest 和 spread 的区别：

        rest 参数用于函数定义，用来表示不定数量的参数，并把它们放入一个数组中。

        spread 运算符用于函数调用，数组字面量或对象字面量中，用来展开数组或对象的元素成独立的值

一、 rest参数 ...

 用于接受多个实参及不确定数量的实参

箭头函数没有 arguments，所以箭头函数中不确定参数，可以使用 rest

  let  ar=(...a)=> {// ()里面的形参，不确定就不写
                
              //  console.log(arguments);//报错，箭头函数没有 arguments，可以使用 rest
                console.log(a);//[1, 2, 3, 4, 5, 6]
            }
            ar(1,2,3,4,5,6);//赋值

二、spread扩展运算符...  

在 JavaScript 中，扩展运算符（spread operator）用三个连续的点号（…）表示，它可以将一个可迭代对象（如数组、字符串或类数组对象）展开成独立的元素，它用于接受不确定数量的实参，把复杂的数据直接解包出来处理.

它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数系列，对数组进行解包

        （1）数组：将数组拆开为单独的值

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

        （2）对象:直接显示对象里面的值，不用去.属性

 let obj1={
                name:"张三"
            }
let obj2={
                age:20
            }
let obj3={
                sex:"男"
            }
let obj4={obj1,obj2,obj3}
let obj5={...obj1,...obj2,...obj3}
console.log(obj4);//{obj1: {…}, obj2: {…}, obj3: {…}}---显示对象{} ，需要obj里面的值需要去点 ，obj1.name
console.log(obj5);//{name: '张三', age: 20, sex: '男'}---显示值

        （3)字符串的展开:将字符串展开为单独的字符

const str = 'Hello';
const chars = [...str];
console.log(chars); // 输出 ['H', 'e', 'l', 'l', 'o']

        (4) 函数调用时的参数传递：将定义的数组拆开进行函数运算

function sum(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];//将数组拆开为单独数字，赋值给形参
console.log(sum(...numbers)); // 输出 6

三、rest 和 spread 的区别：

        rest 参数用于函数定义，用来表示不定数量的参数，并把它们放入一个数组中。

        spread 运算符用于函数调用，数组字面量或对象字面量中，用来展开数组或对象的元素成独立的值