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 入门

  • 相关阅读:
    《算法竞赛入门经典》 例题35 生成元 (Digit Generator, ACM ICPC Seoul 2005,UVa)
    《算法竞赛入门经典》 例题35 生成元 (Digit Generator, ACM ICPC Seoul 2005,UVa)
    《算法竞赛入门经典》 例题35 生成元 (Digit Generator, ACM ICPC Seoul 2005,UVa)
    SVN分支
    SVN分支
    SVN 版本回退
    SVN 版本回退
    如何在excel中取消合并单元格后内容自动填充?
    如何在excel中取消合并单元格后内容自动填充?
    如何让自己像打王者荣耀一样发了疯、拼了命的学习?
  • 原文地址:https://www.cnblogs.com/EricZLin/p/9368675.html
Copyright © 2011-2022 走看看