ECMAScript6-基础9-对象的扩展

 

目录

属性的简洁表示法

概念

基础案例

属性名表达式

标题

概念

方法name属性

概念

基础案例

属性的可枚举性

概念

基础案例

属性的遍历

概念

super关键字

概念

基础案例

对象的扩展运算符：解构赋值

概念

基础案例

对象的扩展运算符：扩展运算符

概念

基础案例

链判断运算符?.

概念

基础案例

注意

Null判断运算符

概念

基础案例

---

属性的简洁表示法

概念

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

属性名就是变量名, 属性值就是变量值。

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

基础案例

① function f(x, y) {   return {x, y}; } // 等同于 function f(x, y) {   return {x: x, y: y}; } f(1, 2) // Object {x: 1, y: 2} return {x, y}，这里的x和y是变量，因此，该对象有2个属性，属性名就叫做x和y，而属性值就是变量x和y的值，即x=1，y=2 ② const o = {   method() {     return "Hello!";   } }; // 等同于 const o = {   method: function() {     return "Hello!";   } }; 方法简写的时候，就不需要关键字function了； ③ let user = {   name: 'test' }; let foo = {   bar: 'baz' }; console.log(user, foo) // {name: "test"} {bar: "baz"} console.log({user, foo}) // {user: {name: "test"}, foo: {bar: "baz"}} 利用简写，可以方便打印对象

属性名表达式

标题

既可以通过直接用标识符作为属性名（obj.foo = true），又可以用表达式作为属性名（obj['a' + 'bc'] = 123），这时要将表达式放在方括号之内。

在ES5中如果使用字面量方式定义对象（使用大括号），只能使用标识符定义属性。

ES6允许字面量定义对象（使用大括号）时，用表达式作为对象的属性名，即把表达式放在方括号内。

注意：属性名表达式与简洁表示法，不能同时使用，会报错。

概念

① var obj = {   foo: true,   abc: 123 }; ES5在使用{}定义对象时，只能使用标识符方式定义属性名 ② let propKey = 'foo'; let obj = {   [propKey]: true,   ['a' + 'bc']: 123 }; ES6在使用{}定义对象时，可以用表达式来定义属性名 ③ let lastWord = 'last word'; const a = {   'first word': 'hello',这里用引号进行包裹   [lastWord]: 'world' }; a['first word'] // "hello" a[lastWord] // "world" a['last word'] // "world" 这里也用引号进行包裹 ④ let obj = {   ['h' + 'ello']() {     return 'hi';   } }; obj.hello() // hi ⑤ const keyA = {a: 1}; const keyB = {b: 2}; const myObject = {   [keyA]: 'valueA',   [keyB]: 'valueB' }; myObject // Object {[object Object]: "valueB"} 注意，属性名表达式如果是一个对象，默认情况下会自动将对象转为字符串[object Object]，上面代码中，[keyA]和[keyB]得到的都是[object Object]，所以[keyB]会把[keyA]覆盖掉，而myObject最后只有一个[object Object]属性。

方法name属性

概念

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

 

 

 

 

基础案例

① const person = {   sayName() {     console.log('hello!');   }, }; person.sayName.name   // "sayName" 函数的name属性 ② const obj = {   get foo() {},   set foo(x) {} }; obj.foo.name // TypeError: Cannot read property 'name' of undefined const descriptor = Object.getOwnPropertyDescriptor(obj, 'foo'); descriptor.get.name // "get foo" descriptor.set.name // "set foo" Getter/Setter函数的name属性不是在该方法上面，而是该方法的属性的描述对象的get和set属性上面，返回值是方法名前加上get和set。 ③ (new Function()).name // "anonymous" var doSomething = function() {   // ... }; doSomething.bind().name // "bound doSomething" 有两种特殊情况：bind方法创造的函数，name属性返回bound加上原函数的名字；Function构造函数创造的函数，name属性返回anonymous。 ④ const key1 = Symbol('description'); const key2 = Symbol(); let obj = {   [key1]() {},   [key2]() {}, }; obj[key1].name // "[description]" obj[key2].name // "" 如果对象的方法是一个 Symbol 值，那么name属性返回的是这个 Symbol 值的描述。

属性的可枚举性

概念

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

目前，有四个操作会忽略enumerable为false的属性，分别如下：

①for...in循环：只遍历对象自身的和继承的可枚举的属性。

②Object.keys()：返回对象自身的所有可枚举的属性的键名。

③JSON.stringify()：只串行化对象自身的可枚举的属性。

④Object.assign()： 忽略enumerable为false的属性，只拷贝对象自身的可枚举的属性。

