如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

这周萌芽决定好好学习一下ES6，感兴趣的小伙伴们来一起学习吧~
ES6(ES2015)——IE10+、Chrome、FireFox、移动端、Node.js

编译转换

1.在线转换（browser.js）
2.提前编译

ES6新特性
1.变量
2.函数
3.数组
4.字符串
5.面向对象
6.promise（串行化异步交互）
7.generator（把同步拆分为异步）
8.模块化（ES6自带模块化）

变量
var
1.可以重复声明
2.无法限制修改
3.没有块级作用域（没有语法块！）

let 不能重复声明(变量，可以修改)
const 不能重复声明(常量，不能修改)

块级作用域，let在外部无法调用

函数
箭头函数 =>

function show(){
//这是我们平常的函数
}
let show=()=>{
//箭头函数
}
//区别不大，把function省略掉换成箭头，主要就是为了方便，可传参

1.如果只有一个参数，（）可以省去。

 let show=a=>{
        return a*2
    }

2.如果只有一个return，{}可以省略

   let show=a=>a*2;
   let arr = [15,2,37,11,67,4,6]; //排序
  
   arr.sort((n1,n2)=>{
        return n1-n2;
    })
    
    arr.sort((n1,n2)=> n1-n2 );
    console.log(arr)


函数的参数
1.参数扩展/展开
2.默认参数

参数的扩展
1.收集参数

 function arrData(a,b,...args) {
        alert(a);
        alert(b);
        alert(args);
    }
    *注意：Rest Parameter必须是最后一个(除其他语言)
1

2.展开数组

    arrData(...arr);       //等价于 arrData(1,2,3);
1
这仨点儿【…】代表把数组内容掏出来放这。

默认参数

//jQuery中的默认参数
$('#div1').animate({width:'200px'});
$('#div1').animate({width:'200px'},1000);

//ES6默认传参
   function showOne(a,b=10,c=5) {
        console.log(a,b,c)
    }

解构赋值
1.左右两边解构必须一样
2.右边必须是个合法的东西
3.声明和赋值不能分开(必须在一句话里完成)

    let  [one,two,three] = [10,20,30];
    let  {one1,two2,three3} = {a:10,b:20,c:30};

数组
map 映射（一个对一个。传几个返回几个）

let result = arr.map(function (item) {
    return item*2;
});//简写一下
let result = arr.map(item=>item*2 );

//判断考试成绩
let score = [19,18,78,65,100];
let result = score.map(item=>item>=60?'及格':'不及格');

reduce 汇总（算个总数，算个平均数）

//tmp：上次求和总和，为两两相加，如果之前没有结果则为传进来的数组的第一个数。
//itme：当前的数。
//index：执行的次数。

   let result = arr.reduce(function (tmp, item, index) {
       return tmp + item;
    });
    //简写
    arr.reduce((tmp, item, index)=>tmp + item);

filter 过滤器(筛选掉不需要的)

 let result = arr.filter(item=>{
        if (item%2 == 0){
            return true;
        } else {
            return false;
        }
    });
    
 //简写
let result = arr.filter(item=>item%2 == 0);
       
//***萌芽在这里提一下！json和之前的item都不是固定的，可以随便命名。意思都是当前的值！

 let arrProce = [
        {title:'男士衬衫',price:75},
        {title:'女士包包',price:5000},
        {title:'男士包包',price:20},
        {title:'女士鞋',price:2500}
    ];
    let result = arrProce.filter(jsom=>json.price >= 2000);
    console.log(result);

forEach循环(迭代)

   arr.forEach((item,index)=>{
        alert(index+":"+item)
    })

字符串
1.多了俩新方法
startsWith()； //判断开头，返回布尔类型
endWith()； //判断结尾，返回布尔类型

let str='hello,world!'
str.startsWith('h')
str.endWith('!')      //返回true

2.字符串模板
字符串连接
2.1直接把东西塞进字符串里面 ${东西}
2.2可以折行

<h1>${title}</h1>
<p>${content}</p>

ES6的面向对象
1.class关键字，构造器和类分开啦。
2.class里面直接加方法。

    class User{
        constructor(name,password){   //构造器
            this.name = name;
            this.password = password;
        }

        showName(){
            alert(this.name);
        }
        showPass(){
           alert(this.password);
        }
    }

    var user = new User('萌芽子','123456');
    user.showName();
    user.showPass();

