关于ES6都有哪些新增及使用心得

关于ES6都有哪些新增，经常使用的有哪些，使用心得

1. 新增了块级作用域（let,const）
2. 新增了基本数据类型（symbol）
3. 新增了变量得解构赋值
4. 新增了模块化（import/export）
5. 新增了Set和map数据结构
6. 新增了生成器（Generator）和遍历器（Iterator）
7. 函数参数允许设置默认值，引入了rest参数，新增了箭头函数
8. 提供了定义类得语法糖class
9. 对象和数组新增了扩展运算符
10. 数组新增了一些API，如isArray/from/of方法
11. 数组实例新增了entries() / keys() / values() 等方法
12. ES6原生提供了Proxy构造函数，用来生成Proxy实例

---

(以下为讲解，部分摘自《ECMAScript 6 入门》阮一峰
https://es6.ruanyifeng.com/?search=%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97%E7%AC%A6&x=14&y=4)

1.新增了块级作用域（let,const）

####  let与const以及var的区别 
- let   具有块级作用 不能重复声明 可以重复赋值
- const 具有块级作用域 不能重复声明 不能重复赋值
- var   全局作用域	可以重复声明 可以重复赋值
#### 暂时性死区：
  - 个人理解：所谓的暂时性死区就是在会计作用域内使用let声明了变量，那么这个变量就不会受外部的影响，这个我把它理解为暂时性死区。
#### 变量提升：
  - 个人理解：所谓的变量提升就是为了先事先声明变量，然后在进行赋值

2.新增了基本数据类型（symbol）

定义:Symbol实际上是ES6引入的一种原始数据类型
 作用：生成一个独一无二的值
https://blog.csdn.net/gklcsdn/article/details/109196372

3.新增了变量得解构赋值
基本用法*
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

以前，为变量赋值，只能直接指定值。
let a = 1;
let b = 2;
let c = 3;

ES6 允许写成下面这样。

let [a, b, c] = [1, 2, 3];

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。
本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

** 用途**
变量的解构赋值用途很多。
（1）交换变量的值

let x = 1;
let y = 2;

[x, y] = [y, x];
上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。

（2）从函数返回多个值
函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。

// 返回一个数组
function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象
function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

（3）函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来。

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

（4）提取 JSON 数据
解构赋值对提取 JSON 对象中的数据，尤其有用。

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};
let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]
上面代码可以快速提取 JSON 数据的值。

（5）函数参数的默认值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
} = {}) {
  // ... do stuff
};
指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。

（6）遍历 Map 结构
任何部署了 Iterator 接口的对象，都可以用for…of循环遍历。Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便。

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world

如果只想获取键名，或者只想获取键值，可以写成下面这样。

// 获取键名
for (let [key] of map) {
  // ...
}
// 获取键值
for (let [,value] of map) {
  // ...
}

（7）输入模块的指定方法
加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。

const { SourceMapConsumer, SourceNode } = require("source-map");

4.新增了模块化（import/export）

#### 对es6模块化的理解
> 在说这个es6模块化之前，我觉得我个人有必要先介绍什么是模块化，模块化开发是一种管理方式，=是一种生产方式，也可以理解为是一种解决方案，一个模块其实就是代表一个实现特定功能文件，那么在这里大家也可以理解为一个js文件就是一个模块，有了模块之后我们就可以方便的使用别人的代码，想要什么功能，就加载什么模块，但是模块开发需要一定的方案，所以后来慢慢衍生出了amd，cmd规范，不过es6也给我们提供了一种模块化的方案，分别是import和export，也就是模块的导入和导出
> amd和cmd规范，其实amd规范是浏览器端的一种规范，而cmd规范是服务器端模块化的一种规范，之间amd规范的主要代表是sea.js，不过sea.js目前淘汰了，在前台开发中使用模块化的开发，我们使用的都是es6提供模块化方法，而cmd规范目前在node中我使用的cmd规范
> es6模块的语法是 import export
> cmd规范的语法是 require("") module.export

5.新增了Set和map数据结构

