ES6新增功能

变量

Javascript使用var定义变量存在以下问题：

1. 可以重复声明变量：

   var a=2;
   var a=5;
   alert(a);
   

2. 无法限制修改（js里面没有常量的定义）
3. 没有块级作用域（var定义的变量都是全局变量）
   ES6新增了let和const定义内容。let和const定义的内容都不允许重复定义，其中let定义变量，const定义常量。

函数

ES6中可以使用箭头函数：()=>{}

1. 如果只有一个参数，()可以省略。
2. 如果只有一个return值，{}可以省略。

   let show = (a)=>{
       return a*2;
   }
   //与上方函数等价
   let show = a=>a*2;
   

ES6中允许使用可变参数（可变参数必须放在其他参数的最后），其具有以下功能：

1. 收集参数

   let show = (a,b,...args)=>{
       alert(a);
       alert(b);
       alert(args);
   }
   show(1,3,7,5,2,4,6);
   

2. 展开数组:数组展开后的效果就与直接将数组内容放在该位置一样。

   let arr = [1,2,3];
   let show = (a,b,c)=>{
       console.log(a,b,c);
   }
   /**
    * 相当于show(1,2,3);
    * ...arr等价于1,2,3
    ** /
   show(...arr);
   

默认参数（默认参数为参数赋予初始值）：

let show=(a,b=5,c=12)=>{
   console.log(a,b,c);
}
show(3);//a=3,b=5,c=12
show(3,4,5);//a=3,b=4,c=5

解构赋值：

1. 左右两边结构必须一样。
2. 右边必须是个合法的数据结构（变量、数组、json）。
3. 声明和赋值不能分开（必须在一句话里）。

   //数组解构赋值
   let [a,b,c] = [1,2,3];
   console.log(a,b,c); 
   

   //json解构赋值
   let {a,b,c} = {a:5,b:6,c:3};
   console.log(a,b,c); 
   

   //混合解构赋值
   let [{a,b,c},[n1,n2],num,str] = [{a:3,b:4,c:5},[6,7],8,'hello'];
   console.log(a,b,c,n1,n2,num,str); 
   

数组

map：集合映射（一对一映射）

let arr = [1,2,3];
//let result=arr.map(item=>item*2);
let result = arr.map((item)=>{
    return item*2;
});
alert(result);

let score = [19,85,99,25,63];
let result = score.map(item=>item>=60?"及格":"不及格");
console.log(score);
console.log(result);

reduce：汇总

//计算总数
let arr = [12,69,180,2365];
let result = arr.reduce((temp,item,index)=>{
    return temp+item;
});
console.log(result);

temp:中间结果，item:数据，index:迭代索引

//计算平均值
let arr = [16,4,18,2];
let result = arr.reduce((temp,item,index)=>{
    return index<arr.length-1?temp+item:(temp+item)/arr.length;
});
console.log(result);

filter：过滤器

//取得能被3整除的数
let arr = [16,4,18,2,12,3];
// let result = arr.filter(item=>item%3==0);
let result = arr.filter((item)=>{
    //return true的item将被留下
    return item%3==0;
});
console.log(result);

forEach：迭代

let arr = [16,4,18,2,12,3];
arr.forEach((item,index)=>{
    alert("第"+index+"个数据："+item);
});

字符串

1. 字符串中新增了2个新方法

方法名	参数	返回值类型	功能
startsWith	str	boolean	判断字符串是否已指定字符串开头
endsWith	str	boolean	判断字符串是否已指定字符串结尾

let str = "hello world";
alert(str.startsWith("hello"));
alert(str.endsWith("world"));

2. 字符串魔板:反单引号``定义字符串模板，美元符${变量}将变量塞进模板，可以隔行使用。

let a = 'world';
let str = `hello ${a} !!!`;
alert(str);

ES6的面向对象

javascript老版面向对象：

function User(name,pass){
    this.name = name;
    this.pass = pass;
}
User.prototype.showName = function(){
    alert(this.name);
}
User.prototype.showPass = function(){
    alert(this.pass);
}
var u1 = new User('admin','123456');
u1.showName();
u1.showPass();

ES6新版面向对象：

1. 增加了class关键字，构造器和类分开了
2. class里直接加方法

class User{
    constructor(name,pass){
        this.name = name;
        this.pass = pass;
    }
    showName(){
        alert(this.name);
    }
    showPass(){
        alert(this.pass);
    }
}
//继承
class VipUser extends User{
    constructor(name,pass,level){
        super(name,pass);//执行父类构造函数
        this.level = level;
    }

    showLevel(){
        alert(this.level);
    }
}
let u1 = new VipUser('admin','123456','up');
u1.showName();
u1.showPass();
u1.showLevel();

面向对象应用–React–两个重要特性：组件化(class)、JSX(JSXbablebrowser.js)

JSON

方法名	参数	返回值类型	功能
JSON.stringify	JSON对象	字符串	将JSON对象变为字符串
JSON.parse	字符串	JSON对象	将字符串解析为JSON对象

JSON对象：

let json = {a:12,b:5};
let str = "json:"+JSON.stringify(json);
console.log(str);

JSON解析（JSON的标准写法）：

1. 只能用双引号
2. 所有名字必须用双引号包裹起来

let str = "{\"a\":12,\"b\":5}";
let json = JSON.parse(str);
console.log(json);

JSON简写

1. key与value的名字一样时可以简写

   let a = 5;
   let b = 12;
   //正常书写
   let jsonA = {a:a,b:b};
   console.log(jsonA);
   //简写
   let jsonB = {a,b};
   console.log(jsonB);
   

2. 方法可以简写

   let a = 5;
   let b = 12;
   //正常书写
   let jsonA = {a:a,show:()=>{
       console.log(b);
   }};
   //简写
   let jsonB = {a:a,show(){
       console.log(b);
   }};
   jsonA.show();
   jsonB.show();
   

Promise（消除异步操作-用同步方式书写异步代码）

异步操作：操作之间没有关系，同时进行多个操作，代码更复杂
同步操作：同时只能做一件事，代码简单
Promise对象有以下两个特点：

1. 对象的状态不受外界影响。Promise对象代表异步操作，有三种状态：Pending(进行中)、Resolved(已完成)、Rejected(已失败)，只有异步操作的结果可以决定当前处于那种状态
2. 一旦状态改变，就不会再变，任何时候都可以得到这个结果。

let promise = new Promise((resolve,reject)=>{
    $.ajax({
        url:'data/data.txt',
        dataType:'json',
        success(arr){
            resolve(arr);
        },
        error(err){
            reject(err);
        }
    })
});
promise.then((arr)=>{
    console.log(arr);
},(err)=>{
    console.log(err);
});

两个Promise异步执行:

let promiseA = new Promise((resolve,reject)=>{
    $.ajax({
        url:'data/data.txt',
        dataType:'json',
        success(arr){
            resolve(arr);
        },
        error(err){
            reject(err);
        }
    })
});
let promiseB = new Promise((resolve,reject)=>{
    $.ajax({
        url:'data/json.txt',
        dataType:'json',
        success(arr){
            resolve(arr);
        },
        error(err){
            reject(err);
        }
    })
});
Promise.all([promiseA,promiseB]).then((arr)=>{
    let [resA,resB] = arr;//解构赋值
    //全部成功
    console.log(arr);
},(err)=>{
    //只要有一个失败则执行此函数
    console.log(err);
});

封装Promise生成方法：

let createPromise = (url)=>{
    return new Promise((resolve,reject)=>{
        $.ajax({
            url,
            dataType:'json',
            success(arr){
                resolve(arr);
            },
            error(err){
                reject(err);
            }
        })
    });
}
Promise.all([
    createPromise("data/data.txt"),
    createPromise("data/json.txt")
]).then((arr)=>{
    let [resA,resB] = arr;//解构赋值
    //全部成功
    console.log(arr);
},(err)=>{
    //只要有一个失败则执行此函数
    console.log(err);
});

高版本jquery自动封装了Promise:

Promise.all([
    $.ajax(),$.ajax()
]).then(arr=>{
    let [resA,resB] = arr;//解构赋值
    //全部成功
    console.log(arr);
},err=>{
    //只要有一个失败则执行此函数
    console.log(err);
});

Promise.race的用法与all相同，但是只要数组中的一个Promise成功，则表示成功，全部失败才会失败。

Generator-生成器

普通函数—>程序开始顺序执行到结束
generator函数—>函数可以暂停

function *show(){
    alert('a');
    yield;//暂停
    alert('b');
}
let genObj = show();
genObj.next();//执行到yield之前
genObj.next();

yield:暂停执行，既可以传参，又可以返回

//yield传参
function *show(){
    alert('a');
    let a = yield;//接受next()传来的参数
    alert(a);
}
let genObj = show();
genObj.next(12);//执行到yield之前，第一个next()无法传参
genObj.next(5);//执行yield之后的代码

//yield返回中间结果
function *show(){
    alert('a');
    let a = yield 12;//接受next()传来的参数
    alert(a);
}
let genObj = show();
let res1 = genObj.next();//执行到yield之前
console.log(res1);
genObj.next(5);//执行yield之后的代码