ES6简述

Posted 2021-12-30 lanweipeng

啥是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
res:25

求平均数

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: 1a: 1__proto__: Object
b: 12b: 12__proto__: Object
c: 16c: 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