最后
正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！
// 异步 （callback 回调函数）
console.log(100)
setTimeout(() => {
console.log(200)
}, 1000)
console.log(300)
console.log(400)
// 结果100 300 400 200
// 同步
console.log(100)
alert(200)
console.log(300)
// 结果 100 200 300
// 结果 100 弹框200点击之后才会出现 300（卡住）
先执行同步任务，到一定时间或者要求再执行回调函数
异步不会阻塞后面代码的执行，但是同步会
二、应用场景
1. 网络请求，如Ajax图片加载
// ajax
console.log('start')
$get('./data1.json',function(data1){ // 回调函数网络请求
console.log(data1)
})
console.log('end')
// 图片加载
console.log('start')
let img = document.createElement('img')
img.onload = function () { // callback
console.log('onload')
}
img.src = 'xx.png'
console.log('end')
2. 定时任务，如setTimeout
// setTimeout
console.log(100)
setTimeout(function () {
console.log(200)
}, 1000)
console.log(300)
// setInterval
console.log(100)
setInterval(function() {
console.log(200)
}, 1000)
console.log(300)
三、callback hell回调地狱
是一种越陷越深的嵌套形式
//callback hell
// 获取第一份数据
$get(url1, (data1) => {
console.log(data1)
// 获取第二份数据
$get(url2, (data2) => {
console.log(data2)
// 获取第三份数据
$get(url3, (data3) => {
console.log(data3)
// 获取更多数据
})
})
})
解决方法：使用promise
// promise
function getData(url) {
return new Promise((resolve, reject) => {
$.ajax({
url,
success(data) {
resolve(data)
},
error(err) {
reject(err)
}
})
})
}
const url1 = 'data1.json'
const url2 = 'data2.json'
const url3 = 'data3.json'
getData(url1).then(data1 => {
console.log(data1)
return getData(url2)
}).then(data2 => {
console.log(data2)
return getData(url3)
}).then(data3 => {
console.log(data3)
}).catch(er => console.error(err)) // 串联形式
四、问题解答
1. 同步和异步的区别是什么？
异步是基于JS单线程语言
异步不会阻塞代码执行
同步会阻塞代码执行
2. 手写promise加载一张图片？
function loadImg(src) {
const p = new Promise(
(resolve, reject) => { // resolve和reject也是函数
const img = document.createElement('img') // 定义图片
img.onload = () => {
resolve(img)
}
img.onerror = () => {
const err = new Error(图片加载失败 ${src})
reject(err)
}
img.src = src
}
)
return p
}
// const url = 'img.mukewang.com/5a9fc807000…'
// loadImg(url).then(img => {
// console.log(img.width)
// return img // img传入then里
// }).then(img => {
// console.log(img.height)
// }).catch(ex => console.error(ex))
const url1 = 'img.mukewang.com/5a9fc807000…'
const url2 = 'img3.mukewang.com/5a9fc807000…'
loadImg(url1).then(img1 => {
console.log(img1.width)
return img1 // return普通对象，then直接接收
}).then(img1 => {
console.log(img1.height)
return loadImg(url2) // promise 实例，则then之后接收到的是loadImg()执行完的img对象
ES6
-
列举常用的ES6特性：
-
箭头函数需要注意哪些地方？
-
let、const、var
-
拓展：var方式定义的变量有什么样的bug？
-
Set数据结构
-
拓展：数组去重的方法
-
箭头函数this的指向。
-
手写ES6 class继承。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
微信小程序
-
简单描述一下微信小程序的相关文件类型?
-
你是怎么封装微信小程序的数据请求？
-
有哪些参数传值的方法？
-
你使用过哪些方法，来提高微信小程序的应用速度？
-
小程序和原生App哪个好？
-
简述微信小程序原理？
-
分析微信小程序的优劣势
-
怎么解决小程序的异步请求问题？
