三元操作符

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

const x = 20;
let big;
if (x > 10) {
big = true;
} else {
big = false;
}
//這樣寫...
const big = x > 10 ? true : false;

Short-circuit Evaluation

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

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
  let variable2 = variable1;
}
// 這樣寫
const variable2 = variable1 || 'new';

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

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

宣告變數

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

let x;
let y;
let x = 3;

// or 
let x,y,z = 3;

如果存在

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

if (likeJavaScript === true)
//or
if (likeJavaScript)

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

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

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

JavaScript的for迴圈

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

for (let i = 0; i < allImgs.length; i++)
//or
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

物件屬性

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

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

箭頭函式

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

function sayHello(name) {
console.log('Hello',name);
}
setTimeout(function() {
console.log('Loaded')
},2000);
list.forEach(function(item){
console.log(item)
})

//or
sayHello = name => console.log('Hello',name);
setTimeout(() => console.log('Loaded'),2000);
list.forEach(item => console.log(item));

隱式返回

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

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

function calcCircumference(diameter) {
return Math.PI * diameter
}
//or
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;
}
//or
volume = (l,w = 3,h = 4) => (l * w * h);
volume(2); // 24

Template Literals(字串模板)

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

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

Destructuring Assignment（解構賦值）

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;

//or

import {observable,action,runInAction} from 'mobx';
const {store,form,loading,errors,entity} = this.props;

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

const {store,entity:contact} = this.props; //通過 : 號來重新命名

Spread Operator(擴充套件運算子)

Spread Operator是ES6中引入的，使JavaScript程式碼更高效和有趣。它可以用來代替某些陣列的功能。Spread Operator只是一個系列的三個點(...)。

// Joining arrays
const odd = [1,3,5];
const nums = [2,4,6].concat(odd);


// cloning arrays
const arr = [1,2,4];
const arr2 = arr.slice();
//or
// Joining arrays
const odd = [1,6,...odd];
console.log(nums); // [2,1,5]


// cloning arrays
const arr = [1,4];
const arr2 = [...arr];

不像concat()函式，使用Spread Operator你可以將一個數組插入到另一個數組的任何地方。

const odd = [1,...odd,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}

強制引數

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

Array.find

如果你以前寫過一個查詢函式，你可能會使用一個for迴圈。在ES6中，你可以使用陣列的一個新功能find()。

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];
    }
  }
}
 // or
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

現在我們有一個驗證函式，可以各種形式的重用，而不需要為每個不同的功能定製一個驗證函式。

Double Bitwise NOT

如果你是一位JavaScript新手的話，對於逐位運算子（Bitwise Operator）你應該永遠不會在任何地方使用。此外，如果你不處理二進位制0和1，那就更不會想使用。

然而，一個非常實用的用例，那就是雙位操作符。你可以用它替代Math.floor()。Double Bitwise NOT運算子有很大的優勢，它執行相同的操作要快得多。你可以在這裡閱讀更多關於位運算子相關的知識。

Math.floor(4.9) === 4; // true
//or
~~4.9 === 4; //true

以上就是JavaScript編碼小技巧分享的詳細內容，更多關於JavaScript編碼技巧的資料請關注我們其它相關文章！