一、let&&const 块级作用域 const也是块级作用域
let、const不存在变量提升
// var 的情况 console.log(foo); // 输出undefined var foo = 2; // let 的情况 console.log(bar); // 报错ReferenceError let bar = 2;
var与let的区别：
（1）var定义的变量，作用域是整个封闭函数，是全域的。通过let定义的变量，作用域是在块内的；
（2）关于变量的提升。 var可以变量提升，但是let不存在变量提升。
（3）let不允许在相同的作用域内，重复声明同一个变量。
// 报错 function func() { var a = 1; let a = 10; } //如果在当前作用域中嵌套另一个作用域，便可在嵌套作用域中用let声明同名变量 function func() { var a = 1; if(condition){ let a = 10; } }
var a=10; function foo(){ console.log(a); let a=20; } foo()//ReferenceError //let和const声明可以让变量在其作用域上受限于它所使用的块、语句或表达式，与var不同的是，这些变量没有被提升，并且有一个所谓的暂时死区（TDZ）试图访问TDZ中
的这些变量将引发ReferenceError错误，因为只有执行到达声明时才能访问它们。
为什么需要块级作用域：
ES5只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景
- 第一种场景，内层变量可能会覆盖外层变量。
var tmp = new Date(); function f() { console.log(tmp); if (false) { var tmp = 'hello world'; } } f(); // undefined
上面代码的原意是，if代码块的外部使用外层的tmp变量，内部使用内层的tmp变量。但是，函数f执行后，输出结果为undefined，原因在于变量提升，导致内层的tmp变量覆盖了外层的tmp变量。
-
第二种场景，用来计数的循环变量泄露为全局变量。
var s = 'hello'; for (var i = 0; i < s.length; i++) { console.log(s[i]); } console.log(i); // 5
上面代码中，变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。
- 第三种场景，循环中的函数
//（1）在循环中使用var声明 //循环中每次迭代同时共享着变量i,循环内部创建的函数全都保留了对相同变量的引用，循环结束时变量i的值为10 var a = []; for (var i = 0; i < 10; i++) { a.push（function () { console.log(i); }）; } a.forEach(function(item){ item();//输出10次数字10 }) //（2）为解决以上问题，一般使用立即执行函数，以强制生成变量的副本，如 for (let i = 0; i < 10; i++) { a.push（(function (num) { return function(){ console.log(num); } })(i)）; } //（3）在循环中使用let声明 //每次循环时let声明都会创建一个新变量i，并将其初始化为当前值，所以内部函数每次都能得到属于他们自己的i的副本 for (let i = 0; i < 10; i++) { a.push（function () { console.log(i); }）; } a.forEach(function(item){ item();//输出0-9 })
const用于声明一个常量，设定后值不会发生改变，强行对其进行重新赋值会报错。
这个不可变对于基础类型（按值访问）而言是值不可变；而对于引用类型（按引用访问）是引用地址不变，比如用const声明对象后，可以修改该对象的属性值。
const num=123; num=456; console.log(num);//Uncaught SyntaxError: Identifier 'num' has already been declared const obj={ a:2 } //可以修改对象属性的值 obj.a=4; console.log(obj.a);//4 //抛出语法错误 obj={ a:4 }
1.1 新增数据类型：Symbol
Symbol功能类似于一种标识唯一性的ID，通常情况下，我们可以通过调用Symbol()函数来创建一个Symbol实例。
let s1=Symbol()；
或者可以传入一个可选的字符串参数
let s2=Symbol('another symbol');
由于Symbol是一种基础数据类型，所以当我们使用typeof去检查它的类型的时候，会返回一个属于自己的类型symbol。
另外，每个Symbol实例都是唯一的，因此，当你比较两个Symbol实例的时候，将总会返回false。
let s2=Symbol('another symbol'); let s3=Symbol('another symbol'); s2===s3 //false
二、变量的解构赋值
ES6允许按照一定的模式，从数组和对象中提取值，对变量进行赋值，称为解构。本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。
let[a,b,c]=[1,2,3];//等同于let a = 1;let b = 2;let c = 3;
如果解构不成功，变量的值就等于undefined
let [bar, foo] = [1]; console.log(bar);//1 console.log(foo);//undefined
解构不仅可以用于数组，还可以用于对象。
let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
三、箭头函数
ES6 允许使用“箭头”（=>）定义函数。
var f = v => v;等同于 var f = function(v) { return v; };
如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。
var f = () => 5; // 等同于 var f = function () { return 5 }; var sum = (num1, num2) => num1 + num2; // 等同于 var sum = function(num1, num2) { return num1 + num2; };
箭头函数与传统的js函数的区别：
（1）箭头函数体内的this对象，就是函数定义时所在的对象，而普通函数的this是函数运行时所在的对象。且箭头函数内部的this值不可被改变
（2）不可以当作构造函数，也就是说不可以使用new命令，否则会抛出一个错误。
因为箭头函数在创建时this对象就绑定了，更不会指向对象实例。
//普通函数 function fun(){ console.log('普通函数'); } var p=new fun();//普通函数 //箭头函数 var fun=()=>{ console.log('箭头函数'); } var p=new fun();//Uncaught TypeError: fun is not a constructor
（3）不可以使用arguments对象，该对象在函数体内不存在。
//普通函数 function fun(x,y){ console.log(arguments[0]); } fun('a','b');//a //箭头函数 var fun=(x,y)=>{ console.log(arguments[0]); } fun('a','b');//ƒ (e,t){return new v.fn.init(e,t,n)}
（4）不可以使用yield命令，因此箭头函数不能用作Generator函数。
（5）没有原型，因为不可以通过new关键字调用箭头函数，因而没有构建原型的需求，所以箭头函数不存在prototype这个属性。
ES5与ES6中函数this的指向不同
箭头函数可以让setTimeout里面的this，绑定定义时所在的作用域，而不是指向运行时所在的作用域。下面是另一个例子。
function Timer() { this.s1 = 0; this.s2 = 0; // 箭头函数 setInterval(() => this.s1++, 1000); // 普通函数 setInterval(function () { this.s2++; }, 1000); } var timer = new Timer(); setTimeout(() => console.log('s1: ', timer.s1), 3100); setTimeout(() => console.log('s2: ', timer.s2), 3100); // s1: 3 // s2: 0
上面代码中，Timer函数内部设置了两个定时器，分别使用了箭头函数和普通函数。前者的this绑定定义时所在的作用域（即Timer函数），
后者的this指向运行时所在的作用域（即全局对象）。所以，3100毫秒之后，timer.s1被更新了3次，而timer.s2一次都没更新。
this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。
四、类
ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类，与多数传统语言类似。
为了简化原型链继承，es6的class大大减少了相关代码，不用再去构建有序的原型链，直接用extend就能实现继承。
//原型 function Student(name) { this.name = name; } Student.prototype.hello = function () { alert('Hello, ' + this.name + '!'); } //类 class Student { constructor(name) { this.name = name; } hello() { alert('Hello, ' + this.name + '!'); } } var xiaoming = new Student('小明'); xiaoming.hello();
class继承
用class定义对象的另一个好处就是继承更方便了，直接用extends来实现
class PrimaryStudent extends Student{ constructor(name,grade){ super(name); this.grade=grade; } myGrade(){ console.log('my grade is'+this.grade); } } var stu=new PrimaryStudent('an','32'); stu.hello();//hello,an stu.myGrade();//my grade is32
五、字符串模板
模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
六、默认参数值
ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。
七、for of/in遍历
区别
（1）for in遍历的是数组的索引，而for of遍历的是数组的元素值;
（2）for in更适合遍历对象，不要使用for in遍历数组；
for...in
Array.prototype.method=function(){ console.log(this.length); } var myArr=[1,2,3,4,5]; console.log('for...in遍历'); for(var i in myArr){ console.log(myArr[i]) }
遍历结果：
当你需要向数组中添加额外的方法（或另一个对象）时，for...in 会遍历数组所有可枚举的属性，意味着如果向数组的原型中添加任何其他属性，这些属性也会出现在循环中。
for/in与Object.keys(obj)的区别：
最主要的区别是for/in会走原型链，而Object.keys()不会走原型链
for...of
for...of遍历的只是数组内的元素，不包含数组原型上的属性和方法。 
（3）for of只能遍历拥有迭代器对象的对象
var obj={ a:1, b:2, c:3 } for(let i in obj){ console.log(i)//a,b,c } for(let item of obj){ console.log(item)//Uncaught TypeError: obj is not iterable }
一个数据结构只要部署了Symbol.iterator属性，就被视为具有iterator接口，就可以使用for of循环。
而对象是没有Symbol.iterator这个属性，所以使用for of会报obj is not iterable。
for of不同于forEach，他可以与break、continue和return配合使用，也就是说for of循环可以随时退出循环，而forach()不能跳出循环，break报错。
哪些数据结构部署了Symbol.iterator属性了呢？？
- 数组Array
- Map
- Set
- String
- arguments对象
以上这些都可以直接使用for of循环，凡是部署了iterator接口的数据结构也都可以使用数组的扩展运算符和解构赋值操作。
假如想要对象也可以使用for of循环怎么办？使用Objct.keys()获取对象的key值集合后，再使用for of。
var obj={ a:1, b:2, c:3 } for(let item of Object.keys(obj)){ console.log(item)//a,b,c }
判断一个数据结构是否具有可迭代能力，只有当数据具有Symbol.iterator属性的时候才可以使用for...of进行迭代。
console.log(Array.prototype.hasOwnProperty(Symbol.iterator));//true
console.log(Object.prototype.hasOwnProperty(Symbol.iterator));//false
八、扩展运算符
扩展运算符（用三个连续的点 (...) 表示）是 ES6 中的新概念，使你能够将字面量对象展开为多个元素
通过减少赋值语句的使用，或者减少通过下标访问数组或对象的方式，使代码更加简洁优雅，可读性更佳。
const books = ["Don Quixote", "The Hobbit", "Alice in Wonderland", "Tale of Two Cities"]; console.log(...books); Prints: Don Quixote The Hobbit Alice in Wonderland Tale of Two Cities
应用：
（1）复制数组， 使用扩展运算符拷贝对象或数组时，只对第一层深拷贝，二层及以后为浅拷贝
var a1=[1,3,2,5,3]; //ES5 var a2=a1.concat(); //ES6 var a3=[...a1];
（2）合并多个数组
//ES5 var a2=arr1.concat(arr2,arr3); //ES6 var a3=[...arr1,...arr2,...arr3];
（3）使用扩展运算符展开数组代替apply方法，将数组转为函数的参数。
//ES5 var a2=Math.max.apply(this,[1,5,3,8,6]); //ES6 var a3=Math.max(...[1,5,3,8,6]); //相当于Math.max(1,5,3,8,6);
（4）将字符串转为数组
var str='abcde'; //ES5 var a2=str.split(''); //ES6 var a3=[...str]; //["a", "b", "c", "d", "e"]
（5）Map结构
let map=new Map([ [1,'one1'], [2,'one2'], [3,'one3'] ]); let arr=[...map.keys()]; console.log(arr);//[1,2,3]
九、Set数据结构ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 可用于数组去重
Set本身是一个构造函数，用来生成 Set 数据结构。 Set函数接收一个数组作为参数用来初始化。
// 例一 const set = new Set([1, 2, 3, 4, 4]); [...set] 获Array.from(set); // [1, 2, 3, 4] // 例二 const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]); items.size // 5
（1）se结构与数组的区别
- 添加元素 add() 如：const set = new Set([1, 2, 3, 4, 4]); set.add('1');
- 删除元素 set.delete(value);
- 判断某值是否存在 set.has(value)
- 清除所有值 set.clear();
- 获取长度 set.size
（2）将set结构转换为数组：
- [...set]
- Array.from(set)
（3）Set和数组的相同点：
- 数组的map()和filter()方法用于set数据结构
注意写法：（不是在set实例后面写方法，是在参数数组后面）
- Set支持for...of和forEach循环
注意： 在forEach((item,index){})循环中发现：Set的value值与index值相同
Set结构：
数组：
10、Map数据结构
Map结构出现的目的：
由于JS的对象（Object）本质上是键值对的集合（Hash结构），但是传统意义上只能用字符串当作键，这就给它的使用带来了很大的限制。
ES6提供的Map数据结构，类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object结构提供了“字符串——值”的对应，Map结构提供了“值——值”的对应，是一种更加完善的Hash结构，如果你需要“键值对”的数据结构
，Map比Object更合适。
传统对象键名必须为字符串
let obj={ a:1, 666:2 } console.log(obj.666);//报错
map结构是一种“值对值”的数据结构
let map=new Map(); map.set(666,2); console.log(map.get(666));//2
Map结构的属性和方法
（1）属性：size
（2）set(key,val)：向字典中添加新元素
（3）get(key)：通过键查找特定的数值并返回
（4）has(key)：如果键存在字典中返回true
（5）delete(key)
（6）clear():将字典中的所有元素都删除
遍历方法
（1）keys()：将字典中包含的所有键名以数组形式返回
（2）values()：将字典中包含的所有数值以数组的形式返回
（3）forEach()遍历字典中的成员
Map结构初始化的参数，可以接受一个二维数组作为参数。
let map=new Map([ ['name','张三'], ['title','Author'] ]) console.log(map.size)//2 console.log(map.has('name'))//true console.log(map.get('name'))//"张三"
for(let key of map.keys()){ console.log(key);//name title } for(let val of map.values()){ console.log(val);//张三 Author }
11、ES6新增的数组方法？
（1）map()
map():对数组的每个元素进行一定的操作（映射）后，会返回一个新的数组。
map()传参与forEach()相同
（2）forEach()
forEach():该方法对数组中的每一项运行给定函数，该方法没有返回值。其实就是遍历循环
forEach()包含两个参数，第一个参数是匿名函数，第二个参数是this。匿名函数中包含三个参数：item(每一项的值)，index(每一项的索引)，self(代表所遍历函数自己)
map()和forEach()的区别：
map()会返回一个新的数组，forEach()不会返回数据；
forach()允许改变原数组的元素，map()返回的是新数组，不会修改原数组。
（3）filter()
filter():该方法对数组中的每一项运行给定函数，返回该函数会返回每一相对应的true或false，最后返回包含留下为true对应的元素的数组。
filter()传参与forEach()相同。
filter()用法：创建一个数组，判断数组中是否存在某个值或过滤某些值
var arr=[2,4,3,2,5]; console.log(arr.filter(item=>item==3));//[3]
- 去掉数组中的空数组、空字符串、undefined、null
var arr = ['1','2',undefined,'','3.jpg',undefined,null]; var newArr = arr.filter(function(item){ return item; }) console.log(newArr);//["1", "2", "3.jpg"]
- 数组去重
var arr = [1,2,4,5,3,2,4,3,6,8,6,8,8,8]; var newArr=arr.filter(function(item,index,self){ return self.indexOf(item)==index; }) console.log(newArr);//[1, 2, 4, 5, 3, 6, 8]
（4）reduce()
归并方法reduce():该方法会迭代数组中的每一项，然后生成一个最终返回值。接收两个参数（回调函数，初始值）,将第二个参数作为初始值 数组求和来启动累积。reduce()接收一个函数作为累加器,回调函数接收最多四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。
//数组求和 var arr = [1,2,4,5,3]; var sum=arr.reduce(function(pre,item){ return pre+item; },0) console.log(sum);//15
（5）every()
对数组的每一项都运行给定的函数，如果每一项都返回true,则返回true，否则返回false。
（6）some()
对数组的每一项都运行给定的函数，如果任一项返回true,则返回true。
function add(){ var arr=[1,2,3,4,5]; return arr.every(function(item){ return item>3; }) } console.log(add());//false function add(){ var arr=[1,2,3,4,5]; return arr.some(function(item){ return item>3; }) } console.log(add());//true
11、模块
导入、导出
12、Promise
13、Object.assign()、Object.create()