#### Set是什么，有什么作用？
​	`Set`是`ES6`引入的一种类似`Array`的新的数据结构，`Set`实例的成员类似于数组`item`成员，区别是`Set`实例的成员都是唯一，不重复的。这个特性可以轻松地实现数组去重
#### Map是什么，有什么作用？
​	`Map`是`ES6`引入的一种类似`Object`的新的数据结构，`Map`可以理解为是`Object`的超集，打破了以传统键值对形式定义对象，对象的`key`不再局限于字符串，也可以是`Object`。可以更加全面的描述对象的属性

6.新增了生成器（Generator）和遍历器（Iterator）
生成器（Generator）:列表所有数据都在内存中，如果有海量数据的话将会非常耗内存。想要得到庞大的数据，又想让它占用空间少，那就用生成器.
遍历器（Iterator）:在编写软件的时候（当然也有具有特定遍历功能的硬件），有时候遇到一些问题，需要将所有结果都列出来或者从所有结果中选取最优的。所以要编写一个程序或者函数来对每个结果逐一进行验证，这个函数或者程序就被称为遍历器。
比如有一个数组{3，6，5，7，9，1，5}，要找出里面的数据比5大的数，势必要将数组里面每个数都和5进行一次比较，这个例子其实也是一种编历。
从字面意思上来看，“遍”就是“都”“每个”的意思，“历”就是“经历一次”。亦即“过一遍”。

7.函数参数允许设置默认值，引入了rest参数，新增了箭头函数

#### 箭头函数与普通函数的区别？
- 普通函数是很早就提出的，而箭头函数是es6提出的，他们两个在语法上不一样，并在普通函数与箭头函数他们this的指向也不要一样，普通函数内的this指向是如果没有绑定事件元素的时候，this指向的window，或者在闭包中this指向的也是window，如果函数绑定了事件，但并没有产生闭包，这个this指向的是当前调用的事件对象，箭头函数内this的指向是父作用域
- 箭头函数不能使用arguments，普通函数可以使用，arguments是以集合的方式获取函数传递的参数
- 箭头函数不能实例化为构造函数，而普通函数可以进行实例化

8.提供了定义类得语法糖class

所谓的class类其实就是es5构造函数的语法糖，所谓的语法糖其实就是构造函数的另外一种写法而已

9.对象和数组新增了扩展运算符
扩展运算符（ spread ）是三个点（…），可以将一个数组转为用逗号分隔的参数序列。
说的通俗易懂点，有点像化骨绵掌，把一个大元素给打散成一个个单独的小元素。

基本用法：拆解字符串与数组

var array = [1,2,3,4];
console.log(...array);//1 2 3 4 
var str = "String";
console.log(...str);//S t r i n g

参考：https://zhuanlan.zhihu.com/p/59502528

10.数组新增了一些API，如isArray/from/of方法

#### ES6对Array数组类型做的常用升级优化？
`ES6`在`Array`原型上新增了`find()`方法，用于取代传统的只能用`indexOf`查找包含数组项目的方法,且修复了`indexOf`查找不到`NaN的bug([NaN].indexOf(NaN) === -1)`.此外还新增了`copyWithin()`,`includes()`, `fill()`,`flat()`等方法，可方便的用于字符串的查找，补全,转换等

11.数组实例新增了entries() / keys() / values() 等方法
ES6 提供三个新的方法——entries()，keys()和values()——用于遍历数组。它们都返回一个遍历器对象（详见《Iterator》一章），可以用for…of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

如果不使用for…of循环，可以手动调用遍历器对象的next方法，进行遍历。

let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']

12.ES6原生提供了Proxy构造函数，用来生成Proxy实例

#### Proxy是什么，有什么作用？
     Proxy`是`ES6`新增的一个构造函数，可以理解为JS语言的一个代理，用来改变JS默认的一些语言行为，包括拦截默认的`get/set`等底层方法，使得JS的使用自由度更高，可以最大限度的满足开发者的需求。比如通过拦截对象的`get/set`方法，可以轻松地定制自己想要的`key`或者`value`。下面的例子可以看到，随便定义一个`myOwnObj`的`key`,都可以变成自己想要的函数