ES6之对象的扩展

作者 : 开心源码 本文共2628个字,预计阅读时间需要7分钟 发布时间: 2022-05-12 共237人阅读

JavaScript的世界,万物皆对象,ES6对对象有少量很大的更新。

属性简介表示:

允许直接写入变量和函数,属性名为变量名,属性值为变量值:

var a = 1;var b = 2;console.log({a, b})//{a: 1, b: 2}

方法简写应该就不用多说了:

getData(){}

使用exports的时候我们就经常用:

var a = function(){}var b = function(){}module.exports = {    a: a,    b: b}

等同于:

module.exports = {a, b}

属性名:

对象使用字面量方式定义属性只有一种方法:

var obj = {    a: 1}

ES6支持表达式作为对象的属性名:

var a = 'test';var obj = {    [a]: 1}console.log(obj);//{test: 1}

函数name属性在函数扩展说过了,对象的函数现在也有name属性。

属性可枚举和遍历:

对象有一个形容对象,通过Object.getOwnPropertyDescriptor方法可以获取:

var obj = {    a: 1}console.log(Object.getOwnPropertyDescriptor(obj, 'a'));//{value: 1, writable: true, enumerable: true, configurable: true}

enumberable是可枚举属性,假如是false,某些操作就会忽略当前的属性:

var obj = {    a: 1,    b: 2}Object.defineProperty(obj, 'a', {    enumerable: false})for(let val in obj){    console.log(val);//b}

目前有四个方法会把不可枚举的忽略:

for…in循环、Object.keys()、JSON.stringify()、Object.assign()这四个方法都会不遍历不可枚举的属性。前三个是ES5的,最后一个是ES6的。

可枚举属性就是为了让某些属性可以不被枚举,比方length、toString等,我们是希望不被循环出来的。ES6的Class原型的方法都是不可枚举的。

遍历对象属性键名有五种方法:

For in不含symbol

Object.keys()返回数组,不包含symbol

Object.getOwnPropertyNames()返回数组,不可枚举的也包括,不包括symbol

Object.getOwnPropertySymbols()返回数组,所有symbol的键名。

Reflect.ownKeys()返回数组,包括所有的键名,不论可枚举不可枚举。

super关键字,这边说一下,JavaScript引擎现在只能识别对象方法的简写定义的是对象方法:

var obj = {    test() {    }}

super关键字只能用在对象方法中,指向当前对象的原型对象,但只是当前对象,this的指向是不变的:

var proto = {    a: 'a',    b: 'a'};var obj = {    a: 'b',    b: 'b',    test() {        console.log(this.b);//b        return super.a;    }};Object.setPrototypeOf(obj, proto);console.log(obj.test()); // "a"

扩展运算符和结构赋值,之前有说过,这边就分享几个点:

解构赋值是浅拷贝

扩展运算符的解构不能复制原型的属性

var o = Object.create({ x: 1, y: 2 });o.z = 3;let { x, ...newObj } = o;console.log(newObj);//{z: 3}

ES6对对象新添加了很多方法:

Object.is()跟严格相等(===)一样,多加了两个不同,+0不等于-0和NAN等于NAN。

console.log(+0 === -0); //trueconsole.log(NaN === NaN); // falseconsole.log(Object.is(+0, -0)); // falseconsole.log(Object.is(NaN, NaN)); // true

Object.assign,我觉得这个方法不用多详情,就是合并对象到第一个参数。需要注意的是,参数放后面的,假如属性相同,会被后面的覆盖。

Undefined和null当做首参数会报错,不是对象的会转成对象返回,非对象的参数不在第一个,不能转成对象就会跳过。布尔值和数字也会跳过。且只会拷贝可枚举的自身属性。

assign方法是浅拷贝,函数是无法复制的。

ES2017引入Object.getOwnPropertyDescriptors(),返回所有对象属性的形容:

const obj = {    foo: 'world',    find() {        return super.foo;    }};console.log(Object.getOwnPropertyDescriptors(obj));find:  configurable: true  enumerable: true  value: ? find()  writable: truefoo:  configurable: true  enumerable: true  value: "world"  writable: true

ES2015的Object.getOwnPropertyDescriptor()是获取某一个。

Object.setPrototypeOf()(写操作)

Object.getPrototypeOf()(读操作)

Object.create()(生成操作)

这三个方法都是对原型的操作,比方set就是改变原型的指向:

var proto = {};var obj = { a: 1 };Object.setPrototypeOf(obj, proto);proto.b = 20;console.log(obj.b);//20

Obj的原型指向了proto。

ES5的Object.keys(),ES2017的Object.values(),Object.entries(),这三个方法都是返回数组,一个是键值,一个是属性值,一个是键值对。包含可枚举且不是symbol的自身属性。

Object.fromEntries()是Object.entries()的逆操作,把键值对的数组变成对象:

console.log(Object.fromEntries([    ['a', 'a'],    ['b', 'b']]));//{a: "a", b: "b"}

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » ES6之对象的扩展

发表回复