日常开发中的ES6+语法

1. 面试官：const、let、var区别

主要从以下几个方面区分：

• 作用域不同(是否含有块级元素)
• 是否存在暂时性死区
• 是否存在变量提升
• 能否重复声明
• 变量能否被修改

1.作用域不同
块级作用域：声明的变量只在该代码块作用域内有效
var没有块级作用域，let、const有块级作用域

for (var i = 0; i < 5; i++) {
   
   
  console.log(i)
}
console.log('外层')
console.log(i)

以上代码var改为let

for (let i = 0; i < 5; i++) {
   
   
  console.log(i)
}
console.log('外层')
console.log(i)

有些人会有疑问，为什么日常开发中没有显式的声明块级作用域，let/const声明的变量却没有变为全局变量

这个其实也是let/const的特点，ES6规定它们不属于顶层全局变量的属性，这里用chrome调试一下。

可以看到使用let声明的变量x是在一个叫script作用域下的，而var声明的变量因为变量提升所以提升到了全局变量window对象中，这使我们能放心的使用新语法，不用担心污染全局的window对象

2.暂时性死区：只要块级作用域有let、const命令，他们所声明的变量就绑定这个区域，不受外部影响

var a = 10
if (true) {
   
   
  console.log(a)
  var a = 20
}
// 10

以上代码改为以下let或const均报错:

var a = 10
if (true) {
   
   
  console.log(a)
  let a = 20
}
或
var a = 10
if (true) {
   
   
  console.log(a)
  const a = 20
}
// 报错：Uncaught ReferenceError: Cannot access 'a' before initialization

3.是否存在变量提升
var声明的变量存在变量提升，即变量可以在声明之前调用，值为undefined。
let和const不存在变量提升问题(注意这个‘问题’后缀，其实是有提升的，只不过是let和const具有一个暂时性死区的概念，即没有到其赋值时，之前就不能用)，即它们所声明的变量一定要在声明后使用，否则报错。

console.log(a)
var a = 10
// undefined

console.log(a)
let a = 10 || const a = 10
// 报错：Uncaught ReferenceError: Cannot access 'a' before initialization

4.能否重复声明
var声明的可以重复声明, let和const在同一作用域不允许重复声明变量。其中const声明一个只读的常量(因为如此，其声明时就一定要赋值，不然报错)。一旦声明，常量的值就不能改变。

var a = 10
var a = 20
console.log(a) // 20
var a = 10
let a = 20 || const a = 20
console.log(a)  // 报错：Uncaught SyntaxError: Identifier 'a' has already been declared

5.变量能否被修改
①var、let声明的变量可以被修改，const声明的常量不可修改。当然如果声明的是一个引用类型(如对象)，则不能改变它的内存地址,但是可以是对象内属性可变。 如何使const声明的对象内属性不可变，只可读呢？如果const声明了一个对象，对象里的属性是可以改变的。

var a = 10  || let a = 10
a = 20
console.log(a)  // 20
const a = 10
a = 20
console.log(a)  // 报错：Uncaught TypeError: Assignment to constant variable.

不能改变它的内存地址

//因为const声明的obj只是保存着其对象的引用地址，只要地址不变，就不会出错。
const obj={
   
   name:'蟹黄'};
obj.name='同学';
console.log(obj.name);//同学

使用Object.freeze(obj) 冻结obj,就能使其内的属性不可变,但它有局限，就是obj对象中要是有属性是对象，该对象内属性还能改变，要全不可变，就需要使用递归等方式一层一层全部冻结。

②const声明变量的时候必须赋值，否则会报错，同样使用const声明的变量被修改了也会报错

【建议】 在日常开发中，我的建议是全面拥抱let/const，一般的变量声明使用let关键字，而当声明一些配置项（类似接口地址，npm依赖包，分页器默认页数等一些一旦声明后就不会改变的变量）的时候可以使用const，来显式的告诉项目其他开发者，这个变量是不能改变的(const声明的常量建议使用全大写字母标识,单词间用下划线)，同时也建议了解var关键字的缺陷（变量提升，污染全局变量等），这样才能更好的使用新语法。

2. 面试官：你了解箭头函数吗？箭头函数和普通函数的有什么区别？

箭头函数的特点

(1) ES6 允许使用箭头 => 定义函数

var f = v => v

// 等同于 ES5 的
var f = function (v) {
   
   
  return v
}

(2) 如果箭头函数不需要参数或需要多个参数，就使用圆括号代表参数部分。

var f = () => 5
// 等同于 ES5 的
var f = function () {
   
   
  return 5
}

var sum = (numl, num2) => numl + num2
// 等同于 ES5 的
var sum = function (numl, num2) {
   
   
  return numl + num2
}

(3) 箭头函数使得表达更加简洁

const isEven = n => n % 2 === 0
const square = n => n * n

var result = values.sort((a, b) => a - b)
// 等同于 ES5 的
var result = values.sort(function (a, b) {
   
   
  return a - b
})

箭头函数的应用

应用一：替代ES5需要显示声明保存this的变量
箭头函数替代了以前需要显式的声明一个变量保存this的操作，使得代码更加的简洁。

ES5写法

ES6箭头函数:

应用二：数组链式方法迭代中

在数组的迭代中使用箭头函数更加简洁，并且省略了return关键字

应用三：箭头函数可以与解构结合使用

const full = ({
    
     first , last }) => first +