ES6对象扩展

2018-12-04  本文已影响0人  一个写前端的姑娘

属性的简洁表示

let a = 12
let b = 13
let func = function() {...}
let obj = {a, b, func}  // {a: 12, b: 13, func: function(){...}}

属性名表达式

let key = 'keyName'
let obj = {
  ['a' + 'b']: 12,
  [key]: 13,
  ['c' + 'd']() {...},  // 属性表达式也可以作为方法名
}
console.log(obj)  // {ab: 12, keyName: 13, cd: function(){}}

Object.is()

NaN === NaN // false
Object.is(NaN, NaN)  // true
+0 === -0 // true
Object.is(+0, -0)  // false
Object.is({}, {})  // false  注意这一点

Object.assign()

let obj = {
  a: 1,
  b: 2
}
let obj2 = Object.assign({}, obj)
obj.c = 3
console.log(obj, obj2) //{a: 1, b: 2, c: 3}    {a: 1, b: 2}

属性的遍历

let obj = {
  a: 1,
  b:2
}
Object.defineProperty(obj, 'no_enum', {
  enumerable:false,
  value: '不可枚举类型'
})
for (let key in obj) {
  console.log(key)
}  // a   b
let obj = {
  a: 1,
  b:2
}
Object.defineProperty(obj, 'no_enum', {
  enumerable:false,
  value: '不可枚举类型'
})
for (let key of Object.keys(obj)) {
  console.log(key)
}   //  a    b
let obj = {
  a: 1,
  b: 2
}
Object.defineProperty(obj, 'no_enum', {
  enumerable:false,
  value: '不可枚举类型'
})
for (let key of Object.getOwnPropertyNames(obj)) {
  console.log(key)
}   //  a    b   no_enum

对象的遍历Object.keys()、Object.values()、Object.entries()

let obj = {
  a: 1,
  b: 2
}
Object.defineProperty(obj, 'no_enum', {
  enumerable:false,
  value: '不可枚举类型'
})
for (let value of Object.values(obj)) {
  console.log(value)
}   //  1   2
let obj = {
  a: 1,
  b: 2
}
Object.defineProperty(obj, 'no_enum', {
  enumerable:false,
  value: '不可枚举类型'
})
for (let [key, value] of Object.entries(obj)) {
  console.log(`${key}:${value}`)
}   //  a:1  b:2

对象的扩展运算符

let {a, ...b} = {a: 1, b: 2, c: 3}
console.log(a, b)  // 1 , {b: 2, c: 3}
let {a, ...b} = null  // 报错,解构赋值右边不能是null或者undefined,只能是一个对象
let {...a, b} = {a: 1, b: 2}  // 报错,因为解构赋值必须是最后一个参数
let obj = {a: 1, b: 2, c:3}
let obj2 = {...obj}
obj.d = 4
console.log(obj, obj2)  //{a: 1, b: 2, c: 3, d: 4}   ,   {a: 1, b: 2, c: 3}

Null传导符 ?.

//  es5写法
let message = (res && res.data && res.data.info && res.data.info.message) || 'error'
// es6写法
let message = res?.data?.info?.message || 'error'

感谢您的view,留个赞再走呗

上一篇 下一篇

猜你喜欢

热点阅读