一.var let const
1.var
(1).在全局定义的那就是全局的 在局部定义的那就是局部的(在哪个作用域定义就是哪个作用域);
(2).如果变量未经声明就赋值,此变量为全局对象所有。
(3).变量提升
·创建AO(执行期上下文)对象
·找形参和变量声明,将变量和形参名作为AO的属性名,值为undefined
·将实参和形参相统一
·在函数体里找函数声明,值赋予函数体
2.let
(1).全局变量和顶层对象window不会挂钩,防止window过重; (let d =5 不等于 window.d = 5)
(2).不允许重复声明;
(3).不存在变量提升;
(4).暂时性死区(封闭作用域内,未声明不能使用)
(5).块级作用域。
经典试题:
for (var i = 0; i < 3; i++) {
setTimeout(() => {
console.log(i)
})
}
// 输出结果:3 3 3
// 解释:var没有块级作用域,所以setTimeout永远访问的是全局的i
for (let i = 0; i < 3; i++) {
setTimeout(() => {
console.log(i)
})
}
// 输出结果:0 1 2
// 解释:let带块级作用域,相当于
{
setTimeout(() => {
console.log(i)
})
}这个块循环了三次,每次都有自己块的i的值。由于异步,所以各自块的i未被释放,执行时,访问各自块作用域的i
转换成ES5
3.const
(1).ES5声明
ES6声明
(2).块级作用域;不存在变量提升;暂时性死区
(3).基本数据类型不能再重新赋值,引用数据类型可以重新赋值
二.class
// ES6 类
class People {
constructor(name, age) {
this.name = name
this.age = age
this._sex = 'male'
}
// 有其他业务逻辑使用
get sex() {
return this._sex
}
set sex(val) {
this._sex = val ? 'male' : 'female'
}
showname() {
console.log(this.name)
}
// 静态方法
static getcount() {
return 5
}
}
// 静态属性
People.count = 6
console.log(People.count)
let p1 = new People('huahua', '18')
console.log(p1)
p1.sex = 0
console.log(p1.sex)
console.log(People.getcount())
// 继承
class Coder extends People {
constructor(name, age, comper) {
super(name, age)
this.comper = comper
}
showcomper() {
console.log(this.comper)
}
}
let coder1 = new Coder('zhangsan', '16', 'laozong')
console.log(coder1)
coder1.sex = 1
console.log(coder1.sex)
console.log(Coder.getcount())
转成ES5
三
1.for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象(比如arguments对象、DOM NodeList 对象)、后文的 Generator 对象,以及字符串。 且of里面的key是item
四
js是单线程的
js引擎(执行上下文) GUI线程 网络线程 事件监听线程 计时线程
事件循环:js执行引擎先执行执行栈,当js引擎发现执行栈没有可执行的了,就把事件队列里的第一个放到执行栈(先取微队列)
事件队列:异步函数(宏队列,微队列)
微队列:promise 监听某个元素变化MutationObserver (先取微队列)
console.log(1)
setTimeout(() => {
console.log(2)
}, 0)
console.log(3)
const pro = new Promise((resolve, reject) => {
// 未决状态
console.log('表白')
// console.log(c)
setTimeout(() => {
if (Math.random() < 0.1) {
resolve(true)
} else {
reject(false)
}
}, 0)
})
pro
.then(data => {
console.log('123')
// 已决状态 resolve 立即执行
// 未决 加到作业队列,等到resolve状态后执行(执行即加入到微队列)
console.log('表白结果' + data)
})
.catch(error => {
console.log('123')
console.log('表白结果2' + error)
// 已决状态 reject
})
setTimeout(() => {
console.log(4)
}, 0)
// 分析过程:(1 3 表白 123 表白结果2false 4)
//1 3 表白 2
//宏队列: setTimeout(2) setTimeout(表白状态) setTimeout(4)
//微队列: pro(then)