1. JavaScript 箭头函数

在 ES6中,箭头函数,提供了一种极致优雅和简洁的方式来定义匿名函数。简而言之,箭头函数就是丢掉了关键字 function,然后用一个箭头 => 来分离一个匿名函数的参数部分和函数体:

(x, y) => x * y;

这相当于:

function(x, y){
 return x * y;
}

或者:

(x, y) => {
 var factor = 5;
 var growth = (x-y) * factor;
}

完全等价于:

function(x, y){
 var factor = 5;
 var growth = (x-y) * factor;
}

在使用传统的匿名函数时,箭头函数还消除了一个关键的错误源,即函数内的 this 对象的值。使用箭头函数,this 是基于词法绑定,这仅仅是意味着它的值被绑定到父级作用域的一种奇特的方式,并且永远不会改变。如果一个箭头函数定义在一个自定义对象countup 中,this 值毫无疑问地指向 countup。比如:

var countup = {
 counter: 15,
 start:function(){
 window.addEventListener('click', () => {
 alert(this.counter) // 15 
 })
 }
};
countup.start(); // undefined

对比传统匿名函数js箭头函数,this 的值在哪变化取决于它被定义的上下文环境。当在上面的例子中尝试引用 this.counter,结果将返回 undefined,这种行为可能会把很多不熟悉动态绑定的复杂性的人搞糊涂。使用箭头函数,this 的值总是可预测并且容易推断的。

2. JavaScript Promises

JavaScript ES6 Promises 使异步任务的处理方式变成线性, 这是大多数现代Web应用程序中的一项任务。 而不是依靠回调函数 —— 通过JavaScript框架(如jQuery)普及。JavaScript Promises 使用一个中心直观的机制来跟踪和响应异步事件。它不仅使调试异步代码变得更容易,而且使得编写它也是一种乐趣。

所有 JavaScript Promise 都是通过 Promise() 构造函数开始和结束:

const mypromise = new Promise(function(resolve, reject){
 // 在这编写异步代码
 // 调用 resolve() 来表示任务成功完成
 // 调用 reject() 来表示任务失败
})

在内部使用 resolve() 和 reject() 方法,当一个 Promise 被完成或拒绝时,我们可以分别向一个 Promise 对象发出信号。 then() 与 catch() 方法随后可以被调用,用以处理完成或拒绝 Promise 后的工作。

下面是一个被注入 XMLHttpRequest 函数的 Promise 的变种,来一个接一个的检索外部文件内容:

function getasync(url) {
 return new Promise((resolve, reject) => {
 const xhr = new XMLHttpRequest()
 xhr.open("GET", url)
 xhr.onload = () => resolve(xhr.responseText)
 xhr.onerror = () => reject(xhr.statusText)
 xhr.send()
 })
}
getasync('test.txt').then((msg) => {
 console.log(msg) // echos contents of text.txt
 return getasync('test2.txt')
}).then((msg) => {
 console.log(msg) // echos contents of text2.txt
 return getasync('test3.txt')
}).then((msg) => {
 console.log(msg) // echos contents of text3.txt
})

js箭头函数_js什么是箭头函数_js 函数包含函数

3. JavaScript 异步函数

除了 JavaScript Promise,异步函数进一步重写了传统的异步代码结构,使其更具可读性。

一个异步函数由两部分构成:

1) 一个以 async 为前缀的常规函数

async function fetchdata(url){
 // Do something
 // Always returns a promise
}

2) 在异步函数(Async function)内,使用 await 关键字调用异步操作函数

下面是基于上面示例重写的 Promise,以便使用 Async functions代替:

function getasync(url) { // same as original function
 return new Promise((resolve, reject) => {
 const xhr = new XMLHttpRequest()
 xhr.open("GET", url)
 xhr.onload = () => resolve(xhr.responseText)
 xhr.onerror = () => reject(xhr.statusText)
 xhr.send()
 })
}
async function fetchdata(){ // main Async function
 var text1 = await getasync('test.txt')
 console.log(text1)
 var text2 = await getasync('test2.txt')
 console.log(text2)
 var text3 = await getasync('test3.txt')
 console.log(text3)
 return "Finished"
}
fetchdata().then((msg) =>{
 console.log(msg) // logs "finished"
})

js 函数包含函数_js什么是箭头函数_js箭头函数

上面的例子运行时会输出“test.txt”,“test2.txt”,“test3.txt”,最后是“Finished”。

如你所见,在异步函数中,我们把异步函数 getasync() 当作是同步函数调用 – 没有 then() 方法或回调函数通知进行下一步。无论何时遇到关键字 await,执行都会暂停,直到 getasync() 解决js箭头函数,然后再转到异步函数中的下一行。结果与纯粹的基于 Promise,使用一串 then 方法的方式一样。

4. JavaScript 解构

除了箭头函数,使用最多的 ES6 功能。ES6 解构并非一个新功能,而是一个新的赋值语法,可以让您快速解压缩对象属性和数组中的值,并将它们分配给各个变量。

js什么是箭头函数_js箭头函数_js 函数包含函数

用解构快速提取 profile 对象的 name 和 hobby 属性 。

使用别名,你可以使用与你正在提取值的对象属性不同的变量名:

js 函数包含函数_js箭头函数_js什么是箭头函数

嵌套对象解构

解构也可以与嵌套对象一起工作,使用它来快速解开来自复杂的JSON请求的值:

js箭头函数_js什么是箭头函数_js 函数包含函数

解构数组

数组的解构与在对象上的工作方式类似,除了左边的花括号使用方括号代替:

var soccerteam = ['George', 'Dennis', 'Sandy']
var [a, b] = soccerteam // destructure soccerteam array
console.log(a) // "George"
console.log(b) // "Dennis"

你可以跳过某些数组元素,通过使用逗号(,):

var soccerteam = ['George', 'Dennis', 'Sandy']
var [a, ,b] = soccerteam // destructure soccerteam array
console.log(a) // "George"
console.log(b) // "Sandy"

5) 默认和剩余参数(Default and Rest Parameters)

默认参数(Default Parameters)

我们都使用过一下模式来创建具有默认值的参数:

function getarea(w,h){
 var w = w || 10
 var h = h || 15
 return w * h
}

有了ES6对默认参数的支持,显式定义的参数值的日子已经结束:

function getarea(w=10, h=15){
 return w * h
}
getarea(5) // returns 75

剩余参数(Rest Parameters)

ES6中的 Rest Parameters 使得将函数参数转换成数组的操作变得简单。

js什么是箭头函数_js箭头函数_js 函数包含函数

通过在命名参数前添加3个点 …,在该位置和之后输入到函数中的参数将自动转换为数组。

没有 Rest Parameters, 不得不做一些复杂的操作比如 手动将参数转换为数组 :

js箭头函数_js什么是箭头函数_js 函数包含函数

Rest parameters 只能应用于函数的参数的一个子集,就像下面这样,它只会将参数从第二个开始转换为数组:

js 函数包含函数_js什么是箭头函数_js箭头函数

今天就到这里,欢迎关注

限时特惠:本站每日持续更新海量设计资源,一年会员只需29.9元,全站资源免费下载
站长微信:ziyuanshu688