今天好程序員web前端教程爲大家分享JavaScript簡寫方法，小夥伴們快來看一看吧。
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});
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.模板字符串
傳統的JavaScript語言，輸出模板通常是這樣寫的。
-
constwelcome ='You have logged in as '+ first +' '+ last +'.'
- constdb ='http://'+ host +':'+ port +'/'+ database;
ES6可以使用反引號和${}簡寫：
-
constwelcome =
Youhave logged in as ${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;
也可以分配變量名：
-
const{ store, form, loading, errors, entity:contact } =this.props;
- //最後一個變量名爲contact
14.多行字符串簡寫
需要輸出多行字符串，需要使用+來拼接：
-
constlorem ='Lorem ipsum dolor sit amet, consectetur\n\t'
-
+'adipisicing elit, sed do eiusmod tempor incididunt\n\t'
-
+'ut labore et dolore magna aliqua. Ut enim ad minim\n\t'
-
+'veniam, quis nostrud exercitation ullamco laboris\n\t'
-
+'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t'
- +'irure dolor in reprehenderit in voluptate velit esse.\n\t'
使用反引號，則可以達到簡寫作用：
-
constlorem = `Loremipsum dolor sit amet, consectetur
-
adipisicing elit, seddoeiusmod tempor incididunt
-
ut labore et dolore magna aliqua.Utenim ad minim
-
veniam, quis nostrud exercitation ullamco laboris
-
nisi ut aliquip ex ea commodo consequat.Duisaute
- irure dolor in reprehenderit in voluptate velit esse.`
15.擴展運算符簡寫
擴展運算符有幾種用例讓JavaScript代碼更加有效使用，可以用來代替某個數組函數。
-
// joining arrays
-
constodd = [1,3,5];
-
constnums = [2,4,6].concat(odd);
-
// cloning arrays
-
constarr = [1,2,3,4];
- constarr2 = arr.slice()
簡寫：
-
// joining arrays
-
constodd = [1,3,5];
-
constnums = [2,4,6, ...odd];
-
console.log(nums);// [ 2, 4, 6, 1, 3, 5 ]
-
// cloning arrays
-
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語句來拋出異常，或使用強制參數簡寫方法。
-
functionfoo(bar) {
-
if(bar ===undefined) {
-
thrownewError('Missing parameter!');
-
}
-
returnbar;
- }
簡寫：
-
mandatory = () => {
-
thrownewError('Missing parameter!');
-
}
-
foo = (bar = mandatory()) => {
-
returnbar;
- }
17.Array.find簡寫
想從數組中查找某個值，則需要循環。在ES6中，find()函數能實現同樣效果。
-
constpets = [
-
{ type:'Dog', name:'Max'},
-
{ type:'Cat', name:'Karl'},
-
{ type:'Dog', name:'Tommy'},
-
]
-
functionfindDog(name) {
-
for(let i =0; i<pets.length; ++i) {
-
if(pets[i].type ==='Dog'&& pets[i].name === name) {
-
returnpets[i];
-
}
-
}
- }
簡寫：
-
pet = pets.find(pet => pet.type ==='Dog'&& pet.name ==='Tommy');
- console.log(pet);// { type: 'Dog', name: 'Tommy' }
18.Object[key]簡寫
考慮一個驗證函數：
-
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(field in schema) {
-
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
現在可以有適用於各種情況的驗證函數，不需要爲了每個而編寫自定義驗證函數了