2018-03-16 对象

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值,并组成数组

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1.属性的简洁表示法 允许直接写入变量和函数 上面代码表明,ES6 允许在对象之中,直接写变量。这时,属性名为变量...
    雨飞飞雨阅读 1,297评论 0 3
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 12,901评论 6 13
  • *面试心声:其实这些题本人都没怎么背,但是在上海 两周半 面了大约10家 收到差不多3个offer,总结起来就是把...
    Dove_iOS阅读 27,728评论 30 472
  • 效果: 1.视频录制 功能说明: 视频录制,可设置录制的最长时间,和最短时间 可保存视频封面图(中间帧)和视频(....
    ErHu丶阅读 3,566评论 4 6
  • 印象中非常深刻的一件事。我在的律所搬迁新址时,领导派我采购打印机、电视机等设备。我在京东详细挑选、仔细看配置、评价...
    陈小同学阅读 290评论 0 0

友情链接更多精彩内容