2021高频前端面试题JavaScript：ES6篇

1. let、const、var的区别

（1）块级作用域 块作用域由 { }包括，let和const具有块级作用域，var不存在块级作用域。 块级作用域解决了ES5中的两个问题：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21132.html

• 内层变量可能覆盖外层变量
• 用来计数的循环变量泄露为全局变量

（2）变量提升 var存在变量提升，let和const不存在变量提升，即在变量只能在声明之后使用，否在会报错。 （3）给全局添加属性 浏览器的全局对对象是window，Node的全局对象是global。var声明的变量为全局变量，同时会将该变量添加为全局对象的属性，但是let和const就不会。 （4）重复声明 var声明变量时，可以重复声明变量，const和let不能重复声明。 （5）暂时性死区 在代码块内，使用let、const命令声明变量之前，该变量都是不可用的。这在语法上，称为暂时性死区。 （6）初始值设置 在变量声明时，var 和 let 可以不用设置初始值。而const声明变量必须设置初始值。 （7）指针指向 let和const都是ES6新增的用于创建变量的语法。 let创建的变量是可以更改指针指向（可以重新赋值）。但const声明的变量是不允许改变指针的指向。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21132.html

总结：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21132.html

2. const对象的属性可以修改吗

const保证的并不是变量的值不得改动，而是变量指向的那个内存地址不能改动。对于基本类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21132.html

但对于引用类型的数据（主要是对象和数组），变量指向数据的内存地址，保存的只是一个指针，const只能保证这个指针是固定不变的，至于它指向的数据结构是不是可变的，就完全不能控制了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21132.html

3. 如果new一个箭头函数的会怎么样

箭头函数是ES6中的提出来的，它没有prototype，也没有自己的this指向，更不可以使用arguments参数，所以不能New一个箭头函数。 new操作符的实现步骤如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21132.html

• 创建一个对象
• 将构造函数的作用域赋给新对象（也就是将对象的__proto__属性指向构造函数的prototype属性）
• 指向构造函数中的代码，构造函数中的this指向该对象（也就是为这个对象添加属性和方法）
• 返回新的对象

4. 箭头函数与普通函数的区别

（1）箭头函数比普通函数更加简洁文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21132.html

• 如果没有参数，就直接写一个空括号即可
• 如果只有一个参数，可以省去参数的括号
• 如果有多个参数，用逗号分割
• 如果函数体的返回值只有一句，可以省略大括号
• 如果函数体不需要返回值，且只有一句话，可以给这个语句前面加一个void关键字。最常见的就是调用一个函数：

let fn = () => void doesNotReturn();
复制代码

（2）箭头函数没有自己的this 箭头函数不会创建自己的this， 所以它没有自己的this，它只会在自己作用域的上一层继承this。所以箭头函数中this的指向在它在定义时已经确定了，之后不会改变。 （3）箭头函数继承来的this指向永远不会改变文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21132.html

var id = 'GLOBAL';
var obj = {
  id: 'OBJ',
  a: function(){
    console.log(this.id);
  },
  b: () => {
    console.log(this.id);
  }
};
obj.a();    // 'OBJ'
obj.b();    // 'GLOBAL'
new obj.a() // 报错，不能作为构造函数
new obj.b() 
复制代码

对象obj的方法b是使用箭头函数定义的，这个函数中的this就永远指向它定义时所处的全局执行环境中的this，即便这个函数是作为对象obj的方法调用，this依旧指向Window对象。 这里需要注意，定义对象的大括号{}是无法形成一个单独的执行环境的，它依旧是处于全局执行环境中。 （4）call()、apply()、bind()等方法不能改变箭头函数中this的指向文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21132.html

var id = 'Global';
let fun1 = () => {
    console.log(this.id)
};
fun1();                     // 'Global'
fun1.call({id: 'Obj'});     // 'Global'
fun1.apply({id: 'Obj'});    // 'Global'
fun1.bind({id: 'Obj'})();   // 'Global'
复制代码

