对于每个 JavaScript 开发人员,快捷语法都是必备技能之一,下面就集中介绍这些快捷语法。

三元运算符

传统写法

const x = 20;
let answer;
if (x > 10) {
answer = 'is greater';
} else {
answer = 'is lesser';
}

快捷语法

const answer = x > 10 ? 'is greater' : 'is lesser';

空值判定

传统写法

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

快捷语法

const variable2 = variable1  || 'new';

变量声明

传统写法

let x;
let y;
let z = 3;

快捷语法

let x, y, z=3;

如果 true

传统写法

if (likeJavaScript === true)

快捷语法

if (likeJavaScript)

for 循环

传统写法

for (let i = 0; i < allImgs.length; i++)

快捷语法

for (let index in allImgs)

Array.forEach 语法

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

十进制指数

例如,1E7基本上是指,随后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;

对象属性(Object Property)

传统写法

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

快捷语法

const obj = { x, y };

箭头函数 Arrow Functions

传统写法

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

隐式返回 Implicit Return

传统写法

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

快捷语法

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

默认参数值 Default Parameter Values

传统写法

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

字符串模板 Template Literals

传统写法

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}`;

赋值解构 Destructuring Assignment

传统写法

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;

多行字符串 Multi-line String

传统写法

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

操作符传播 Spread Operator

传统写法

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

强制参数 Mandatory Parameter

传统写法

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

快捷语法

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

Array.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' }

Object [key]

传统写法

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

Double Bitwise NOT

传统写法

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

快捷语法

~~4.9 === 4  //true

ECMAScript 6 中的快捷语法汇总及代码示例的更多相关文章

  1. 关于Nvelocity的主要语法和一些代码示例

    context.Response.ContentType = "text/html"; VelocityEngine vltEngine = new VelocityEngine( ...

  2. 简:Spring中Bean的生命周期及代码示例

    (重要:spring bean的生命周期. spring的bean周期,装配.看过spring 源码吗?(把容器启动过程说了一遍,xml解析,bean装载,bean缓存等)) 完整的生命周期概述(牢记 ...

  3. 浅谈 PHP 中的多种加密技术及代码示例

    信息加密技术的分类 单项散列加密技术(不可逆的加密) 属于摘要算法,不是一种加密算法,作用是把任意长的输入字符串变化成固定长的输出串的一种函数 MD5 string md5 ( string $str ...

  4. c/c++中define用法详解及代码示例

    https://blog.csdn.net/u012611878/article/details/52534622   版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog. ...

  5. python---Numpy模块中创建数组的常用方式代码示例

    要机器学习,这方面内容不可少. import numpy as np import time # 对比标准python实现和numpy实现的性能差异 def sum_trad(): start = t ...

  6. C#中构建多线程应用程序[转] ----代码示例

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  7. go中的方法以及自定义类型代码示例

    package main import "fmt" type user struct { name string age int sex string } type admin s ...

  8. Go语言语法汇总(转)

    Go语言语法汇总 分类: 技术2013-09-16 14:21 3007人阅读 评论(0) 收藏 举报 go语言golang并发语法   目录(?)[+]   最近看了看GoLang,把Go语言的语法 ...

  9. ECMASCRIPT 6中字符串的新特性

    本文将覆盖在ECMAScript 6 (ES6)中,字符串的新特性. Unicode 码位(code point)转义 Unicode字符码位的长度是21位[2].而JavaScript的字符串,是1 ...

随机推荐

  1. vue视频学习笔记

    video 7 vue问题: 论坛 http://bbs.zhinengshe.com------------------------------------------------UI组件 别人提供 ...

  2. MyEclipse2016统一字符编码

    MyEclipse一般没做修改,默认的字符编码是GBK,但是在实际的开发中常用的是utf-8,为了避免出现乱码等情况,我们需要把开发工具的编码都统一设置成utf-8,修改步骤如下: 1.打开MyEcl ...

  3. [ios]quartz2d画板功功能实现核心代码

    //触摸开始 -(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ //    1,获取对 ...

  4. UART通信

    UART0串口调试过程:1.配置DTS节点 在Z:\rk3399\kernel\arch\arm64\boot\dts\rockchip路径下打开rk3399.dtsi文件,里面已经有UART0相关节 ...

  5. angular4 JavaScript内存溢出问题 (FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory)

    最近在写基于angular4的项目的时候,在build --prod的时候,突然措手不及的蹦出个报错,大致错误如下: 70% building modules 1345/1345 modules 0 ...

  6. 一个小博客教你把vim用飞起来

    引言 今天我们特地来讲讲这个vim的配置. vim这东西, 很多人装逼的时候经常会提到, 不过大部分人对个vim的配置还是很陌生的, 因为 这个编辑器的学习成本还是有点高的, 但是不要紧, 今天我们就 ...

  7. python 冒泡排序,递归

    冒泡排序:li = [33, 55, 58, 66, 58, 555,20000000000000000000000, 5555,5555, 5, 6, 62,1]for i in range(1,l ...

  8. 项目Contact开发中遇到的,引以为戒

    程序进去就闪退 其中指示错误的地方,函数内容如下: public void loadButtomMenu() { gv_buttom_menu = (GridView) this.findViewBy ...

  9. git使用简易指南

    安装 下载 git OSX 版 下载 git Windows 版 下载 git Linux 版 创建新仓库 创建新文件夹,打开,然后执行 git init 以创建新的 git 仓库. 检出仓库 执行如 ...

  10. iOS安全攻防之反编译

    Class-dump 进行反编译: 之前做代码混淆, 首先了解了下反编译,使用入门级的反编译 class-dump.下载地址:最新版Class-dump. 首先需要注意的是,class-dump的作用 ...