ECMAScript-对象的扩展

文章目录

一、对象的扩展1. 属性简洁表示法2. 属性名表达式3. Object.is()4. 扩展运算符 与 Object.assign()5. in6. 对象的遍历方式7. Objects.values()、 Objects.entries [ES8]8. Object.fromEntries【ES10】

一、对象的扩展

1. 属性简洁表示法

let name = 'zhangsan' let age = 19 let people = { name: name, // 当属性值和属性相同的时候，在es6中可以简写成一个 name age: age } // 等同于 let people = { name, age } console.log(people)

2. 属性名表达式

// 如果属性是变量 let name = 'zhangsan' let age = 19 let s = 'school' let people = { name, age, // school: '清华' [s]: '清华' // 属性值school是变量 } console.log(people) // 对象定义方法 let name = 'zhangsan' let age = 19 let people = { name, age, study: function(){ console.log(this.name) // zhangsan } // 或者简写 study(){ console.log(this.name) // zhangsan } // 对象中的方法不可使用箭头函数 study: () => { console.log(this.name) // undefined } } people.study()

3. Object.is()

// 判断值是否相等，严格型的 console.log(Object.is(2, '2')) // false // 下面是 === 无法判断的 console.log(Object.is(NaN, NaN)) // true console.log(Object.is(+0, -0)) // false let obj1 = { name: 'zhangsan', age: 15 } let obj2 = { name: 'zhangsan', age: 15 } console.log(obj1 == obj2) // false 判断是栈中的引用地址，所以是false Object.is(obj1, obj2) // fasle

4. 扩展运算符 与 Object.assign()

let x = { a: 3, b: 4 } let y = {...x} console.log(y) // {a: 3, b: 4} // Object.assign()用于合并对象 // 两个参数：第一个参数表示目标对象 第二个参数表示源对象 // 如果源对象的属性和目标对象的属性相同，源对象中属性的值，覆盖目标对象属性值 let y = {} Object.assign(y, x) // {a: 3, b: 4}

5. in

// 判断一个对象中是否包含一个属性 // 对象 let x = { a: 3, b: 4 } console.log('a' in x) // true // 数组 let arr = [1, 2, 3] console.log(3 in arr) // 这样并不是判断3是不是在数组中，只是判断数组下标为3是不是有值， 这边是false

6. 对象的遍历方式

let obj = { name: 'zhangsan', age: 15 } // 方式一： for (let key in obj) { console.log(key, obj[key]) } // 方式二： Object.keys(obj).forEach(key => { console.log(key, obj[key]) }) // 方式三 Object.getOwnPropertyNames(obj).forEach(key => { console.log(key, obj[key]) }) // 方式四 Reflect.ownKeys(obj).forEach(key => { console.log(key, obj[key]) })

7. Objects.values()、 Objects.entries [ES8]

// Objects.values() const obj = { name: 'zhangsan', age: 12, school: '清华' } // 以前去对象中的值 const res = Object.keys(obj).map( key => obj[key]) console.log(res) // ["zhangsan", 12, "清华"] // 现在 const res = Object.values(obj) console.log(res) // ["zhangsan", 12, "清华"] // Objects.entries 将对象的的key和value以数组的形式返回 for(let [key, value] of Object.entries(obj)) { console.log(`${key}: ${value}`) // name: zhangsan age: 12 school: 清华 } // Objects.entries中传数组，数组也是对象 console.log(Object.entries(['a','b'])) // ["0", "a"] ["1", "b"] 数组的下标就是key

8. Object.fromEntries【ES10】

Object.fromEntries实现了与Object.entries相反的操作。 // 以前一个对象属性 const obj1 = { name: 'zhangsan', age: 18, } const entries = Object.entries(obj1) console.log(entries) // 数组结构 [["name","zhangsan"],["age",18]] // 将数组结构的值转化成对象 const fromEntries = Object.fromEntries(entries) console.log(fromEntries) // {name: "zhangsan", age: 18} // 应用场景 // map -> 对象 const map = new Map() map.set('name', 'zhangsan') map.set('age', 20) console.log(map) const fromEntries = Object.fromEntries(map) console.log(fromEntries) // 找出课程大于60分的课程 const course = { math: 67, chinese: 80, english: 50 } const res = Object.entries(course).filter(([key, value]) => value > 60) const obj = Object.fromEntries(res); console.log(obj)