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) // 1arr.some(item => item.checked) // trueconst numberArray = [1,2,3,4];numberArray.includes(2) // truePromises + 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.jsexport function add(a,b) { return a + b; }export function sub(a,b) { return a - b; }export default mult(a,b) => a * b;// main.jsimport mult, { add, sub } from ./math ;mult(2, 4) // 8add(1,1) // 2sub(1,2) // -1
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）