前三个是ES5就有的，最后一个Object.assign()是ES6新增的。

注意：只有for...in会返回继承的属性，其他三个方法都会忽略继承的属性，只处理对象自身的属性。

而引入“可枚举”（enumerable）这个概念的最初目的，就是让某些属性可以规避掉for...in操作，不然所有内部属性和方法都会被遍历到。比如，对象原型的toString方法，以及数组的length属性，就通过“可枚举性”，从而避免被for...in遍历到。

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

基础案例

① let obj = { foo: 123 }; Object.getOwnPropertyDescriptor(obj, 'foo') //  { //    value: 123, //    writable: true, //    enumerable: true, //    configurable: true //  } 查看obj对象的foo属性的Descriptor对象； ② Object.getOwnPropertyDescriptor(Object.prototype, 'toString').enumerable // false Object.getOwnPropertyDescriptor([], 'length').enumerable // false toString和length属性的enumerable都是false，因此for...in不会遍历到这两个继承自原型的属性。

属性的遍历

概念

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

①for...in循环遍历对象自身的和继承的可枚举属性（不含 Symbol属性）

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

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

④Object.getOwnPropertySymbols返回一个数组，包含对象自身的所有Symbol属性的键名。

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

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

首先遍历所有数值键，按照数值升序排列。

其次遍历所有字符串键，按照加入时间升序排列。

最后遍历所有 Symbol 键，按照加入时间升序排列。

super关键字

概念

this关键字总是指向函数所在的当前对象，ES6又新增了另一个类似的关键字super，指向当前对象的原型对象。

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

JavaScript引擎内部，super.foo等同于Object.getPrototypeOf(this).foo（属性）或Object.getPrototypeOf(this).foo.call(this)（方法）

基础案例

// 报错 const obj = {   foo: super.foo } super用在属性里面   // 报错 const obj = {   foo: () => super.foo } super用在一个函数里面，然后赋值给foo属性   // 报错 const obj = {   foo: function () {     return super.foo   } } super用在一个函数里面，然后赋值给foo属性

对象的扩展运算符：解构赋值

概念

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

基础案例

① let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; x // 1 y // 2 z // { a: 3, b: 4 } 变量z是解构赋值所在的对象。它获取等号右边的所有尚未读取的键（a和b），将它们连同值一起拷贝过来。 ② let { ...z } = null; // 运行时错误 let { ...z } = undefined; // 运行时错误 解构赋值要求等号右边是一个对象，所以如果等号右边是undefined或null，就会报错，因为它们无法转为对象。 ③ let { ...x, y, z } = someObject; // 句法错误 let { x, ...y, ...z } = someObject; // 句法错误 解构赋值必须是最后一个参数，否则会报错。 ④ let obj = { a: { b: 1 } }; let { ...x } = obj; obj.a.b = 2; x.a.b // 2 解构赋值的拷贝是浅拷贝，即如果一个键的值是复合类型的值（数组、对象、函数）、那么解构赋值拷贝的是这个值的引用，而不是这个值的副本。上面代码中，x是解构赋值所在的对象，拷贝了对象obj的a属性。a属性引用了一个对象，修改这个对象的值，会影响到解构赋值对它的引用。 ⑤ let o1 = { a: 1 }; let o2 = { b: 2 }; o2.__proto__ = o1; let { ...o3 } = o2; o3 // { b: 2 } o3.a // undefined 扩展运算符的解构赋值，不能复制继承自原型对象的属性。上面代码中，对象o3复制了o2，但是只复制了o2自身的属性，没有复制它的原型对象o1的属性。 ⑥ const o = Object.create({ x: 1, y: 2 }); o.z = 3; let { x, ...newObj } = o; let { y, z } = newObj; x // 1 y // undefined z // 3 变量x是单纯的解构赋值，所以可以读取对象o继承的属性；变量y和z是扩展运算符的解构赋值，只能读取对象o自身的属性，所以变量z可以赋值成功，变量y取不到值。ES6 规定，变量声明语句之中，如果使用解构赋值，扩展运算符后面必须是一个变量名，而不能是一个解构赋值表达式，所以上面代码引入了中间变量newObj。 ⑦ function baseFunction({ a, b }) {   // ... } function wrapperFunction({ x, y, ...restConfig }) {   // 使用 x 和 y 参数进行操作   // 其余参数传给原始函数   return baseFunction(restConfig); } 原始函数baseFunction接受a和b作为参数，函数wrapperFunction在baseFunction的基础上进行了扩展，能够接受多余的参数，并且保留原始函数的行为。

对象的扩展运算符：扩展运算符

概念

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

 

 

 

 

 

基础案例

