ES6对象的扩展

转身_将来
118 阅读3分钟

1、属性的简介写法

ES6允许直接在大括号{}内写入变量和函数，作为对象的属性和方法。

const foo = 'baz',
    fun: () => {
        console.log(12)
    }
const obj = {
    foo,
    fun
}

2、属性名表达式

ES5只有一种表达方式

const obj = {
    foo: '12',
    de: '34'
}

ES6新增表达方式

const baz = 'zzzz';
const obj = {
    foo: '12',
    ['de' + 'cc']: '34',
    [baz]: 122131
}

3、方法的name属性

函数的name属性，返回函数名。对象方法也是函数，所以也具有name属性

const Person = {
    sayName() {
        
    }
}
Person.sayName.name     // sayName

如果函数方法存在取整函数和存值函数，则name属性不是在方法上，而是方法的属性的描述方法get和set属性上

const Person = {
    get sayName() {
        console.log(12)
    },
    set sayName(x) {
        console.log(33)
    }
}

const descript = Object.getOwnPropertyDescriptor(Person, 'sayName');
console.log(descript.get.name)      // sayName

有两种特殊情况：
bind的方法创造的函数，name属性返回bound加上函数的名字；
Function构造函数创建的函数，name属性返回anonymous

const doSomeing = () => {
    ...
}
doSomeing.bind().name       // bound soSomeing
(new Function()).name       // anonymous

如果对象的方法名是Symbol值时，那么name属性返回的是Symbol值的描述。

const description = Symbol('description');
 const empty = Symbol();
 const obj = {
   [description]() {},
   [empty]() {}
 }
 console.log(obj[description].name)     // [description]
 console.log(obj[empty].name)           // ''

4、属性的可枚举性和遍历

对象的每个属性都有一个描述对象，用来控制该属性的动作行为。Object.getOwnPropertyDescriptor()获取属性的描述对象。

描述对象的enumerable表示可枚举性，如果为false,则表示某些操作会忽略当前属性。

属性的遍历有5种方法：

①：for...in（遍历自身的和继承的可枚举性属性）

②：Object.keys(obj)（包含自身的不含继承不含可枚举性属性组成的数组）

③：Object.getOwnPropertyNames()（包含自身的不含继承包含可枚举性属性组成的数组）

④：Object.getOwnPropertySymbols(obj)（回一个数组，包含对象自身的所有 Symbol 属性的键名。）

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

5、super关键字

this关键字总是指向当前函数所在的对象，ES6又增加了一个类似的super关键字，指向当前对象的原型对象。

只有对象方法的简单写法才能被浏览器引擎识别。在浏览器引擎中，super相当于Object.getPropertyOf(this).name或Object.getPropertyOf(this).name.call(this);

Object.prototype.name="lisi"
const obj = {
    name: '张三',
    age: 11,
    sex: '0',
    sayName() {
        return super.name
    }
}
console.log(obj.sayName())          // 'lisi'

6、扩展运算符

7、链判断运算符（ES2020）

实际应用中，如果需要判断对象中的属性是否存在，往往先判断对象是否存在或者使用三元运算符判断是否存在

const message = {}

const firstName = (message
&& message.body
&& message.body.user
&& message.body.user.firstName) || 'default';

const lastName = message?.body?.user?.firstName || 'default'

8、NULL判断运算符（ES2020）

读取对象属性时，往往属性的值为null或undefined的时候，为它指定默认值。通常我们使用||来指定默认值。
但是这种方法是错的，属性的值空字符串、false和0也会指定默认值。 ES2020使用新的NULL判断运算符，当属性值为null或undefined时才会获取默认值

avatar
文章
阅读
粉丝