# JavaScript ES6 Object 对象

# 简写

# 对象简写

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

# 方法简写

const person = {
 sayHi(){
  console.log("Hi");
 }
}
1
2
3
4
5

Generator 函数,要在前面加星号

const obj = {
 * myGenerator() {
  yield 'hello world';
 }
};
1
2
3
4
5

# 属性名表达式

  • [变量]
let a="aaa";
let obj={
  [a]: "bbb"
}

const obj = {
 ["he"+"llo"](){
  return "Hi";
 }
}
obj.hello(); // "Hi"
1
2
3
4
5
6
7
8
9
10
11

# 合并对象

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

注意

如果两个对象有同名的属性会被覆盖(数组也是同理)

# Object.assign()

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

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

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

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

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

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

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

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

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

同名属性会被替换

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

数组的处理

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

# 链判断运算符

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

# 三种用法

a?.b
// 等同于
a == null ? undefined : a.b

a?.[x]
// 等同于
a == null ? undefined : a[x]

a?.b()
// 等同于
a == null ? undefined : a.b()

a?.()
// 等同于
a == null ? undefined : a()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
最后更新时间: 2021年9月23日 18:09:31