1。有条件地向对象添加属性我们可以使用扩展运算符...快速有条件地向JavaScript对象添加属性。constcondition=true;constperson={id:1,name:'JohnDoe',...(condition&&{age:16}),};如果每个操作数的计算结果为真，&&运算符将返回最后计算的表达式。因此返回一个对象{age:16}，然后将其扩展为person对象的一部分。如果条件为假，JavaScript将执行以下操作：constperson={id:1,name:'JohnDoe',...(false),//evaluatestofalse};//spreadingfalsehasnoeffectontheobjectconsole.log(person);//{id:1,name:'JohnDoe'}2.检查对象中是否存在属性你知道我们可以使用in关键字来检查JavaScript对象中是否存在属性吗？constperson={name:'JohnDoe',salary:1000};console.log('salary'inperson);//returnsstrueconsole.log('age'inperson);//returnsfalse3.对象中的动态属性名设置对象属性with动态键很简单。只需使用['key_name']符号添加属性：constdynamic='flavour';varitem={name:'Biscuit',[dynamic]:'Chocolate'}console.log(item);//{name:'Biscuit',flavor:'Chocolate'}同样的技术也可以用于使用动态键引用对象属性：constkeyName='name';console.log(item[keyName]);//returns'Biscuit'4.使用动态对象解构键你知道你可以解构一个变量并立即用:符号重命名它。但是，当您不知道键名或键名是动态的时，您是否也可以解构对象的属性？首先，让我们看看如何在解构时重命名变量（使用别名进行解构）。constperson={id:1,name:'JohnDoe'};const{name:personName}=person;console.log(personName);//返回'JohnDoe'现在，让我们使用动态键来解构属性：consttemplates={'hello':'Hellothere','bye':'Goodbye'};consttemplateName='bye';const{[templateName]:template}=templates;console.log(template)//返回'Goodbye'5，空合并，？？运营商这个？当您要检查变量是否为空或未定义时，运算符很有用。当左侧为空或未定义时，它返回右侧值，否则返回其左侧操作数。constfoo=null??'Hello';console.log(foo);//返回'Hello'constbar='Notnull'??'Hello';console.log(bar);//返回'Notnull'constbaz=0??'Hello';console.log(baz);//returns0在第三个例子中，返回0因为即使0在JavaScript中被认为是false，它既不是null也不是undefined。你可能认为我们可以使用||这里的运算符，但是两者有区别：constcannotBeZero=0||5;console.log(cannotBeZero);//returns5constcanBeZero=0??5;console.log(canBeZero);//returns06，可选链(?.)你是否也讨厌像TypeError:Cannotreadproperty'foo'ofnull这样的错误。这是每一个JavaScript开发者都头疼的问题。引入可选链来解决这个问题。让我们看看：constbook={id:1,title:'Title',author:null};//通常，你会这样做console.log(book.author.age)//throwserrorconsole.log(book.author&&book.author．带有函数的可选链接：constperson={firstName:'Haseeb',lastName:'Anwar',printName:function(){return`${this.firstName}${this.lastName}`;},};console.log(person.printName());//返回'HaseebAnwar'console.log(persone.doesNotExist?.());//返回undefined7.使用！！布尔转换运算符The!!运算符可用于将表达式公式的结果快速转换为布尔值true或false。就是这样：constgreeting='Hellothere!';console.log(!!greeting)//returnstrueconstnoGreeting='';console.log(!!noGreeting);//returnsfalse8，字符串和整数转换使用+运算符快速转换字符Stringtonumberlikethis:conststringNumer='123';console.log(+stringNumer);//returnsinteger123console.log(typeof+stringNumer);//returns'number'要快速将数字转换为字符串，请使用+运算符后跟一个空字符串"":constmyString=25+'';console.log(myString);//returns'25'console.log(typeofmyString);//returns'string'这些类型转换很方便，但是它们不太清晰和代码可读。因此，在生产中使用它们之前，您可能需要考虑一下。但是，请毫不犹豫地在您的代码中使用它们。9.检查数组中的假值你必须熟悉filter，some和every数组方法。但是，您还应该知道您可以只使用布尔方法来测试真值：constmyArray=[null,false,'Hello',undefined,0];//filterfalsyvaluesconstfiltered=myArray.filter(Boolean);console.log(filtered);//returns['Hello']//checkifaleastonevalueisttruthyconstanyTruthy=myArray.some(Boolean);console.log(anyTruthy);//returnstrue//checkifallvaluesaretruthyconstallTruthy=myArray.every(Boolean);console.log(allTruthy);//返回false这就是它的工作原理。正如我们所知，这些数组方法采用回调函数，因此我们将布尔方法作为回调函数传递。Boolean本身接受一个参数，并根据参数的真实性返回true或false。所以我们可以这样说：myArray.filter(val=>Boolean(val));是不是和这个一样：myArray.filter(Boolean);在数组中创建一个数组：constmyArray=[{id:1},[{id:2}],[{id:3}]];constflattedArray=myArray.flat();//returns[{id:1},{id:2},{id:3}]您还可以定义一个深度级别，指定嵌套数组结构应该展平的深度。例如：constarr=[0,1,2,[[[3,4]]]];console.log(arr.flat(2));//returns[0,1,2,[3,4]]【编者推荐】Java开发中的十大头痛Bug盘点JavaScript中BigIn函数的常用属性JavaScript的奇葩之处实战姿势加六Facebook屏蔽开发者背后的“全部取消关注”工具盘点5个JavaScript常用对象
