ECMAScript-对象的扩展

一、对象的扩展

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)