ES6知识之对象

简介: ES6知识之对象

属性的简写

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


const obj = { foo: foo }

// 等同于

const obj = { foo }


方法的简写

const obj = {

sayHai: function() {

 return '渣渣辉'

}

}

// 等同于

const obj = {

sayHai() {

 return '渣渣辉'

}

}


属性名表达式

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


let str = '渣渣辉'

const obj = {

'say hai': 'hello',

[str]: 'world'

}

console.log(obj['say hai']) // hello

console.log(obj[str]) // world

console.log(obj['渣渣辉']) // world


表达式还可以定义方法名


const obj = {

['say'+'hai'](){

 return '渣渣辉'

}

}

obj.sayhai() // 渣渣辉


扩展运算符

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


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

console.log(x) // 1

console.log(y) // 2

console.log(z) // {a: 3, b: 4}


方法

Object.is()

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


+0 === -0 // true

NaN === NaN // false

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

Object.is(NaN, NaN) // true


Object.assign()

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


const target = { a: 1, b: 2}

const source1 = { c: '渣'}

const source2 = { d: '渣'}

Object.assign(target,source1,source2) // {a: 1, b: 2, c: '渣', d: '渣'}


Object.getOwnPropertyDescriptors()

const obj = {

foo: 123,

bar() { return '渣渣辉' }

}

Object.getOwnPropertyDescriptors(obj)


Object.keys()

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


const obj = { a: '渣', b: '渣', c: '辉'}

Object.keys(obj) // ['a', 'b', 'c']


Object.values()

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


const obj = { a: '渣', b: '渣', c: '辉' }

Object.values(obj) // ['渣', '渣', '辉']


Object.entries()

返回自身的(不含继承)的所有可遍历属性的键值对的数组


const obj = { a: '渣', b: '渣', c: '辉' }

Object.entries(obj)




Object.fromEntries()

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


const arr = [['a', '渣'], ['b', '渣']]

Object.fromEntries(arr) // {a: '渣', b: '渣'}


目录
相关文章
|
6月前
|
JavaScript
es5和es6的区别
es5和es6的区别
55 0
|
6月前
|
存储 JavaScript 前端开发
|
6月前
|
前端开发
es6的一些方法
es6的一些方法
33 0
|
6月前
ES5、ES6类的定义
ES5和ES6都支持类的定义,但ES6引入了更简洁的语法。在ES5中,类是函数,方法绑定在原型上;而ES6使用`class`关键字,构造方法为`constructor`,方法直接定义在类内。ES6的类继承使用`extends`关键字,子类需调用`super`初始化父类属性。示例展示了Person类及其Student子类的定义和方法调用。
37 1
|
6月前
ES6学习之对象
ES6学习之对象
|
6月前
|
前端开发 JavaScript API
ES6和ES5的区别
ES6和ES5的区别
47 0
|
6月前
es6学习笔记(三)对象
es6学习笔记(三)对象