1. 三元运算符

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像这样嵌套你的语句：

const answer = x > 10 ? "greater than 10" : x < 5 ? "less than 5" : "between 5 and 10";

2. 短路评估速记

将变量值分配给另一个变量时，您可能希望确保源变量不为 null、未定义或为空。您可以编写if带有多个条件的长语句，也可以使用短路评估。

速记：

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

速记：

const variable2 = variable1  || 'new';

不相信我？自己测试（在es6console中粘贴以下代码）：

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

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

请注意，如果您设置variable1为falseor ，则将分配0该值。bar

3. 简写声明变量

在函数的开头声明变量赋值是一种很好的做法。当同时声明多个变量时，这种速记方法可以为您节省大量时间和空间。

速记：

let x;
let y;
let z = 3;

速记：

let x, y, z=3;

4. 如果存在速记

这可能是微不足道的，但值得一提。在进行“if检查”时，有时可以省略赋值运算符。

速记：

if (likeJavaScript === true)

速记：

if (likeJavaScript)

注意：这两个示例并不完全相等，因为只要likeJavaScript是真值，速记检查就会通过。

这是另一个例子。如果a不等于真，那么做点什么。

速记：

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

速记：

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

5. JavaScript for 循环简写

如果您想要纯 JavaScript 并且不想依赖 jQuery 或 lodash 等外部库，这个小技巧非常有用。

速记：

const fruits = ['mango', 'peach', 'banana'];
for (let i = 0; i < fruits.length; i++)

速记：

for (let fruit of fruits)

如果您只想访问索引，请执行以下操作：

for (let index in fruits)

如果您想访问文字对象中的键，这也适用：

const obj = {continent: 'Africa', country: 'Kenya', city: 'Nairobi'}
for (let key in obj)
  console.log(key) // output: continent, country, city

Array.forEach 的简写：

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

6. 短路评估

如果预期参数为空或未定义，我们无需编写六行代码来分配默认值，而是可以简单地使用短路逻辑运算符并仅用一行代码完成相同的事情。

速记：

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

速记：

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

7. 十进制基指数

你可能已经在周围看到过这个。它本质上是一种写?数字而没有尾随零的奇特方式。例如，1e7 本质上意味着 1 后跟 7 个零。它表示十进制基数（JavaScript 将其解释为浮点类型）等于 10,000,000。

速记：

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

速记：

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;

8. 对象属性简写

在 JavaScript 中定义对象字面量让生活变得更加轻松。ES6 提供了一种更简单的方法来为对象分配属性。如果变量名称与对象键相同，则可以利用速记表示法。

速记：

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

速记：

const obj = { x, y };

9. 箭头函数速记

经典函数以其简单的形式易于阅读和编写，但是一旦您开始将它们嵌套在其他函数调用中，它们确实会变得有点冗长和混乱。

速记：

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

需要注意的是，this箭头函数内部的值的确定方式与普通函数不同，因此这两个示例并非严格等价。有关更多详细信息，请参阅有关箭头函数语法的这篇文章。

10. 隐式返回简写

return 是我们经常用来返回函数最终结果的关键字。带有单个语句的箭头函数将隐式返回其评估结果（该函数必须省略大括号 ( {}) 以省略 return 关键字）。

要返回多行语句（例??如对象字面量），有必要使用()而不是{}包装函数体。这可确保代码作为单个语句进行评估。

速记：

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

速记：

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

11. 默认参数值

您可以使用该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

12. 模板文字

