Vivien's Notebook

对象的扩展

2024/1/31 JavaScript

# 属性的简洁表示法

​ ES6允许在大括号里面直接写入变量和函数作为对象的属性和方法。

​ 注意，简写的对象方法不能用作构造函数，会报错。

let birth = '2000/01/01';
const Person = {
  name: '张三',
  //等同于birth: birth
  birth,
  // 等同于hello: function ()...
  hello() { console.log('我的名字是', this.name); }
};
//f是一个简写的对象方法，所以obj.f不能当作构造函数使用
const obj = {
  f() {
    this.foo = 'bar';
  }
};
new obj.f() // 报错
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 属性名表达式

​ JavaScript 定义对象的属性有两种方法：

  • 方法一：直接用标识符作为属性名，
  • 方法二：用表达式作为属性名，这时要将表达式放在方括号之内。

​ 但是如果使用字面量方式定义对象(使用大括号)，在ES5中只能使用方法一(标识符)定义属性。ES6允许字面量定义对象时，用方法二(表达式)作为对象的属性名，即把表达式放在方括号内。

obj.foo = true; // 方法一 直接用标识符作为属性名
obj['a' + 'bc'] = 123; // 方法二 用表达式作为属性名
let propKey = 'foo';
let obj = {
  [propKey]: true,
  ['a' + 'bc']: 123
};
let lastWord = 'last word';
const a = {
  'first word': 'hello',
  [lastWord]: 'world'
};
a['first word'] // "hello"
a[lastWord] // "world"
a['last word'] // "world"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

​ 表达式还可以用于定义方法名。

let obj = {
  ['h' + 'ello']() {
    return 'hi';
  }
};
obj.hello() // hi
1
2
3
4
5
6

​ 注意，属性名表达式与简洁表示法不能同时使用，会报错。属性名表达式如果是一个对象，默认情况下会自动将对象转为字符串[object Object]，这一点要特别小心。

const keyA = {a: 1};
const keyB = {b: 2};
const myObject = {
  [keyA]: 'valueA',
  [keyB]: 'valueB'
};
myObject // Object {[object Object]: "valueB"}
//[keyA]和[keyB]得到的都是[object Object]，所以[keyB]会把[keyA]覆盖掉，而myObject最后只有一个[object Object]属性。
1
2
3
4
5
6
7
8

# 方法的 name 属性

​ 函数的name属性返回函数名。对象方法也是函数，因此也有name属性。

​ 如果对象的方法使用了取值函数（getter）和存值函数（setter），则name属性不是在该方法上面，而是该方法的属性的描述对象的get和set属性上面，返回值是方法名前加上get和set。

​ 有两种特殊情况：bind方法创造的函数，name属性返回bound加上原函数的名字；Function构造函数创造的函数，name属性返回anonymous。

​ 如果对象的方法是一个Symbol值，那么name属性返回的是这个Symbol值的描述。

# 属性的可枚举性和遍历

​ 可枚举性是指一个对象的属性是否可以被枚举，即是否可以通过循环或内置方法(如Object.keys())来获取该对象的所有属性。

​ 对象的每个属性都有一个描述对象，用来控制该属性的行为。Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。描述对象的enumerable属性称为可枚举性，如果该属性为false，就表示某些操作会忽略当前属性。目前，有四个操作会忽略enumerable为false的属性：

  • for...in循环：只遍历对象自身的和继承的可枚举的属性。
  • Object.keys()：返回对象自身的所有可枚举的属性的键名。
  • JSON.stringify()：只串行化对象自身的可枚举的属性。
  • Object.assign()： 忽略enumerable为false的属性，只拷贝对象自身的可枚举的属性。

​ 其中，只有for...in会返回继承的属性，其他三个方法都会忽略继承的属性，只处理对象自身的属性。实际上，引入可枚举这个概念的最初目的，就是让某些属性可以规避掉for...in操作，不然所有内部属性和方法都会被遍历到。比如，对象原型的toString方法，以及数组的length属性，就通过可枚举性避免被for...in遍历到。

​ ES6规定，所有Class的原型的方法都是不可枚举的。总的来说，操作中引入继承的属性会让问题复杂化，大多数时候，我们只关心对象自身的属性。所以尽量不要用for...in循环，而用Object.keys()代替。

# 属性的遍历

