es6对象判断是否有某个属性 es6对象方法

转载

mob6454cc769a22 2024-04-18 23:49:50

文章标签 es6对象判断是否有某个属性运算符数组 bc 文章分类 架构后端开发

属性的简洁表示法

const foo = 'bar'
const baz = {foo} // 等同于{foo:foo}
function getPoint(){
    const x = 1
    const y = 10
    return {x,y}
}
getPoint() // {x:1,y:10}
const foo = 'bar'
const baz = {foo} // 等同于{foo:foo}
function getPoint(){
    const x = 1
    const y = 10
    return {x,y}
}
getPoint() // {x:1,y:10}

属性名表达式

// 定义对象的两种方法
obj.foo = true // 标识符作为属性名
obj['a'+'bc'] = 123 // 表达式作为属性名
// ES6支持使用字面量方式定义对象的时候使用表达式作为对象的属性名
let propKey = 'foo'
let obj = {
  [propKey]: true,
  ['a'+'bc']: 123
}
// 定义对象的两种方法
obj.foo = true // 标识符作为属性名
obj['a'+'bc'] = 123 // 表达式作为属性名
// ES6支持使用字面量方式定义对象的时候使用表达式作为对象的属性名
let propKey = 'foo'
let obj = {
  [propKey]: true,
  ['a'+'bc']: 123
}

Object.is()

用来比较两个值是否严格相等，与运算符（===）基本一致，不同之处在于：+0 不等于-0 ，NaN 等于自身

Object.is(+0,-0) // false
Object.is(NaN,NaN) // true
Object.is(+0,-0) // false
Object.is(NaN,NaN) // true

Object.assign()

用于对象的合并，将源对象的所有可枚举属性，复制到目标对象

const target = {a:1}
const source1 = {b:2}
const source2 = {c:3}
Object.assign(target,source1,source2)
target // {a:1,b:2,c:3}
typeof Object.assign(2) // 'object' 如果参数不是对象则会转成对象并返回
// undefined和null无法转成对象，直接报错
Object.assign(undefined) // 报错
Object.assign(null) // 报错
let obj = {a:1}
// 若是非源对象位置，则会跳过，不会报错
Object.assign(obj,undefined) === obj // true
Object.assign(obj,null) === obj // true
const target = {a:1}
const source1 = {b:2}
const source2 = {c:3}
Object.assign(target,source1,source2)
target // {a:1,b:2,c:3}
typeof Object.assign(2) // 'object' 如果参数不是对象则会转成对象并返回
// undefined和null无法转成对象，直接报错
Object.assign(undefined) // 报错
Object.assign(null) // 报错
let obj = {a:1}
// 若是非源对象位置，则会跳过，不会报错
Object.assign(obj,undefined) === obj // true
Object.assign(obj,null) === obj // true

常见用途

// 为对象添加属性
class Point {
  constructor(x,y){
    Object.assign(this,{x,y})
  }
}
// 为对象添加方法
Object.assign(SomeClass.prototype,{
    someMethod(arg1,arg2){...}
})
// 克隆对象
function clone(origin){
  return Object.assign({},origin)
}
// 合并多个对象
const merge = (target,...sources) => Object.assign(target,...sources)
// 为属性指定默认值
const DEFAULTS = {
  logLevel: 0,
  outputFormat: 'html'
}
function processContent(options){
  options.Object.assign({},DEFUALTS,options) // 用户提供参数options覆盖DEFAULTS中同名参数的属性值
}
// 为对象添加属性
class Point {
  constructor(x,y){
    Object.assign(this,{x,y})
  }
}
// 为对象添加方法
Object.assign(SomeClass.prototype,{
    someMethod(arg1,arg2){...}
})
// 克隆对象
function clone(origin){
  return Object.assign({},origin)
}
// 合并多个对象
const merge = (target,...sources) => Object.assign(target,...sources)
// 为属性指定默认值
const DEFAULTS = {
  logLevel: 0,
  outputFormat: 'html'
}
function processContent(options){
  options.Object.assign({},DEFUALTS,options) // 用户提供参数options覆盖DEFAULTS中同名参数的属性值
}

Object.setPrototypeOf()

用来设置一个对象的prototype对象，返回参数对象本身

Object.setPrototypeOf(object,prototype) // 格式

let proto = {}
let obj = {x: 10}
Object.setPrototypeOf(obj,proto)

proto.y = 20
proto.z = 40

obj.x // 10
obj.y // 20
obj.z // 40
Object.setPrototypeOf(object,prototype) // 格式

let proto = {}
let obj = {x: 10}
Object.setPrototypeOf(obj,proto)

proto.y = 20
proto.z = 40

obj.x // 10
obj.y // 20
obj.z // 40

Object.getPrototypeOf()

与Object.setPrototypeOf方法配套，用于读取一个对象的原型对象

Object.getPrototypeOf(obj) // 格式
Object.getPrototypeOf(obj) // 格式

super关键字

this关键字总是指向函数所在的当前对象，ES6新增的关键字super指向当前对象的原型对象

const proto = {
  x: 'hello',
  foo(){
    console.log(this.x)
  }
}

const obj = {
  x: 'world',
  foo(){
    super.foo()
  }
}

Object.setPrototypeOf(obj,proto)
obj.foo() // 'world'
const proto = {
  x: 'hello',
  foo(){
    console.log(this.x)
  }
}

const obj = {
  x: 'world',
  foo(){
    super.foo()
  }
}

Object.setPrototypeOf(obj,proto)
obj.foo() // 'world'

Object.keys()

ES5中引入的Object.keys方法，返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名

var obj = {foo:'bar',baz:412}
Object.keys(obj) // ['foo','baz']
var obj = {foo:'bar',baz:412}
Object.keys(obj) // ['foo','baz']

Object.values()

Object.values方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值

const obj = {foo: 'bar',baz:42}
Object.values(obj) // ['bar',42]
const obj = {foo: 'bar',baz:42}
Object.values(obj) // ['bar',42]

Object.entries()

Object.entries方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组

const obj = {foo:'bar',baz:42}
Object.entries(obj) // [['foo','bar'],['baz',42]]
const obj = {foo:'bar',baz:42}
Object.entries(obj) // [['foo','bar'],['baz',42]]

对象的拓展运算符

ES2017 将...拓展运算符引入了对象

Null 传导运算符

读取对象内部某个属性时，往往要判断该对象是否存在该属性。

// 安全写法
const firstName = (message && message.body && message.body.user && message.body.user.firstName) || 'default'
// 引入传导运算符写法
const firstName = message?.body?.user?.firstName || 'default'
// 上面三个? 只要其中一个返回null或undefined 就不再继续运算 返回undefined
// 安全写法
const firstName = (message && message.body && message.body.user && message.body.user.firstName) || 'default'
// 引入传导运算符写法
const firstName = message?.body?.user?.firstName || 'default'
// 上面三个? 只要其中一个返回null或undefined 就不再继续运算 返回undefined

Null传导运算符的四种写法