9个超级实用的 ES6 特性,你有必要了解一下
web前端开发
共 4208字,需浏览 9分钟
·
2020-08-01 01:34
1、展开操作符
let firstHalf = [ one , two ];
let secondHalf = [ three , four , ...firstHalf];
let firstHalf = [ one , two ];
let secondHalf = [ three , four ];
for(var i=0, i
secondHalf.push(firstHalf[i]);
}
const hero = {
name: Xena - Warrior Princess ,
realName: Lucy Lawless
}
const heroWithSword = {
...hero,
weapon: sword
}
let keys = Object.keys(hero);
let obj = {};
for(var i=0; i< keys.length; i++) {
obj[keys[i]] = keys[props[i]];
}
2、剩余参数
function add(first, second, ...remaining) {
return first + second;
}
function add(first, second, ...remaining) {
return first + second + remaining.reduce((acc, curr) => acc + curr, 0);
}
3、字符串插值
class Product {
constructor(name, description, price) {
this.name = name;
this.description = description;
this.price = price;
}
getDescription() {
return " Full description
" +
" name: " + this.name +
" description: " + this.description
}
}
getDescription() {
return `Full description
:
name: ${this.name}
description ${this.description}
`;
}
4、简写属性
function createCoord(x, y) {
return {
x: x,
y: y
}
}
function createCoord(x, y) {
return {
x,
y
}
}
5、方法属性
const math = {
add: function(a,b) { return a + b; },
sub: function(a,b) { return a - b; },
multiply: function(a,b) { return a * b; }
}
const math = {
add(a,b) { return a + b; },
sub(a,b) { return a - b; },
multiply(a,b) { return a * b; }
}
6、解构赋值
function handle(req, res) {
const name = req.body.name;
const description = req.body.description;
const url = req.url;
log( url endpoint , url);
// 大量代码逻辑
dbService.createPerson(name, description)
}
function handle(req, res) {
const { body: { name, description }, url } = req;
log( url endpoint , url);
// 大量代码逻辑
dbService.createPerson(name, description)
const array = [1,2,3,4,5,6];
const a = array[0];
const c = array[2];
const array = [1,2,3,4,5,6];
const [a, ,c, ...remaining] = arr;
// remaining = [4,5,6]
function doSomething(config) {
if(config.a) { ... }
if(config.b) { ... }
if(config.c) { ... }
}
function doSomething({ a, b, c }) {
if(a) { ... }
if(b) { ... }
if(c) { ... }
}
7、数组方法
find(),查找列表中的成员,返回 null 表示没找到 findIndex(),查找列表成员的索引 some(),检查某个断言是否至少在列表的一个成员上为真 includes,列表是否包含某项
const array = [{ id: 1, checked: true }, { id: 2 }];
arr.find(item => item.id === 2) // { id: 2 }
arr.findIndex(item => item.id === 2) // 1
arr.some(item => item.checked) // true
const numberArray = [1,2,3,4];
numberArray.includes(2) // true
Promises + Async/Await
8、异步方案
function doSomething(cb) {
setTimeout(() => {
cb( done )
}, 3000)
}
doSomething((arg) => {
console.log( done here , arg);
})
function doSomething() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve( done )
}, 3000)
})
}
doSomething().then(arg => {
console.log( done here , arg);
})
getUser()
.then(getOrderByUser)
.then(getOrderItemsByOrder)
.then(orderItems => {
// 处理排序后的成员
})
async function getItems() {
try {
const user = await getUser();
const order = await getOrderByUser(user);
const items = await getOrderItemsByOrder(order);
return items;
} catch(err) {
// 在这里处理错误,建议返回某个值或者重新抛出错误
}
}
getItems().then(items => {
// 处理排序后的成员
}
9、模块
// math.js
export function add(a,b) { return a + b; }
export function sub(a,b) { return a - b; }
export default mult(a,b) => a * b;
// main.js
import mult, { add, sub } from ./math ;
mult(2, 4) // 8
add(1,1) // 2
sub(1,2) // -1
评论