zoukankan      html  css  js  c++  java
  • 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 入门

  • 相关阅读:
    dts--framework(三)
    dts--tests(三)
    dts--tests(一)
    dts--framework(二)
    dts--framework(一)
    Fiddler(一)
    javascript(二)
    javascript(一)
    scrapy--selenium(二)
    linux安装vmware出现kernel-header问题
  • 原文地址:https://www.cnblogs.com/EricZLin/p/9368675.html
Copyright © 2011-2022 走看看