1.微任务与宏任务
宏任务与微任务详解可点击执行机制
JS执行机制是从上到下执行,同步代码优先异步代码,微任务优先宏任务执行
async function async1() {
console.log('async1 start')
await async2()
console.log('async1 end') // 相当于promise.then的异步回调
}
async function async2() {
console.log('async2')
}
console.log('script start')
setTimeout(function () {
// 定时器作为宏任务的存在
console.log('setTimeout')
}, 0)
async1()
new Promise(function (resolve) {
console.log('promise1')
resolve()
}).then(function () {
console.log('promise2')
})
console.log('script end')
// 'script start'
// 'async1 start'
// 'async2'
// 'promise1'
// 'script end'
// 'async1 end'
// 'promise2'
// 'setTimeout'
2.this指向问题
普通函数的this指向
箭头函数this指向
call方法改变this指向
var num1 = 2
var obj1 = {
num1: 1,
fun1() {
console.log(this.num1 * 2)
},
fun2: () => {
console.log(this.num1) // Math.PI ---圆周率3.141592653589793
}
}
obj1.fun1() // 2 this指向调用的对象obj1
obj1.fun2() // undefined
// 箭头函数中的this指向不是指向调用的obj1 箭头函数的 this 是指向上一层全局环境的 this
obj1.fun1.call({ num1: 3 }) // 6
obj1.fun2.call({ num1: 3 }) // undefined
// 箭头函数不存在this,所以call改变this不生效
3.递归应用
// 递归
let obj = {
'a.b.c': 1,
'a.d': 2,
e: 3
}
function flat(prop) {
return Object.keys(prop).reduce((res, key) => {
key.split('.').reduce((obj, k, index, arr) => {
// debugger
return (obj[k] = index == arr.length - 1 ? prop[key] : obj[k] || {})
}, res)
return res
}, {})
}
console.log(flat(obj))
// {
// a: { b: { c: 1 }, d: 2 },
// e: 3
// }
4.原生创建dom元素
let arr = ['v1', 'v1', 'v2', 'v3']
let newArr = []
arr.forEach((item) => {
let caleData = arr.filter((el) => el === item)
if (caleData.length > 1) {
newArr = [...caleData]
}
})
console.log(newArr)
// 原生创建dom元素页面循环渲染数据
newArr.forEach((item, index) => {
// debugger
let div1 = document.createElement('div')
// 设定属性名和属性值
div1.setAttribute('id', `dom${index}`)
div1.innerText = `${item}`
document.body.appendChild(div1)
})
5.循环打印定时任务
for (var i = 0; i < 3; i++) {
setTimeout(function () {
console.log(i)
}, 0)
}
// 333