ES6速记手册

Posted 2020-09-23 魔都叛徒

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