继承

    class VipUser extends User{
        constructor(name,password,age){
        super(name,password);          //super 超类
        this.age = age;
        }
        showAge(){
            alert(this.age)
        }
    }
    var user = new VipUser('萌芽子','123456','18岁');
    user.showName();
    user.showPass();
    user.showAge();

不得不说作为一只JAVA汪，这种写法真得劲！

面向对象的应用
React
1.组件化（class）
2.JSX（JSXbabelbrowser.js）
JSX属于JS的扩展版

class Test extends React.Component{
 constructor(...args){
 super(...args);
 }
render(){
return <li>{this.props.str}</li>         //props:属性
}
}

window.onload = function(){
let oDiv = document.getElementById('div1');

ReactDOM.render(
<ul>
<Item str="你好"></Item>
<Item str="世界！"></Item>
</ul>
oDiv
);
};


打卡，下次就学这个了！===============

json
1.JSON对象

JSON.stringify() json转字符串

 let json = {a:10, b:20};//JSON.stringify   字符串化
    let str = 'http://www.baidu.com/path/user?data='+JSON.stringify(json);
    str = 'http://www.baidu.com/path/user?data='+encodeURIComponent(JSON.stringify(json));
    alert(str)
1
2
3
4
JSON.parse() 字符串转json

    let str = '{"a":12,"b":20,"c":"可乐"}';
    let json = JSON.parse(str);
    console.log(json);

2.简写
在新版的ES6当中名字一样的键（key）和值（value）可以只写一个。

    let a = 12;
    let b = 5;
    let json = {a,b,c:21};

简化了JSON中的方法。

 let json ={
        a:12,
        showJson(){
            alert(this.a);
        }
    };
    json.showJson();

json的标准写法：
1.只能用双引号
2.所有的名字都必须用引号包起来（所有的key都必须是双引号）

{a:12,b:5}     × 错误的写法
{"a":"萌萌萌","b":"芽子"}     √ 正确的写法
1
2
Promise(承诺)
异步：操作之间没啥关系，同时进行多个操作
同步：同时只能做一件事
优缺点：
异步：代码更复杂
同步：代码简单
Promise——消除异步操作
*用同步一样的方式来书写异步代码；

    let p = new Promise(function (resolve,reject) {
        //异步代码
        //resolve——成功
        //reject——失败
    })

-----------------------------------------访问我们的arr.txt文件，这里用到了jQuery的ajax就不详细介绍了。
  let p = new Promise(function (resolve, reject) {
        //异步代码
        //resolve——成功
        //reject——失败
        $.ajax({
            url: 'arr.txt',
            dataType: 'json',
            success(arr) {
                resolve(arr);
            }, error(err) {
                reject(err);
            }
        })
    });
    //结果
    p.then(function (arr) {
        alert('成功啦' + arr)
    }, function (err) {
        alert('失败了' + err)
        console.log(err)
    });
-----------------------------------------------多个请求地址
  Promise.all([p1,p2]).then(function (arr){
        let [res1,res2] = arr;
        alert('全部成功啦');
        console.log(res1);
        console.log(res2);
    },function (){
        alert('至少有一个失败了');
    });
    ----------------------------再简化
    function createPromise(url){
    return new Promise(function (resolve, reject) {
            $.ajax({
                url,
                dataType: 'json',
                success(arr) {
                    resolve(arr);
                }, error(err) {
                    reject(err);
                }
            })
        });
    }
  Promise.all([
        createPromise('arr.txt'),
        createPromise('json.txt')
    ]).then(function (arr){
        let [res1,res2] = arr;
        alert('全部成功啦');
        console.log(res1);
        console.log(res2);
    },function (){
        alert('至少有一个失败了');
    });
----------------------完美写法
 Promise.all([
        $.ajax({url:'arr.txt',dataType:'json'}),
        $.ajax({url:'json.txt',dataType:'json'})
    ]).then(function (results) {
        let [arr,json] = results;
        alert("成功了");
        console.log(arr,json)
    },function () {
        alert("失败了")
    })

我们有了promise之后的异步：

 Promise.all([ $.ajax(),$.ajax() ]).then( results=>{
   //对了
    },err=> {
   //错了
    })

Promise.all （必须全部成功）
Promise.race（同事读多个数据，即使失败也没关系）

