ECMAScript 6.0(下列全称 ES6)是 JavaScript 词汇的新一代国际标准,早已在 2015 年 6 月正式宣布正式发布了。它的最终目标,是使 JavaScript 词汇能用以撰写繁杂的小型应用程序,正式成为虚拟化合作开发词汇。ES6给他们增添许多更让人意料之外的机能,在这儿他们一起来自学呵呵9个DT新颖的 ES6 优点。
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、余下模块
余下模块将余下的模块总收入有理数。 JavaScript 的优点是模块数量很灵巧。通常来说会有两个 arguments 表达式搜集模块。让他们看两个例子:
function add(first, second, …remaining) { return first + second;}
上面的一段 代码 仅仅将 first 和 second 加起来,也就是说,调用 add(1, 2) 和 add(1, 2, 3, 4) 会得到相同的结果。
下面他们修正呵呵:
function add(first, second, …remaining) { return first + second + remaining.reduce((acc, curr) => acc + curr, 0);}
如前所述,…remaining 搜集了余下的模块,为他们提供了那些模块的命名,清楚地表明他们打算处理余下的模块。我记得至迟 ES5 早已有 arguments 了,不过少有人知。
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() 方法中那个可读性不佳的多行长语句。大多数编程词汇中都存在类似现象。一些词汇提供了字符串插值,幸运的是, JavaScript 正是其中之一。
他们改写呵呵 getDescription() 方法:
getDescription() { return `Full description: name: ${this.name} description ${this.description} `;}
一对 包起来的字符串中能使用 ${} 插值。现在看起来舒服多了。
4、简写特性
在 ES5 中必须那么写:
function createCoord(x, y) { return { x: x, y: y }}
ES6 以后能使用简写特性:
function createCoord(x, y) { return { x, y }}
看起来更清爽了吧?
5、方法特性
方法特性是在第一类中定义指向方法的特性。考虑下面一段 ES5 代码 作为范例:
const math = { add: function(a,b) { return a + b; }, sub: function(a,b) { return a – b; }, multiply: function(a,b) { return a * b; }}
ES6 以后只需那么写:
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]
他们能使用上面的模式匹配分解字符串的值。他们使用 , , 跳过某些值。上面提到过的余下模块这儿也能用,在这儿我们通过余下模块捕获了余下的字符串成员。
解构赋值还能用作 函数 和模块。 函数 有不止 2-3 个模块时,使用两个第一类搜集所有模块是 JavaScript 的事实国际标准。例如,下面两个 函数 :
function doSomething(config) { if(config.a) { … } if(config.b) { … } if(config.c) { … }}
有更好的读法:
function doSomething({ a, b, c }) { if(a) { … } if(b) { … } if(c) { … }}
7、字符串方法
ES6 引入了许多有用的字符串方法,例如:
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) // true
const 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);})
他们使用回调是因为有些操作是异步的,须要时间来完成。后来他们有了 promise 库,人们开始使用它。然后 JavaScript 逐渐加入了对 promise 的原生支持。
function doSomething() { return new Promise((resolve, reject) => { setTimeout(() => { resolve( done ) }, 3000) })}
doSomething().then(arg => { console.log( done here , arg);})
他们甚至能这样调用,将 promise 串起来:
getUser() .then(getOrderByUser) .then(getOrderItemsByOrder) .then(orderItems => { // 处理排序后的成员 })
后来生活更加美好,他们有了 async/await
上面一段代码能这样写:
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.jsimport mult, { add, sub } from ./math ;
mult(2, 4) // 8add(1,1) // 2sub(1,2) // -1
他们在上面用 export 关键字注明了 add 和 sub 这两个内部结构对任何引入该模块的模块都公开可见。export default 关键字则注明仅仅 import 模块时得到的内部结构。在 main. js 中,他们将导入的 default 命名为 mult,同时指明他们引入 add() 和 sub() 这两个方法。箭头 函数 和字典作用域 this。
点击关注,第一时间了解华为云新鲜技术~