2018-03-16 对象

作者: 怪兽别跑biubiubi | 来源:发表于2018-03-19 13:46 被阅读0次

    Object.assign() :拷贝。连接两个对象。第一个参数为目标对象(注意目标对象自身也会改变),第二个参数为原对象。


    image.png

    Object.create():创建新对象
    Object.defineProperty():给对象添加新属性,只能设置一个属性。

      var o = {};
      Object.defineProperty(o, 'a', {
        configurable: true,   //是否可删除  true是可以删除,false是不可删除
        writable: true,   // 与get不可同时使用,当它为true时,value值才会被改变。
        enumerable: true,    //是否可枚举
        value: 'duoduo',   // 与get不可同时使用
        // get() {
        //   return '六六六'
        // }
      })
     console.log(o.a)    //   duoduo
    
    image.png

    Object.defineProperties():给对象添加新属性,能设置多个属性。

    var o = {}
      Object.defineProperties(o, {
        name: {
          configurable: true, // 是否可删除 delete
          enumerable: true, // 是否可枚举
          get: function() {
            return "duoduo"
          },
          set: function(val) {
            console.log("set")
          },
        }
      })
      console.log(o.name)  // duoduo
    

    双向绑定源码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
       <div>
           <input id="test" type="text" value="">
       </div>
      <script>
         // 双向绑定源码
         var ipt = document.querySelector("#test")
         var name = "duoduo"
         var o = {}
         Object.defineProperty(o, "name", {
           get() {
             return name
           },
           set(val) {
             ipt.value = val
             name = val
           }
         });
         o.name = "duoduo"
    
         ipt.addEventListener("input", () => {
           name = ipt.value
         })  
      </script>
    </body>
    </html>
    

    Object.entries():枚举属性的键值,返回数组并按顺序排序。

    <script>
       const obj = {name: 'duoduo', age: 18};
       console.log(Object.entries(obj)[1]);   //  ["age", 18]
       const obj = {10: 'c',2: 'a',7: 'b'};
       console.log(Object.entries(obj));   // ["2", "a"]["7", "b"]["10", "c"]
    </script>
    

    Object.freeze():冻结对象。不能向这个对象添加新的属性,不能修改其已有属性的值,不能删除已有属性,以及不能修改该对象已有属性的可枚举性、可配置性、可写性。也就是说,这个对象永远是不可变的。该方法返回被冻结的对象。

    <script>
       const obj = {age: 22};
       const obj1 = Object.freeze(obj);
       obj1.age = 55;
       console.log(obj1.age);    // 22
    </script>
    

    Object.getOwnPropertyDescriptor():返回指定对象的属性对应的属性描述符

     <script>
         var o, d;
         o = { get foo() { return 22; } };
         d = Object.getOwnPropertyDescriptor(o, "foo");
         console.log(d)
     </script>
    

    打印结果:


    image.png

    Object.is():判断两个值是否相同
    Object.keys():返回属性的key值,并组成数组
    Object.values():返回属性的value值,并组成数组

    相关文章

      网友评论

        本文标题:2018-03-16 对象

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