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

原文:19+ JavaScript Shorthand Coding Techniques

使用三目運(yùn)算符，可以更簡(jiǎn)潔地把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";

當(dāng)你把一個(gè)變量的值賦給另一個(gè)變量，如果你要求原變量不能是空或者未定義，你有一長(zhǎng)一短兩種寫法

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;

（譯者注：其實(shí)現(xiàn)在standard風(fēng)格不推薦聲明簡(jiǎn)寫）

if (likeJavaScript === true)
//簡(jiǎn)化為
if (likeJavaScript)

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

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

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

其實(shí)就是第二點(diǎn)...

可能你早就知道了，這是一個(gè)不用在末尾寫一堆0的方法。例如1e7代表1后面跟7個(gè)0，也就是十進(jìn)制的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提供的方法讓你更簡(jiǎn)單地創(chuàng)建對(duì)象字面量，如果屬性名和值一樣的話，你可以如下縮寫

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);
});
// 簡(jiǎn)化為
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
}
// 簡(jiǎn)化為
calcCircumference = diameter => Math.PI * diameter

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

ES6允許你的函數(shù)有默認(rèn)參數(shù)了，趕緊用起來(lái)

function volume(l, w, h) {
  if (w === undefined)
    w = 3;
  if (h === undefined)
    h = 4;
  return l * w * h;
}
// 簡(jiǎn)化為
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;
// 簡(jiǎn)化為
const welcome = `You have logged in as ${first} ${last}`;

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

引入一個(gè)組件之后你還要一個(gè)一個(gè)拆出來(lái)？現(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.
	"
// 簡(jiǎn)化為
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];

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

const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];

也可以結(jié)合結(jié)構(gòu)賦值使用

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;
}
// 簡(jiǎn)化為
mandatory = () => {
  throw new Error("Missing parameter!");
}

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

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

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返回?cái)?shù)組，find只返回找到的第一個(gè))

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

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

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

這個(gè)函數(shù)完美地完成了他的任務(wù)，但是當(dāng)你有很多表單需要驗(yàn)證，而且格式和規(guī)則都不同的時(shí)候，你就需要一個(gè)通用的驗(yàn)證函數(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
// 相當(dāng)于
~~4.9 === 4  //true

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

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