您现在的位置: 首页 > 网站导航收录 > 百科知识百科知识

箭头函数与普通函数的区别(ECMAScript 篇)

函数,箭头,对象箭头函数与普通函数的区别(ECMAScript 篇)

发布时间：2020-12-06加入收藏来源：互联网点击：

class 应用：

class Phone{ // 构造函数 constructor( brand, price ){ this.brand = brand; this.price = price }, call(){ console.log("可以打电话") }}// 实例化对象let hw = new Phone( '华为', 999 )12、setTimeout、Promise、Async/Await 的区别

setTimeout 是异步执行函数，js 主线程运行到此函数时，不会等待 setTimeout 中的回调函数，回调函数会被压进消息队列，然后直接向下执行，当执行完当前事件循环的时候，回调函数会在下次事件循环中被执行。

console.log(1)setTimeout(()=>{ console.log(2)},0)console.log(3)// 运行结果：1 3 2

Promise 本身是同步的立即执行函数，当在执行体中执行 resolve 或 reject 的时候，此时是异步操作，会先执行 then / catch 等，等主栈完成后，才会执行 resolve reject 中的方法。

console.log(1)var p =new Promise(( resolve, reject )=>{ console.log(2) resolve(3)})p.then((res)=>{ console.log(res)})console.log(4)// 运行结果：1 2 4 3

Async/Await 函数返回的是一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，在执行函数体后面的语句。

await的含义为等待，也就是 async 函数需要等待await后的函数执行完成并且有了返回结果（Promise对象）之后，才能继续执行下面的代码。await通过返回一个Promise对象来实现同步的效果。

async function a1(){ console.log( 1 ); await a2(); console.log( 2 )}async function a2(){ console.log( 3 )}console.log( 4 );a1();console.log( 5 )// 运行结果 4 1 3 5 213、forEach、for in、for of 三者区别

forEach 是数组的方法，进行遍历数组的。

for...in 不仅可以遍历数组，还可以对象。

for...of 进行遍历数组的。

for...in 与 for... of 遍历对象时，in 使用的是下标，而 of 使用的是 key。

14、说一下 es 6 的导入导出模块

export 命令用于规范模块的对外接口。

import 命令用于输入其他模块提供的功能。

export 对外暴露数据方式有三种：

方式1：分别暴露

export let person = "前端小姐姐"export function showName(){ console.log( "倩倩" )}

方式2：统一暴露

let person = "前端小姐姐"function showName(){ console.log( "倩倩" )}export { person, showName}

方式3：默认暴露

export default{ person = "前端小姐姐", showName: function(){ console.log( "倩倩" ) }}

import 引入方式有三种：

方式1：通用的导入方式

import * as m from "./src/js/m.js"console.log( "m",m )

方式2：解构赋值

import { person, showName } from "./src/js/m.js"// 重名时，可自定义名字import { person as per, showName } from "./src/js/m.js"// 针对默认暴露也可以这么写import { default as m } from "./src/js/m.js"

方式3：简便形式，针对默认暴露

import m from "./src/js/m.js"15、介绍下 Set、Map的区别 ?

应用场景 Set 用于数组重组，Map 用于数据储存。

对于Set：

成员不能重复。只有键值没有键名，类似数组。可以使用 for...of 遍历方法有 size、add、delete、has、clear

对于Map：

键值对的集合，类似集合。可以 for..of 遍历方法有 size、set、delete、has、clear

---

光说理论是不是都要困了，现在是时候大展拳脚了！看看你对 ES 知识掌握到底怎么样？

---

16、写出下面代码运行结果。

new Promise((resolve)=>{ console.log( 1 ) resolve()}).then(()=>{ console.log( 2 ) new Promise(res=>{ res(1) }).then(()=>{ console.log( 3 ) new Promise(res=>{ res(1) }).then(()=>{ console.log( 4 ) }) }).then(()=>{ new Promise(res=>{ res(1) }).then(()=>{ console.log( 5 ) }) })}).then(()=>{ console.log( 6 )})

答案： 1 2 3 6 4 5

17、箭头函数中的 this 。请写出下面代码运行结果。

name = "单身狗"setTimeout(()=>{console.log(this.name) //单身狗},0)function Job(){ this.name = "漂亮小姐姐" setTimeout(()=>{ console.log(`我是天天敲代码的 ${this.name} ！`) //漂亮小姐姐 },3000)}let j = new Job()

箭头函数没有自己的 this ，它的 this 是继承而来的，默认指向在定义它时所处的对象。

18、写出下面代码运行结果。

var name = 'window name'var p1 = { name:'p1 name', showName:function(){ console.info(this.name) }}var fn = p1.showNamefn()p1.showName()var p2 = { name:'p2 name', showName:function(fun){ fun() }}p2.showName(p1.showName)p2.showName = p1.showNamep2.showName()/*运行结果：window name p1 name window name p2 name*/19、箭头函数可以用call或者apply改变this指向吗？

call 和 apply 都是用来改变 this 指向的，它们会立即执行。

ES6 箭头函数的主要特性：

箭头函数没有自己的 this 对象，箭头函数内部的 this 是词法作用域，由上下文确定。this 在定义函数的时候已绑定，并非执行函数的时候。箭头函数的 this 永远指向其父级作用域。任何方法都改变不了 this ，包括 call、apply 和 bind。

试试下面这个练习，你就知道了。

const obj1 = { name:'张三',}const obj2 = { name:'李四', fun2 : function(){ //修改成箭头函数再试试 console.log(this); }}obj2.fun2();obj2.fun2.call(obj1);

尝试修改成箭头函数，然后再观察结果。

20、前端领域内，你比较擅长什么？

这个问题就留给读到最后，能够坚持学习的人，问问我们自己有什么是我们擅长的？在哪块领域是我们占据竞争优势的？

前端发展百花放，一技未熟百技出。未知何处去下手，关注小编胜百书。

愿你在前端的某一角能够深钻细研，能够拥有自己的竞争优势。

本文到此结束，希望对大家有所帮助呢。

 2/2   首页 上一页 1 2