① let z = { a: 3, b: 4 }; let n = { ...z }; n // { a: 3, b: 4 } ② let foo = { ...['a', 'b', 'c'] }; foo // {0: "a", 1: "b", 2: "c"} 由于数组是特殊的对象，所以对象的扩展运算符也可以用于数组。 ③ {...{}, a: 1} // { a: 1 } 如果扩展运算符后面是一个空对象，则没有任何效果。 ④ // 等同于 {...Object(1)} {...1} // {} 如果扩展运算符后面不是对象，则会自动将其转为对象。上面代码中，扩展运算符后面是整数1，会自动转为数值的包装对象Number{1}。由于该对象没有自身属性，所以返回一个空对象。 ⑤ {...'hello'} // {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"} 如果扩展运算符后面是字符串，它会自动转成一个类似数组的对象，因此返回的不是空对象。 ⑥ 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 }); 如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉。 ⑦ 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); 如果把自定义属性放在扩展运算符前面，就变成了设置新对象的默认属性值。 ⑧ const obj = {   ...(x > 1 ? {a: 1} : {}),   b: 2, }; 与数组的扩展运算符一样，对象的扩展运算符后面可以跟表达式。 ⑨ let a = {   get x() {     throw new Error('not throw yet');   } } let aWithXGetter = { ...a }; // 报错 扩展运算符的参数对象之中，如果有取值函数get，这个函数是会执行的。上面例子中，取值函数get在扩展a对象时会自动执行，导致报错。

链判断运算符?.

概念

如果读取对象内部的某个属性，往往需要判断一下该对象是否存在,因此ES2020引入了“链判断运算符”（optional chaining operator）?.，来简化判断。

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

①obj?.prop//对象属性

②obj?.[expr]//同上

③func?.(...args)//函数或对象方法的调用

基础案例

① // 错误的写法 const  firstName = message.body.user.firstName; 这种写法，当某个值为null或者undefined时，会出错，需要添加判断代码，因此，修改为下面形式： const fooInput = myForm.querySelector('input[name=foo]') const fooValue = fooInput ? fooInput.value : undefined 到了ES2020引入了“链判断运算符”，则可以简写为如下形式： const firstName = message?.body?.user?.firstName || 'default'; const fooValue = myForm.querySelector('input[name=foo]')?.value 上面代码使用了?.运算符，直接在链式调用的时候判断，左侧的对象是否为null或undefined。如果是的，就不再往下运算，而是返回undefined。 ② iterator.return?.() 上面代码中，iterator.return如果有定义，就会调用该方法，否则iterator.return直接返回undefined，不再执行?.后面的部分。 ③ 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()

注意

①短路机制：?.运算符相当于一种短路机制，只要不满足条件，就不再往下执行。

②delete运算符：

如果被操作对象是undefined或null，会直接返回undefined，而不会进行delete运算。

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

③括号的影响：如果属性链有圆括号，链判断运算符对圆括号外部没有影响，只对圆括号内部有影响。一般来说，使用?.运算符的场合，不应该使用圆括号。

④报错场合，以下写法是禁止的，会报错。

// 构造函数 new a?.() new a?.b()   // 链判断运算符的右侧有模板字符串 a?.`{b}` a?.b`{c}`   // 链判断运算符的左侧是 super super?.() super?.foo   // 链运算符用于赋值运算符左侧 a?.b = c

⑤右侧不得为十进制数值，为了保证兼容以前的代码，允许foo?.3:0被解析成foo ? .3 : 0，因此规定如果?.后面紧跟一个十进制数字，那么?.不再被看成是一个完整的运算符，而会按照三元运算符进行处理，也就是说，那个小数点会归属于后面的十进制数字，形成一个小数。

Null判断运算符

概念

读取对象属性的时候，如果某个属性的值是null或undefined，有时候需要为它们指定默认值。常见做法是通过||运算符指定默认值，但||运算符缺点在于属性的值如果为空字符串或false或0，默认值也会生效，为了避免这种情况，ES2020 引入了一个新的 Null判断运算符??。它的行为类似||，但是只有运算符左侧的值为null或undefined时，才会返回右侧的值。

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

基础案例

① const headerText = response.settings.headerText ?? 'Hello, world!'; const animationDuration = response.settings.animationDuration ?? 300; const showSplashScreen = response.settings.showSplashScreen ?? true; ② (lhs && middle) ?? rhs; lhs && (middle ?? rhs);   (lhs ?? middle) && rhs; lhs ?? (middle && rhs);   (lhs || middle) ?? rhs; lhs || (middle ?? rhs);   (lhs ?? middle) || rhs; lhs ?? (middle || rhs);