前端-ES6合集 持续更新

1.关于变量和常量

let

let 用来声明变量，类似于变量，但是所声明的变量，只在let命令所在的代码块内有效
需要注意的地方：
1.不存在变量提升，未声明直接报错
2.暂时性死区
3.for循环具有两个作用域，外面的变量和里面的变量互不干扰

const

用来声明一个只读的常量，一旦尚明，常量的值就不可以改变了，而且声明的时候必须赋值
需要注意的地方：

引用类型储存的是一个地址，所以用const声明的引用数据类型，只要不改变指针地址，就可以
如果为常量赋其他的值，就会报错。

2.总结常用的es6语法

1、Let：声明的变量，只作用于使用了let命令的代码块
2、const :声明一个常量，声明过后，就不可修改其值(会报错)
3、解构性赋值
3、箭头函数：用法的两个明显的优点： * 函数的写法更加简洁 * 
箭头函数内部没有自己的this对象，而是全部继承外面的，
所以内部的this就是外层代码块的this。
4、字符串模板：ES6中允许使用反引号 ` 来创建字符串，
此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}
5、Proxy：Proxy可以监听对象身上发生了什么事情，
并在这些事情发生后执行一些相应的操作
6、循环：for of 实现数组的遍历（以及keys(),value(),entries()等方法）

3.说说对es6的理解（说一下es6，知道es6吗）

1.语法糖(箭头函数，类的定义，继承)，
2.以及一些新的扩展（数组，字符串，对象，方法等），
3.对作用域的重新定义，
4.以及异步编程的解决方案（promise，async，await）、
5.解构赋值的出现

4.ES6的常见特性

变量定义(let和const,可变与不可变，const定义对象的特殊情况)
解构赋值
模板字符串
数组新API(例：Array.from(),entries(),values(),keys())
箭头函数(rest参数，扩展运算符，::绑定this)
Set和Map数据结构(set实例成员值唯一存储key值，map实例存储键值对(key-value))
Promise对象(前端异步解决方案进化史，generator函数，async函数)
Class语法糖(super关键字)

5.对ES6中Promise的理解

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件
（通常是一个异步操作）的结果。
从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。
Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
 特点： 
1、自己身上有all、reject、resolve这几个方法
​2、原型上有then、catch等方法 
3、一旦建立，就无法取消，这是它的缺点



Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件监听——更合理和更强大。
Promise 有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。
但是无法获取到pending状态，在promise中接受两个内置参数分别是resolve（成功）和reject（失败），
Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。
then方法可以传递两个回调函数第一个是成功，第二个是失败，
失败回调也可以使用promise的catch方法回调，
promise还有一个强大的功能那就是all方法可以组合多个promise实例，包装成一个新的 Promise 实例。

6.介绍一下async和await

 async 会将其后的函数（函数表达式或 Lambda）的返回值封装成一个 Promise 对象，
 而 await 会等待这个 Promise 完成，并将其 resolve 的结果返回出来

async / await是ES7的重要特性之一，也是目前社区里公认的优秀异步解决方案。
目前async / await 在 IE edge中已经可以直接使用了，
但是chrome和Node.js还没有支持。

幸运的是，babel已经支持async的transform了，所以我们使用的时候引入babel就行。
在开始之前我们需要引入以下的package，
preset-stage-3里就有我们需要的async/await的编译文件。

7.ES6如何转ES5

使用Babel 转码器，Babel 的配置文件是.babelrc，
存放在项目的根目录下。使用 Babel 的第一步，就是配置这个文件。

8.ES6 中新增的数据类型有哪些

Set 和 Map 都是 ES6 中新增的数据结构，是对当前 JS 数组和对象这两种重要数据结构
的扩展。由于是新增的数据结构

Set 类似于数组，但数组可以允许元素重复，Set 不允许元素重复 
Map 类似于对象，但普通对象的 key 必须是字符串或者数字，
而 Map 的 key 可以是任何数据类型 

9.箭头函数的作用域上下文和 普通函数作用域上下文 的区别

箭头函数其实只是一个密名函数的语法糖，

区别在于普通函数作用域中的this有特定的指向，一般指向window，

而箭头函数中的this只有一个指向那就是指当前函数所在的对象，

其实现原理其实就是类似于之前编程的时候在函数外围定义that一样，

用了箭头函数就不用定义that了直接使用this

10.ES6 class 和普通构造函数的区别

class 其实一直是 JS 的关键字（保留字），但是一直没有正式使用，直到 ES6 。

ES6 的 class 就是取代之前构造函数初始化对象的形式，从语法上更加符合面向对象的写法

class 是一种新的语法形式，是class Name {...}这种形式，
和函数的写法完全不一样    
两者对比，构造函数函数体的内容要放在 class 中的constructor函数中，
constructor即构造器，初始化实例时默认执行 
class 中函数的写法是add() {...}这种形式，并没有function关键字 

而且使用 class 来实现继承就更加简单了
在class中直接extends关键字就可以实现继承，而不像
之前的继承实现有多种不同的实现方式，在es6中就只有一种
注意以下两点：

使用extends即可实现继承，更加符合经典面向对象语言的写法，如 Java

子类的constructor一定要执行super()，以调用父类的constructor

11.es6中的Module

ES6 中模块化语法更加简洁，使用export抛出，使用import from 接收，

如果只是输出一个唯一的对象，使用export default即可

// 创建 util1.js 文件，内容如

export default {

a: 100

}
// 创建 index.js 文件，内容如

import obj from './util1.js’

如果想要输出许多个对象，就不能用default了，且import时候要加{…}，代码如下

// 创建 util2.js 文件，内容如

export function fn1() {

alert('fn1')

}

export function fn2() {

alert('fn2')

}
// 创建 index.js 文件，内容如

import { fn1, fn2 } from './util2.js’