ES6增强的对象语法

这是我参与11月更文挑战的第18天，活动详情查看：2021最后一次更文挑战

前言

ECMAScript6新增了许多对象操作的语法糖，大大增强了对象的操作方法。今天我们来谈一谈ES6的对象语法。

属性值简写

在给对象添加变量的时候,开发者经常会发现属性名和变量名是一样的。例如:\

 let name =' Matt ＇; 
 let person ={
 name : name 
 }；
console . log ( person );//{ name :' Matt ')

为此,简写属性名语法出现了。简写属性名只要使用变量名(不用再写冒号)就会自动被解释为同 名的属性键。如果没有找到同名变量,则会抛出 ReferenceErroro  以下代码和之前的代码是等价的:

 let name =' Matt ＇; 

 let person ={ 
 name
}
 console . log ( person );// name :' Mattja '

代码压缩程序会在不同作用域间保留属性名,以防止找不到引用。以下面的代码为例:

 function makePerson ( name ){
 return {
 name 
 }
 }
 let person = makePerson (' Matt ');
 console . log ( person . name );// Matt 

在这里,即使参数标识符只限定于函数作用域,编译器也会保留初始的 name 标识符。如果伸用
Google Closure 编译器压缩,那么函数参数会被缩短,而属性名不变:\

function makePerson ( a ) {
 return {
 name : a 
}
}
 var person = makePerson (" Matt "); 
 console . log ( person . name );/ Matt 

可计算属性

在引人可计算属性之前,如果想使用变量的值作为属性,那么必须先声明对象,然后使用中括号语法来添加属性。换句话说,不能在对象字面量中直接动态命名属性。比如:  

const nameKey =＇ name ＇;
 const ageKey =' age ';

const jobKey =' job '; 
let person ={}；
 person [ nameKey ]=' Matt '; 
 person [ageKey ]=27;
 person [jobKey )=' Software engineer ';
 console . log ( person );1/( name :' Matt ＇, age :27, job :' Software engineer ＇)

有了可计算属性,就可以在对象字面量中完成动态属性赋值。中括号包围的对象属性键告诉运行时将其作为 JavaScript 表达式而不是字符串来求值:\

 const nameKey =' name ＇; 
 const ageKey =' age '; 
 const jobKey =' job ＇;
 let person =(
[ nameKey ]:' Matt ＇[ ageKey ]:27,
[ jobKey ]:' Software engineer ＇
 console . log ( person );//{ name :' Matt ＇, age :27, job :' Software engineer ＇}

因为被当作 JavaScript 表达式求值,所以可计算属性本身可以是复杂的表达式,在实例化时再求值: const nameKey =＇ name ＇;  

const ageKey =' age ＇;
 const jobKey =‘ job ＇;
 1et uniqueToken =0;
 function getUniqueKey ( key )(

 return '$( key )_$( uniqueToken ++)';
1et person ={\
( getUniqueKey ( nameKey )]:' Matt ＇,[ getUniqueKey ( ageKey )]:27,
[ getUniqueKey ( jobKey )]:' Software engineer '1
 console . log ( person );//( name _0:' Matt ', age _1:27, job _2:' Software engineer '}

注意:可计算属性表达式中抛出任何错误都会中断对象创建。如果计算属性的表达式有副作用,那就要小心了,因为如果表达式抛出错误,那么之前究成的计算是不能回滚的。

简写方法名

在给对象定义方法时,通常都要写一个方法名、冒号,然后再引用一个匿名函数表达式,如下所示:   22:02:01
命名通常没什么用)。相应地,这样也可以明显缩短方法声明。
以下代码和之前的代码在行为上是等价的: 

let person ={
В ayName ( name )(
 console . log (' My name is $( name )');
相了);\
 person . sayName (' Matt ');// My name is Matt 简写方法名对获取函数和设置函数也是适用的:1et person =(
 name _:'', get name ()(
 return this . name _;,
 set name ( name ){
 this . name _= name ;
 sayName (){ 
 console . log (' My name is $( this . name _)');
}
\
 person . name =' Matt ＇;
 person . sayName ();// My name is Matt 

简写方法名与可计算属性键相互兼容:  const methodKey =' sayName ';   let person =(\

[methodkey1( name )(
 console . log (' My name is $( name )'); 
 person . sayName (' Matt ');//My name is Matt 

注意简写方法名对于本章后面介绍的 ECMAScript 6的类更有用。