ES6 解构赋值

一、数组的解构赋值:按照索引的顺序来解构

        let [a,b]=[1,'bar'];
        console.log(a);//1
        console.log(b);//bar

        let [c,,d]=[2,3,4];
        console.log(c);//2
        console.log(d);//4
        
        let [f]=[5,6,7];
        console.log(f);//5

        let [g,h,k]=[8,9]
        console.log(g);//8
        console.log(h);//9
        console.log(k);//undefined

        // 允许设置默认值
        let [x=100,y,z=200]=[10,20]
        console.log(x);//10
        console.log(y);//20
        console.log(z);//200

二、对象的解构赋值:按照对象的键名来解构

    let {name,age}={name:'eric',age:18};
    console.log(name);//reic
    console.log(age);//18

    let {me,id}={me:'eric',age:18};
    console.log(me);//eric
    console.log(id);//undefined

    let { foo: baz } = { foo: "aaa", bar: "bbb" };
    console.log(baz);//aaa

    let { first: f, last: l } = { first: 'hello', last: 'world'};
    console.log(f);//hello
    console.log(l);//world

    let {x, y = 5} = {x: 1};
    let {x: z = 3} = {x: 5};
    console.log(x);//1
    console.log(y);//5
    console.log(z);//5

三、字符串的解构赋值

    const [a, b, c, d, e] = 'hello';
    console.log(a,b,c,d,e);//

    // 类似数组的对象都有一个length属性
    let {length : len} = 'hello';
    console.log(len);//

四、数值和布尔值的解构赋值

   // 解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。
    // 数值和布尔值的包装对象都有toString属性,因此变量s都能取到值
    let {toString: s} = 123;
    s === Number.prototype.toString // true

    let {toString: s} = true;
    s === Boolean.prototype.toString // true

    // 解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。
    // 由于undefined和null无法转为对象,所以对它们进行解构赋值,都会报错
    let { prop: x } = undefined; // TypeError
    let { prop: y } = null; // TypeError

五、函数参数的解构赋值

    //函数add的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量x和y
    function add([x, y]){
        return x + y;
    }
    add([1, 2]); // 3

    // 函数参数的解构也可以使用默认值。
    //函数move的参数是一个对象,通过对这个对象进行解构,得到变量x和y的值。如果解构失败,x和y等于默认值
    function move({x = 0, y = 0} = {}) {
        return [x, y];
    }
    move({x: 3, y: 8}); // [3, 8]
    move({x: 3}); // [3, 0]
    move({}); // [0, 0]
    move(); // [0, 0]

    // 函数move的参数指定默认值,而不是为变量x和y指定默认值,所以会得到与前一种写法不同的结果。
    function move({x, y} = { x: 0, y: 0 }) {
        return [x, y];
    }
    move({x: 3, y: 8}); // [3, 8]
    move({x: 3}); // [3, undefined]
    move({}); // [undefined, undefined]
    move(); // [0, 0]

    // undefined就会触发函数参数的默认值。
    [1, undefined, 3].map(function(x='yes'){
        return x
    });
    // [ 1, 'yes', 3 ]
    // 默认值的应用
    function ajax({url,type='get'}){
        console.log(url,type)
    }
    ajax({url:'/hello'});//  /hello get

    // 在nodejs加载模块里的应用:指定模块里的某个方法
    // var {readFile,writeFile}=require('fs');

    // 函数的rest参数:把剩余的参数都包装到一个数组中
    // 它的作用就是来代替arguments的
    // arguments是伪数组,不能使用Array的一些原型方法,但是rest可以
    function add(...args){
        console.log(args);//[1, 2, 3, 4, 5]
        args.forEach(function(item){
            console.log(item)
        });
    }
    add(1,2,3,4,5);// 1 2 3 4 5

更多详细知识点,请参考ECMAScript 6 入门

猜你喜欢

转载自www.cnblogs.com/EricZLin/p/9368675.html