作者：HaseebAnwar译者：前端小智来源：medium有梦想，有干货，微信搜索【大千世界】关注这个凌晨还在洗碗的擦碗碟。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。JavaScript有很多很酷的特性，大多数初级和中级开发人员都不知道。今天我分享一些我在项目中经常使用的技巧。1.有条件地给对象添加属性我们可以使用展开运算符(...)快速有条件地给JS对象添加属性。常量条件=真；constperson={id:1,name:'JohnDoe',...(condition&&{age:16}),};如果每个操作数的计算结果为真，则&&运算符返回最后计算的表达式。所以返回一个对象{age:16}，然后将其扩展为person对象的一部分。如果条件为假，JavaScript会做这样的事情：constperson={id:1,name:'前端小智',...(false),};//扩展`false`对对象没有影响控制台日志（人）；//{id:1,name:'JohnDoe'}2.检查对象中是否存在某个属性您可以使用in关键字来检查某个属性是否存在于JavaScript对象中。constperson={name:'前端小智',salary:1000};console.log('工资'人);//trueconsole.log('年龄');//错误3。对象名称中的动态属性使用动态键设置对象属性很简单。只需使用['keyname']添加属性：constdynamic='flavour';varitem={name:'前端小智',[dynamic]:'巧克力'}console.log(item);//{name:'Front-endXiaozhi',flavor:'Chocolate'}同样的技巧也可以用来引用带有动态键的对象属性：constkeyName='name';console.log(item[keyName]);//返回'前端小智智'4.使用动态键进行对象解构我们知道，在对象被解构时，可以使用：来重命名被解构的属性。但是，您知道吗，当键名是动态的时，您也可以解构对象属性？constperson={id:1,name:'前端小智'};const{name:personName}=person;console.log(personName);//'前端小智'现在，我们使用动态键来解构属性：consttemplates={'hello':'Hellothere','bye':'Goodbye'};consttemplateName='再见';const{[templateName]:template}=templates;控制台日志（模板）；//再见5。空合并？？运算符当我们想检查一个变量是null还是undefined时，??运算符很有用。当左操作数为null或未定义时返回右操作数，否则返回左操作数。constfoo=null??'你好';安慰。日志（富）；//'你好'constbar='Notnull'??'你好';安慰。日志（栏）；//'非空'constbaz=0??'你好';控制台日志（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);//未定义//或深度可选链接console.log(book.author?.address?.city);//undefined也可以使用如下函数optionalchain:constperson={firstName:'Frontend',lastName:'Xiaozhi',printName:function(){return`${this.firstName}${this.lastName}`;},};console.log(person.printName());//'前端小智'console.log(persone.doesNotExist?.());//未定义7.使用！这！算了！！运算符可用于快速将表达式的结果转换为布尔值（真或假）：constgreeting='Hellothere!';console.log(!!greeting)//trueconstnoGreeting='';console.log(!!noGreeting);//错误8。字符串和整数转换使用+运算符可以快速将字符串转换为数字：conststringNumer='123';console.log(+stringNumer);//123console.log(typeof+stringNumer);//'number'要快速将数字转换为字符串，您还可以使用+运算符后跟一个空字符串：constmyString=25+'';控制台日志（myString）；//'25'console.log(typeofmyString);//'字符串'这个这些类型转换非常方便，但清晰度和代码可读性较差，实际开发中需要慎重选择使用。9、检查数组中的假值每个人应该都用过数组的方法：filter、some、every，这些方法可以配合布尔方法来检测真假值。constmyArray=[null,false,'Hello',undefined,0];//过滤假值constfiltered=myArray.filter(Boolean);console.log(filtered);//['Hello']//至少检查一个值是否为真constanyTruthy=myArray.some(Boolean);console.log(anyTruthy);//true//检查所有值是否为真constallTruthy=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.平坦的（）;//[{id:1},{id:2},{id:3}]您还可以定义深度级别，指定嵌套数组结构应该展平的深度。例如：constarr=[0,1,2,[[[3,4]]]];控制台日志（arr.flat（2））；//returns[0,1,2,[3,4]]11.Object.entries大多数开发人员使用Object.keys方法来迭代对象。此方法仅返回对象键数组，而不返回值。我们可以使用Object.entries来获取键和值。constperson={name:'前端小智',age:20};Object.keys(person);//['姓名','年龄']Object.entries(data);//[['name','FrontendXiaozhi'],['age',20]]要遍历一个对象，我们可以这样做：Object.keys(person).forEach((key)=>{console.log(`${key}is${person[key]}`);});//使用条目获取键和值Object.entries(person).forEach(([key,value])=>{console.log(`${key}is${value}`);});//name为前端小智//age为20上面两种方法返回的结果相同，但Object.entries更容易获取key-值对。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;//易于阅读constreadableBillion=1000_000_000;console.log(readableBillion)//1000000000下划线分隔符也可以用于BigInt数字，如下例所示consttrillion=1000_000_000_000n;控制台日志（万亿）；//100000000000014.document.designMode与前端JavaScript相关，设计模式允许你编辑页面上的任何内容。只需打开浏览器控制台并输入以下内容。document.designMode='开';15.逻辑赋值运算符逻辑赋值运算符由逻辑运算符&&、||、??组成。和赋值运算符=。consta=1;constb=2;a&&=b;console.log(a);//2//上面等价于a&&(a=b);//orif(a){a=b}检查a的值是否为真，如果为真，则更新a的值。同样可以使用逻辑或||来完成操作员。consta=null;constb=3;a||=b;console.log(a);//3//上面等同于一个||(a=b);使用空合并运算符??:consta=null;constb=3;a??=b;console.log(a);//3//上面等价于if(a===null||a===undefined){a=b;}注：??运算符仅检查空值或未定义值。~~完了，我是洗碗精，点赞和观看是对我最大的支持，我会好好洗碗的。编辑过程中可能存在的BUG无法实时获知。之后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的BUG监控工具Fundebug。原文：https://betterprogramming.pub...https://betterprogramming.pub...交流文章每周更新。可以微信搜索【大千世界】第一时间阅读，回复【福利】有很多前端视频等着你，本文已收录到GitHubhttps://github.com/qq449245884/小智，欢迎来到Star。
