es6新增对象实用方法

发布网友 发布时间：2024-10-20 13:37

我来回答

共1个回答

热心网友 时间：2024-12-01 06:59

一、属性的简写

ES6中，当对象键名与对应值名相等的时候，可以进行简写

constbaz={foo:foo}//等同于constbaz={foo}

方法也能够进行简写

consto={method(){return"Hello!";}};//等同于consto={method:function(){return"Hello!";}}

在函数内作为返回值，也会变得方便很多

functiongetPoint(){constx=1;consty=10;return{x,y};}getPoint()//{x:1,y:10}

注意：简写的对象方法不能用作构造函数，否则会报错

constobj={f(){this.foo='bar';}};newobj.f()//报错二、属性名表达式

ES6允许字面量定义对象时，将表达式放在括号内

letlastWord='lastword';consta={'firstword':'hello',[lastWord]:'world'};a['firstword']//"hello"a[lastWord]//"world"a['lastword']//"world"

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

letobj={['h'+'ello'](){return'hi';}};obj.hello()//hi

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

//报错constfoo='bar';constbar='abc';constbaz={[foo]};//正确constfoo='bar';constbaz={[foo]:'abc'};

注意，属性名表达式如果是一个对象，默认情况下会自动将对象转为字符串[objectObject]

constkeyA={a:1};constkeyB={b:2};constmyObject={[keyA]:'valueA',[keyB]:'valueB'};myObject//Object{[objectObject]:"valueB"}三、super关键字

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

constproto={foo:'hello'};constobj={foo:'world',find(){returnsuper.foo;}};Object.setPrototypeOf(obj,proto);//为obj设置原型对象obj.find()//"hello"四、扩展运算符的应用

在解构赋值中，未被读取的可遍历的属性，分配到指定的对象上面

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

注意：解构赋值必须是最后一个参数，否则会报错

解构赋值是浅拷贝

consto={method(){return"Hello!";}};//等同于consto={method:function(){return"Hello!";}}0

对象的扩展运算符等同于使用Object.assign()方法

五、属性的遍历

ES6一共有5种方法可以遍历对象的属性。

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

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

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

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

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

上述遍历，都遵守同样的属性遍历的次序规则：

首先遍历所有数值键，按照数值升序排列

其次遍历所有字符串键，按照加入时间升序排列

最后遍历所有Symbol键，按照加入时间升序排

consto={method(){return"Hello!";}};//等同于consto={method:function(){return"Hello!";}}1六、对象新增的方法

关于对象新增的方法，分别有以下：

Object.is()

Object.assign()

Object.getOwnPropertyDescriptors()

Object.setPrototypeOf()，Object.getPrototypeOf()

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

Object.fromEntries()

Object.is()

严格判断两个值是否相等，与严格比较运算符（===）的行为基本一致，不同之处只有两个：一是+0不等于-0，二是NaN等于自身

consto={method(){return"Hello!";}};//等同于consto={method:function(){return"Hello!";}}2Object.assign()

Object.assign()方法用于对象的合并，将源对象source的所有可枚举属性，复制到目标对象target

Object.assign()方法的第一个参数是目标对象，后面的参数都是源对象

consto={method(){return"Hello!";}};//等同于consto={method:function(){return"Hello!";}}3

注意：Object.assign()方法是浅拷贝，遇到同名属性会进行替换

Object.getOwnPropertyDescriptors()

返回指定对象所有自身属性（非继承属性）的描述对象

consto={method(){return"Hello!";}};//等同于consto={method:function(){return"Hello!";}}4Object.setPrototypeOf()

Object.setPrototypeOf方法用来设置一个对象的原型对象

consto={method(){return"Hello!";}};//等同于consto={method:function(){return"Hello!";}}5Object.getPrototypeOf()

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

consto={method(){return"Hello!";}};//等同于consto={method:function(){return"Hello!";}}6Object.keys()

返回自身的（不含继承的）所有可遍历（enumerable）属性的键名的数组

consto={method(){return"Hello!";}};//等同于consto={method:function(){return"Hello!";}}7Object.values()

返回自身的（不含继承的）所有可遍历（enumerable）属性的键对应值的数组

consto={method(){return"Hello!";}};//等同于consto={method:function(){return"Hello!";}}8Object.entries()

返回一个对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对的数组

consto={method(){return"Hello!";}};//等同于consto={method:function(){return"Hello!";}}9Object.fromEntries()

用于将一个键值对数组转为对象

functiongetPoint(){constx=1;consty=10;return{x,y};}getPoint()//{x:1,y:10}0原文：https://juejin.cn/post/7102966897708105736