摘要：雙重按位非雙重按位非的效果等于相當于注意注意，這條確實不利于其他人看懂，需要合作的項目勿用，用了記得加注釋由你來補充那我來補充一條吧雙重就是的次方，也不用調(diào)用的方法了

原文:19+ JavaScript Shorthand Coding Techniques

使用三目運算符，可以更簡潔地把if else寫成一行

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

當你把一個變量的值賦給另一個變量，如果你要求原變量不能是空或者未定義，你有一長一短兩種寫法

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

const variable2 = variable1  || "new";

let x;
let y;
let z = 3;

寫成

let x, y, z=3;

（譯者注：其實現(xiàn)在standard風格不推薦聲明簡寫）

if (likeJavaScript === true)
//簡化為
if (likeJavaScript)

注意：這兩個例子不嚴格相等，likeJavaScript還可能是其他“為真”的值，參考這里

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

for (let i = 0; i < allImgs.length; i++)
//簡化為
for (let index of allImgs)
//譯者拓展，用于循環(huán)key，不推薦在數(shù)組使用
for (let index in allImgs)

其實就是第二點...

可能你早就知道了，這是一個不用在末尾寫一堆0的方法。例如1e7代表1后面跟7個0，也就是十進制的1000000。

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;

ES6提供的方法讓你更簡單地創(chuàng)建對象字面量，如果屬性名和值一樣的話，你可以如下縮寫

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

另外，注意箭頭函數(shù)里的this和普通函數(shù)不同

function calcCircumference(diameter) {
  return Math.PI * diameter
}
// 簡化為
calcCircumference = diameter => Math.PI * diameter

注意：這個情況下返回的必須是一行語句，如果返回對象要加()，多行語句還是用{}和return吧

ES6允許你的函數(shù)有默認參數(shù)了，趕緊用起來

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

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

引入一個組件之后你還要一個一個拆出來？現(xiàn)在不用了！

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;

JavaScriptconst 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.
	"
// 簡化為
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.`

可以代替一些數(shù)組操作，并且比數(shù)組操作更靈活

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

譯者：擴展運算符就等于把內(nèi)容攤開，你可以簡單理解為把[]去掉
跟concat()不同，你可以在數(shù)組任何地方使用擴展運算符展開

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 }

function foo(bar) {
  if(bar === undefined) {
    throw new Error("Missing parameter!");
  }
  return bar;
}
// 簡化為
mandatory = () => {
  throw new Error("Missing parameter!");
}

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

你可能用for循環(huán)寫過一個find函數(shù)，但是ES6已經(jīng)引入了這個新特性！

const pets = [
  { type: "Dog", name: "Max"},
  { type: "Cat", name: "Karl"},
  { type: "Dog", name: "Tommy"},
]

function findDog(name) {
  for(let i = 0; i pet.type ==="Dog" && pet.name === "Tommy");
console.log(pet); // { type: "Dog", name: "Tommy" }

(譯者：find跟filter的區(qū)別是filter返回數(shù)組，find只返回找到的第一個)

你知道foo.bar可以寫成foo["bar"]嗎？當然，不是知道這種用法就該這么用，但是這么寫可以讓你重用一些代碼。
以下是一個簡單的驗證函數(shù)

function validate(values) {
  if(!values.first)
    return false;
  if(!values.last)
    return false;
  return true;
}

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

這個函數(shù)完美地完成了他的任務，但是當你有很多表單需要驗證，而且格式和規(guī)則都不同的時候，你就需要一個通用的驗證函數(shù)了。

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

雙重按位非的效果等于Math.floor()

Math.floor(4.9) === 4  //true
// 相當于
~~4.9 === 4  //true

注意注意，這條確實不利于其他人看懂，需要合作的項目勿用，用了記得加注釋

3 ** 3 === 3 * 3 * 3
//a ** b就是a的b次方，也不用調(diào)用Math的方法了