史上最全JavaScript常用的简写技巧（推荐）

2023-09-26 07:21:08 166

JavaScript是属于网络的脚本语言！被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。同时很容易使用，所以越来越多的开发者选择js代码来实现自己想要的效果，但开发过程中，为了更高的效率和良好的代码规范要求，我们不得不知晓js一些常用的简写技巧，如下我帮大家整理了下，一起进来看看吧~

1.三元运算符

当你想用一行代码来写if...else语句的时候，使用三元操作符是非常好的选择，例如：

constx=20;
letanswer;
if(x>10){
answer='isgreater';
}else{
answer='islesser';
}

可以简写为：

constanswer=x>10?'isgreater':'islesser';

也可以嵌套if语句：

constbig=x>10?"greater10":x

2.简写短路求值

当给一个变量分配另一个值的时候，你可能想确定初值不是null，undefined或空值。这时，你可以写一个多重条件的if语句：

if(variable1!==null||variable1!==undefined||variable1!==''){
letvariable2=variable1;
}

或者可以使用短路求值的方法：

constvariable2=variable1 ||'new';

3.简写变量声明

在定义函数的时候，你可能需要先声明多个变量，例如：

letx;
lety;
letz=3;

这时，你可以使用简写的方式节省很多时间和空间，即同时声明多个变量：

letx,y,z=3;

4.简写if执行条件

这可能微不足道，但值得一提。在你做if条件检查的时候，其赋值操作可以省略，例如：

if(likeJavaScript===true)

可以简写为：

if(likeJavaScript)

只有当likeJavaScript是真值的时候，以上两个语句才可以替换。如果判断假值，例如：

leta;
if(a!==true){
//dosomething...
}

可以简写为：

leta;
if(!a){
//dosomething...
}

5.简写JavaScript循环方法

当你想使用纯javascript而不依赖外库（例如jQuery）的时候，这是非常有用的。

