javascript開發人員需要知道的簡寫技巧

文章還有不足之處,歡迎補充,交流學習可以加羣460570824。

本文來源於多年的 Java 編碼技術經驗,適合所有正在使用 Java 編程的開發人員閱讀。

本文的目的在於幫助大家更加熟練的運用 Java 語言來進行開發工作。

1. 變量賦值

當將一個變量的值賦給另一個變量時,首先需要確保原值不是 null、未定義的或空值。

可以通過編寫一個包含多個條件的判斷語句來實現:

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

let variable2 =variable1;

}

或者簡寫爲以下的形式:

const variable2= variable1 || 'new';

可以將下面的代碼粘貼到 es6console 中,自己測試:

let variable1;

let variable2 =variable1 || '';

console.log(variable2=== ''); // prints truevariable1 = 'foo';

variable2 =variable1 || '';

console.log(variable2);// prints foo

2. 默認值賦值

如果預期參數是 null 或未定義,則不需要寫六行代碼來分配默認值。我們可以只使用一個簡短的邏輯運算符,只用一行代碼就能完成相同的操作。

let dbHost;if(process.env.DB_HOST) {

dbHost =process.env.DB_HOST;

} else {

dbHost ='localhost';

}

簡寫爲:

const dbHost =process.env.DB_HOST || 'localhost';

3.對象屬性

ES6 提供了一個很簡單的辦法,來分配屬性的對象。如果屬性名與 key 名相同,則可以使用簡寫。

const obj = {x:x, y:y };

簡寫爲:

const obj = { x,y };

4. 箭頭函數

經典函數很容易讀寫,但是如果把它們嵌套在其它函數中進行調用時,整個函數就會變得有些冗長和混亂。這時候可以使用箭頭函數來簡寫:

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

5.隱式返回值

返回值是我們通常用來返回函數最終結果的關鍵字。只有一個語句的箭頭函數,可以隱式返回結果(函數必須省略括號({ }),以便省略返回關鍵字)。

要返回多行語句(例如對象文本),需要使用()而不是{ }來包裹函數體。這樣可以確保代碼以單個語句的形式進行求值。

functioncalcCircumference(diameter) { return Math.PI * diameter

}

簡寫爲:

calcCircumference= diameter => (

Math.PI *diameter;

)

6. 默認參數值

可以使用 if 語句來定義函數參數的默認值。ES6 中規定了可以在函數聲明中定義默認值。

functionvolume(l, w, h) { if (w === undefined)

w = 3; if (h ===undefined)

h = 4; return l* w * h;

}

簡寫爲:

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

volume(2)//output: 24

7.模板字符串

過去我們習慣了使用“+”將多個變量轉換爲字符串,但是有沒有更簡單的方法呢?

ES6 提供了相應的方法,我們可以使用反引號和 $ { } 將變量合成一個字符串。

const welcome ='You have logged in as ' + first + ' ' + last + '.'const db = 'http://' + host+ ':' + port + '/' + database;

簡寫爲:

const welcome =`You have logged in as ${first} ${last}`;

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

8. 解構賦值

解構賦值是一種表達式,用於從數組或對象中快速提取屬性值,並賦給定義的變量。

在代碼簡寫方面,解構賦值能達到很好的效果。

const observable= require('mobx/observable');

const action =require('mobx/action');

construnInAction = require('mobx/runInAction');

const store =this.props.store;

const form =this.props.form;

const loading =this.props.loading;

const errors =this.props.errors;

const entity =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;

9. 展開運算符

展開運算符是在 ES6 中引入的,使用展開運算符能夠讓Java 代碼更加有效和有趣。

使用展開運算符可以替換某些數組函數。

// joiningarraysconst odd = [1, 3, 5];

const nums = [2,4 , 6].concat(odd);

// cloningarraysconst arr = [1, 2, 3, 4];

const arr2 =arr.slice( )

簡寫爲:

// joiningarraysconst odd = [1, 3, 5 ];

const nums = [2,4 , 6, ...odd];

console.log(nums);// [ 2, 4, 6, 1, 3, 5 ]

// cloningarraysconst arr = [1, 2, 3, 4];

const arr2 =[...arr];

和 concat( ) 功能不同的是,用戶可以使用擴展運算符在任何一個數組中插入另一個數組。

const odd = [1,3, 5 ];

const nums = [2,...odd, 4 , 6];

也可以將展開運算符和 ES6 解構符號結合使用:

const { a, b,...z } = { a: 1, b: 2, c: 3, d: 4 };

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

10. 強制參數

默認情況下,如果不向函數參數傳值,那麼 Java 會將函數參數設置爲未定義。其它一些語言則會發出警告或錯誤。要執行參數分配,可以使用if語句拋出未定義的錯誤,或者可以利用“強制參數”。

functionfoo(bar) { if(bar === undefined) { throw new Error('Missing parameter!');

} return bar;

}

簡寫爲:

mandatory = ( )=> { throw new Error('Missing parameter!');

}

foo = (bar =mandatory( )) => { return bar;

}

l Array.find

如果你曾經編寫過普通 Java 中的 find 函數,那麼你可能使用了 for 循環。在 ES6 中,介紹了一種名爲 find()的新數組函數,可以實現 for 循環的簡寫。

const pets = [

{ type: 'Dog',name: 'Max'},

{ type: 'Cat',name: 'Karl'},

{ type: 'Dog',name: 'Tommy'},

]functionfindDog(name) { for(let i = 0; i<pets.length; p=""pets[i];<="" return="" .name="==".type="==">

}

}

}

簡寫爲:

pet =pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');

console.log(pet);// { type: 'Dog', name: 'Tommy' }

Object [key]

雖然將 foo.bar 寫成 foo ['bar'] 是一種常見的做法,但是這種做法構成了編寫可重用代碼的基礎。

請考慮下面這個驗證函數的簡化示例:

functionvalidate(values) { if(!values.first) return false; if(!values.last) returnfalse; return true;

}

console.log(validate({first:'Bruce',last:'Wayne'}));// true

上面的函數完美的完成驗證工作。但是當有很多表單,則需要應用驗證,此時會有不同的字段和規則。如果可以構建一個在運行時配置的通用驗證函數,會是一個好選擇。

// objectvalidation rulesconst schema = {

first: {

required:true

},

last: {

required:true

}

}

// universalvalidation functionconst validate = (schema, values) => { for(field inschema) { if(schema[field].required) { if(!values[field]) { return false;

}

}

} return true;

}

console.log(validate(schema,{first:'Bruce'})); // falseconsole.log(validate(schema,{first:'Bruce',last:'Wayne'})); // true

現在有了這個驗證函數,我們就可以在所有窗體中重用,而無需爲每個窗體編寫自定義驗證函數。

11. 雙位操作符

位操作符是 Java 初級教程的基本知識點,但是我們卻不常使用位操作符。因爲在不處理二進制的情況下,沒有人願意使用 1 和 0。

但是雙位操作符卻有一個很實用的案例。你可以使用雙位操作符來替代 Math.floor( )。雙否定位操作符的優勢在於它執行相同的操作運行速度更快。

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

簡寫爲:

~~4.9 === 4//true

發佈了56 篇原創文章 · 獲贊 39 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章