ES6对象扩展

来源:互联网 发布:为什么淘宝链接打不开 编辑:程序博客网 时间:2024/04/30 10:22

ES6对象扩展

对象简写

ES6允许属性和方法名简写方式。
属性名的简写即只书写属性名,属性值则为与属性名同名的变量值。
方法简写即是省略function关键字。

属性简写

let name="es6"let descript="es6 test"let esayObj = {name,descript}console.log(esayObj)//Object {name: "es6", descript: "es6 test"}//相当于如下写法:let name="es6"let descript="es6 test"let esayObj = {    name:name,  //上面的写法省略了属性赋值操作,在对象的解构中会自动为属性名赋值为相同名称的变量值    descript:descript}console.log(esayObj)//Object {name: "es6", descript: "es6 test"}


方法简写

let functionTest = {    sayHi(){        console.log("Hi function!")    }}functionTest.sayHi()//相当于如下结构let functionTest = {    sayHi:function(){        console.log("Hi function!")    }}functionTest.sayHi()


属性名表达式

ES6对象的属性名支持表达式表式,而ES5只能支持字面量,使用表达式表式的时候需要使用[]将表达式包裹起来。

let propKey = 'foo';let obj = {  [propKey]: true,  ['a' + 'bc']: 123};console.log(obj)//Object {foo: true, abc: 123}


Object.is()

ES5比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===)。它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0。JavaScript缺乏一种运算,在所有环境中,只要两个值是一样的,它们就应该相等。

ES6提出“Same-value equality”(同值相等)算法,用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致。

Object.is('foo', 'foo')//true

Object.assign(targetObj,…sourceObj)

Object.assign方法用于合并对象,将源对象中所有可枚举的属性合并到目标对象中。

需注意的是:

  • 相同属性名的值会被后面的源对象给覆盖掉
  • 如果没有源对象,则直接返回目标对象
  • 传入的参数都会被转换成Object对象,源对象如果转换错误则跳过该源对象,目标对象转换错误则报错。
  • Object.assign实行的是浅拷贝,只拷贝了源对象的引用,即合并后目标对象的任何该表,在源对象上也会改变。
  • Object.assign只拷贝源对象自身的属性,而不拷贝继承属性。
let sourceObj1 = {    name:"source1",    sayHi(){        console.log("Hi!")    }}let sourceObj2 = {    name:"source2",    sayHello(){        console.log("Hello!")    }}let targetObj = Object.assign({},sourceObj1,sourceObj2)console.log(targetObj.name)//source2targetObj.sayHi()          //Hi!targetObj.sayHello()       //Hello


扩展运算符

ES6引入了...作为扩展运算符。它主要作用是解构匹配尚未被读取的数据。

let [a,b,...c] = [1,2,3,4,5,6,7]console.log(c)


NULL传导运算符

在实际应用中,我们要使用某个对象的属性,往往会先判断这个对象是否存在,如果这个对象的属性存在的层次比较深,那么我们就必须逐级判断,例如:

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


ES6中提出了一个更简单的写法?.,这就是null传导符,上面的例子可以简化为:

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


其他对象方法

Object.getOwnPropertyDescriptor(obj,prop):获取对象指定属性的描述信息
Object.keys(obj):获取对象属性名称的集合
Object.values(obj):获取对象属性值的集合
Object.entries(obj):获取对象属性名和属性值的键值对集合
Object.getOwnPropertyNames:返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性)
Object.getOwnPropertySymbols:返回一个数组,包含对象自身的所有Symbol属性
Object.setPrototypeOf(object, prototype):用来设置一个对象的prototype对象,返回参数对象本身
Object.getPrototypeOf(obj):用于获取对象的prototype对象
Object.getOwnPropertyDescriptors(obj):返回指定对象所有自身属性(非继承属性)的描述对象