ES6——var、let和const区别以及js中的解构及相关面试题

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)