登录
原创

ES6-对象的扩展

发布于 2021-10-13 阅读 20
  • 前端
  • ECMAScript 6
原创

属性简介表示法

如果对象中,属性值是变量,而且变量名和属性名一致,那么可以不写键值对形式,省略冒号和后面的名称

eg.

let uname = '史迪仔'
let age = 2

let obj = {
    uname: uname,
    age: age,
}

console.log(obj)

相当于:

let uname = '史迪仔'
let age = 2

let obj = {
    uname,
    age,
}

console.log(obj)

打印结果:

image.png

属性名表达式

如果对象中,属性名称是一个变量,则将属性名称用 “[]” 中括号包裹起来

let s = 'address'

let obj = {
    uname: '蓝胖子',
    age: '3',
    [s]: '蓝色星球'
}

console.log(obj)

打印结果:

image.png

Object.is():判断数据是否全等

比较两个数据是否全等,全等返回 true, 不全等返回 false

eg:

let a = 9
let b = '9'
console.log(Object.is(a, b))
let a1 = 8
let b1 = 8
console.log(Object.is(a1, b1))

console.log(Object.is(NaN, NaN))
console.log(Object.is(NaN === NaN))

console.log(Object.is('', null))

console.log(Object.is('', 0))

let x = {
    uname: '彭彭',
    weight: '220磅'
}

let y = {
    uname: '彭彭',
    weight: '220磅'
}

console.log(Object.is(x, y))

let x1 = x
console.log(Object.is(x, x1))

打印结果:

image.png

注意:

  1. Object.is()判断两个NaN是否全等时,返回的 true,但是 === 判断时,返回 false
  2. 创建新的对象- - -产生新的对象地址
    创建一个新的变量,然后将一个对象赋值给改变量- - -将旧对象地址赋值给改变量,不会产生新的对象地址
    比较两个对象是否相等,比较的是它们的地址值,所以就算创建的两个对象数据一样,比较时也是不相等,如果是赋值给另一个变量,然后比较,则相等

扩展运算符和 object.assign()

对象扩展运算符和数组的形式一样: …对象名

可以用于对象赋值,将一个对象的属性和属性值依次赋值给另一个变量

eg:

let x = {
    uname: '彭彭',
    weight: '220磅'
}

let y = {...x}
console.log(y)

打印结果:

image.png

实现上面这种效果也可以使用 object.assign() 合并数组:

object.assign(要合并到的数组, 要合并的数组)- - -将后面一个数组合并到前面一个数组中

let x = {
    uname: '彭彭',
    weight: '220磅'
}

let z = {}
console.log(Object.assign(z, x))

打印结果:

image.png

如果有属性重复的,后面的属性会覆盖前面的:

let x = {
    uname: '彭彭',
    weight: '220磅',
    age: 2
}

let m = {
    friend: '丁满',
    age: 3
}
console.log(Object.assign(m, x))

打印结果:

image.png

in

in 可以用于查找对象中是否存在某一属性

属性名 in 对象名

如果该对象中有该属性,则返回 true,否则返回 false

索引 in 数组名

in 用在数组中,可以查找该索引的位置是否有值, 有值返回 true,没有返回 false

示例:

/ 5. in 该属性是否存在于对象中
let m = {
    uname: '丁满',
    age: 3
}

console.log('height' in m)
console.log('uname' in m)

// in 用在数组中, 该索引的位置是否有值
let arr = ['苹果', '梨', '榴莲', '芒果']
console.log(3 in arr)
console.log(6 in arr)

打印结果:

image.png

对象的遍历方式

  1. for in
  2. Object.keys(obj).forEach()
  3. Object.getOwnPropertyNames(obj).forEach()
  4. Reflect.ownKeys(obj).forEach()

示例:

let obj = {
    uname: '史迪仔',
    age: 3,
    height: 100,
    address: 'Ohaha'
}
// 1. for in
for (let key in obj) {
    console.log(key + '- - - ' + obj[key])
}

// 2. Object.keys().forEach()
Object.keys(obj).forEach(key => {
    console.log(key + ': ' + obj[key])
})

// 3. Object.getOwnPropertyNames().forEach()
Object.getOwnPropertyNames(obj).forEach(key => {
    console.log(key + '*** ' + obj[key])
})

// 4. Reflect.ownkeys(obj).forEach()
Reflect.ownKeys(obj).forEach(key => {
    console.log(key + '- - - ' + obj[key])
})

打印结果:

image.png

评论区

零00
5粉丝

时光荏苒,我自清欢

0

0

0

举报