JavaScript基础--对象和ES6对象扩展

ES6对象扩展：

1、属性的简洁表示法

ES6 允许直接写入变量和函数，作为对象的属性和方法

var age = 18;
var obj = {
    name: "张三",
    age,   //属性的简洁写法
    sayHello(){console.log("my name is " + this.name)},  //方法简洁写法
} 
obj.sayHello()  //my name is 张三

2、属性名表达式

定义对象的属性有两种方法：

      1、直接用标识符作为属性名

var obj = {};
obj.fristName = "zhang";
obj.lastName = "san";
console.log(obj) //{fristName: "zhang",lastName: "san"}

      2、用表达式作为属性名

let lastWord = 'last word';

const a = {
  'first word': 'hello',
  [lastWord]: 'world'
};

a['first word'] // "hello"
a[lastWord] // "world"
a['last word'] // "world"

3、方法的name值

函数的name属性，返回函数名。对象方法也是函数，因此也有name属性

var obj = {
    sayHello() {console.log("hello world")}
}
console.log(obj.sayHello.name) //sayHello

如果对象方法前面添加了取值函数getter和存值函数setter，则name不能直接获取到方法名，而是要通过name前面添加get和set来获取

var obj = {
  get foo() {},
  set foo(x) {}
};
const descriptor = Object.getOwnPropertyDescriptor(obj, 'foo');
console.log(descriptor.get.name) // "get foo"
console.log(descriptor.set.name) // "set foo"

4、可枚举性

Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象

let obj = {foo: "123"}
console.log(Object.getOwnPropertyDescriptor(obj,"foo")) 
//configurable:true
//enumerable:true
//value:"123"
//writable:true

描述对象的enumerable属性，称为”可枚举性“，如果该属性为false，就表示某些操作会忽略当前属性。但是有四个操作会忽略enumerable为false的属性

    for...in循环：只遍历对象自身的和继承的可枚举的属性。

    Object.keys()：返回对象自身的所有可枚举的属性的键名。

    JSON.stringify()：只串行化对象自身的可枚举的属性。

    Object.assign()： 忽略enumerable为false的属性，只拷贝对象自身的可枚举的属性

5、属性的遍历

对象的遍历有六种方法：

      1、for...in 循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）

       2、Object.keys(obj) 返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名

       3、Object.getOwnPropertyNames(obj) 返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名

       4、Object.getOwnPropertySymbols(obj)  返回一个数组，包含对象自身的所有 Symbol 属性的键名。

       5、Reflect.ownKeys(obj)  返回一个数组，包含对象自身的所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举

6、super 关键字

指向当前对象的原型对象，只能用在对象的方法之中，用在其他地方都会报错。super.foo等同于Object.getPrototypeOf(this).foo（属性）或Object.getPrototypeOf(this).foo.call(this)（方法）

let a = {
    foo: "hello"
}

let b = {
    foo: "world",
    find() {return super.foo}
}
Object.setPrototypeOf(b, a);
console.log(b.find())  //"hello"

Object.setProtototype(obj, prototype) 

 obj 要设置其原型的对象

    prototype 该对象的新原型(一个对象 或 null)

7、解构赋值

对象的解构赋值用于从一个对象取值，相当于将目标对象自身的所有可遍历的（enumerable）、但尚未被读取的属性，分配到指定的对象上面。所有的键和它们的值，都会拷贝到新对象上面。

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

注意：

1、解构赋值要求等号右边是一个对象

2、解构赋值必须是最后一个参数，否则会报错

3、解构赋值的拷贝是浅拷贝

4、扩展运算符的解构赋值，不能复制继承自原型对象的属性

8、扩展运算符

对象的扩展运算符（...）用于取出参数对象的所有可遍历属性。对象的扩展运算符等同于使用Object.assign()方法

let obj = {name: "zhangsan"}
let a = {...obj}
let b = Object.assign({}, obj)
console.log(a)  //{name: "zhangsan"}
console.log(b)  //{name: "zhangsan"}

如果想深度克隆一个对象可以采用

// 写法一
const clone2 = Object.assign(
  Object.create(Object.getPrototypeOf(obj)),
  obj
);

// 写法二
const clone3 = Object.create(
  Object.getPrototypeOf(obj),
  Object.getOwnPropertyDescriptors(obj)
)

9、Object.is()

用来比较两个值是否严格相等，严格比较运算符（===）的行为基本一致，但是弥补全等运算符的NaN不等于自身，以及+0等于-0的缺点

+0 === -0 //true
NaN === NaN // false

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

10、Object.assign()

用于对象的合并，将源对象的所有可枚举属性，复制到目标对象。第一个参数是目标对象，后面的参数都是源对象

const target = { a: 1 };

const source1 = { b: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
console.log(target) // {a:1, b:2, c:3}

注意：

1、目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性

2、该参数不是对象，则会先转成对象，然后返回

console.log(Object.assign(2))  //{2}

3、undefined和null无法转成对象，所以如果它们作为参数，就会报错

4、Object.assign方法实行的是浅拷贝

const obj1 = {a: {b: 1}};
const obj2 = Object.assign({}, obj1);

obj1.a.b = 2;
obj2.a.b // 2

5、同名属性的替换，后面会替换到前面的

const target = { a: { b: 'c', d: 'e' } }
const source = { a: { b: 'hello' } }
Object.assign(target, source)  // { a: { b: 'hello' } }

6、用来处理数组，但是会把数组视为对象，会把数组视为属性名为 0、1、2 (按照索引)的对象，因此当合并两个数组会导致后面覆盖前面数组中的元素

console.log(Object.assign([1, 2, 3], [4, 5])) // [4, 5, 3]

常用用途：

1、为对象添加属性

let obj = {}
console.log(Object.assign(obj, {x: "zhangsan"})) //{x: "zhangsan"}

2、为对象添加方法

Object.assign(SomeClass.prototype, {
  someMethod(arg1, arg2) {
    // 代码
  },
  anotherMethod() {
    // 代码
  }
});

3、克隆对象

      只能克隆原始对象自身的值，不能克隆它继承的值，如果保持继承链

function clone(origin) {
  let originProto = Object.getPrototypeOf(origin);
  return Object.assign(Object.create(originProto), origin);
}

11、Object.getOwnPropertyDescriptors()

用来方法会返回某个对象属性的描述对象

12、Object.setPrototypeOf()

用来设置一个对象的prototype对象，返回参数对象本身

13、Object.getPrototypeOf()

用于读取一个对象的原型对象

14、Object.keys()，Object.values()，Object.entries()

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

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

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

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

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

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

15、Object.fromEntries()

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

let objArr = [['foo', 'bar'],['baz', 42]]
console.log(Object.fromEntries(objArr)) // { foo: "bar", baz: 42 }