JavaScript編碼的19個小技巧

這篇文章適合任何一位基於JavaScript開發的開發者。我寫這篇文章主要涉及JavaScript中一些簡寫的程式碼，幫助大家更能理解一些JavaScript的基礎。希望這些程式碼能從不同的角度幫助你更好的理解JavaScript。

三元運算子

如果使用if...else語句，那麼這是一個很好節省程式碼的方式。

Longhand:

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

Shorthand:

const answer = x > 10 ? 'is greater' : 'is lesser';

你還可以像下面這樣嵌套if語句：

const big = x > 10 ? " greater 10" : x

Short-circuit Evaluation

分配一個變數值到另一個變數的時候，你可能想要確保變數不是null、undefined 或空。你可以寫一個有多個if的條件語句或Short-circuit Evaluation。

Longhand:

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

Shorthand:

const variable2 = variable1  || 'new';

不要相信我，請先相信自己的測試（可以把下面的程式碼貼在es6console）

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

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

宣告變數

在函數中宣告變數時，像下面這樣同時宣告多個變數可以節省你大量的時間和空間：

#Longhand:

let x;
let y;
let x = 3;

Shorthand:

let x, y, z=3;

如果存在

這可能是微不足道的，但值得提及。做「如果檢查」時，賦值操作符有時可以省略。

Longhand:

if (likeJavaScript === true)

Shorthand:

if (likeJavaScript)

註：這兩種方法並不完全相同，簡寫檢查只要likeJavaScript是true都會通過。

這有另一個範例。如果a不是true，然後做什麼。

Longhand:

let a;
if ( a !== true ) {
// do something...
}

Shorthand:

let a;
if ( !a ) {
// do something...
}

JavaScript的for迴圈

如果你只想要原生的JavaScript，而不想依賴jQuery或Lodash這樣的外部函式庫，那麼這個小技巧是非常有用的。

Longhand:

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

Shorthand:

for (let index in allImgs)

Array.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

Short-circuit Evaluation

如果參數是null或是undefined，我們可以簡單的使用一個Short-circuit邏輯運算，實作一行程式碼替代六行程式碼的寫法。

Longhand:

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

Shorthand:

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

十進位指數

你可能看過這個。它本質上就是一個寫數字的奇特寫法，就是一個數字後面有很多個0。例如1e7本質相當於10000000（1的後面有7個0）。它代表了十進制計數等於10000000。

Longhand:

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

Shorthand:

for (let i = 0; i < 1e7; i++) {}
// All the below will evaluate to true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;

物件屬性

定義物件文字（Object literals ）讓JavaScript變得更有趣。 ES6提供了一個更簡單的辦法來指派物件的屬性。如果屬性名稱和值一樣，你可以使用下面簡寫的方式。

Longhand:

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

Shorthand:

const obj = { x, y };

箭頭函數

經典函數很容易讀取和寫，但它們確實會變得有點冗長，特別是在巢狀函數中呼叫其他函數時還會讓你感到困惑。

Longhand:

function sayHello(name) {
  console.log('Hello', name);
}

setTimeout(function() {
  console.log('Loaded')
}, 2000);

list.forEach(function(item) {
  console.log(item);
});

Shorthand:

sayHello = name => console.log('Hello', name);

setTimeout(() => console.log('Loaded'), 2000);

list.forEach(item => console.log(item));

隱含回傳

return在函數中經常使用到的一個關鍵字，將傳回函數的最終結果。箭頭函數用一個語句將隱式的回傳結果（函數必須省略{}，為了省略return關鍵字）。

如果傳回多行語句（例如物件），有必要在函數體內使用()取代{}。這樣可以確保程式碼是否會作為一個單獨的語句傳回。

Longhand:

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

Shorthand:

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

預設參數值

你可以使用if語句來定義函數參數的預設值。在ES6中，可以在函數宣告中定義預設值。

Longhand:

function volume(l, w, h) {
  if (w === undefined)
    w = 3;
  if (h === undefined)
    h = 4;
  return l * w * h;
}

Shorthand:

volume = (l, w = 3, h = 4 ) => (l * w * h);
volume(2) //output: 24

Template Literals

是不是厭倦了使用+來連接多個變數變成一個字串？難道就沒有更容易的方法嗎？如果你能使用ES6，那麼你是幸運的。在ES6中，你要做的是使用撇號和${}，並且把你的變數放在大括號內。

Longhand:

const welcome = 'You have logged in as ' + first + ' ' + last + '.'

const db = 'http://' + host + ':' + port + '/' + database;

Shorthand:

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

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

Destructuring Assignment

#如果你正在使用任何一個在流行的Web框架時，就有很多機會使用陣列的形式或資料物件的形式與API之間傳遞訊息。一旦資料物件達到一個對個元件時，你需要將其展開。

Longhand:

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;

Shorthand:

import { observable, action, runInAction } from 'mobx';

const { store, form, loading, errors, entity } = this.props;

你甚至可以自己指定變數名稱：

const { store, form, loading, errors, entity:contact } = this.props;

多行字串

你會發現以前自己寫多行字串的程式碼會像下面這樣：

Longhand:

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'

但还有一个更简单的方法。使用撇号。

Shorthand:

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.`

Spread Operator

Spread Operator是ES6中引入的，使JavaScript代码更高效和有趣。它可以用来代替某些数组的功能。Spread Operator只是一个系列的三个点(...)。

Longhand:

// 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()

Shorthand:

// 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()函数，使用Spread Operator你可以将一个数组插入到另一个数组的任何地方。

const odd = [1, 3, 5 ];
const nums = [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 }

强制参数

默认情况下，JavaScript如果不给函数参数传一个值的话，将会是一个undefined。有些语言也将抛出一个警告或错误。在执行参数赋值时，你可以使用if语句，如果未定义将会抛出一个错误，或者你可以使用强制参数（Mandatory parameter）。

Longhand:

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

Shorthand:

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

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

Array.find

如果你以前写过一个查找函数，你可能会使用一个for循环。在ES6中，你可以使用数组的一个新功能find()。

Longhand:

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 === &#39;Dog&#39; && pets[i].name === name) {
      return pets[i];
    }
  }
}

Shorthand:

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

这个函数可以正常工作。然而，需要考虑一个这样的场景：有很多种形式需要应用验证，而且不同领域有不同规则。在运行时很难创建一个通用的验证功能。

Shorthand:

// 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

现在我们有一个验证函数，可以各种形式的重用，而不需要为每个不同的功能定制一个验证函数。

Double Bitwise NOT

如果你是一位JavaScript新手的话，对于逐位运算符（Bitwise Operator）你应该永远不会在任何地方使用。此外，如果你不处理二进制0和1，那就更不会想使用。

然而，一个非常实用的用例，那就是双位操作符。你可以用它替代Math.floor()。Double Bitwise NOT运算符有很大的优势，它执行相同的操作要快得多。你可以在这里阅读更多关于位运算符相关的知识。

Longhand:

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

Shorthand:

~~4.9 === 4  //true

以上是JavaScript編碼的19個小技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！