ES6入门基础知识总结

拼搏现实的明天。 2021-09-01 11:42 369阅读 0赞

变量 var&let&const  
var：可以重复声明，变量可以修改，可变量提升。  
let：不能重复声明，变量可以修改，块级作用域，不可变量提升。  
const：不能重复声明，变量不可以修改，块级作用域，不可变量提升。

--------------------

箭头函数 ()=>  
如果只有一个参数，()可以省略。  
如果只有一个return，\{\}可以省略。

//完整写法
    let fun=function(a){ 
        return a*2;
    }
    //箭头函数
    let fun=(a)=>{ return a*2}
    let fun=a=>a*2

--------------------

参数扩展  
1.rest 参数 ：收集剩余的参数——收集参数

function show(a,b,...args){ 
        alert(args)
    } 
    show(1,2,3,4,5)  //弹窗【3,4,5】

*  rest parameter必须是最后一个  
    2.展开数组

*  展开后的效果，跟直接把数组的内容写在这儿一样  
    3.默认参数

function show(a,b=2,c=3){ 
        console.log(a,b,c)
    }
    show(1) //【1,2,3】
    show(1,1) //【1,1,3】

*  传递参数时使用传递的参数，没有传递参数时使用默认的参数

--------------------

解构赋值  
左右两边结构必须一样  
右边必须是个东西——合理  
声明和赋值不能分开（必须在一句话内完成）

let [json,[num1,num2],num,str]=[{ a:12,b:21},[1,2],8,'name'] //可以自定义粒度
    console.log(json,num1,num2,num,str) //Object{a:12,b:21},1,2,8,"name"

--------------------

数组  
1.map—映射 一一对应

let arr=[1,2,3]
    let result1=arr.map(function(item){ 
        return item*2;
    })
    let result1=arr.map(item=>item*2) 
    let result2=arr.map(item=>item>2?'>2':'<2')
    alert(result1); //【2,4,6】
    alert(result2); //【'<2','<2','>2'】

2.reduce—汇总 一堆出来一个

3.filter—过滤器

4.forEach—循环（迭代）

let arr=[1,2,3,4];
    arr.forEach((item,index)=>{ 
     alert(index,":",item)
    })

--------------------

字符串  
1.字符串新方法

startWith — 返回boolean类型
    let str='abcd';
    alert(str.startsWith('a')) //true
    
    endsWith — 返回boolean类型
    let str='abcd';
    alert(str.endsWith('a')) //flase

2.字符串模板—\[字符串连接\]

let num=1;
    let str=`ab${ num}c`; //【``反单引号】
    alert(str) //【ab1c】——可以直接将变量塞进字符串中

*  直接将东西塞进字符串中 $\{东西\}  
    可以折行

--------------------

面向对象—class关键字  
构造器和类分开了  
class里面直接加方法  
继承 extends super

//class定义
    class User{ 
        constructor(name,tel){ 
            this.name=name;
            this.tel=tel;
        }
        showName(){ 
            alert(this.name);
        }
        showTel(){ 
            alert(this.tel);
        }
    }
    
    class VipUser extends USer{ 
        constructor(name,tel,leave){ 
            super(name,tel)  //super 关键字用于访问父对象上的函数。
            this.leave=leave;
        }
        showLeave(){ 
            alert(this.leave)
        }
    }

--------------------

JSON  
1.JSON对象

//JSON的标准写法——只能用双引号，所有的名字都必须用双引号包裹
    { "a":1,"b":2,"c":3}

JSON.stringify(json)——JSON字符串化【encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。】  
JSON.parse(str)——将一个 JSON 字符串转换为对象  
2.简写  
名字和值(key&value)一样时可以简写  
2.函数方法简写

//名字和值一样简写
    let a=1;
    let b=2;
    let json={ a:a,b:b,c:3};
    let json={ a,b,c:3};
    
    
    //函数简写
    let json={ 
        a:12,
        show:function(){ 
            alert(this.a);
        }
    };
    let json={ 
        a:12,
        show(){   //简写去掉【:function】
            alert(this.a);
        }
    };
    json.show()

--------------------

Promise—简化异步操作  
异步：操作之间没啥关系，同时进行多个操作【代码更复杂】  
同步：同时只能做一件事【代码简单】

--------------------

Generator—生成器  
普通函数 —— 一路到底  
generator函数 —— 中间能停 不能写成箭头函数

function *show(){   //*位置随意 
        alert('a');
        var y=yield;  //暂时放弃执行
        console.log(y);
        alert('b');
    }
    let genObj=show();  //创建generator对象
    genObj.next();  //踹一脚走一步，走走停停
    genObj.next(3);  //传递参数
    
    
    yield函数
    yield传参——可以在next中传递参数
    yield返回
    function *show(){ 
        alert('a');
        yield 7;
        alert('b');
        yield 9;
        alert('c');
        //return 55;
    }
    let genObj=show();
    let res1=genObj.next();
    console.log(res1);  //{value: 7, done: false}
    let res2=genObj.next();
    console.log(res2);  //{value: 9, done: false} 
    let res3=genObj.next();
    console.log(res3);//{value: undefined, done: true}
    //{value: 55, done: true} 最后一步的结果依靠return

异步操作  
1.回调函数嵌套  
2.Promise  
3.Generator

带逻辑的请求

runner(function *(){ 
        let userData=yield $ajax({ url:'getUserData',dataType:'json'});
        if(userData.type=='Vip'){ 
            let items=yield $ajax({ url:'getVipItem',dataType:'json'});
        }else{ 
            let items=yield $ajax({ url:'getItem',dataType:'json'});
        }
        //其他操作
    });

Promsie适用于一次读一堆  
Generator适用于逻辑性

runner详细介绍：https://zhuanlan.zhihu.com/p/68969045  
runner下载链接：http://blog.zhanghuayi.tech/runner.zip

--------------------

Generator — KOA  
\*node.js

--------------------

[有道云笔记链接][Link 1]

[Link 1]: http://note.youdao.com/s/dn4TaKpS