ECMAScript_ecmascript http

一、ECMAScript和JavaScript

ECMA是标准，JS是实现
简称为ECMA或ES

二、兼容性

ES6（ES2015）–IE10+、Chrome、FireFox、移动端、NodeJs

编译、转换
1.在线转换
2.提前编译

babel==brower.js ==>具体见面向对象的应用React

三、内容大纲

1.变量
2.函数
3.数组
4.字符串
5.面向对象
6.Promise
7.generator
8.模块化

---

一.变量

1.问题：ES5只有全局作用域和函数作用域，没有块级作用域，会带来以下问题：
a.变量提升导致内层变量可能会覆盖外层变量
b.用来计数的循环变量泄露为全局变量
所以ES5中采用闭包解决这个问题

2.var的作用域是函数
a.可以重复声明
b.无法限制修改
c.没有块级作用域：{}块级作用域

3.ES6中：
let 不能重复声明 变量-可以修改 块级作用域
const 不能重复声明 常量-不可以修改 块级作用域

二.函数

1.箭头函数：()=>{} 可以里写为是function的简写
a.如果只有一个参数，（）可以省
b.如果只有一个return，{}可以省

2. 函数的参数：
a.数组的展开/参数的扩展
(1).收集剩余参数
function show （a,b,…args）{}
注意：rest parameter必须是最后一个
(2).展开数组
…arr => 1,2,3
三个点加数组，结果和直接展开数组一样，取代了逗号
b.默认参数

    //默认参数
    function show(a,b=5,c=10) {
        console.log(a,b,c)
    }
    show(99,10);
   // 传进新参数是按照新参数，否则按照之前的默认值
1
2
3
4
5
6

3.解构赋值:
a.左右两边结构必须一样：可以是不同粒度
b.右边必须是个东西：右边的声明必须合法
c.声明和赋值不能分开（必须在同一句话里完成）

三.数组

1.map 映射 一个对一个

let result=score.map(item=>item>=60?'及格':'不及格');
//映射的例子:三目运算符+箭头函数使代码简洁
1
2

2.reduce 汇总 一堆出来一个

//汇总
    let arr=[12.,996,85,45,62];
    let  result=arr.reduce(function (tmp,item,index) {
        //tmp表示前一次求和的值，即初始值,或者计算结束后的返回值。
        // item表示当前数组中的值，
        // index表示当前数组数的下标
        if (index!=arr.length-1){
            return tmp+item;           //求和
        } else {
            return (tmp+item)/arr.length;   //求平均值
        }
    })
    alert(result)
1
2
3
4
5
6
7
8
9
10
11
12
13

3.filter 过滤

//过滤对象
    let arr=[
        {title:'kouhong',price:89},
        {title:'kouhong',price:189},
        {title:'kouhong',price:489},
        {title:'kouhong',price:859},
    ];
    let result=arr.filter(json=>json.price>=100);
 console.log(result)
1
2
3
4
5
6
7
8
9

4.forEach 循环迭代

 //迭代
    let arr=[12,56,89,54];
    let result=arr.forEach((item,index)=>{
        alert(index+':'+item)
    });
    alert(result)
1
2
3
4
5
6

四.字符串

1.多了两个新方法
startsWith、endsWith：返回值为布尔值，用来查找开头/结尾
2.字符串模板
字符串连接:返单引号 ``
3.应用
a.直接把东西带到字符串里面 ${东西}
b.可以折行

//字符串拼接
    let title='标题';
    let content='内容';
    let str1='<div>\
    <h1>'+title+'</h1>\
    <p>'+content+'</p>\>' +
        '</div>'
    let str2=`<div>
        <h1>${title}</h1>
        <p>${content}</p>
         </div>`
    alert(str1)
1
2
3
4
5
6
7
8
9
10
11
12

五.面向对象

1.面向对象：可以继承
面向过程：自己重新写

2.ES6中提供了新方法
a.class关键字、构造器和类分开了
b.class里面直接加方法
c.继承：
super-超类==父类

3.语法：

//父类
    class User{
        constructor(name,pass){   
            // constructor为构造器
            this.name=name;
            this.pass=pass;
        }
        showName(){
            alert(this.name);
        }
        showPass(){
            alert(this.pass);
        }
    }
    // var ul=new User('blue','123456');

    //继承
    class VipUser extends User{     //extends表示子类对父类的扩展和继承
        constructor(name,pass,level){
            super (name,pass);       //super表示继承
            this.level=level;
        }
        showLevel(){
            alert(this.level);
        }
    }
    var vl=new VipUser('blue','123455',3);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

六.面向对象的应用React

1.React:
(1).组件化–class
(2).JSX
JSX=babel=browser.js
JSX是JS扩展版

2.语法

<script src="react.js" charset="utf-8"></script>
<script src="react-dom.js" charset="utf-8"></script>
<script src="browser.min.js" charset="utf-8"></script>
<script type="text/babel">             //默认为type/JavaScript，此时需要强调
1
2
3
4

七.json

1.json对象
JSON.stringify
JSON.parse

2.简写
名字（key和value）一样
方法

3.json的标准写法
(1).只能用双引号，不能出现单引号
(2).所有的名字都必须用引号包起来
{a:12,b:5} 错误
{“a”：12,“b”：5} 正确

4.代码

         // 将json解析成一个字符串
         let json={a:5,b:40};
         let str='http://www.bai.com'+encodeURI(JSON.stringify(json));
         alert(str);

        //将一个字符串解析成json
        let str='{"a":12,"b":5,"c":"abdc"}';
        let json=JSON.parse(str);
        console.log(json);

        //简写：名字和值一样时可以简写
            let a=12;
            let b=10;
            let json={a,b,c:55};
            console.log(json);

            //简写：函数名称
            let json={
                a:12,
                show () {
               // show:function () {       可以简写
                    alert(this.a);
                }
            }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