generator(生成器)
普通函数 - 一路到底执行不可中断
generator函数 - 可中断

 function * show() {
        alert('a');
        yield;//暂时放弃执行
        alert('b');
    }
    let genObj = show();
    genObj.next();
    genObj.next();

yield
yield传参

  function * show(num1,num2) {
        alert(`${num1},${num2}`);//es6
        alert('a');
       let a = yield;//暂时放弃执行
        console.log(a);
        alert('b');
    }
    let genObj = show(99,88);
    genObj.next(12);//第一个next无法给yield传参的，废的
    genObj.next(5);

yield返回

  function *show() {
        alert('a');
        yield 12;
        alert('b');
        return 55;
    }

    let gen = show();
    let res1 = gen.next();
    console.log(res1);      //{value: 12, done: false}
    let res2 = gen.next();
    console.log(res2);//{value: undefined, done: true}  加了return  {value: 55, done: true}



还没做的菜叫函数参数，过程是yield之前函数里面的东西，干净的菜，切好的菜是中间过程也就是yield，最终我们将它返回出去！不得不说这图很生动。
异步操作
1.回调

$.ajax({
    url:'url',
    dataType:'json',
    success(data){
        $.ajax({
            url:'xxx',
            dataType: 'json',
            success(data) {
                //完事儿了
            },error(err) {
                alert('错了')
            }
        })
    },error(){
        alert('失败')
    }
})

2.Promise

Promise.all([
        $.ajax({url:xxx,dataType:'json'}),
        $.ajax({url:xxx,dataType:'json'}),
        $.ajax({url:xxx,dataType:'json'})
    ]).then(results=>{
        //完事儿
    },err=>{
        //错误的
    })

3.generator

runner（function  *（）{
let data1 = yield $.ajax({ulr:xxx,dataType:'json'});
let data2 = yield $.ajax({ulr:xxx,dataType:'json'});
let data3 = yield $.ajax({ulr:xxx,dataType:'json'});
}）
1
2
3
4
5
generator（不能用=>函数）
逻辑判断下非常好用。
Promise：一次读一堆。
generator：逻辑性。

runner（function *（）{
let userData = yield $.ajax({url:'getUserData',dataType:'json'});
if(userData.type == 'VIP'){
let items = yield $.ajax({url:'getVIPItems',dataTyoe:'jsom'});
}else{
let items = yield $.ajax({url:'getItems',dataTyoe:'jsom'});
      }
//生成...
}
}）

总结
1.变量：
var：能重复声明、函数级
let： 严格的，不能重复声明，块级，变量
const：严格的，不能重复声明，块级，常量

2.箭头函数
2.1方便
i.如果只有一个参数，（）可以省
ii.如果只有一个return，{}可以省
2.2修正了this
this相对正常点

3.参数扩展
…能收集
…能扩展
默认参数

4.数组方法
map 映射
reduce 汇总
filter 过滤
forEach 循环

5.字符串
starsWith/endWith
字符串模板:${a}xxx{b}

6.Promise
封装异步操作
Promise.all([]);

7.generator
function *show(){
yield
}

8.JSON
JSON.stringify({ a :12,b :5}) => {“a”:12,“b”:5}
JSON.parse(’{“a”:12,“b”:5}’) =>{a:12,b:5}//字符串

9.解构赋值
let [a,b,c] = [12,5,8]；
左右结构一样，右边是个合法的东西，连生命带赋值一次完成。

10.面向对象
class Test(){
constructor(xxx){
this = xxx
}
方法1(){
}
方法2(){
}
}
继承
class Test2 extends Test(){
constructor(){
super();
}
}

谈谈ES7和ES8
1.数组includes
数组是否包含某个东西

2.数组 keys/values/entries
for…in(循环数组)
对于数组来讲循环的是下标
对于json循环的是key

for…of(循环迭代器)
对于数组循环的是值
不能用于JSON，json并不是迭代器

keys = >所有的key拿出来 0,1,2,3…
values =>所有的values拿出来 23,5,8,1…
entries =>所有的键值对拿出来 {key:0,value:a}

let arr = [12,5,8,99];
for(let [key,value] of arr.entries()){
alert(`${key} = ${value}`);

预览版，目前极大多数浏览器都不支持，以后可能会支持，了解一下就好。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。