对象的扩展
2019-08-12 本文已影响20人
前白
对象的改变分为对象的扩展和对象的新增方法。
对象的扩展和新增的方法都有哪些?
1:属性的简洁表示法
//在ES6中的写法:
const week = 'week';
const year = {
week,
hello() {
console.log('我的名字是', this.name);
}
};
year;
/* { week: "week", hello: ƒ } */
//正常写法:
const week = 'week';
const year = {
week,
hello:function() {
console.log('我的名字是', this.name);
}
};
2:属性名表达式
const obj = {};
objp['a' + 'bc'] = 123;
obj;
/*{ abc : 123 }*/
3:方法name属性
const person = {
speakName(){
console.log('hello');
},
};
person.speakName.name;
/* "speakName" */
4:可枚举性(enumerable)
在我们其他的一些需要获取对象枚举属性的时候,也就是获取对象的key,对象的方法时,如果有了这个enumerale可枚举性,那么我们才能获取得到;反之,没有的话就获取不到。常见的有四个:
- for...in
- Object.keys()
- JSON.stringify()
- Object.assign()
let obj = { week: 123 };
Object.getOwnPropertyDescriptor(obj, 'week');
/*
{
value: 123,
writable: true,
enumerable: true,
configurable: true
}
*/
5:属性遍历
- for...in 遍历对象自身的和继承的可枚举性属性(不含Symbol)
for ( s in { [Symbol()]:0, b:0, 10:0, 2:0, a:0 }) {
console.log(s)
}
/* 2 10 b a */
- Object.keys 包括对象自身的(不含继承的)所有可枚举性(不含Symbol 属性)的键名
Object.keys({ [Symbol()] : 0, b:0, 10:0, a:0 })
/* ['2', '10', 'b', 'a'] */
for in 和 object.keys都是一样的,先返回数字的枚举然后再返回字母枚举,最后如果有Symbol就返回当然了object.keys是不支持Symbol的。
- Object.getOwnPropertySymbols 对象自身的所有Symbol属性的键名
Object.getOwnProertySymbol({ [Symbol()] : 0, b:0, 10:0, a:0 }) /* [Symbol()] */
- Object.getOwnProertyNames 包含自身对象的所有(不可枚举属性)属性(不包含Symbol)的键名
Object.getOwnPropertyNames({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 }) /* ["2", "10", "b", "a"] */
- Reflect.ownKeys 包含自身对象的所有键名(不包含继承)
Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 }) /* ['2', '10', 'b', 'a', Symbol()] */
- 顺序——数字——字符——Symbol
6:super 关键字
在ES6中,super是指向当前对象的原型对象(只能用在对象的方法之中)
const proto = {
week: 'hello'
};
const obj = {
week: 'world',
find() {
return super.week;
}
};
obj.__proto__ = proto;
// Object.setPrototypeOf(obj, proto);
obj.find();
/* "hello" */
const obj = {
week: super.week
}
/* SyntaxError: 'super' keyword unexpected here */
const obj = {
week: () => super.week
}
/* SyntaxError: 'super' keyword unexpected here */
const obj = {
week: function () {
return super.week
}
}
/* SyntaxError: 'super' keyword unexpected here */
7:解构
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x;
/* 1 */
y;
/* 2 */
z;
/* { a: 3, b: 4 } */
let { ...z } = null;
/* TypeError: Cannot destructure 'undefined' or 'null'. */
let { ...z } = undefined;
/* TypeError: Cannot destructure 'undefined' or 'null'. */
let { ...x, y, z } = { x: 1, y: 2, a: 3, b: 4 };
/* Uncaught SyntaxError: Rest element must be last element */
8:扩展运算符
let z = { a: 3, b: 4 };
let n = { ...z };
n;
/* { a: 3, b: 4 } */
let week = { ...['a', 'b', 'c'] };
week
/* { 0: "a", 1: "b", 2: "c" } */
{...'hello'}
/* { 0: "h", 1: "e", 2: "l", 3: "l", 4: "o" } */
let ab = { ...a, ...b };
let ab = Object.assign({}, a, b);
let aWithXGetter = {
...a,
get x() {
throw new Error('not throw yet');
}
};
/* */