史上最全JavaScript常用的简写技巧(推荐)(2)

你是不是厌倦了使用+将多个变量转换为字符串?有没有更简单的方法呢?如果你能够使用ES6,那么很幸运,你仅需使用反引号并将变量置于${}之中即可。例如:

const welcome = 'You have logged in as ' + first + ' ' + last + '.' const db = 'http://' + host + ':' + port + 'https://www.jb51.net/' + database;

可以简写为:

const welcome = `You have logged in as ${first} ${last}`; const db = `${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;

也可以分配变量名:

// 最后一个变量名为 contact

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中,包括扩展运算符,它可以使你的操作更简单,例如:

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

也可以使用扩展运算符:

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. 强制参数

默认情况下,如果不传递值,JavaScript 会将函数参数设置为undefined,而其他一些语言则会报出警告或错误。想要执行参数分配,则可以让if语句抛出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 中的find函数,那么你很有可能使用了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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wydzzp.html