博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
19种JS高(炫)效(技)缩写法!
阅读量:5770 次
发布时间:2019-06-18

本文共 5534 字,大约阅读时间需要 18 分钟。

原文:

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

2 短路求值

当你把一个变量的值赋给另一个变量,如果你要求原变量不能是空或者未定义,你有一长一短两种写法

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

3 声明变量的简写

let x;let y;let z = 3;

写成

let x, y, z=3;

(译者注:其实现在standard风格不推荐声明简写)

4 if的简写

if (likeJavaScript === true)//简化为if (likeJavaScript)

注意:这两个例子不严格相等,likeJavaScript还可能是其他“为真”的值,参考

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

5 JavaScript for循环简写

for (let i = 0; i < allImgs.length; i++)//简化为for (let index of allImgs)//译者拓展,用于循环key,不推荐在数组使用for (let index in allImgs)

6 短路求值

其实就是第二点...

7 十进制指数

可能你早就知道了,这是一个不用在末尾写一堆0的方法。例如1e7代表1后面跟7个0,也就是十进制的1000000。

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 对象属性的缩写

ES6提供的方法让你更简单地创建对象字面量,如果属性名和值一样的话,你可以如下缩写

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

function calcCircumference(diameter) {  return Math.PI * diameter}// 简化为calcCircumference = diameter => Math.PI * diameter

注意:这个情况下返回的必须是一行语句,如果返回对象要加(),多行语句还是用{}return

11 默认参数

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 反引号与模板字符串

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 结构赋值

引入一个组件之后你还要一个一个拆出来?现在不用了!

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 反引号与多行字符串

JavaScriptconst 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 扩展运算符

可以代替一些数组操作,并且比数组操作更灵活

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

也可以结合结构赋值使用

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 强制参数(其实又跟11一样)

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

你可能用for循环写过一个find函数,但是ES6已经引入了这个新特性!

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的区别是filter返回数组,find只返回找到的第一个)

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 rulesconst schema = {  first: {    required:true  },  last: {    required:true  }}// universal validation functionconst validate = (schema, values) => {  for(field in schema) {    if(schema[field].required) {      if(!values[field]) {        return false;      }    }  }  return true;}console.log(validate(schema, {first:'Bruce'})); // falseconsole.log(validate(schema, {first:'Bruce',last:'Wayne'})); // true

19 双重按位非

双重按位非的效果等于Math.floor()

Math.floor(4.9) === 4  //true// 相当于~~4.9 === 4  //true

注意注意,这条确实不利于其他人看懂,需要合作的项目勿用,用了记得加注释

20 由你来补充 ?

21 那我来补充一条吧!双重*

3 ** 3 === 3 * 3 * 3//a ** b就是a的b次方,也不用调用Math的方法了

转载地址:http://vysux.baihongyu.com/

你可能感兴趣的文章
微软发布Azure Storage不可变存储功能的正式版本
查看>>
Node.js 2017企业用户调查结果发布
查看>>
JavaScript到底是面向对象还是基于对象?
查看>>
小米大数据:借助Apache Kylin打造高效、易用的一站式OLAP解决方案
查看>>
“软”苹果水逆的一周:杂志服务崩溃,新机型遭泄露,芯片首架离职
查看>>
微软必应从.NET Core 2.1获得了性能提升
查看>>
2019年DApp调查报告
查看>>
职场新人不太适合参加的活动
查看>>
JAVA的优势就是劣势啊!
查看>>
IEEE802.11数据帧在Linux上的抓取
查看>>
数据加密和CA的创建
查看>>
使用if语句编写Shell脚本
查看>>
ELK实战之logstash部署及基本语法
查看>>
帧中继环境下ospf的使用(点到点模式)
查看>>
BeanShell变量和方法的作用域
查看>>
LINUX下防恶意扫描软件PortSentry
查看>>
由数据库对sql的执行说JDBC的Statement和PreparedStatement
查看>>
如何用VMware搭建HA和DRS环境(第二篇;安装配置DNS Server)
查看>>
如何使用SMTPDiag 工具
查看>>
springmvc+swagger2
查看>>