ES6 解构和扩展字符串

完全解构    不完全解构    异常结构                       数组

let stus = ['zs', 'ls', 'ww', 'zs', 'ln']; //可以是某个模块导出的
let nums = [1, [2, 3, [4, [5]]]];
let [a, [b, c, [d, [e]]]] = nums //得想清楚结构
console.log(a, b, c, d, e)
    // 1、完全解构
    // let [name1, name2, name3, name4, name5] = stus;
    // console.log(name2)//ls
    // ------------------------------
    // 2.不完全解构
    // let [name1, name2] = stus;
    // console.log(name1, name2)//zs ls
    // ----------------------------------
    // 3.异常解构
let [name1, name2, name3, name4, name5, name6] = stus;
console.log(name6) //undefined

对象结构：

var obj = {
    name: 'zs',
    age: 10,
    getName: function() {
        console.log('名字' + this.name);
    }
}

// ----------------------------------
var arr = [1, 2, obj];
var [a, b, { name }] = arr;
console.log(name) //zs  结构正确，就可以拿到
    // ------------------------------------
    // 1.完全解构
    // let { name, age, getName } = obj; //对象解构的时候，可以不考虑顺序
    // console.log(name) //zs
    // ---------------------------------------
    // 2.不完全解构
    // let { name } = obj;
    // console.log(name); //zs
    // -------------------------------------------
    // 3.异常解构
let { sex } = obj;
console.log(sex) //undefinedd

字符串和数值的解构：

var str = "xiaoming"

var num = 123453333

var [a, b] = str; //如果利用数组结构字符串，会以下标进行解构

console.log(a, b); //x i

// --------------------------------------

// var [n1,n2]=num;//数值类型不能用数组解构

// console.log(n1,n2);

// --------------------------------------

var { length, toString, valueOf } = str; //可以利用对象去解构字符串对象中的属性和方法

console.log(length, toString, valueOf) //8 [Function: toString] [Function: valueOf]

var { toString } = num; //数值类型也可以用对象进行解构，注意没有length属性

console.log(toString) //[Function: toString]

默认值解构：

 给解构的加默认值，没有就用默认值

var obj = {
    age: 10,
    getName: function() {
        console.log('名字' + this.name);
    }
}
var { age, name = "高" } = obj; //没有就用默认值
console.log(name, age) //高 10//可以不考虑解构顺序
    // ---------------------------------
var arr = [1, 2, 3, 4, 5];
var [b = 9, d, e, f, g] = arr; //数组中的解构顺序重要
console.log(b) //11

 

一、在数组的应用

(1)解构

 (2)深拷贝    [...arr]

(3)合并操作 扩展     [...arr,6,7]

(4)聚合                     [a,...b]

// 一、在数组的使用
// (1)解构
var arr = [1, 2, 3, 4, 5];
console.log(...arr); //1 2 3 4 5
// --------------------------
// (2)深拷贝
var arr1 = [...arr];
console.log(arr1) //[ 1, 2, 3, 4, 5 ]
    // ----------------------------
    // (3)合并操作 扩展
var arr2 = [...arr, 6, 7]
console.log(arr2)
    // --------------------------
    // (4)聚合         左边扩展,右边聚合
var [a, ...b] = arr; //余下未解构的成员都在b变量中
console.log(b) //[ 2, 3, 4, 5 ]
    // ---------------------------

二、在字符串和对象的应用

// 二.在字符串的应用
var str = "hello";
console.log(...str) //h e l l o
console.log([...str]) //[ 'h', 'e', 'l', 'l', 'o' ]    字符串类型拆出来还是字符串类型
    // -------------------
    // (1)合并操作
var arr3 = [...str, "xm"];
console.log(arr3) //[ 'h', 'e', 'l', 'l', 'o', 'xm' ]
    // -----------------------
    // (2)聚合
var [c, ...d] = str;
console.log(c, d) //h [ 'e', 'l', 'l', 'o' ]
    // ----------------------------------
    // 三.在对象中的使用
var obj = {
    name: 'ls',
    age: 18,
    getName: function() {
        console.log(this.name)
    }
}

// (1)合并
var new_obj = { //合并
        ...obj,
        sex: 'female',
        getAge() {}
    }
    // console.log(new_obj)
    // 运行结果:
    // {
    //     name: 'ls',
    //     age: 18,
    //     getName: [Function: getName],
    //     sex: 'female',
    //     getAge: [Function: getAge]
    //   }
    // ----------------------------
    // 简单的拷贝,深拷贝
var new_obj2 = {...obj }
    // -----------------------------
    // (2)解构
var { name, ...o } = new_obj;
console.log(name, o)
    // 运行结果:
    // ls 
    // {
    //     age: 18,
    //     getName: [Function: getName],
    //     sex: 'female',
    //     getAge: [Function: getAge]
    //   }