JS簡寫

本文來源於多年的 JavaScript 編碼技術經驗，適合全部正在使用 JavaScript 編程的開發人員閱讀。

本文的目的在於幫助你們更加熟練的運用 JavaScript 語言來進行開發工做。

文章將分紅初級篇和高級篇兩部分，分別進行介紹。

 

初級篇

一、三目運算符

下面是一個很好的例子，將一個完整的 if 語句，簡寫爲一行代碼。

const x = 20;
let answer;
if (x > 10) {
    answer = 'greater than 10';
} else {
    answer = 'less than 10';
}

簡寫爲：

const answer = x > 10 ? 'greater than 10' : 'less than 10';

 

二、循環語句

當使用純 JavaScript（不依賴外部庫，如 jQuery 或 lodash）時，下面的簡寫會很是有用。

for (let i = 0; i < allImgs.length; i++)

簡寫爲：

for (let index of allImgs)

下面是遍歷數組 forEach 的簡寫示例：

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

 

三、聲明變量

在函數開始以前，對變量進行賦值是一種很好的習慣。在申明多個變量時：

let x;
let y;
let z = 3;

能夠簡寫爲：

let x, y, z=3;

 

四、if 語句

在使用 if 進行基本判斷時，能夠省略賦值運算符。

if (likeJavaScript === true)

簡寫爲：

if (likeJavaScript)

 

五、十進制數

可使用科學計數法來代替較大的數據，如能夠將 10000000 簡寫爲 1e7。

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

簡寫爲：

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

 

六、多行字符串

若是須要在代碼中編寫多行字符串，就像下面這樣：

const lorem = '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'

可是還有一個更簡單的方法，只使用引號：

const lorem = `Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse.`

 

高級篇

一、變量賦值

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

能夠經過編寫一個包含多個條件的判斷語句來實現：

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

或者簡寫爲如下的形式：

const variable2 = variable1  || 'new';

能夠將下面的代碼粘貼到 es6console 中，本身測試：

let variable1;
let variable2 = variable1  || '';
console.log(variable2 === ''); // prints true
variable1 = 'foo';
variable2 = variable1  || '';
console.log(variable2); // prints foo

 

二、默認值賦值

若是預期參數是 null 或未定義，則不須要寫六行代碼來分配默認值。咱們能夠只使用一個簡短的邏輯運算符，只用一行代碼就能完成相同的操做。

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

簡寫爲：

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

 

三、對象屬性

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

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

簡寫爲：

const obj = { x, y };

 

四、箭頭函數

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

function sayHello(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));

 

五、隱式返回值

返回值是咱們一般用來返回函數最終結果的關鍵字。只有一個語句的箭頭函數，能夠隱式返回結果（函數必須省略括號（{ }），以便省略返回關鍵字）。

要返回多行語句（例如對象文本），須要使用（）而不是{ }來包裹函數體。這樣能夠確保代碼以單個語句的形式進行求值。

function calcCircumference(diameter) {
  return Math.PI * diameter
}

簡寫爲：

calcCircumference = diameter => (
  Math.PI * diameter;
)

 

六、默認參數值

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

function volume(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

 

七、模板字符串

過去咱們習慣了使用「+」將多個變量轉換爲字符串，可是有沒有更簡單的方法呢？

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

 

八、解構賦值

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

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

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;

 

九、展開運算符

展開運算符是在 ES6 中引入的，使用展開運算符可以讓 JavaScript 代碼更加有效和有趣。

使用展開運算符能夠替換某些數組函數。

// joining arrays
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);
 
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = arr.slice( )

簡寫爲：

// joining arrays
const odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]
 
// cloning arrays
const 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) // 1
console.log(b) // 2
console.log(z) // { c: 3, d: 4 }

 

十、強制參數

默認狀況下，若是不向函數參數傳值，那麼 JavaScript 會將函數參數設置爲未定義。其它一些語言則會發出警告或錯誤。要執行參數分配，可使用if語句拋出未定義的錯誤，或者能夠利用「強制參數」。

function foo(bar) {
  if(bar === undefined) {
    throw new Error('Missing parameter!');
  }
  return bar;
}

簡寫爲：

mandatory = ( ) => {
  throw new Error('Missing parameter!');
}
foo = (bar = mandatory( )) => {
  return bar;
}

 

十一、Array.find

若是你曾經編寫過普通 JavaScript 中的 find 函數，那麼你可能使用了 for 循環。在 ES6 中，介紹了一種名爲 find（）的新數組函數，能夠實現 for 循環的簡寫。

const pets = [
  { type: 'Dog', name: 'Max'},
  { type: 'Cat', name: 'Karl'},
  { type: 'Dog', name: 'Tommy'},
]
function findDog(name) {
  for(let i = 0; i<pets.length; ++i) {
    if(pets[i].type === 'Dog' && pets[i].name === name) {
      return pets[i];
    }
  }
}

簡寫爲：

pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' }

 

十二、Object [key]

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

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

function validate(values) {
  if(!values.first)
    return false;
  if(!values.last)
    return false;
  return true;
}
console.log(validate({first:'Bruce',last:'Wayne'})); // true

上面的函數完美的完成驗證工做。可是當有不少表單，則須要應用驗證，此時會有不一樣的字段和規則。若是能夠構建一個在運行時配置的通用驗證函數，會是一個好選擇。

// object validation rules
const schema = {
  first: {
    required:true
  },
  last: {
    required:true
  }
}
 
// universal validation function
const validate = (schema, values) => {
  for(field in schema) {
    if(schema[field].required) {
      if(!values[field]) {
        return false;
      }
    }
  }
  return true;
}
console.log(validate(schema, {first:'Bruce'})); // false
console.log(validate(schema, {first:'Bruce',last:'Wayne'})); // true

如今有了這個驗證函數，咱們就能夠在全部窗體中重用，而無需爲每一個窗體編寫自定義驗證函數。

 

1三、雙位操做符

位操做符是 JavaScript 初級教程的基本知識點，可是咱們卻不常使用位操做符。由於在不處理二進制的狀況下，沒有人願意使用 1 和 0。

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

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

簡寫爲：

~~4.9 === 4  //true

 

總結

上述是一些經常使用的 JavaScript 簡寫技巧，若是有其它未說起的簡寫技巧，也歡迎你們補充。

原文連接：https://www.sitepoint.com/shorthand-javascript-techniques/

轉載請註明出自：葡萄城控件