ES6解构和扩展运算符

// 解构
// 解构的作用是可以快速取得数组或对象当中的元素或属性，而无需使用arr[x]或者obj[key]等传统方式进行赋值
// 数组解构赋值：
var arr = ['this is string', 2, 3];
// 传统方式
// var a=arr[0];
// var b=arr[1];
// var c=arr[2];

console.log('-----------------数组解构-----------------')
//解构赋值，是不是简洁很多？
var [a, b, c] = arr

console.log(a);
console.log(b);
console.log(c);

console.log('-----------------嵌套数组解构-----------------')
// 嵌套数组解构：
var arr2 = [[1, 2, [3, 4]], 5, 6];
var [[d, e, [f, g]], h, i] = arr2
console.log(d);  // 1
console.log(e);  // 2
console.log(f);  // 3
console.log(g);  // 4
console.log(h);  // 5
console.log(i);  // 6

console.log('-----------------函数传参解构-----------------')

var arr3 = ["asdasdasd", "asd", 7788];

function fn1([a, b, c]) {    //传的是数组
    console.log(a);     //asdasdasd
    console.log(b);     //asd
    console.log(c);     //7788
}

fn1(arr3)
console.log('-----------------for循环解构-----------------')
var arr4 = [[11, 12], [21, 22], [31, 32]];
for (let [a, b] of arr4) {
    console.log(a)
    console.log(b)
}
//11 12 21 22 31 32]
console.log('-----------------对象赋值解构-----------------')
var obj = {
    name: "涛哥",
    sex: "man",
    age: "29",
    son: {
        sonName: "汤圆",
        sonSex: "boy",
        sonAge: "1"
    }
}
var {name, sex, age, son} = obj;
console.log(name + ' ' + sex + ' ' + age);
console.log(son);

console.log('-----------------对象传参解构-----------------')

var obj2 = {
    name: 'ss',
    sex: 'women',
    age: 26,
    son: {
        sonName: '大熊',
        sonSex: 'male',
        sonAge: 1
    }
};

function fn2({name, sex, age}) {   //传的是对象
    console.log(name + ' ' + sex + ' ' + age);
}

fn2(obj2)

console.log('-----------------  变量名与对象属性名不一致解构-----------------')
var obj3 = {
    name: 'chris',
    sex: 'male',
    age: 26
};
var {name: nickname, age: howOld} = obj3  //改变对象属性名
console.log(nickname + ' ' + howOld); //chris 26

console.log('-----------------  嵌套对象解构：-----------------')
var obj4 = {
    name: 'ccc',
    sex: 'women',
    age: 50,
    son: {
        sonName: '镜像',
        sonSex: 'male',
        sonAge: 13
    }
};
var {name, sex, age, son: {sonName, sonSex, sonAge}} = obj4
console.log(sonName + ' ' + sonSex + ' ' + sonAge);


obj5 = {
    name: 'xiaoxiao',
    sex: 'male',
    age: [1, 2, 3]
}

var {name, sex, age: [a, b, c]} = obj5;
console.log(name + "------" + c);

console.log('-----------------  嵌套对象属性重名，解构时需要更改变量名：-----------------')
var obj6 = {
    name: 'AAAA',
    sex: 'ddd',
    age: 55,
    son: {
        name: '小父',
        sonSex: 'gay',
        sonAge: 27
    }
};
//赋值解构
var {name: myName, son: {name, sex, age}} = obj6
console.log(myName)
console.log(name)

//传参解构

function fn3({sex, age, name, son: {name: smallName, sonSex, sonAge}}) {
    console.log(name + ' ' + sex + ' ' + age + ' ' + smallName + ' ' + sonSex + ' ' + sonAge)
}

fn3(obj6);
console.log('-----------------   循环解构对象：-----------------')

var arr5 = [{name: '催催', age: 26}, {name: '笑笑', age: 27}, {name: '转转', age: 28}]
for (let {name, age} of arr5) {
    console.log(name + ' ' + age + ' ')
}
console.log('-----------------   解构的特殊应用场景：-----------------')
//变量互换
var x = 1;
var y = 2
var [x, y] = [y, x]
console.log(x, y)  //2 1
//字符串解构
var str = 'love';
var [h, i, j, k] = str
console.log(h);//l
console.log(i);//o
console.log(j);//v
console.log(k);//e


console.log('------------------- 扩展运算符 ---------------------')
console.log('------------------- 扩展运算符用三个点号表示，功能是把数组或类数组对象展开成一系列用逗号隔开的值---------------------')

var foo = function (a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
}
var arr6 = [1, 2, 3];
//传统写法
foo(arr6[0], arr6[1], arr6[2]);
console.log('-------------------使用扩展运算符----------')
foo(...arr6)

console.log('-------------数组深拷贝----------')
var arr7 = [1, 2, 3];
var arr8 = arr7;
var arr9 = [...arr7];
console.log(arr7 === arr8);   //  true 说明arr7和arr8指向同一个数组
console.log(arr7 === arr9);  // false 说明arr7和arr9指向不同数组

console.log('--------------把一个数组插入另一个数组字面量----------')

var arr10 = [...arr7, 5, 6, 7]
console.log(arr10)
console.log('--------------字符串转数组----------')

var str2 = "iloveyou";
var arr11 = [...str2];
console.log(arr11)   //["i", "l", "o", "v", "e", "y", "o", "u"]


console.log('-------------------  rest运算符  ---------------------')
console.log('------------------- rest运算符也是三个点号，不过其功能与扩展运算符恰好相反，把逗号隔开的值序列组合成一个数组  ---------------------')


console.log('------------------- 主要用于不定参数，所以ES6开始可以不再使用arguments对象  ---------------------')
var bar = function (...items) {
    for (let item of items) {
        console.log(item)

    }
}
bar(1, 2, 3, 4);
console.log('------------------- 分割符 ---------------------')
var bar2 = function (a, b, ...items) {
    console.log(a)
    console.log(b)
    console.log(items)
}
bar2(3, 45, 523, 5);

console.log('------------------- rest运算符配合解构使用：---------------------')
var [g, ...rest] = [1, 2, 3, 4];
console.log(g);//1
console.log(rest);//[2, 3, 4]