ES6中的let、const、Map、Set

1.ES6

—————————————————————————————————————————————————————
1.1什么是ES6？

ES6：全称为ECMAScript6.0，是JavaScript的下一个版本标准，2015.06发版。
发版目的：使得JS能够更好的编写大型的web应用，成为企业级的开发语言。

1.2为什么要用ES6?

ES6是ES5的增强版，相对于ES6来说，ES5已经是过时了的，远远不能够满足现在前端越来越复杂，越庞大的模块。

2.ES6中的let、const、Map、Set命令

—————————————————————————————————————————————————————

2.1：let

基本用法：

{
	let a = 1;
	var b = 2;
	b //输出2
	a //输出1
}
a // 报错 ReferenceError: a is not defined（a变量没有定义）
b // 输出2

可以看出let只是在代码块内有效，而var是全局范围内有效。

let a = 1;
let a = 2;
var b = 3;
var b = 4;
a// Identifier 'a' has already been declared(a变量已经声明)
b//4

let不能重复声明。

for循环很适合用let

for(var i = 1; i <= 10; i++){
	setTimeout(function(){
		console.log(i);
	})
}
//输出十个11
for(let j=1; j<=10; j++){
	setTimeout(function(){
		console.log(j);
	})
}
//输出1,2,3,4,5,6,7,8,9,10

变量i是用var声明的，代表在全局范围内有效，所以全局范围内就只有一个i变量。每次循环时，setTimeout里的i指的都是全局变量i。setTimeout会在循环结束后执行。当循环结束后，全局变量i就变成了11，所以就输出了10个11。
变量j是用let声明的，j只在本次循环中有效，每次循环的j其实都是一个新的变量，所以在setTimeout定时器里的j都是不同的变量。即输出1,2,3,4,5…

let不存在变量提升

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

console.log(b);//undefined
var b = 3;
console.log(b);//3

变量b用var声明，存在变量提升，所以在脚本开始运行的时候，变量b就已经存在了，但是没有赋值。
变量a用let声明，不存在变量提升，所以在脚本开始运行的时候，变量a不存在，所以会报错。

—————————————————————————————————————————————————————

2.2 const

基本语法：

const AGE = 18;
AGE //18
AGE = 15;//TypeError：Assignment to constant variable.(赋值给常变量)
const NAME; //SyntaxError: Missing initializer in const declaration(未初始化)

用const修饰的都是只读变量，不能被重新赋值，在声明时必须初始化，否则会报错。用法和java中的final一样。

暂时性死区

var A = "shuaibi";
if(true){
	console.log(A);//ReferenceError: A is not defined(变量A未定义)
	const A = "choubi";
}

ES6中明确规定，如果在代码块中出现let和const命令，那么就会从块的开始形成一个封闭的作用域。代码块内，未定义就输出A变量，所以会报错。

用const修饰复杂类型（Array，Object，function）

const USER = new Object();//创建一个用户对象
USER.name = "大帅比";
console.log(USER.name);//输出大帅比
USER.name = "大丑逼";
console.log(USER.name);//输出大丑逼
USER = new Object();//TypeError: Assignment to constant variable.(赋值给常变量)

const ARRAY = [1,2];//创建一个数组
array[0] = 4;
array[1] = 5;
console.log(array);//4,5
array = [4,5];//TypeError: Assignment to constant variable.(赋值给常变量)

const WAY = function(){};//创建一个匿名函数
console.log(WAY);//ƒ (){}
WAY = function(){};//TypeError: Assignment to constant variable.(赋值给常变量)

当用const声明复杂类型时，可以看出const保证的只是这个变量指针所指的内存地址固定不变。但是内存地址里的值变不变就无法保证了。所以当我们重新声明这个变量时，就会报错。

—————————————————————————————————————————————————————

2.3：Map对象

Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。

常用方法：

• set(key,value)：set一个键值对。
• get(key)：根据key获取对应value
• delete(key)：根据key删除一个键值对
• clear()：清空Map对象里的键值对
• has(key)：根据key判断Map对象中是否存在

常用属性：

• size：返回Map对象映射的键值对数

遍历方法：

• keys()：获取Map对象中所有key
• values()：获取Map对象中所有的value
• entries()：返回一个Iterator对象，里面包含了Map对象里的所有键值对。
• forEach(function(){},Map)：遍历Map对象方法。

基本用法：

var myMap = new Map();
var array = new Array();
var user = {};
var way = function(){};
var nan = Number("foo");//NaN
myMap.set(1,"帅比");//数值为key
myMap.set("2","丑逼");//字符串为key
myMap.set(array,"12312");//数组为key
myMap.set(user,"大法师");//对象为key
myMap.set(way,"大师兄");//函数为key
myMap.set(NaN,"爱仕达");//NaN为key

