h7ml
前端物语
前端物语
积微成著

JavaScript ES6 Object 对象

简写

对象简写

1const age = 12
2const name = 'Amy'
3const person = { age, name } // {age: 12, name: "Amy"}
4// 等同于 person = {age: age, name: name}

方法简写

1const person = {
2  sayHi() {
3    console.log('Hi')
4  },
5}
Generator 函数，要在前面加星号
1const obj = {
2  *myGenerator() {
3    yield 'hello world'
4  },
5}

属性名表达式

  • [变量]
1let a = 'aaa';
2let obj = {
3  [a]: 'bbb',
4};
5
6const obj = {
7  ['he' + 'llo']() {
8    return 'Hi';
9  },
10};
11obj.hello(); // "Hi"

合并对象

1const age = { age: 15 }
2const name = { name: 'Amy' }
3const person = { ...age, ...name } // {age: 15, name: "Amy"}

:::tip 注意如果两个对象有同名的属性会被覆盖（数组也是同理） :::

Object.assign()

1Object.assign(target, source_1, ···)

将后面所有可枚举的属性赋值到 target 对象中。重复的值会覆盖

1const target = { a: 1 }
2const object2 = { b: 2 }
3const object3 = { c: 3 }
4Object.assign(target, object2, object3) // {a: 1, b: 2, c: 3}
5// 第一个参数是目标对象，后面的参数是源对象

只有一个参数不是对象，也会转换为对象返回

1Object.assign(3) // Number {3}

第一个参数时 null 或 undefined 会报错

1Object.assign(null) // TypeError: Cannot ...

null 和 undefined 放第二个之后会跳过

1Object.assign(1, undefined) // Number {1}
2// 注意： assign 的属性拷贝是浅拷贝
3const sourceObj = { a: { b: 1 } }
4const targetObj = { c: 3 }
5Object.assign(targetObj, sourceObj)
6targetObj.a.b = 2 // 原始值修改
7sourceObj.a.b // 2 已经拷贝的值也会跟着变

同名属性会被替换

1targetObj = { a: { b: 1, c: 2 } }
2sourceObj = { a: { b: 'hh' } }
3Object.assign(targetObj, sourceObj) // {a: {b: "hh"}}

数组的处理

1Object.assign([2, 3], [5]) // [5,3] 下标0被覆盖

链判断运算符

1const firstName = message?.body?.user?.firstName || 'default'
2const fooValue = myForm.querySelector('input[name=foo]')?.value
3// 如果左侧的值为 null或undefined 则不再往下运算
4iterator.return?.() // 判断方法是否存在

三种用法

1a?.b
2// 等同于
3a == null ? undefined : a.b
4
5a?.[x]
6// 等同于
7a == null ? undefined : a[x]
8
9a?.b()
10// 等同于
11a == null ? undefined : a.b()
12
13a?.()
14// 等同于
15a == null ? undefined : a()