收藏Vue+ElementUI

2018-03-16 对象

2018-03-19  本文已影响0人  怪兽别跑biubiubi

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

上一篇下一篇

猜你喜欢

热点阅读