八.promise

1.Promise:承诺
异步：操作之间没啥关系，同时进行多个操作
同步：同时只能做一件事

异步：代码更复杂
同步：代码简单
1
2

2.有了promise之后的异步（jQuery中封装了promise的用法）：
Promise.all([$.ajax(),$.ajax()]).then(results=>{
对了
},err=>{
错了} )

3.Promise.all
Promise.race 竞速：谁先返回就读谁

4.语法：
Promise.race([
$.ajax({url:…}),
$.ajax({url:…}),
$.ajax({url:…}),
])

5.代码

//一个完整的promise操作
Promise.all([
    $.ajax({url:'arr.txt',dataType:'json'}),
    $.ajax({url:'arr1.txt',dataType:'json'}),
    $.ajax({url:'arr2.txt',dataType:'json'}),
]).then(results=>{
    let [arr,json,num]=results
    alert('成功了');
    console.log(arr,json,num);
},err=>{
    alert('失败了');
} )
1
2
3
4
5
6
7
8
9
10
11
12

九.generator 生成器

1.generator：生成器
区别：
（1）普通函数：一口气执行到底
generator函数：可以暂停，走走停停，不能写成箭头函数
（2）普通函数需要请求时，采取异步加载等待数据
generator函数可以暂停下来，等数据返回
本质上：*show函数 被拆分成show1、show2，每next一次执行一个函数
2.yield传参

 //传参
    function *show(num1,num2) {
        alert(`${num1},${num2}`)
        alert('a');

        let a=yield;   //=左边是第二个过程，右边是第一个过程

        alert('b');
        alert(a);

        return
    }

    let gen=show(99,56);
    gen.next(12);         //没办法给yield传参
    gen.next(5);               //a接到的是第二个过程的5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3. yield返回

 //返回
    function *show() {
        alert('a');

       yield 12;           //12是一个中间的返回值

        alert('b');

      return 55;
    }

    let gen=show();

    let res1=gen.next();
    console.log(res1);                    //{value:12,done:false}false表示函数还没有走到终点
    let res2=gen.next();
    console.log(res2);                    //{value:55,done:true}表示函数走到终点
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

4.异步操作的三种形式：

a.回调的叠加
$.ajax({
url:xxx,
dataType:‘json’
success(data1){
$.ajax({
url:xxx,
dataType:‘json’
success(data1){
$.ajax({
url:xxx,
dataType:‘json’
success(data1){
}
} )

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

c.generator
runner(function *(){
let data1=yield $.ajax({url:xxx,dataType:‘json’});
let data2=yield $.ajax({url:xxx,dataType:‘json’});
let data3=yield $.ajax({url:xxx,dataType:‘json’});
})

5.当出现带逻辑的读取时

注意：Promise适合一次读一堆,generator适合有逻辑的读取

a.promise带逻辑读取:很复杂

 Promise.all([
    $ajax.({url:'getUserData',dataType:'json'})
        ]).then(result=>{
        let userData=result[0];

 if (userData.type=='VIP'){
            Promise.all([
                $.ajax({url:'vipData',dataType:'json'})
            ]).then(result=>{
            //生成列表、、、、、
            },err=>{
            alert ('错误')
            });
        }else{
            Promise.all([
                $.ajax({url:'commonData',dataType:'json'})
            ]).then(result=>{},err=>{
            alert ('错误')
            });
   },err=>{
    alert('失败')；
   })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

b.generator带逻辑读取

> runner(function *() {               
      //runner是一个自己写的框架，后面被标准框架取代
	  let userData=yield $.ajax({url:xxx,dataType:'json'});
>     if (userData.type=='VIP'){
>         let items=yield $.ajax({url:xxxx,dataType:'json'});
>     } else {
>         let items=yield $.ajax({url:xxxx,dataType:'json'});
>     }
>     //生成、、、、、 })
1
2
3
4
5
6
7
8
9

6.KOA的实例：KOA是nodejs中的一个框架，已被async await取代

    const KOA=require('KOA');
    const mysql=require('koa-mysql');

    let db=mysql.createPool({host:'localhost',user:'root',password:'122455'});

    let server=new koa();

    server.user(function *() {
        let data=yield db.query(`SELECT *FROM user_tavle`);
        this.body=data;
    });
    //generator使原本异步的数据库操作可以写成同步

    server.listen(8080);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

十. ES7&ES8

1.数组 includes 判断数组是否包含某含东西 返回值为布尔值
2.数组 keys/values/entries

                             数组                  json
    for...in...             key下标           key
    for...of...             value值           不可用（没有迭代器）

keys表示所有key的值：下标
values表示所有的value值
entries表示所有的key-value键值对   entry称为实体
1
2
3
4
5
6
7

3.求幂
math.power(2,8) 可以写为 2**8

4.padStart 和padEnd补位

 //补位，左边补0补成10位
    console.log('('+'abc'.padStat(10,'0')+')');
1
2

5.语法容忍度
[12,54,12] => [12,54,12,]
function show(a,d,b){} =>function show(a,d,b,){}

6.generator yield

========>

重点：async await 已经在用了

优点： 1.不依赖于外部的runnner，统一性能
2.可以用箭头函数

代码：

// async await 已经在用了
    let readData=async()=>{
        let data1=await $.ajax({url:xxxx,dataType:'json'});
        let data2=await $.ajax({url:xxxx,dataType:'json'});
        let data3=await $.ajax({url:xxxx,dataType:'json'});

        console.log(data1,data2,data3);
    }

    readData();
1
2
3
4
5
6
7
8
9
10