myMap.get(1);//帅比
myMap.get("2");//丑逼
myMap.get({});//undefined,因为{} !** user
myMap.get(function(){});//undefined,因为function(){} !** way
myMap.get(array);//12312
myMap.get(nan);//爱仕达,虽然NaN和任何值甚至和自己都不相等(NaN **= NaN 返回false)，所以NaN作为键是没有任何区别的。

还有其他的基本命令，比如clear()，delete()，size，keys()，has()，values()…等等，在这里我就不一一列举了。

Map迭代

对Map进行遍历

var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
// 显示两个log。一个是 "0 = zero" 另一个是 "1 = one"
for(let [key,value] fo myMap){//for(let [key,value] fo myMap.entries())，效果是一样的。
	console.log(key+ "=" + value);
}
//另一种Map迭代方式
myMap.forEach(function(key,value){
	console.log(key+ "=" + value);
},myMap);

Map对象操作

二维数组转换为Map对象

var kvArray = [["key1", "value1"], ["key2", "value2"]];//二维数组
//将二维数组转换为Map对象
var myMap = new Map(kvArray);

合并两个Map对象

var first = new Map([[1, 'one'], [2, 'two'], [3, 'three']]);
var second = new Map([[1, 'uno'], [2, 'dos']]);
 
// 合并两个 Map 对象时，如果有重复的键值，则后面的会覆盖前面的，对应值即 uno，dos， three
var merged = new Map([...first, ...second]);

2.4：Set对象

Set对象可以存储任何类型的唯一值，无论是简单类型还是复杂类型。和java中的list集合类似，但是值唯一。

常用方法：

• add(value)：添加一个值
• delete(value)：删除一个值
• clear()：清空所有值
• has(value)：判断改值是否存在

常用属性：

• size：返回Map对象映射的键值对数

常用遍历方法:

• keys()：这里的keys()方法和values()是同样的效果
• values()：返回所有值
• entries()：返回一个Set对象
• forEach()：循环遍历Set对象

Set对象中的特殊值：

• +0和-0是相同的，所以不重复。
• undefined和undefined是相同的，所以不重复。
• NaN和NaN是不相同的，但是在Set对象中，不能重复。

基本用法：

var mySet = new Set();
//简单类型存储
mySet.add(1);
mySet.add(3);
mySet.add(3);//Set(2){1,3},这里体现了Set对象值的唯一性。
mySet.add("时代发生地方");//体现了Set对象的多样性。
mySet.delete(1);//删除一个值
mySet.clear();//清空Set对象
//复杂类型存储
var g = {a:1,b:2};
mySet.add(g);
mySet.add({a:1,b:2});//这里虽然值一样，但是指针指向的内存地址不一样，所以可以存储。
//类型转换
var myArray = [...mySet];//将Set对象转换为数组
mySet = new Set('hello world!');//将字符串转换为Set对象

Set对象转换为数组

字符串转换为Set对象

Set对象作用

并集

var mySet = new Set([1,2,3,4]);
var mySet2 = new Set([3,4,5,6]);
var newSet = new Set([...mySet,...mySet2]);
console.log(newSet);//1,2,3,4,5,6

交集

var mySet = new Set([3,51,2]);
var mySet2 = new Set([3,2,123,5]);
var newSet = new Set([...mySet2].filter(item => mySet.has(item)));
console.log(newSet);//3,2

差集

var mySet = new Set([23,54,28,56]);
var mySet2 = new Set([54,12,34,23]);
var newSet = new Set([...mySet].filter(item => !mySet2.has(item)));
console.log(newSet);//mySet和mySet2的差集为：28,56

newSet = new Set([...mySet2].filter(item => !mySet.has(item)));
console.log(newSet);//mySet2和mySet的差集为：12,34

这里我们来介绍下filter()过滤器方法。

语法：

var newArray = arr.filter(
  callback(element[, index[, array]])[, thisArg]
)

参数：

• callback：回调函数
• element：arr数组中正在被处理的数据
• index：element的下标。可选
• array：调用filter()方法的数组本身，可选
• thisArg：执行callback时，用于this的值，可选

返回值：一个新的、通过测试的元素组成的数组。如果没有元素通过测试，那么则返回一个空数组。

描述：filter会为数组中每个元素调用一次callback函数，并将所有调用callback函数返回true或者等价于true的值的元素组成一个新的数组。callback函数只会被赋值的索引调用，对于那些已经被删除或者未被赋值的索引，callback函数不会被调用。那些未通过callback函数测试的元素，不会包含在新数组中。并且filter方法不会改变原数组。

结束语

暂时就写这么点，后面会持续更新ES6其他相关的知识。谢谢观看！

参考文档：https://www.runoob.com/w3cnote/es6-tutorial.html.