for(leti=0;i

可以简写为：

for(letindexinallImgs)

也可以使用Array.forEach：

functionlogArrayElements(element,index,array){
console.log("a["+index+"]="+element);
}
[2,5,9].forEach(logArrayElements);
//logs:
//a[0]=2
//a[1]=5
//a[2]=9

6.短路求值

如果想通过判断参数是否为null或者undefined来分配默认值的话，我们不需要写六行代码，而是可以使用一个短路逻辑运算符，只用一行代码来完成相同的操作。例如：

letdbHost;
if(process.env.DB_HOST){
dbHost=process.env.DB_HOST;
}else{
dbHost='localhost';
}

可以简写为：

constdbHost=process.env.DB_HOST||'localhost';

7.十进制指数

当数字的尾部为很多的零时（如10000000），咱们可以使用指数（1e7）来代替这个数字，例如：

for(leti=0;i<10000;i++){}

可以简写为：

for(leti=0;i<1e7;i++){}

//下面都是返回true
1e0===1;
1e1===10;
1e2===100;
1e3===1000;
1e4===10000;
1e5===100000;

8.简写对象属性

在JavaScript中定义对象很简单，而且ES6提供了一个更简单的分配对象属性的方法。如果属性名与key值相同，例如：

constobj={x:x,y:y};

则可以简写为：

constobj={x,y};

9.简写箭头函数

传统函数很容易让人理解和编写，但是当它嵌套在另一个函数中的时候，它就会变得冗长和混乱。例如：

functionsayHello(name){
console.log('Hello',name);
}

setTimeout(function(){
console.log('Loaded')
},2000);

list.forEach(function(item){
console.log(item);
});

这时，可以简写为：

sayHello=name=>console.log('Hello',name);

setTimeout(()=>console.log('Loaded'),2000);

list.forEach(item=>console.log(item));

10.简写隐式返回值

我们经常使用return语句来返回函数最终结果，仅有一行声明语句的箭头函数能隐式返回其值（这时函数必须省略{}以便省略return关键字）。如果想要返回多行语句，则需要使用()包围函数体。例如：

functioncalcCircumference(diameter){
returnMath.PI*diameter
}
varfunc=functionfunc(){
return{foo:1};
};

可以简写为：

calcCircumference=diameter=>(
Math.PI*diameter;
)
varfunc=()=>({foo:1});

11.默认参数值

我们经常可以使用if语句来为函数中的参数定义默认值。但是在ES6中，咱们可以在函数本身声明参数的默认值。例如：

functionvolume(l,w,h){
if(w===undefined)
w=3;
if(h===undefined)
h=4;
returnl*w*h;
}

可以简写为：

volume=(l,w=3,h=4)=>(l*w*h);

volume(2) //output:24

12.字符串模板

你是不是厌倦了使用+将多个变量转换为字符串？有没有更简单的方法呢？如果你能够使用ES6，那么很幸运，你仅需使用反引号并将变量置于${}之中即可。例如：

constwelcome='Youhaveloggedinas'+first+''+last+'.'

constdb='http://'+host+':'+port+'/'+database;

可以简写为：

constwelcome=`Youhaveloggedinas${first}${last}`;

constdb=`http://${host}:${port}/${database}`;

13.简写赋值方法

如果你正在使用任何流行的Web框架，那么你很有可能使用数组或以对象本文的形式将数据在组件和API之间进行通信。一旦数据对象到达一个组件，你就需要解压它。例如：

constobservable=require('mobx/observable');
constaction=require('mobx/action');
construnInAction=require('mobx/runInAction');

conststore=this.props.store;
constform=this.props.form;
constloading=this.props.loading;
consterrors=this.props.errors;
constentity=this.props.entity;

可以简写为：

import{observable,action,runInAction}from'mobx';

const{store,form,loading,errors,entity}=this.props;

也可以分配变量名：

//最后一个变量名为contact

const{store,form,loading,errors,entity:contact}=this.props;

14.简写多行字符串

如果你曾发现自己需要在代码中编写多行字符串，那么这估计就是你编写它们的方法，即在输出的多行字符串间用+来拼接：

constlorem='Loremipsumdolorsitamet,consectetur\n\t'
+'adipisicingelit,seddoeiusmodtemporincididunt\n\t'
+'utlaboreetdoloremagnaaliqua.Utenimadminim\n\t'
+'veniam,quisnostrudexercitationullamcolaboris\n\t'
+'nisiutaliquipexeacommodoconsequat.Duisaute\n\t'
+'iruredolorinreprehenderitinvoluptatevelitesse.\n\t'

但是如果使用反引号，你就可以达到简写的目的：

constlorem=`Loremipsumdolorsitamet,consectetur
adipisicingelit,seddoeiusmodtemporincididunt
utlaboreetdoloremagnaaliqua.Utenimadminim
veniam,quisnostrudexercitationullamcolaboris
nisiutaliquipexeacommodoconsequat.Duisaute
iruredolorinreprehenderitinvoluptatevelitesse.`

15.扩展运算符

在ES6中，包括扩展运算符，它可以使你的操作更简单，例如：

//joiningarrays
constodd=[1,3,5];
constnums=[2,4,6].concat(odd);

//cloningarrays
constarr=[1,2,3,4];
constarr2=arr.slice()

可以简写为：

//joiningarrays
constodd=[1,3,5];
constnums=[2,4,6,...odd];
console.log(nums);//[2,4,6,1,3,5]

//cloningarrays
constarr=[1,2,3,4];
constarr2=[...arr];

不像concat()函数，你可以使用扩展运算符在一个数组中任意处插入另一个数组，例如：

constodd=[1,3,5];
constnums=[2,...odd,4,6];

也可以使用扩展运算符：

const{a,b,...z}={a:1,b:2,c:3,d:4};
console.log(a)//1
console.log(b)//2
console.log(z)//{c:3,d:4}

16.强制参数

默认情况下，如果不传递值，JavaScript会将函数参数设置为undefined，而其他一些语言则会报出警告或错误。想要执行参数分配，则可以让if语句抛出undefined的错误，或者使用“强制参数”的方法。例如：

functionfoo(bar){
if(bar===undefined){
thrownewError('Missingparameter!');
}
returnbar;
}

可以简写为：

mandatory=()=>{
thrownewError('Missingparameter!');
}

foo=(bar=mandatory())=>{
returnbar;
}

17.Array.find简写

如果你曾负责编写JavaScript中的find函数，那么你很有可能使用了for循环。在此，介绍ES6中一个名为find()的数组函数。

constpets=[
{type:'Dog',name:'Max'},
{type:'Cat',name:'Karl'},
{type:'Dog',name:'Tommy'},
]

functionfindDog(name){
for(leti=0;i
可以简写为：
pet=pets.find(pet=>pet.type==='Dog'&&pet.name==='Tommy');
console.log(pet);//{type:'Dog',name:'Tommy'}
18.简写Object[key]
你知道Foo.bar也可以写成Foo['bar']吗？起初，似乎没有什么理由让你这样写。然而，这个符号给了你编写可重用代码的基础。考虑如下简化的验证函数示例：
functionvalidate(values){
if(!values.first)
returnfalse;
if(!values.last)
returnfalse;
returntrue;
}
console.log(validate({first:'Bruce',last:'Wayne'}));//true
这个函数可以完美的完成它的任务。但是，考虑一个场景，你有很多表单，你需要进行验证，但有不同的字段和规则。那么，构建一个可以在运行时配置的通用验证函数不是很好吗？
//对象验证规则
constschema={
first:{
required:true
},
last:{
required:true
}
}

//通用验证函数
constvalidate=(schema,values)=>{
for(fieldinschema){
if(schema[field].required){
if(!values[field]){
returnfalse;
}
}
}
returntrue;
}
console.log(validate(schema,{first:'Bruce'}));//false
console.log(validate(schema,{first:'Bruce',last:'Wayne'}));//true


现在我们就有了一个可以在所有的form中重用的验证函数，而无需为每个form编写其自定义的验证函数啦！
19.简写双重按位非运算符
按位运算符绝对是你初学JavaScript时了解的但一直没有用武之地的运算符。因为如果不处理二进制，谁会没事操作0和1呢？但是，双重按位非运算符非常实用，例如你可以使用它来替代floor()函数，而且与其他相同的操作相比，按位运算符的操作速度更快。

Math.floor(4.9)===4 //true

可以简写为：

~~4.9===4 //true

20.SuggestOneofU?
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流，谢谢大家对毛票票的支持!
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

史上最全JavaScript常用的简写技巧（推荐）

热门推荐

随机推荐