首页 > 代码库 > ECMAScript 6 中的快捷语法汇总及代码示例
ECMAScript 6 中的快捷语法汇总及代码示例
对于每个 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 中的快捷语法汇总及代码示例
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。