1.三元操作符
这是一个很好的节省代码当你想要编写一个如果. . else语句在一线。
普通写法:
const x = 20;let big;if (x > 10) {
速记:
const big = x > 10 ? true : false;
你还可以嵌套的if语句如下:
const big = x > 10 ? " greater 10" : x < 5 ? "less 5" : "between 5 and 10";
2. 短路评价速记
分配一个变量值到另一个变量的时候,你可能想要确保源变量不是null,未定义的或空。 你可以写一个长有多个条件的if语句,或者使用短路评估。
普通写法:
if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
速记:
const variable2 = variable1 || 'new';
let variable1;let variable2 = variable1 || '';console.log(variable2 === ''); // prints truevariable1 = 'foo';variable2 = variable1 || '';console.log(variable2); // prints foo
3. 声明变量速记
是一种很好的做法声明变量作业开始时你的功能。 这个速记方法可以节省你大量的时间和空间同时当声明多个变量。
普通写法:
let x;let y;let z = 3;
速记:
let x, y, z=3;
4. 如果存在简写
这可能是微不足道的,但是值得提及。 做“如果检查”时,赋值操作符有时可以省略。
普通写法:
if (likeJavaScript === true)
速记:
if (likeJavaScript)
普通写法:
let a;if ( a !== true ) {// do something...}
速记:
let a;if ( !a ) {// do something...}
5. JavaScript for循环速记
这个小技巧是非常有用的,如果你想要的纯JavaScript并不是如jQuery或lodash依赖外部库。
普通写法:
for (let i = 0; i < allImgs.length; i++)
速记:
for (let index in allImgs)
简称Array.forEach:
function logArrayElements(element, index, array) {
6. 短路的评估
而不是写6行代码分配一个默认值,如果参数是null或未定义,我们可以简单地使用一个短路逻辑算子,实现同样的事情只有一行代码。
普通写法:
let dbHost;if (process.env.DB_HOST) {
速记:
const dbHost = process.env.DB_HOST || 'localhost';
7. 十进制计数指数
你可能看过这个。 它本质上是一个奇特的方法写数字没有落后于0。 例如,1 e7本质上意味着1 7 0紧随其后。 它代表了十进制计数(JavaScript解释浮子式)等于10000000。
普通写法:
for (let i = 0; i < 10000; i++) {}
速记:
for (let i = 0; i < 1e7; i++) {}// All the below will evaluate to true1e0 === 1;1e1 === 10;1e2 === 100;1e3 === 1000;1e4 === 10000;1e5 === 100000;
8. 对象属性简写
定义对象文字在JavaScript中让生活更容易。 ES6提供了一个更简单的办法分配对象的属性。 如果属性名和密钥名一样,您可以利用的速记符号。
普通写法:
const obj = { x:x, y:y };
速记:
const obj = { x, y };
9. 箭头功能速记
经典函数很容易读和写在他们的普通形式,但它们确实会变得有点冗长,困惑一旦你开始嵌套在其他函数调用。
普通写法:
function sayHello(name) {
速记:
sayHello = name => console.log('Hello', name);
setTimeout(() => console.log('Loaded'), 2000);
list.forEach(item => console.log(item));
10. 隐式返回速记
回报是我们经常使用的一个关键字返回一个函数的最终结果。 箭函数用一个语句将隐式返回结果评价(函数必须省略括号({})为了省略返回关键字)。返回多行语句(如对象字面量),有必要使用()而不是{}包装你的函数体。 这样可以确保代码是评估作为一个单独的语句。
普通写法:
function calcCircumference(diameter) {
速记:
calcCircumference = diameter => (
11. 默认参数值
您可以使用if语句来定义函数参数的默认值。 在ES6,您可以在函数声明中定义的默认值。
普通写法:
function volume(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'
但还有一个更简单的方法。 用引号的。
速记:
const lorem = `Lorem ipsum dolor sit amet, consectetur
15.传播算子速记
的传播算子引入ES6有几个用例,让JavaScript代码更高效和有趣。 它可以用来代替某些阵列功能。 传播算子只是一系列的三个点。
手写
// joining arraysconst odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);
// cloning arraysconst arr = [1, 2, 3, 4];
const arr2 = arr.slice()
速记:
// joining arraysconst odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];console.log(nums);
// [ 2, 4, 6, 1, 3, 5 ]// cloning arraysconst arr = [1, 2, 3, 4];const arr2 = [...arr];
不像concat()功能,您可以使用传播算子数组插入另一个数组内的任何地方。
const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];
你也可以把传播算子与ES6 destructuring符号:
const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a) // 1console.log(b) // 2console.log(z) // { c: 3, d: 4 }
16.强制参数速记
默认情况下,JavaScript将函数参数undefined如果他们不通过一个值。 一些其他语言将抛出一个警告或者错误。 执行参数赋值,您可以使用一个if如果声明抛出一个错误undefined
,或者你可以利用“强制参数速记”。
普通写法:
function foo(bar) {
速记:
mandatory = () => {
17.数组中。 找到速记
如果你曾负责编写一个发现在纯JavaScript函数,您可能会使用一个for循环。 在ES6,一个新的数组函数命名find()介绍了。
普通写法:
const pets = [
速记:
pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' }
18. 对象(例子)速记
你知道吗,Foo.bar也可以写成Foo['bar']吗? 起初,似乎没有理由你应该这样写。 然而,这个符号给你编写可重用代码的构建块。
来看下面这一段简化验证函数的例子:
function validate(values) {
这个函数做它的工作。 然而,考虑这样一个场景:你有很多种形式,您需要应用验证,但不同领域和规则。 不是很好建立一个通用的验证功能,可以在运行时配置?
速记:
// object validation rulesconst schema = {
现在我们有一个验证函数我们可以各种形式的重用,而不需要编写一个定制的验证功能。
19. 双位不是速记
逐位运算符是其中一个特性你了解JavaScript新手教程和你永远不会实施任何地方。 此外,谁想一起工作如果你不处理二进制0和1 ?
然而,一个非常实用的用例双位操作符。 您可以使用它作为替代Math.floor()。 两位没有运营商的优势是,它执行相同的操作要快得多。 你可以阅读更多关于位运算符在这里。
普通写法:
Math.floor(4.9) === 4 //true
速记:
~~4.9 === 4 //true