ES6简述

啥是es6

大家都知道，javascript由dom、bom、ecmascript组成，ecmascript是标准。
es6的全称其实是es2015（6.0）每年更新，依次类推
es2016(7)
...
es2019(10)

为啥要推es6

两个字：方便。不用es6也能写，使用es6就是为了方便，能用更少的代码去做更多的事情，为了提高工程性。

es6有哪些东西

变量

let用于声明变量
const用于声明常量，且不可修改
相比var，es6的变量有啥好处
1.禁止重复声明
es5

var a = 12;
var a = 5;
console.log(a)

输出为5，一点问题没有
es6

let a = 12;
let a = 5;
console.log(5)

它会告诉你a已经被定义过了，不能重复定义

2.控制修改

const a = 5;
a = 12;
console.log(a);

它告诉你你给常量赋值，这是不行的

3.支持块级作用域
es5只有函数级作用域

function sum(a, b) {
  return a+b;
}
console.log(a)

这时候它在外面是访问不到a的
es6有块级作用域

• {}
• if(){}
• for(){}
• {}

{
  var a = 12;
}
console.log(a);

输出12

{
  let a = 12;
}
console.log(a);

解构赋值

不用解构赋值

//后台读取的数据
var json = {age: 12,height: 168}
console.log(json.age,json.height);

用完解构赋值

let {age,height} = {age: 12,height: 168};
console.log(age,height)

你就不需要去点了
注意事项
1.左右两边一样

let {a,b,c}={a: 12, b: 55, c: 99};//同是对象
let [a,b,c]=[12,5,8];//同是数组

2.右边得是个东西

let {a,b,c} = {12,5,13};//右边是啥，对象？数组？都不是

函数

箭头函数

使用箭头函数不仅写起来简单而且能修复this的问题
1.简单
es5

• function xx() {}
• var xx = function() {}
  es6
  let xx = (参数)=>{}
• 有且仅有一个参数 ()可以省略
• 有且仅有一条语句 return {}可以省略

let show=()=>({a: 12, b: 5});//用()包一下

2.修复this
es5
在es5，谁调用this，this就是谁
在es6,this绑定在当前的环境

参数展开

(1)剩余参数

function show(a, b, ...arr){
  console.log(a, b, arr);
}
show(12,5,44,7,85,34,33);

12,5,44,7,85,34,33

注意：必须是最后一个

function show(a, b, ...arr, c){
  console.log(a, b, arr, c);
}
show(12,5,44,7,85,34,33);

剩余参数必须得是最后一个形参

(2)数组展开
...arr等价于1,5,12,3

let arr = [1,5,12,3];
var sum=(a, b, c, d)=>a+b+c+d;
console.log(sum(...arr))

21

let arr = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2];
console.log(arr3);

1,2,3,4,5,6

系统对象

array

4个api，由对象来调用
map 映射
foreach 循环
filter 过滤（删除）
reduce 减少
(1)map
映射：1对1，进去100个，出来100个

var scores = [100,60,52,48,98,13,45,66,75,98];
//两个参数item，index
var res = scores.map((item)=>item>=60);
console.log(scores,res);

(2)foreach
把true筛出来

let arr = [1,5,12];
arr.foreach((item,index)=>{
  console.log(`第${index}个：${item}`);
});

第0个：1
第1个：5
第2个：12

(3)filter

let scores = [1,2,3,5,6,95,63,45,68,60];
let pass = scores.filter((item)=>item>=60);
console.log(pass)

(4) [95, 63, 68, 60]

(4)reduce
求和

let arr = [1,5,3,16];
    let res = arr.reduce((temp,item,index)=>{
        console.log(`temp:${temp}`);
        return temp+item;
    });
    console.log(`res:${res}`);

temp:1//第一次是第一个数
temp:6//后面都是和
temp:9

求平均数

let arr = [1,5,3,16];
    let res = arr.reduce((temp,item,index)=>{
        if(index<arr.length - 1)
            return temp+item;
        else
            return (temp+item)/2;
    });
    console.log(`res:${res}`);

string

(1)字符串模板

let name = '小明';
console.log(`name : ${name}`);

name : 小明

好处：能折行，对于大段的东西很适用

let str = `<div>
<p>第一行${item1}</p>
<span>第二行${item2}</span>
</div>`;

(2)startswith

let url = 'http://www.baidu.com';
if(url.startswith('http')||url.startswith('https')) console.log('是网址');
else console.log('不是网址')

(3)endswith

json

标准写法：

let json = {"name":"zhangsan","age":12};

• stringify：对象转json

let xiaoming = {
  name: 'xiaoming',
  age: 25
};
console.log(json.stringify(xiaoming));

{"name":"xiaoming","age":25}

• parse：字符串转对象

let json = '{"name":"xiaoming","age":25}';
console.log(json.parse(json));

{name: "xiaoming", age: 25}

异步操作

• 优点：程序性能好，资源利用率高、用户体验好
• 缺点：程序员体验不好

问题：按顺序拉取数据
环境：服务器
我用的是wampserver

data/1.json

{a: 1}

./data/2.json

{b: 12}

./data/3.json

{c: 16}

./html

 $.ajax({
      url: 'data/1.json',
      datatype: 'json',
      success(data1) {
        $.ajax({
          url: 'data/2.json',
          datatype: 'json',
          success(data2) {
            $.ajax({
               url: 'data/3.json',
            datatype: 'json',
            success(data3) {
              console.log(data1,data2,data3)
            }
          });
          }
        });
      }
    });

{a: 1} {b: 12} {c: 16}

因为这种写法恶心，所以promise出现了
了解一下promise，其实jquery的ajax也是promise

let p=new promise(function (resolve, reject){//resolve成功，reject失败
      $.ajax({
        url: 'data/1.json',
        datatype: 'json',
        success(data){
          resolve(data);
        },
        error(res){
          reject(res);
        }
      });
    });

    p.then(function (data){
      alert('成功');
      console.log(data);
    }, function (res){
      alert('失败');
      console.log(res);
    });

怎么用

promise.all([
      $.ajax({url:'data/1.json', datatype: 'json'}),
      $.ajax({url:'data/2.json', datatype: 'json'}),
      $.ajax({url:'data/3.json', datatype: 'json'})
      ]).then(([data1,data2,data3])=>{
        console.log(data1,data2,data3);
    },(res)=>{
      alert('错了')//一个接口出错就不渲染
    })

{a: 1}a: 1__proto__: object
{b: 12}b: 12__proto__: object
{c: 16}c: 16__proto__: object

但是promise有个致命的缺点，处理不了逻辑（第一个数据可能决定后面读什么）
因此async/await登场了，专门配合promise，用同步的方法来写异步。
但是其实编译完还是恶心的嵌套，只不过不需要我们程序员来写，编译就完了

let show = async ()=> {
  let data1 = await $.ajax({url: 'data/1.json', datatype: 'json'});//await后面跟的是promise
  let data2 = await $.ajax({url: 'data/2.json', datatype: 'json'});
  let data3 = await $.ajax({url: 'data/3.json', datatype: 'json'});
  console.log(data1,data2,data3)
}
show();

{a: 1} {b: 12} {c: 16}

处理逻辑

let show = async ()=> {
      let data1 = await $.ajax({url: 'data/1.json', datatype: 'json'});
      if(data1<10) {
        let data2 = await $.ajax({url: 'data/2.json', datatype: 'json'});
        console.log(data1,data2)
      }else {
        let data3 = await $.ajax({url: 'data/3.json', datatype: 'json'});
        console.log(data1,data3)
      }
    }
    show();

{a: 1} {c: 16}