美文网首页ES6
ES6 - 对象简洁语法及对象新增方法

ES6 - 对象简洁语法及对象新增方法

作者: 饮杯梦回酒 | 来源:发表于2019-01-08 14:27 被阅读0次

    导读:

    • 直接看代码,其中扩展运算符在对象上的用法已经能用了。

    例子:

    • 简洁语法:其实现在框架中都采用的这种语法,优化代码,推荐使用
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <script type="text/javascript">
            let name = 'Verin';
            let age = 18;
    
            let json = {
                name,    // name: name
                age,    // age: age
                /*showA: function() {
                    console.log(this.name);
                }*/
                showA(){
                    return this.name;
                }
            }
            console.log(json);      // Verin 18
            console.log(json.showA());      // Verin
        </script>
    </body>
    </html>
    
    • 对象新增方法:( Object.is(), Object.assign(), Object.keys(), Object.entries(), Object.values()
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <script type="text/javascript">
            console.log(NaN == NaN);   // false
            console.log(Object.is(NaN, NaN));   // true
    
            console.log(+0 == -0)   // true
            console.log(Object.is(+0, -0));   // false
             // 实际上你可以理解为:  == 是逻辑上判断相等, Object.is()是肉眼上判断相等(也就是长得一模一样就true,不一样false)
    
            let json1 = {a: 1};
            let json2 = {b: 2, a: 2};
            let json3 = {c: 3};
    
            console.log(Object.assign({}, json1, json2, json3)) 
            // 结果:{a: 2, b: 2, c: 3}  功能:合并参数,如果参数相同后面定义的会覆盖前面定义过的,也能复制对象 / 数组
            //用处: ajax传数据时一般会有默认值(defaults)这时用Object.assign({}, defaults, 用户自定义);
            
            let {keys, values, entries} = Object;   // 解构赋值
            let obj = { a: 1, b: 2, c: 3 };  
    
            for (let key of keys(obj)) {  
                console.log(key);   // 'a', 'b', 'c'  
            }  
    
            for (let value of values(obj)) {  
                console.log(value);   // 1, 2, 3  
            }  
    
            for (let [key, value] of entries(obj)) {  
                console.log([key, value]);  // ['a', 1], ['b', 2], ['c', 3]  
            }
      
            let objClone = { ...obj };
            delete objClone.a;
            console.log(objClone);   //   { b: 2, c: 3 }
    </script>
    </body>
    </html>
    

    总结:

    • Object.assign()方法主要2个功能:(重点掌握,方法很实用)
      1.复制对象 / 数组(let 新对象 = Object.assign({}, 对象)
      2.合并参数,参数可以是数组 / 对象(let 新对象 = Object.assign({}, 默认参数, 参数1, 参数2,...)

    相关文章

      网友评论

        本文标题:ES6 - 对象简洁语法及对象新增方法

        本文链接:https://www.haomeiwen.com/subject/fqgvrqtx.html