前端面试题总结——ES6篇

一、说说var、let、const之间的区别？

1、var

在ES5中，顶层对象的属性和全局变量是等价的，用 var 声明的变量既是全局变量，也是顶层变量

注意：顶层对象，在浏览器中指 window 对象，在 Node 指的是 globa了对象

var a = 10;
console.log(window.a); // 10

1）使用 var 声明的变量存在变量提升的情况，例子：变量已声明，还未赋值

console.log(a); //undefined
var a = 20;

2）使用 var ，能够对一个变量进行多次声明，后面声明的变量会覆盖前面的变量声明，例子：

var a = 1;
var a = 2;
console.log(a); // 2

3）在函数中使用 var 声明变量的时候，该变量是局部变量，例子：

var a = 2;
function change() {
    var a = 3;
    console.log(a);
}

change(); //3
console.log(a); //2

而如果在函数内部不使用 var ，则该变量是全局变量，例子：

var a = 2;
function change() {
    a = 3;
    console.log(a);
}

change(); //3
console.log(a); //3

2、let

let 是 ES6 中新增的命令，用来声明变量，用法类似于 var ，但是所声明的变量，只在 let 命名所在的代码块内有效

function func() {
    let a = 20;
}

console.log(a);//ReferenceError: a is not defined

1）不存在变量声明，例子：

console.log(a); // ReferenceError: a is not defined
let a = 50;

2）只要块级作用域内存在 let 命令，这个区域就不再收外部影响，例子：

var a = 123;
if(true) {
    a = 'abc';  // ReferenceError
    let a;
}

使用 let 声明变量前，该变量都不可用，也就是大家常说的“暂时性死区”

3）let 不允许在相同作用域中重复声明，例子：

let a = 2;
let a = 3;
//Uncaught SyntaxError: Identifier 'a' has already been declared

注意的是相同作用域，在不同的作用域下是可以重复声明的，例子：

let a = 2;
function func() {
    let a = 3;
    console.log(a)
}
func() // 3 
console.log(a) // 2

3、const

const 声明一个只读的常量，一旦声明，常量的值就不能改变

const a = 1;
a = 3; // TypeError: Assignment to constant variable.

1）所以，const 声明变量时，就需要赋值，不能留到后面赋值

const a; //SyntaxError: Missing initializer in const declaration

2）如果之前 var 和 let 声明过变量，再用 const 声明会报错

var a = 2;
let b = 3;
const a = 2; //SyntaxError: Identifier 'a' has already been declared
const b = 2; SyntaxError: Identifier 'b' has already been declared

3）const 实际上保证的并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动

对于简单类型的数据，值就保存在变量指向的那个内存地址，所以等同于常量

对呀复杂类型的数据，变量指向的内存地址，保存的只是一个指向实际数据的指针， const 只能保证这个指针时固定的，并不能保证变量的结构不变

const foo = {}

//为 foo 添加一个属性，可以成功
foo.prop = 123;

// 将foo指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

4、区别

	var	let	const
变量声明	存在	不存在
暂时性死区	不存在	存在
块级作用域	不存在	存在
重复声明	允许	在同一个作用域下不允许
修改声明的变量	可以修改		声明一个只读的常量时，不可修改
使用	避免使用	其他大多数情况使用	常量用 const

二、ES6中数组新增了哪些扩展？

1、扩展运算符的应用

ES6通过扩展运算符 ... , 好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列

console.log(...[1,2,3]) // 1 2 3

console.log(1, ...[2,3,4], 5) // 1 2 3 4 5

const a = [1,2,3]
const b = [...a]
console.log(b) // [1,2,3]

2、构造函数新增的方法

• Array.from() ：将两类对象转为真正的数组：类似数组的对象和可遍历的对象（包括ES6新增的数据结构 Set 和 Map）

  let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
  };

  let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

• Array.of() : 用于将一组值转换为数组