ES6解构赋值/箭头函数及var let const区别

旧城等待， 2022-12-23 06:56 30阅读 0赞

## var let const区别： ##

**1.是否存在变量提升？**  
var声明的变量存在变量提升（将变量提升到当前作用域的顶部）。即变量可以在声明之前调用，值为undefined。

let和const不存在变量提升。即它们所声明的变量一定要在声明后使用，否则报ReferenceError错。  
**2.是否存在暂时性死区？**  
let和const存在暂时性死区。即只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。  
在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。  
总之，暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。  
**3.是否允许重复声明变量？**  
var允许重复声明变量。  
let和const在同一作用域不允许重复声明变量。  
**4.是否存在块级作用域？**  
var不存在块级作用域。  
let和const存在块级作用域。  
什么是块级作用域：  
ES5中作用域有：全局作用域、函数作用域。没有块作用域的概念。因此也有一系列的问题。  
**5. 是否能修改声明的变量？**  
**var**预解析，变量提升（作用域块），无暂时性死区，可重复声明变量，  
**let**不存在变量提升  
var和let可以。  
const声明一个只读的常量。一旦声明，常量的值就不能改变。const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

## for in 和for of的区别： ##

**for in**取key,**for of** 取value

①从遍历数组角度来说，for···in遍历出来的是key(即下标)，for···of遍历出来的是value(即数组的值)；
    
    var arr = [99,88,66,77];
    for(let i in arr){ 
        console.log(i);   //0,1,2,3
    }
    for(let i of arr){ 
        consoel.log(i);   //99,88,66,77
    }
    1
    2
    3
    4
    5
    6
    7
    ②从遍历字符串的角度来说，同数组一样。
    ③从遍历对象的角度来说，for···in会遍历出来的为对象的key，但for···of会直接报错。
    
    var obj = { name:"Bob",age:25};
    for(var i in obj){ 
    	console.log(i)  // name age
    }
    for(var i of obj){ 
    	console.log(i)   //报错
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    ④如果要使用for…of遍历普通对象，需要配合Object.keys()一起使用。
    
    var person={ 
        name:'coco',
        age:22,
        locate:{ 
            country:'China',
            city:'beijing',
        }
    }
    for(var key of Object.keys(person)){ 
        //使用Object.keys()方法获取对象key的数组
        console.log(key+": "+person[key]);//name: coco,age: 22,locate: [object Object]
    }

## es6是解构赋值： ##

解构赋值是一种JavaScript表达式，通过解构赋*斜体样式*值，可以将属性/值从对象/数组中取出，赋值废其他变量

//数组结构
    var a, b, rest;
    [a, b] = [10, 20];
    console.log(a); // 10
    console.log(b); // 20
    
    //对象解构
    ({  a, b } = {  a: 10, b: 20 });
    console.log(a); // 10
    console.log(b); // 20
    
    // ...rest 解构数组
    [a, b, ...rest] = [10, 20, 30, 40, 50];
    console.log(a); // 10
    console.log(b); // 20
    console.log(rest); // [30, 40, 50]
    
    // ...rest 解构对象（最新）
    ({ a, b, ...rest} = { a: 10, b: 20, c: 30, d: 40});
    console.log(a); // 10
    console.log(b); // 20
    console.log(rest); // { c: 30, d: 40}
    
    //解析一个从函数返回
    function f() { 
      return [1, 2];
    }
    
    var a, b; 
    [a, b] = f(); 
    console.log(a); // 1
    console.log(b); // 2

## 箭头函数与普通函数的区别 ##

**箭头函数通过 call() 或 apply() 方法调用一个函数时，只传入了一个参数，对 this 并没有影响**。