JavaScript有很多大多数初级和中级开发者都不知道的很酷的特性。今天我分享一些我在项目中经常使用的技巧。1.有条件地给对象添加属性我们可以使用展开运算符(...)快速有条件地给JS对象添加属性。constcondition=true;constperson={id:1,name:'JohnDoe',...(condition&&{age:16}),};如果每个操作数的计算结果为真，则&&运算符返回最后一个值表达式。所以返回一个对象{age:16}，然后将其扩展为person对象的一部分。如果条件为假，JavaScript会做这样的事情：constperson={id:1,name:'FrontendXiaozhi',...(false),};//扩展`false`对对象控制台没有影响。log(person);//{id:1,name:'JohnDoe'}2.检查对象中是否存在某个属性可以使用in关键字来检查JavaScript对象中是否存在某个属性。constperson={name:'前端小智',salary:1000};console.log('salary'inperson);//trueconsole.log('age'inperson);//false3.对象中的动态属性名使用动态Keys设置对象属性很简单。使用['键名']添加属性即可：constdynamic='flavour';varitem={name:'FrontendXiaozhi',[dynamic]:'Chocolate'}console.log(item);//{name:'Front-endXiaozhi',flavor:'chocolate'}同样的技巧也可以用动态键来引用对象属性：constkeyName='name';console.log(item[keyName]);//returns'Front-end小智'4。使用动态键进行对象解构我们知道，在对象被解构时，可以使用：来重命名被解构的属性。但是，你知道当键名是动态的时候，你还可以解构对象的属性吗？constperson={id:1,name:'前端小智'};const{name:personName}=person;console.log(personName);//'前端小智'现在我们使用动态key来解构属性:consttemplates={'hello':'Hellothere','bye':'Goodbye'};consttemplateName='bye';const{[templateName]:template}=templates;console.log(template);//再见5。空值合并？？运算符当我们想检查一个变量是null还是undefined时，??运算符很有用。当左操作数为null或未定义时返回右操作数，否则返回左操作数。constfoo=null??'Hello';console.log(foo);//'Hello'constbar='Notnull'??'Hello';console.log(bar);//'Notnull'constbaz=0??'Hello';console.log(baz);//0第三个例子，返回0，因为0虽然在JS中被认为是false，但它不是null或undefined。你可能认为我们可以使用||运算符，但两者之间存在差异您可能认为我们可以使用||运算符在这里，但两者之间是有区别的。constcannotBeZero=0||5;console.log(cannotBeZero);//5constcanBeZero=0??5;console.log(canBeZero);//06.可选链？我们是不是经常遇到这样的错误：TypeError:Cannotreadproperty'foo'ofnull.这对每一个易开发者来说都是一个恼人的问题。引入可选链来解决这个问题。我们看一下：constbook={id:1,title:'Title',author:null};//一般会这样console.log(book.author.age)//throwserrorconsole.log(book.author&&book.author.age);//null//使用可选链接console.log(book.author?.age);//undefined//或深度可选链接console.log(book.author?.address?.city);//undefined也可以使用如下函数可选链：constperson={firstName:'Frontend',lastName:'小智',printName:function(){return`${this.firstName}${this.姓氏}`;},};console.log(person.printName());//'前端小智'console.log(person.doesNotExist?.());//undefined7.使用！！操作员！！运算符可用于快速将表达式的结果转换为布尔值（真或假）：constgreeting='Hellothere!';console.log(!!greeting)//trueconstnoGreeting='';console.log(!!noGreeting);//false8.字符串与整数转换使用+运算符将字符串快速转换为数字：conststringNumer='123';console.log(+stringNumer);//123console.log(typeof+stringNumer);//'number'来快速转换一个数字到一个字符串，你也可以使用+运算符后跟一个空字符串：constmyString=25+'';console.log(myString);//'25'console.log(typeofmyString);//'string'这些类型转换非常方便，但不够清晰，代码可读性差。因此，实际开发需要慎重选择和使用。9、检查数组中的假值每个人应该都用过数组的方法：filter、some、every，这些方法可以配合布尔方法来检测真假值。constmyArray=[null,false,'Hello',undefined,0];//过滤假值constfiltered=myArray.filter(Boolean);console.log(filtered);//['Hello']//至少检查一个value是否为真constantyTruthy=myArray.some(Boolean);console.log(anyTruthy);//truthy//检查所有值是否为真constallTruthy=myArray.every(Boolean);console.log(allTruthy);//false这是它的工作原理。我们知道这些数组方法接受一个回调函数，所以我们传递Boolean作为回调函数。布尔函数本身接受一个参数，并根据参数的真值返回true或false。所以：myArray.filter(val=>Boolean(val));等同于：myArray.filter(Boolean)；10.Flatteninganarray在原型Array上有一个方法flat，它使.constmyArray=[{id:1},[{id:2}],[{id:3}]];constflattedArray=myArray.flat();//[{id:1},{id:2},{id:3}]您还可以定义深度级别，指定嵌套数组结构应该展平的深度。例如：constarr=[0,1,2,[[[3,4]]]];console.log(arr.flat(2));//returns[0,1,2,[3,4]]11.Object.entries大多数开发者使用Object.keys方法来迭代对象。此方法仅返回对象键数组，而不返回值。我们可以使用Object.entries来获取键和值。constperson={name:'前端小智',age:20};Object.keys(person);//['name','age']Object.entries(data);//[['name','FrontendXiaozhi'],['age',20]]要遍历一个对象，我们可以这样做：Object.keys(person).forEach((key)=>{console.log(`${key}is${person[key]}`);});//使用entry获取键值Object.entries(person).forEach(([key,value])=>{console.log(`${key}is${value}`);});//nameisfront-endxiaozhi//ageis20上面两种方法返回的结果是一样的，但是Object.entries更容易得到键值对。12.replaceAll方法在JS中，要用另一个字符串替换所有出现的字符串，我们需要使用正则表达式，如下所示：conststr='Red-Green-Blue';//只调节第一次出现的str.replace('-','');//RedGreen-Blue//使用RegEx替换所有出现的地方str.replace(/\-/g,'');//RedGreenBlue但是在ES12中，增加了一个新的方法叫replaceAll到String.prototype，它将所有出现的字符串替换为另一个字符串值。str.replaceAll('-','');//红绿蓝13.数字分隔符可以使用下划线作为数字分隔符，可以方便的统计数字中0的个数。//难以阅读constbillion=1000000000;//易于阅读consttreadableBillion=1000_000_000;console.log(readableBillion)//1000000000下划线分隔符也可以用于BigInt数字，如下例consttrillion=1000_000_000_000n;console.log(trillion);//100000000000014.document.designMode与前端JavaScript相关，设计模式允许你编辑页面上的任何内容。只需打开浏览器控制台并输入以下内容。document.designMode='on';15.逻辑赋值运算符逻辑赋值运算符由逻辑运算符&&、||、??组成。和赋值运算符=。const=1;constb=2;a&&=b;console.log(a);//2//上面相当于a&&(a=b);//或者if(a){a=b}检查a该值是否为真，如果为真，则更新a的值。同样可以使用逻辑或||来完成操作员。consta=null;constb=3;a||=b;console.log(a);//3//上面相当于a||(a=b);usethenullvaluecoalescingoperator??:consta=null;constb=3;a??=b;console.log(a);//3//上面等价于if(a===null||a===undefined){a=b;}注意:??运算符仅检查空值或未定义值。作者：HaseebAnwar译者：FrontendXiaozhi来源：medium原文：https://betterprogramming.pub/10-modern-javascript-tricks-every-developer-should-use-377857311d79https://betterprogramming.pub/5-cool-modern-javascript-features-most-developers-dont-know-6baf19b532da【编辑推荐】鸿蒙官方战略合作共建——鸿蒙技术社区如何免费从Windows10升级到Windows11？Windows11正式启动！安装方法和ISO镜像下载都在这里爆！苹果正式关闭iOS14.8验证系统你升级了吗？Windows11正式版发布，体积缩小40%。你有没有更新Windows11？为什么我还没有收到推送？
