解构赋值及用途 + 三点运算符

解构：从数组和对象中提取值，对变量（多个）进行赋值

1. 默认值

2.underfined与null：

underfined(相当于什么都没有)

null（相当于有值，但值为null）

3.数组有序，对象属性没有次序，变量必须与属性同名

let [foo=true]=[]
console.log(foo) //true

let [a,b='jspang']=['胖']
console.log(a+b) //胖jspang

let [a,b='jspang']=['胖',undefined]
console.log(a+b)  //胖jspang

let [a,b='jspang']=['胖',null]
console.log(a+b)  //胖null

4. 用途

(1) ES6解构(向数组的末尾添加一个或更多元素)

    let arr = [1,2,3];

    let [a,b,c] = arr;

    let result = [a,b,c,4];

    console.log(result);    //[1,2,3,4]

(2)ES6解构 (如何不使用中间值，将两个变量的值进行交换)

let a=1;

let b=2;

[a,b] = [b,a];

console.log([a,b])  //[2, 1]

对象扩展运算符（…），三点运算符（三点语法）

概念：

三点运算符为对象的扩展运算符，用于取出参数对象中的所有可遍历属性，拷贝到 当前的对象之中,拓展运算符拷贝的是对象中的基本数据类型，并不是对原有对象的引用，因此修改当前对象中的值不会影响原有对象中的值。

1.扩展运算符的用处：数组的复制

let arr1=['www','jspang','com'];
let arr2=arr1;
console.log(arr2);  // ['www', 'jspang', 'com']
arr2.push('shengHongYu');
console.log(arr1);  // ['www', 'jspang', 'com', 'shengHongYu']

因为我们这是对内存堆栈的引用，而不是真正的赋值。

let arr1=['www','jspang','com'];
//let arr2=arr1;
let arr2=[...arr1];
console.log(arr2);  //['www', 'jspang', 'com']
arr2.push('shengHongYu');
console.log(arr2); //['www', 'jspang', 'com', 'shengHongYu']
console.log(arr1); //['www', 'jspang', 'com']

2.对象的复制

        //对象的深拷贝
         var obj = { name: '明明', age: 20 };
        // console.log(...obj); //不能直接打印对象，会报错
        var obj1 = { ...obj };
        // console.log(obj1);
        obj1.age = 22;
        // console.log(obj); // { name: '明明', age: 20 }   不影响原有对象的值

3.对象的合并

        var obj2 = { name: '宝宝' };
        var obj3 = { age: 22 };
        var obj4 = { ...obj2 , ...obj3 };
        // console.log(obj4); // {name: "宝宝", age: 22}

4.字符串转化为数组

        var str = '吃好,喝好,玩好';
        var arr1 = str.split(',');
        // console.log(arr1); //["吃好", "玩好", "喝好"]

// 用 …语法
// 区别 ：字符串转化数组，一个字符一个位置
var str = '吃好,喝好,玩好';
var arr2 = [...str];
console.log(arr2); // ['吃', '好', ',', '喝', '好', ',', '玩', '好']

5. …语法在函数中的使用
1.实参中的使用

        //需要将数组里的元素，分割为单个实参传递
        function fn(x, y, z) {
            console.log(x, y, z);
        }
        // fn(1, 2, 3);
        var arr = ['雨声', '淅沥沥', '哗啦啦'];
        // fn(...arr);

2.作为形参时

  //将传递的多个实参，转化为数组
function fn1(...arr2) {
            console.log(arr2); // ["滴滴答答", "噼里啪啦", "喝茶看书"]
        }

        fn1('滴滴答答', '噼里啪啦', '喝茶看书');

rest运算符

它们有很多相似之处，甚至很多时候你不用特意去区分。它也用…（三个点）来表示
剩余参数：（…args）为剩余参数用法 剩余参数语法允许我们将一个不定量的参数表示为一个数组

解构赋值结合剩余参数

let a,b,rest;
[a,b,...rest] = [1,2,3,4,5,6];
console.log(rest);
//[3,4,5,6]