​ ES6 一共有 5 种方法可以遍历对象的属性：

（1）for…in：循环遍历对象自身的和继承的可枚举属性(不含Symbol属性)。

（2）Object.keys(obj)：返回一个数组，包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性)的键名。

（3）Object.getOwnPropertyNames(obj)：返回一个数组，包含对象自身的所有属性(不含Symbol属性，但是包括不可枚举属性)的键名。

（4）Object.getOwnPropertySymbols(obj)：返回一个数组，包含对象自身的所有Symbol属性的键名。

（5）Reflect.ownKeys(obj)：返回一个数组，包含对象自身的(不含继承的)所有键名，不管键名是Symbol或字符串，也不管是否可枚举。

​ 以上的 5 种方法遍历对象的键名，都遵守同样的属性遍历的次序规则。

  • 首先遍历所有数值键，按照数值升序排列。
  • 其次遍历所有字符串键，按照加入时间升序排列。
  • 最后遍历所有Symbol键，按照加入时间升序排列。

# super 关键字

​ 指向当前对象的原型对象。注意，super关键字表示原型对象时，只能用在对象的方法之中，用在其他地方都会报错。

# 对象的扩展运算符

# 解构赋值

​ 对象的解构赋值用于从一个对象取值，相当于将目标对象自身的所有可遍历的、但尚未被读取的属性，分配到指定的对象上面。所有的键和它们的值，都会拷贝到新对象上面。

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 } 获取等号右边的所有尚未读取的键(a和b)，将它们连同值一起拷贝过来
1
2
3
4

​ 由于解构赋值要求等号右边是一个对象，所以如果等号右边是undefined或null，就会报错，因为它们无法转为对象。

​ 解构赋值必须是最后一个参数，否则会报错。

​ 注意，解构赋值的拷贝是浅拷贝，即如果一个键的值是复合类型的值（数组、对象、函数）、那么解构赋值拷贝的是这个值的引用，而不是这个值的副本。

​ 扩展运算符的解构赋值，不能复制继承自原型对象的属性。

​ ES6规定，变量声明语句之中，如果使用解构赋值，扩展运算符后面必须是一个变量名，而不能是一个解构赋值表达式。

​ 解构赋值的一个用处，是扩展某个函数的参数，引入其他操作。

# 扩展运算符

​ 对象的扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。

let z = { a: 3, b: 4 };
let n = { ...z };
n // { a: 3, b: 4 }
1
2
3

​ 由于数组是特殊的对象，所以对象的扩展运算符也可以用于数组。如果扩展运算符后面是一个空对象，则没有任何效果。

​ 如果扩展运算符后面不是对象，则会自动将其转为对象。但是如果扩展运算符后面是字符串，它会自动转成一个类似数组的对象，因此返回的不是空对象。

​ 对象的扩展运算符等同于使用Object.assign()方法。

