var
1、声明会提升
console.log(num); //undefined
var num = 123
// console.log(num) //会报错 Uncaught ReferenceError
// let num = 123
2、变量覆盖
var num1 = 123
var num1 = 234
// console.log(num1); //234
// let num1 = 123
// let num1 = 234
// console.log(num1); // 报错,不能重复定义 Identifier 'num1' has already been declared
3、var没有块级作用域
function fnz() {
for (var i = 0; i < 3; i++) {
// console.log(i); //0 1 2
}
// console.log(i); //3
}
fnz()
而let有块级作用域
function fnz() {
for (let i = 0; i < 3; i++) {
console.log(i); //0 1 2
}
console.log(i); //ReferenceError: i is not defined
}
fnz()
const
1、const声明之后必须赋值,否则会报错
2、定义的值不允许修改(var和let可以)
3、支持let其他属性。不存在变量声明提升、不存在变量覆盖
const demo = 123
demo = 456
console.log(demo);//Uncaught TypeError: Assignment to constant variable.
解构相关
所谓解构,就是按照一定得模式,从数组和对象中提取值,对变量进行赋值。
1、数组中的解构
以前的赋值
let a=1;
let b=2;
let c=3;
使用解构就可以
let [a,b,c]=[1,2,3]
如果变量的个数小于数组的元素的个数,无影响。如果变量的个数大于数组的个数,那么没有匹配到元素的变量为undefined。
let [a,b]=[1,2,3]
//a 1
//b 2
let[a,b,c]=[1,2]
//c undefined
也可以使用默认值
let [1,b,c=33,d=44]=[1,2,3]
//a 1
//b 2
//c 3
//d 44
如果说需要数组的一部分,在解构的时候使用,进行占位,用标识符接收我们真正需要的元素。
let [,b]=[1,2,3]
//b 2
let[a,...b]=[1,2,3,4]
//a 1
// b[2,3,4]
// 拓展运算符(就是...)只能出现在解构语法中的最后
let [a,...b,c]=[1,2,3,4]
//error
拓展运算符(就是…)只能出现在解构语法中的最后。
2、对象中的解构
注意:
①对象中的解构所用的变量要和对象的属性名一样才能拿到相应的值
②没有顺序要求
let obj={a: 1,b: 2}
let {x,y}=obj;
//x undefined
//y undefined
let {a,b}=obj;
//a 1
//b 2
let{b,a}=obj;
//b 2
//a 1
在对象的解构中,还能为变量重命名
let obj={a:1,b:2};
let{a:x,b:y}=obj;
//a 报错 b 报错
// x 1 y 2
也可以用来获取对象中的部分属性
let obj = {a:1,b:2,c:3}
let {a,...b} = obj
//a 1
//b{b:2,c:3}
//使用已有的变量进行解构
let x,y;
({a:x , b:y } = {a:1 , b:2 , c:3)
//x 1 y 2
注意:需要用()将代码块包裹住,要不然这里会报错,因为在js中{}中的内容会被看成一个代码块
1、 运用解构的方式将至进行互换,并不引用三方变量
[a, b] = [b, a]
2、 如何运用ES6快速去重
let array=[12,13,14,16,22,21,24,12,13,22]
//传统es5:写两个for 循环一个一个对比
//ES6:
let item=[...new Set(arr)]
console.log(item); // [12, 43, 23, 45, 55]
3、 promise标杆性的面试题
//打印顺序 1 2 4 3
//=> 构造函数是同步执行的
const promise = new Promise((resolve, reject)=>{
console.log(1);
resolve();
console.log(2);
})
//.then()方法 是异步执行的
promise.then(()=>{
console.log(3);
})
console.log(4)