Object-API—01

new 一个对象，查看它原型的构造函数：

 接下来一个一个说：

（1）Object.assign()——ES6

Object.assign()方法用于对象的合并，将源对象（第一个参数）的所有可枚举属性，复制到目标对象（后面所有参数）。即将其他对象的属性复制到某个对象中

const obj = {a:1}
const obj01 = {b:2}
const obj02 = {c:3}
Object.assign(obj,obj01,obj02)
console.log(obj);  // {a: 1, b: 2, c: 3}

注意：

• 如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。
• 如果只有一个参数，Object.assign()会直接返回该参数
• 由于undefined和null无法转成对象，所以如果它们作为参数，就会报错。这两个不是出现在第一个目标对象时，处理规则有所不同。这些参数都会转成对象，如果无法转成对象，就会跳过。这意味着，如果undefined和null不在首参数，就不会报错。
• 其他类型的值（即数值、字符串和布尔值）不在首参数，也不会报错。但是，除了字符串会以数组形式，拷贝入目标对象，其他值都不会产生效果。

  • const v1 = 'abc';
    const v2 = true;
    const v3 = 10;
    
    const obj = Object.assign({}, v1, v2, v3);
    console.log(obj); // { "0": "a", "1": "b", "2": "c" }

  • 上面代码中，v1、v2、v3分别是字符串、布尔值和数值，结果只有字符串合入目标对象（以字符数组的形式），数值和布尔值都会被忽略。这是因为只有字符串的包装对象，会产生可枚举属性。

  • Object(true) // {[[PrimitiveValue]]: true}
    Object(10)  //  {[[PrimitiveValue]]: 10}
    Object('abc') // {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"}

  • 上面代码中，布尔值、数值、字符串分别转成对应的包装对象，可以看到它们的原始值都在包装对象的内部属性[[PrimitiveValue]]上面，这个属性是不会被Object.assign()拷贝的，只有字符串的包装对象，会产生可枚举的实意义属性，那些属性则会被拷贝
• Object.assign()拷贝的属性是有限制的，只拷贝源对象的自身属性（不拷贝继承属性），也不拷贝不可枚举的属性（enumerable: false）。

  • Object.assign({b: 'c'},
      Object.defineProperty({}, 'invisible', {
        enumerable: false,
        value: 'hello'
      })
    )
    // { b: 'c' }

• 属性名为 Symbol 值的属性，也会被Object.assign()拷贝。

（2）Object.create()

用于在没有构造函数的情况下，也能创建子对象

语法：

const 子对象名 = Object.create(父对象)

 create()创建出来的新对象的__proto__被自动设置为create()的参数，也就是自动继承了父对象了

const son = Object.create(father,{
    // 这里的格式与Object.defineProperties中格式一样
    name: {
        value: "张三",
        writable:true,
        enumerable:true,
        configurable:true
    },
    age:{
        value:26,
        writable:true,
        enumerable:true,
        configurable:true
    }
})

console.log(son.type);  // 人
console.log(son.name);  // 张三
console.log(son.age);  // 26

说明：

• create()第二个参数可选，不填就是创建一个空的子对象

（3）Object.defineProperty() & Object.defineproperties()

①Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

const obj ={}
Object.defineProperty(obj,'name',{
    value: '张三',
    writable:true,
    enumerable:true,
    configurable:true
})
console.log(obj);  //{name: "张三"}

说明：

• value：定义的属性的值
• writable：属性是否可被修改
• enumerable：是否可被枚举（无法被for...in..获取到，但是可以直接访问）
• configurable：控制是否可以修改writable和enumerable
还有另外两个可选键值：get & set ：可用于控制属性的修改时控制，vue双向绑定就是基于Object.defineproperty这个方法

• const obj ={}
  let val = ""
  
  Object.defineProperty(obj,'name',{
      enumerable:true,
      configurable:true,
      get(){
          console.log("get：",val);
          return val
      },
      set(newVal){
          console.log("set：",newVal);
          val=newVal
      }
  })
  
  val="赵四"
  obj.name=val  // set
  console.log(obj.name);  // get

②Object.defineproperties用于同时在对象上定义多个属性，用法与defineproperty类似

var obj = {};
Object.defineProperties(obj, {
  'property1': {
    value: true,
    writable: true
  },
  'property2': {
    value: 'Hello',
    writable: false
  }
  // etc. etc.
});

（4）Object.entries()/Object.fromEntries() & Object.keys() & Object.values()  —ES6

作用与数组的这三个同名办法相同，都是用来遍历对象的

①Object.entries()返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。

const obj = { foo: 'bar', baz: 42 };
Object.entries(obj)

②Object.fromEntries()是Object.entries的逆操作，用于将一个键值对数组转换为对象

        let obj = Object.fromEntries([
            ['a', 1], ["b", 2]
        ])
        console.log(obj);  // {a: 1, b: 2}

该方法的主要目的，是将键值对的数据结构还原为对象，因此特别适合将 Map 结构转为对象。

③Object.keys()返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名。

var obj = { foo: 'bar', baz: 42 };
Object.keys(obj)
// ["foo", "baz"]

④Object.values()回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值。

const obj = { foo: 'bar', baz: 42 };
Object.values(obj)
// ["bar", 42]

（5）Object.preventExtensions() & Object.seal() & Object.freeze() 

这三个属性都是用来控制对象的扩展
①Object.preventExtensions()：禁止给对象添加新属性

const obj ={ 
    name:"张三",
    age: 26
 }

 Object.preventExtensions(obj)

 obj.sex = 1
 console.log(obj);  // {name: "张三", age: 26}  

