9个超级实用的 ES6 特性,超级实用哦!
【摘要】 1、展开操作符顾名思义,用于对象或数组之前的展开操作符(…),将一个结构展开为列表。演示一下:let firstHalf = [ one , two ];let secondHalf = [ three , four , ...firstHalf];这种写法够优雅,够简洁吧?如果不用展开操作符我们得这么写:let firstHalf = [ one , two ];let seco...
1、展开操作符
let firstHalf = [ one , two ];let secondHalf = [ three , four , ...firstHalf];
let firstHalf = [ one , two ];let secondHalf = [ three , four ];for(var i=0, i <firstHalf.length; 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
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)