ES6 对象的扩展

Posted 2022-04-22 leophen

一、属性的简洁表示法

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

let a=1;
let b=2;

let es5=a:a,b:b;
// 等同于
let es6=a,b; 

上面代码表明，ES6 允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值

同样的，如果对象是方法，也可以简写：

let es5=
    sayhello:function()
        console.log(‘hello‘);
    
;
// 等同于
let es6=
    sayhello()
        console.log(‘hello‘);
    
;

 

二、属性名表达式

ES6 允许字面量定义对象时，用表达式作为对象的属性名，即把表达式放在方括号内

let a=‘b‘;

let es5=a:‘c‘;      // 输出a:"c"

let es6=[a]:‘c‘;    // 输出b:"c"

表达式还可以用于定义方法名

let obj = 
  [‘h‘ + ‘ello‘]() 
    return ‘hi‘;
  
;

obj.hello()  // hi

注意，属性名表达式与简洁表示法，不能同时使用，会报错

let a="my";
let b="name";
let person=
    [a+b],
    b
;    // Uncaught SyntaxError: Unexpected token ,

 

三、super 关键字

ES6 新增了一个关键字 super，指向当前对象的原型对象

const proto = 
  foo: ‘hello‘
;

const obj = 
  foo: ‘world‘,
  find() 
    return super.foo;
  
;

Object.setPrototypeOf(obj, proto);

obj.find()   // "hello"

上面代码中，对象 obj.find()方法之中，通过 super.foo 引用了原型对象 proto 的 foo 属性。

注意，super关键字表示原型对象时，只能用在对象的方法之中，用在其他地方都会报错。

javascript 引擎内部，super.foo 等同于 Object.getPrototypeOf(this).foo（属性）或 Object.getPrototypeOf(this).foo.call(this)（方法）

 

四、扩展运算符

对象的扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中

let z =  a: 3, b: 4 ;
let n =  ...z ;
n      //  a: 3, b: 4 

由于数组是特殊的对象，所以对象的扩展运算符也可以用于数组

let foo =  ...[‘a‘, ‘b‘, ‘c‘] ;
foo    // 0: "a", 1: "b", 2: "c"

如果扩展运算符后面是字符串，它会自动转成一个类似数组的对象

...‘hello‘
// 0: "h", 1: "e", 2: "l", 3: "l", 4: "o"

 

五、对象的新增方法

1、Object.is()

ES6 中 Object.is() 用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致，但前者会自动转换数据类型，所以其 NaN 等于自身，+0等于-0，而后者不等

‘foo‘ === ‘foo‘         // true
Object.is(‘foo‘, ‘foo‘) // true

 ===                // false
Object.is(, )       // false

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

NaN === NaN             // false
Object.is(NaN, NaN)     // true

 

2、Object.assign()

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

const target =  a: 1 ;
const source1 =  b: 2 ;
const source2 =  c: 3 ;

Object.assign(target, source1, source2);

target // a:1, b:2, c:3

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

const target =  a: 1, b: 1 ;
const source1 =  b: 2, c: 2 ;
const source2 =  c: 3 ;

Object.assign(target, source1, source2);

target // a:1, b:2, c:3

如果只有一个参数，Object.assign 会直接返回该参数

const obj = a: 1;
Object.assign(obj) === obj // true

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

typeof Object.assign(2)    // "object"

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

Object.assign(undefined)   // 报错
Object.assign(null)        // 报错

如果非对象参数出现在源对象的位置，这些参数都会转成对象，若无法转成对象则会跳过。所以当 undefined 和 null 不在首参数时不会报错

let obj = a: 1;
Object.assign(obj, undefined) === obj // true
Object.assign(obj, null) === obj      // true

Object.assign 方法实行的是浅拷贝，而非深拷贝。所以如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用

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

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

上面代码中，源对象 obj1 的a属性的值是一个对象，Object.assign 拷贝得到的是这个对象的引用。这个对象的任何变化，都会反映到目标对象上面

 

3、Object.keys()

返回一个数组，成员是参数对象自身的所有可遍历属性的键名

var obj =  name: ‘Leophen‘, age: 22 ;
Object.keys(obj)    // ["name", "age"]

 

4、Object.values()

返回一个数组，成员是参数对象自身的所有可遍历属性的键值

var obj =  name: ‘Leophen‘, age: 22 ;
Object.values(obj)     //  ["Leophen", 22]

 

5、Object.entries()

返回一个数组，成员是参数对象自身的所有可遍历属性的键值对数组

var obj =  name: ‘Leophen‘, age: 22 ;
Object.entries(obj)    //  [ ["name", "Leophen"], ["age", 22] ]

 

6、Object.fromEntries()

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

Object.fromEntries([ ["name", "Leophen"], ["age", 22] ])
//   name: ‘Leophen‘, age: 22 

 

7、Object.setPrototypeOf()

作用与__proto__相同，用来设置一个对象的 prototype 对象，返回参数对象本身

// 格式
Object.setPrototypeOf(object, prototype)

// 用法
const o = Object.setPrototypeOf(, null);

举个例子

let proto = ;
let obj =  x: 10 ;
Object.setPrototypeOf(obj, proto);

proto.y = 20;
proto.z = 40;

obj.x // 10
obj.y // 20
obj.z // 40

上面代码将 proto 对象设为 obj 对象的原型，所以从 obj 对象可以读取 proto 对象的属性。

 

8、Object.getPrototypeOf()

该方法与 Object.setPrototypeOf 方法配套，用于读取一个对象的原型对象

const obj1 = a: 1;
const obj = Object.create(obj1);

console.log(obj.__proto__ === Object.getPrototypeOf(obj));    // true