说明：

• 这里没有使用严格模式，所以默认是修改失败的。严格模式下会报错：Uncaught TypeError: Cannot add property sex, object is not extensible

原理：

　　每个对象内部有一个内部属性extensible = true。此方法就是将对象的内部属性extensible = false

②Object.seal()：禁止添加新属性，禁止删除现有属性

const obj ={ 
    name:"张三",
    age: 26
 }

 Object.seal(obj)

 obj.sex = 1
 console.log(obj);  // {name: "张三", age: 26}
 delete obj.age
 console.log(obj);  // {name: "张三", age: 26}

说明：

• 同样是在严格模式下会报错

原理：

• extensible = false
• configurable = false

③Object.freeze()：禁止添加删除属性，不能修改任何属性值

const obj ={ 
    name:"张三",
    age: 26
 }

 Object.freeze(obj)

 obj.sex = 1
 console.log(obj);  // {name: "张三", age: 26}
 delete obj.age
 console.log(obj);  // {name: "张三", age: 26}
 obj.name = "李四"
 console.log(obj);  // {name: "张三", age: 26}

说明：

• 同样的，需要开启严格模式才会报错

原理：

• extensible = false
• configurable = false 
• writable = false

（6）Object.getOwnPropertyDescriptor()

Object.getOwnPropertyDescriptor() 方法返回指定对象上一个自由属性对应的属性描述符。（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）

const obj = {
    name : "张三"
}
const desc = Object.getOwnPropertyDescriptor(obj,'name')

console.log(desc);  // {value: "张三", writable: true, enumerable: true, configurable: true}

说明： 

• 如果指定的属性存在于对象上，则返回其属性描述符对象（property descriptor），否则返回 undefined。
• 可以获取的属性有：
  • writable
  • enumerable
  • configurable
  • value
  • get
  • set
  • get和set这两个访问器函数，只有在定义了才有，否则是undefined

注意：

• 在 ES5 中，如果该方法的第一个参数不是对象（而是原始类型），那么就会产生出现 TypeError。而在 ES6，第一个的参数不是对象的话就会被强制转换为对象。

（7）Object.getOwnPropertyDescriptors()——ES6

Object.getOwnPropertyDescriptors()方法，返回指定对象所有自身属性（非继承属性）的描述对象。

const obj = {
  foo: 123,
  get bar() { return 'abc' }
};

Object.getOwnPropertyDescriptors(obj)
// { foo:
//    { value: 123,
//      writable: true,
//      enumerable: true,
//      configurable: true },
//   bar:
//    { get: [Function: get bar],
//      set: undefined,
//      enumerable: true,
//      configurable: true } }

 上面代码中，Object.getOwnPropertyDescriptors()方法返回一个对象，所有原对象的属性名都是该对象的属性名，对应的属性值就是该属性的描述对象。

 此方法的实现

该方法的引入目的，主要是为了解决Object.assign()无法正确拷贝get属性和set属性的问题。

Object.getOwnPropertyDescriptors()方法的另一个用处，是配合Object.create()方法，将对象属性克隆到一个新对象。这属于浅拷贝。

        const obj = {name:"张三"}
        const clone = Object.create(Object.getPrototypeOf(obj),Object.getOwnPropertyDescriptors(obj))

        console.log(obj === clone);  // false

 说明：

• getPrototypeOf()方法返回指定对象的原型
• Object.getOwnPropertyDescriptors(obj)相当于直接获取自身属性当作第二个参数

 - 另外，Object.getOwnPropertyDescriptors()方法可以实现一个对象继承另一个对象。以前，继承另一个对象，常常写成下面这样。

const obj = {
  __proto__: prot,
  foo: 123,
};

ES6 规定__proto__只有浏览器要部署，其他环境不用部署。如果去除__proto__，上面代码就要改成下面这样。

const obj = Object.create(prot);
obj.foo = 123;

// 或者

const obj = Object.assign(
  Object.create(prot),
  {
    foo: 123,
  }
);

 有了Object.getOwnPropertyDescriptors()，我们就有了另一种写法。

const obj = Object.create(
  prot,
  Object.getOwnPropertyDescriptors({
    foo: 123,
  })
);

 （8）Object.getOwnPropertyNames()

Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组

Object.getOwnPropertyName()返回一个数组，该数组对元素是obj自身拥有的枚举或不可枚举属性名称字符串。数组中枚举属性的顺序与通过for...in...循环（或Oject.keys）迭代对象属性时一致。

var arr = ["a", "b", "c"];
console.log(Object.getOwnPropertyNames(arr).sort()); // ["0", "1", "2", "length"]

// 类数组对象
var obj = { 0: "a", 1: "b", 2: "c"};
console.log(Object.getOwnPropertyNames(obj).sort()); // ["0", "1", "2"]

// 使用Array.forEach输出属性名和属性值
Object.getOwnPropertyNames(obj).forEach(function(val, idx, array) {
  console.log(val + " -> " + obj[val]);
});
// 输出
// 0 -> a
// 1 -> b
// 2 -> c

//不可枚举属性
var my_obj = Object.create({}, {
  getFoo: {
    value: function() { return this.foo; },
    enumerable: false
  }
});
my_obj.foo = 1;

console.log(Object.getOwnPropertyNames(my_obj).sort()); // ["foo", "getFoo"]

 如果你只要获取到可枚举属性，可以使用Object.keys或用for...in循环（还会获取到原型链上的可枚举属性，不过可以使用hasOwnProperty()方法过滤掉）。