1.三元操作符
這是一個很好的節省代碼當你想要編寫一個如果. . else語句在一線。
普通寫法:
const x = 20;let big;if (x > 10) {
速記:
const big = x > 10 ? true : false;
你還可以嵌套的if語句如下:
const big = x > 10 ? " greater 10" : x < 5 ? "less 5" : "between 5 and 10";
2. 短路評價速記
分配一個變量值到另一個變量的時候,你可能想要確保源變量不是null,未定義的或空。 你可以寫一個長有多個條件的if語句,或者使用短路評估。
普通寫法:
if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
速記:
const variable2 = variable1 || 'new';
let variable1;let variable2 = variable1 || '';console.log(variable2 === ''); // prints truevariable1 = 'foo';variable2 = variable1 || '';console.log(variable2); // prints foo
3. 聲明變量速記
是一種很好的做法聲明變量作業開始時你的功能。 這個速記方法可以節省你大量的時間和空間同時當聲明多個變量。
普通寫法:
let x;let y;let z = 3;
速記:
let x, y, z=3;
4. 如果存在簡寫
這可能是微不足道的,但是值得提及。 做“如果檢查”時,賦值操作符有時可以省略。
普通寫法:
if (likeJavaScript === true)
速記:
if (likeJavaScript)
普通寫法:
let a;if ( a !== true ) {// do something...}
速記:
let a;if ( !a ) {// do something...}
5. JavaScript for循環速記
這個小技巧是非常有用的,如果你想要的純JavaScript並不是如jQuery或lodash依賴外部庫。
普通寫法:
for (let i = 0; i < allImgs.length; i++)
速記:
for (let index in allImgs)
簡稱Array.forEach:
function logArrayElements(element, index, array) {
6. 短路的評估
而不是寫6行代碼分配一個默認值,如果參數是null或未定義,我們可以簡單地使用一個短路邏輯算子,實現同樣的事情只有一行代碼。
普通寫法:
let dbHost;if (process.env.DB_HOST) {
速記:
const dbHost = process.env.DB_HOST || 'localhost';
7. 十進制計數指數
你可能看過這個。 它本質上是一個奇特的方法寫數字沒有落后於0。 例如,1 e7本質上意味着1 7 0緊隨其后。 它代表了十進制計數(JavaScript解釋浮子式)等於10000000。
普通寫法:
for (let i = 0; i < 10000; i++) {}
速記:
for (let i = 0; i < 1e7; i++) {}// All the below will evaluate to true1e0 === 1;1e1 === 10;1e2 === 100;1e3 === 1000;1e4 === 10000;1e5 === 100000;
8. 對象屬性簡寫
定義對象文字在JavaScript中讓生活更容易。 ES6提供了一個更簡單的辦法分配對象的屬性。 如果屬性名和密鑰名一樣,您可以利用的速記符號。
普通寫法:
const obj = { x:x, y:y };
速記:
const obj = { x, y };
9. 箭頭功能速記
經典函數很容易讀和寫在他們的普通形式,但它們確實會變得有點冗長,困惑一旦你開始嵌套在其他函數調用。
普通寫法:
function sayHello(name) {
速記:
sayHello = name => console.log('Hello', name);
setTimeout(() => console.log('Loaded'), 2000);
list.forEach(item => console.log(item));
10. 隱式返回速記
回報是我們經常使用的一個關鍵字返回一個函數的最終結果。 箭函數用一個語句將隱式返回結果評價(函數必須省略括號({})為了省略返回關鍵字)。返回多行語句(如對象字面量),有必要使用()而不是{}包裝你的函數體。 這樣可以確保代碼是評估作為一個單獨的語句。
普通寫法:
function calcCircumference(diameter) {
速記:
calcCircumference = diameter => (
11. 默認參數值
您可以使用if語句來定義函數參數的默認值。 在ES6,您可以在函數聲明中定義的默認值。
普通寫法:
function volume(l, w, h) {
速記:
volume = (l, w = 3, h = 4 ) => (l * w * h);volume(2) //output: 24
12. 模板文字
難道你厭倦了使用' + '成一個字符串連接多個變量? 沒有一個更容易的方法嗎? 如果你能使用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}`;
13.解構作業速記
如果你正在與任何流行的web框架,有很高的機會您將使用數組的形式或數據對象文本組件和api之間傳遞信息。 一旦數據對象達到一個組件時,您需要將其展開。
普通寫法:
const observable = require('mobx/observable');const action = require('mobx/action');const runInAction = 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;
14. 多行字符串速記
如果你曾經發現自己需要編寫多行字符串的代碼,這是如何寫:
普通寫法:
const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t'
但還有一個更簡單的方法。 用引號的。
速記:
const lorem = `Lorem ipsum dolor sit amet, consectetur
15.傳播算子速記
的傳播算子引入ES6有幾個用例,讓JavaScript代碼更高效和有趣。 它可以用來代替某些陣列功能。 傳播算子只是一系列的三個點。
手寫
// joining arraysconst odd = [1, 3, 5]; const nums = [2 ,4 , 6].concat(odd); // cloning arraysconst arr = [1, 2, 3, 4]; const arr2 = arr.slice()
速記:
// joining arraysconst odd = [1, 3, 5 ]; const nums = [2 ,4 , 6, ...odd];console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]// cloning arraysconst arr = [1, 2, 3, 4];const arr2 = [...arr];
不像concat()功能,您可以使用傳播算子數組插入另一個數組內的任何地方。
const odd = [1, 3, 5 ]; const nums = [2, ...odd, 4 , 6];
你也可以把傳播算子與ES6 destructuring符號:
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 }
16.強制參數速記
默認情況下,JavaScript將函數參數undefined如果他們不通過一個值。 一些其他語言將拋出一個警告或者錯誤。 執行參數賦值,您可以使用一個if如果聲明拋出一個錯誤undefined
,或者你可以利用“強制參數速記”。
普通寫法:
function foo(bar) {
速記:
mandatory = () => {
17.數組中。 找到速記
如果你曾負責編寫一個發現在純JavaScript函數,您可能會使用一個for循環。 在ES6,一個新的數組函數命名find()介紹了。
普通寫法:
const pets = [
速記:
pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' }
18. 對象(例子)速記
你知道嗎,Foo.bar也可以寫成Foo['bar']嗎? 起初,似乎沒有理由你應該這樣寫。 然而,這個符號給你編寫可重用代碼的構建塊。
來看下面這一段簡化驗證函數的例子:
function validate(values) {
這個函數做它的工作。 然而,考慮這樣一個場景:你有很多種形式,您需要應用驗證,但不同領域和規則。 不是很好建立一個通用的驗證功能,可以在運行時配置?
速記:
// object validation rulesconst schema = {
現在我們有一個驗證函數我們可以各種形式的重用,而不需要編寫一個定制的驗證功能。
19. 雙位不是速記
逐位運算符是其中一個特性你了解JavaScript新手教程和你永遠不會實施任何地方。 此外,誰想一起工作如果你不處理二進制0和1 ?
然而,一個非常實用的用例雙位操作符。 您可以使用它作為替代Math.floor()。 兩位沒有運營商的優勢是,它執行相同的操作要快得多。 你可以閱讀更多關於位運算符在這里。
普通寫法:
Math.floor(4.9) === 4 //true
速記:
~~4.9 === 4 //true