你不厌倦使用' + '将多个变量连接成一个字符串吗？没有更简单的方法吗？如果你能够使用 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}`;

13. 解构赋值速记

如果您正在使用任何流行的 Web 框架，那么您很有可能会使用数组或对象文字形式的数据在组件和 API 之间传递信息。数据对象到达组件后，您需要对其进行解包。

速记：

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;

14. 多行字符串速记

如果您曾经发现自己需要在代码中编写多行字符串，那么您可以这样编写：

速记：

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

15.传播运算符速记

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 }

16.强制参数速记

默认情况下，undefined如果没有传递值，JavaScript 会将函数参数设置为。其他一些语言会抛出警告或错误。要强制执行参数分配，您可以使用ifif 语句引发错误undefined，或者您可以利用“强制参数速记”。

速记：

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

速记：

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

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

17. Array.find 速记

如果您曾经被要求用纯 JavaScript 编写查找函数，那么您可能会使用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];
    }
  }
}

速记：

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

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

现在我们有一个验证函数，我们可以在所有表??单中重用，而无需为每个表单编写自定义验证函数。

19. 双位非简写

位运算符是您在 JavaScript 初学者教程中了解的功能之一，您永远无法在任何地方实现它们。此外，如果您不处理二进制文件，谁愿意使用 1 和 0？

然而，双位非运算符有一个非常实用的用例。您可以将其用作Math.floor(). 双位非运算符的优点是它执行相同的操作要快得多。您可以在此处阅读有关按位运算符的更多信息。

速记：

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

速记：

~~4.9 === 4  //true

20. 指数幂速记

数学指数幂函数的简写：

速记：

Math.pow(2,3); // 8
Math.pow(2,2); // 4
Math.pow(4,3); // 64

速记：

2**3 // 8
2**4 // 4
4**3 // 64

21. 将字符串转换为数字

有时您的代码会收到以字符串格式出现但需要以数字格式处理的数据。没什么大不了的，我们可以进行快速转换。

速记：

const num1 = parseInt("100");
const num2 =  parseFloat("100.01");

速记：

const num1 = +"100"; // converts to int data type
const num2 =  +"100.01"; // converts to float data type

22. 对象属性赋值

考虑以下代码：

let fname = { firstName : 'Black' };
let lname = { lastName : 'Panther'}

您将如何将它们合并为一个对象？一种方法是编写一个函数，将数据从第二个对象复制到第一个对象。不幸的是，这可能不是你想要的——你可能需要创建一个全新的对象而不改变任何现有的对象。最简单的方法是使用Object.assignES6 中引入的函数：

let full_names = Object.assign(fname, lname);

您还可以使用 ES8 中引入的对象销毁表示法：

let full_names = {...fname, ...lname};

您可以合并的对象属性的数量没有限制。如果您确实有具有相同属性名称的对象，则值将按照它们合并的顺序被覆盖。

23. Bitwise IndexOf 速记

使用数组执行查找时，该indexOf()函数用于检索您要查找的项目的位置。如果未找到该项目，-1则返回该值。在 JavaScript 中，0被认为是“虚假的”，而大于或小于的数字0被认为是“真实的”。因此，必须像这样编写正确的代码。

速记：

if(arr.indexOf(item) > -1) { // Confirm item IS found

}

if(arr.indexOf(item) === -1) { // Confirm item IS NOT found

}

速记：

if(~arr.indexOf(item)) { // Confirm item IS found

}

if(!~arr.indexOf(item)) { // Confirm item IS NOT found

}

运算符bitwise(~)将为除. -1否定它就像做一样简单!~。或者，我们也可以使用includes()函数：

if(arr.includes(item)) { // Returns true if the item exists, false if it doesn't

}

24. 对象条目（）

这是 ES8 中引入的一个功能，允许您将文字对象转换为键/值对数组。请参见下面的示例：

const credits = { producer: 'John', director: 'Jane', assistant: 'Peter' };
const arr = Object.entries(credits);
console.log(arr);

/** Output:
[ [ 'producer', 'John' ],
  [ 'director', 'Jane' ],
  [ 'assistant', 'Peter' ]
]
**/

25. 对象.values()

这也是 ES8 中引入的一个新特性，它执行与 类似的功能Object.entries()，但没有关键部分：

const credits = { producer: 'John', director: 'Jane', assistant: 'Peter' };
const arr = Object.values(credits);
console.log(arr);

/** Output:
[ 'John', 'Jane', 'Peter' ]
**/