let aClone = { ...a };
// 等同于
let aClone = Object.assign({}, a);
//上面的例子只是拷贝了对象实例的属性，想完整克隆一个对象，还拷贝对象原型的属性，可以采用下面的写法
// 写法一 __proto__属性在非浏览器的环境不一定部署，因此推荐使用写法二和写法三
const clone1 = {
  __proto__: Object.getPrototypeOf(obj),
  ...obj
};
// 写法二
const clone2 = Object.assign(
  Object.create(Object.getPrototypeOf(obj)),
  obj
);
// 写法三
const clone3 = Object.create(
  Object.getPrototypeOf(obj),
  Object.getOwnPropertyDescriptors(obj)
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

​ 扩展运算符可以用于合并两个对象。如果用户自定义的属性放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉。这用来修改现有对象部分的属性就很方便了。

let aWithOverrides = { ...a, x: 1, y: 2 };
// 等同于
let aWithOverrides = { ...a, ...{ x: 1, y: 2 } };
// 等同于
let x = 1, y = 2, aWithOverrides = { ...a, x, y };
// 等同于
let aWithOverrides = Object.assign({}, a, { x: 1, y: 2 }); 
//上面代码中，a对象的x属性和y属性，拷贝到新对象后会被覆盖掉---------------------------
let newVersion = {
  ...previousVersion,
  name: 'New Name' // Override the name property
}; //newVersion对象自定义了name属性，其他属性全部复制自previousVersion对象
1
2
3
4
5
6
7
8
9
10
11
12

​ 如果把自定义属性放在扩展运算符前面，就变成了设置新对象的默认属性值。与数组的扩展运算符一样，对象的扩展运算符后面可以跟表达式。扩展运算符的参数对象之中，如果有取值函数get，这个函数是会执行的。

let aWithDefaults = { x: 1, y: 2, ...a };
// 等同于
let aWithDefaults = Object.assign({}, { x: 1, y: 2 }, a);
// 等同于
let aWithDefaults = Object.assign({ x: 1, y: 2 }, a);
let a = { //取值函数get在扩展a对象时会自动执行，导致报错
  get x() {
    throw new Error('not throw yet');
  }
}
let aWithXGetter = { ...a }; // 报错
1
2
3
4
5
6
7
8
9
10
11

# 链判断运算符

​ 编程实务中，如果读取对象内部的某个属性，往往需要判断一下该对象是否存在。可用?.运算符直接在链式调用时判断左侧的对象是否为null或undefined。如果是就不再往下运算，而是返回undefined。

const firstName = message?.body?.user?.firstName || 'default';
const fooValue = myForm.querySelector('input[name=foo]')?.value
1
2

链判断运算符有三种用法：

  • obj?.prop // 对象属性
  • obj?.[expr] // 同上
  • func?.(...args) // 函数或对象方法的调用
//下面是判断对象方法是否存在，如果存在就立即执行的例子
iterator.return?.() //iterator.return有定义就会调用该方法，否则直接返回undefined
//对于那些可能没有实现的方法，这个运算符尤其有用。
if (myForm.checkValidity?.() === false) {
  // 表单校验失败
  return;
}//老式浏览器的表单可能没有checkValidity这个方法，这时?.运算符就会返回undefined，判断语句就变成了undefined === false，所以就会跳过下面的代码
//下面是这个运算符常见的使用形式，以及不使用该运算符时的等价形式
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

使用这个运算符，有几个注意点：

  1. 短路机制。链判断运算符一旦为真，右侧的表达式就不再求值。
  2. delete 运算符。
delete a?.b //如果a是undefined或null，会直接返回undefined，而不会进行delete运算。
// 等同于
a == null ? undefined : delete a.b
1
2
3
  1. 括号的影响。如果属性链有圆括号，链判断运算符对圆括号外部没有影响，只对圆括号内部有影响。
(a?.b).c //  ?.对圆括号外部没有影响，不管a对象是否存在，圆括号后面的.c总是会执行。
// 等价于      一般来说，使用?.运算符的场合不应该使用圆括号。
(a == null ? undefined : a.b).c
1
2
3
  1. 报错场合。
// 构造函数
new a?.()
new a?.b()
// 链判断运算符的右侧有模板字符串
a?.`{b}`
a?.b`{c}`
// 链判断运算符的左侧是 super
super?.()
super?.foo
// 链运算符用于赋值运算符左侧
a?.b = c
1
2
3
4
5
6
7
8
9
10
11
  1. 右侧不得为十进制数值。为了保证兼容以前的代码，允许foo?.3:0被解析成foo ? .3 : 0，因此规定如果?.后面紧跟一个十进制数字，那么?.不再被看成是一个完整的运算符，而会按照三元运算符进行处理，也就是说，那个小数点会归属于后面的十进制数字，形成一个小数。

# Null 判断运算符

​ 读取对象属性时，如果某个属性的值是null或undefined，有时候需要为它们指定默认值。可以用Null判断运算符??，它的行为类似||，但是只有运算符左侧的值为null或undefined时，才会返回右侧的值。该运算符的一个目的，就是跟链判断运算符?.配合使用，为null或undefined的值设置默认值。

const animationDuration = response.settings?.animationDuration ?? 300;
//上面代码中，response.settings如果是null或undefined，就会返回默认值300
1
2

​ 这个运算符很适合判断函数参数是否赋值。

function Component(props) {
  const enable = props.enabled ?? true;
  // …
}
1
2
3
4

​ ??有一个运算优先级问题，它与&&和||的优先级孰高孰低。现在的规则是，如果多个逻辑运算符一起使用，必须用括号表明优先级，否则会报错。

上次更新: 2024/4/13 08:06:14

对象的新增方法