Web前端教程:新手要会的JS简写方法(上)

开课吧开课吧小易2021-02-02 18:13

代码有时候也不都是那种一大长串一大长串的,有时也是有简写方法的,快来跟小编一起看看吧!

Web前端教程

1.三元操作符

当想写if...else语句时,使用三元操作符来代替。

constx =20;

let answer;

if(x >10) {

answer ='is greater';

}else{

answer ='is lesser';

}

简写:

constanswer = x >10?'is greater':'is lesser';

也可以嵌套if语句:

constbig = x >10?" greater 10": x

2.短路求值简写方式

当给一个变量分配另一个值时,想确定源始值不是null,undefined或空值。可以写撰写一个多重条件的if语句。

if(variable1 !==null|| variable1 !==undefined|| variable1 !=='') {

let variable2 = variable1;

}

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

constvariable2 = variable1  ||'new';

3.声明变量简写方法

let x;

let y;

let z =3;

简写方法:

letx, y, z=3;

4.if存在条件简写方法

if(likeJavaScript ===true)

简写:

if(likeJavaScript)

只有likeJavaScript是真值时,二者语句才相等。

如果判断值不是真值,则可以这样:

let a;

if( a !==true) {

// do something...

}

简写:

let a;

if( !a ) {

// do something...

}

5.JavaScript循环简写方法

for(leti =0; i < allImgs.length; 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,则可以:

let dbHost;

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(let i =0; i <1e7; i++) {}

//下面都是返回true

1e0===1;

1e1===10;

1e2===100;

1e3===1000;

1e4===10000;

1e5===100000;

8.对象属性简写

如果属性名与key名相同,则可以采用ES6的方法:

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});

怎么样,以上内容是否对于你学习Web前端有所帮助呢?如果你还想学习更多相关知识,可以来开课吧广场Web前端教程频道!

有用
分享
全部评论快来秀出你的观点
登录 后可发表观点…
发表
暂无评论,快来抢沙发!
云开发实战特训营