ECMAScript 6（1）
ECMAScript 6
ECMAScript 6也称为ES6和ECMAScript 2015
回顾es5
一：严格模式。
目的：
1. 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
2. 消除代码运行的一些不安全之处，保证代码运行的安全；
3. 提高编译器效率，增加运行速度；
4. 为未来新版本的Javascript做好铺垫。
行为：
1.必须使用var声明变量。
（在混合模式下，var不写将声明隐式全局变量。）
2.禁止自定义函数中的this指向window。
3.函数的参数不能重复。
4.函数必须声明在顶层作用域。
5.创建eval作用域。
（识别字符串运算，各种语法。如下：）
var obj = eval("12+37");
var obj1 = eval("var a = 20; a = 2*a;")
console.log(obj); //49
console.log(obj1); // 40
用法：
在全局的第一行，写入
"use strict"
二：关于数组的补充
先定义一个数组。
var arr = [1,2,5,6,9];
1.array.protrotype.forEach();
这个写过很多次了ing，遍历数组。
arr.forEach(function(item,index){
console.log(item,index);// 第一列值 1,2,5,6,9 第二列索引 0,1,2,3,4
})
2.array.prototype.map();
遍历数组，返回加工后的值。
var arr1 = arr.map(function(item,index){
if(index < 3){ //筛选索引小于3的 0,1,2
return item*6; //筛选结果逐个*6 并返回。
}
})
console.log(arr1); // [6,12,30,undefined,undefined]
3.array.prototype.filter();
遍历数组，过滤出一个新数组，返回条件为true
var arr2 = arr.filter(function(item,index){
return item < 6; //[1,2,5]
})
console.log(arr2);
map()方法将数组中的每个数都操作，true、false。
filter()方法筛选条件满足并返回新的数组。
学习ES6
一、let 声明变量。
let作用：
类似var在es5中的作用。声明变量的方法。
与var不用的地方：
1.有块级作用域。{}
2.不能重复声明。
3.不会预处理，不存在变量声明提升。
var btns = document.querySelectorAll("button");
for(var i=0;i<10;i++){
btns[i].onclick = function(){
console.log(i); //10
}
}
上面的i为var声明的变量。循环语句执行完毕，i为10；
下面i为let声明变量。每循环一次i都有一个块级作用域，则10次循环为对应下标值。
var btns = document.querySelectorAll("button");
for(let i=0;i<10;i++){
btns[i].onclick = function(){
console.log(i); //点击按钮为对应下标值。
}
}
二、const 声明常量。
- 记得常量声明大写奥~
在es5中声明的常量比如var a=10；之后再给a赋值会被覆盖。
在es6中通过const声明的常量 const a=10；之后无法再给a赋值，报错。
const咋本质上，是绑定的内存指针，即const对象时，不改变指针位子，改变值是可以的。
var F = 2018;
F = 1025; //会覆盖2018
console.log(F); //1025
const PAI = 3.141592653;
PAI = 2018; //cosnt 声明的常量不可被覆盖。
console.log(PAI); //报错
const OBJ = {
name:'俊豪',
age:'18'
}
OBJ.name = 'LLY' //可改变name值。
console.log(OBJ) //name:LLY age:18
三、结构赋值。
在es5中，给变量赋值，要一个一个的赋值，现在学习结构赋值啦。不用单个赋值啦。
结构赋值：自动识别数据结构，解析数据结构并赋值。结构赋值允许设置默认值。
对象结构赋值核心：找到同名属性，再赋值给对应的变量。
①：变量赋值。
let [a,b,c] = [1,[2,3],4];
console.log(a,b,c) //1 [2,3] 4
②：对象赋值。
let {fn1,fn2} = {fn1:'aaa',fn2:'bbb'}
console.log(fn1,fn2)
看上去好像很麻烦，有时候，我们需要从现有json获取数据，这样可以直接获取啦。
四、对象的简写。
当一个对象，其属性值和属性名相同时，可简写。！！！
是不是编译效率就高啦 喵喵喵~
回顾一下在es5中的写法：
var obj = {
a:a,
b:b,
fn:function(){
}
};
现在在es6中可这样写：
var obj = {
a,
b,
fn(){
}
}
五、三点运算符。
三点运算符：
主要作用：
1.代替函数中arguments。比arguments更灵活啦ing~
2.数组中各种拼接。
3.自动分割字符串。好玩。
三点运算符只能出现在最后，自动匹配。...value
①：代替arguments
执行结果为arguments
function foo(a,b,c){
console.log(arguments) //arguments(3) 1,2,3
}
foo(1,2,3);
用三点运算符。
自动对应匹配，剩下的全都塞到...value中去啦。喵！
function fn(a,b,...value){
console.log(a,b,value) // 4 5 [6,7,8,9,10]
}
fn(4,5,6,7,8,9,10);
②：数组中各种拼接
使用原来的老办法，把两个数组合成一个数组，要把其中一个遍历然后在一个一个push进去。
emm或者这个样子
apply 逐个添加，在讲上下文模式中有。
var arr1 = [1,2,3];
var arr2 = [4,5,6];
Array.prototype.push.apply(arr1,arr2) //[1,2,3,4,5,6]
使用es6直接三点运算符push进去就好啦。他会一个一个加。
let arr3 = [1,2]
let arr4 = [3]
let arr5 = [4,5]
console.log([...arr3,...arr4,...arr5]) //[1,2,3,4,5]
③：自动分割字符串。
console.log([...'快把我分开']); //["快", "把", "我", "分", "开"]
六、模板字符串
1.简化字符串拼接
2.支持换行
模板字符串中不再是引号，是波浪线下面的小顿点儿~
let obj = {
name:"mm",
active:"pu~~~"
}
let str = `12345,上山打${obj.name}，
你看啊，我随便换行。！！
我还可以写标签！<p>i am p </p>
但是不识别，哈哈哈~
老虎不在家，嗝嗝就是${obj.name}~`;
console.log(str);
运行结果截个图看一下:
运行结果.png
七、箭头函数
函数名 = （参数）= >函数体
作用：
定义匿名函数。
基本语法：
没有参数 ：() => {}
一个参数 ：x => {}
多个参数 ：(x,y) =>{}
像这个里面，没有参数的，或者一个参数的的，他们的函数体就没有用花括号包裹，这样子会默认有返回值。
同理，多个参数里面，或者一个没有的啊，函数体中有多个语句，必须使用大括号，这个时候就要手动return结果出去了。
特点：
1.语法简介。
2.没有this指向，没用法儿使用构造函数。
因为构造函数是用过this关键字和new一个对象来实现的，this指向没有就没法儿写啦~
①：没有参数，函数体没有大括号包裹
let a = 10;
let foo1 = () =>console.log(a);
foo1(); //10
②：一个参数，函数体也没有用大括号包裹
let i = 5;
let foo2 = a =>console.log(a);
foo2(i); //5
③：有多个参数，函数体用大括号包裹，手动写return
let foo = (a,b) =>{
return a+b;
}
let c = foo(10,20);
console.log(c); //30
八、形参的默认值
在es5中我们是这样写默认值的。
function foo(a,b){
var a = a || 10;
}
在es6中箭头函数中，是这样的，不传值则使用默认参数。
let fun = (a=10,b=20) =>{
console.log(a+b);
}
fun();//30
fun(20,3); //23
九、Symbol 符号
首先，介绍一下。。
Symbol：是es6中新增的基本数据类型。
特殊性（也不唯一）
主要作用：用它来命名对象属性，不容易导致重名。！！！
回顾一下数据类型（现在要把这个加上啦）：string，number，boolean，null，undefined，object，Symbol
Symbol特点：
1.Symbol属性对应的值是绝对唯一的额，两个一模一样的Symbol，其内存指针不一样。
2.Symbol的值无法参与其他数据运算。字符串拼接也不行。
3.无法被for-in遍历。
let name1 = Symbol();
let name2 = Symbol();
let obj = {};
obj[name1] = "one";
obj[name2] ="one";
console.log(obj); //{Symbol(): "one", Symbol(): "one"}
九、 Promise 机制 要好好看
这玩意儿有点玄乎，今天先简单了解一下，等我深入一点子再好好写。
- promise 是一种封装和组合未来值的易于复用的机制。（异步操作，回调函数）
使用方法：
1.创建promise对象。参数为两个状态。---> 执行/拒绝
let promise = new Promise((resolve,reject) =>{
});
2.初始化promise对象，为pending（将发生的状态）状态。
3.进行状态的判断，根据状态，调整操作结果。
如果操作成功，则调用resolve（决定）方，状态改为fullfileed（可执行）状态。否则调用reject（拒绝）方法，状态改为rejected（已拒绝）状态。
if（ok）{
resolve();
}else{
reject();
}
4.调用promise的 .then方法
promise.then（
function(){
可执行则调用这个函数 fullfileed可执行状态
},
function(){
被拒绝则调用这个函数 rejected被拒绝状态
}
）
ok，自己跟自己讲了一遍，很通透，哈哈哈哈哈哈~
那个小demo等我通透一点了再写上来。
后面的迭代器和生成器，也很重要，也是懵懵的，先整理一点点。
十、iterator 迭代器。
iterator 迭代器，是一种借口机制。为不同的数据结构，提供统一的访问机制。
工作原理：
- 创建一个指针对象（迭代器），指向数据接口的起始位子。
- 第一次调用next方法，指针自动指向数据结构的第一个成员。
- 接下来调用next方法，指针会一直向后移动，一直到最后一个。
- 每次调用next方法，都会返回一个包含value和done的对象。
（value是当前成员值，done对应当前数据结构解析是否结束，当遍历结束的时候，value为undefined，done为true）
如下：每次执行next（）方法，索引加加，制度大于数组长度，则迭代停止。
var arr = [1,2,3,4,5,6,7,8,9];
function go(arr){
let nextIndex = 0;
return {
next(){
return nextIndex < arr.length ? {value : arr[nextIndex ++] , done : false} : {value : undefined, done : true};
}
}
}
let iteratorArr = go(arr);
console.log(iteratorArr.next()) ;//多次调用在控制台查看值。
十一、Generateor 生成器。
可以认为是promise的语法糖。
还是有点迷。
概念：
1.解决异步编程的方案之一。
2.generator状态机制，内部封装了不同状态的数据。
3.用来生成遍历器对象。
4.可以暂停函数，随时启动。
特点：
1.function后有*
2.内部使用yield定义状态。
3.generator函数返回的是指针对象，并不会执行内部逻辑。
每次调用next（）方法，都会向下执行。
ok到我表演了。
这一套流程，简单说下来。举个栗子。
在nodeJs中读取文件，fs.resdeFile("file",function(err,data){}，这里fs中的第二个参数，function即回调函数。
回调函数是啥，就是把任务的第二阶段，单独的写在函数里面，等重新执行这个函数时，直接调用这个函数。emm！通透！
这时候问题粗线啦。当很多很多fs需要读取时，判断err就很多层，这个时候就出现了回调地狱，代码会很不友好的横向发展。
解决这个问题，就产生了peomise机制，.then方法，分状态执行。
这个样子，小小的解决了代码横向发展问题，但是，代码冗余。界面上清一色全是.then方法。
好嘛。问题来了就解决嘛。es6就出现了这个迭代器，iterator函数和生成器，generator函数，将函数可以暂停，emm这个就要和别的函数区分啦。generator函数后面跟*，表示其交出代买的执行权。通过next分阶段执行，并返回指针对象。vaule值和done是都执行完毕参数。nice，over。