（5）箭头函数不能作为构造函数使用 构造函数在new的步骤在上面已经说过了，实际上第二步就是将函数中的this指向该对象。 但是由于箭头函数时没有自己的this的，且this指向外层的执行环境，且不能改变指向，所以不能当做构造函数使用。 （6）箭头函数没有自己的arguments 箭头函数没有自己的arguments对象。在箭头函数中访问arguments实际上获得的是它外层函数的arguments值。 （7）箭头函数没有prototype （8）箭头函数不能用作Generator函数，不能使用yeild关键字文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21132.html

5. 箭头函数的this指向哪⾥？

箭头函数不同于传统JavaScript中的函数,箭头函数并没有属于⾃⼰的this,它的所谓的this是捕获其所在上下⽂的 this 值，作为⾃⼰的 this 值,并且由于没有属于⾃⼰的this,⽽箭头函数是不会被new调⽤的，这个所谓的this也不会被改变.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21132.html

可以⽤Babel理解⼀下箭头函数:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21132.html

// ES6 
const obj = { 
  getArrow() { 
    return () => { 
      console.log(this === obj); 
    }; 
  } 
}
复制代码

转化后：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21132.html

// ES5，由 Babel 转译
var obj = { 
   getArrow: function getArrow() { 
     var _this = this; 
     return function () { 
        console.log(_this === obj); 
     }; 
   } 
};
复制代码

6. 扩展运算符的作用及使用场景

（1）对象扩展运算符 对象的扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21132.html

let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }
复制代码

上述方法实际上等价于:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21132.html

let bar = { a: 1, b: 2 };
let baz = Object.assign({}, bar); // { a: 1, b: 2 }
复制代码

Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。 Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。(如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性)。 同样，如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21132.html

let bar = {a: 1, b: 2};
let baz = {...bar, ...{a:2, b: 4}};  // {a: 2, b: 4}
复制代码

利用上述特性就可以很方便的修改对象的部分属性。在redux中的reducer函数规定必须是一个纯函数，reducer中的state对象要求不能直接修改，可以通过扩展运算符把修改路径的对象都复制一遍，然后产生一个新的对象返回。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21132.html

这里有点需要注意的是扩展运算符对对象实例的拷贝属于一种浅拷贝。 （2）数组扩展运算符 数组的扩展运算符可以将一个数组转为用逗号分隔的参数序列，且每次只能展开一层数组。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21132.html

console.log(...[1, 2, 3])
// 1 2 3
console.log(...[1, [2, 3, 4], 5])
// 1 [2, 3, 4] 5
复制代码

下面是数组的扩展运算符的应用：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21132.html

• 将数组转换为参数序列

function add(x, y) {
  return x + y;
}
const numbers = [1, 2];
add(...numbers) // 3
复制代码

• 复制数组

const arr1 = [1, 2];
const arr2 = [...arr1];
复制代码

要记住：扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中，这里参数对象是个数组，数组里面的所有对象都是基础数据类型，将所有基础数据类型重新拷贝到新的数组中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21132.html

• 合并数组

如果想在数组内合并数组，可以这样：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21132.html

const arr1 = ['two', 'three'];
const arr2 = ['one', ...arr1, 'four', 'five'];
// ["one", "two", "three", "four", "five"]
复制代码

• 扩展运算符与解构赋值结合起来，用于生成数组

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]
复制代码

需要注意：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21132.html

如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21132.html

const [...rest, last] = [1, 2, 3, 4, 5];
// 报错
const [first, ...rest, last] = [1, 2, 3, 4, 5];
// 报错
复制代码

• 将字符串转为真正的数组

[...'hello']
// [ "h", "e", "l", "l", "o" ]
复制代码

• 任何 Iterator 接口的对象（参阅 Iterator 一章），都可以用扩展运算符转为真正的数组

比较常见的应用是可以将某些数据结构转为数组,比如：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21132.html

// arguments对象
function foo() {
  const args = [...arguments];
}
复制代码

用于替换es5中的Array.prototype.slice.call(arguments)写法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21132.html

• 使用Math函数

const numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
Math.max(...numbers); // 9