ES6入门基础知识总结

最新推荐文章于 2024-04-03 00:57:10 发布

-多巴胺-

最新推荐文章于 2024-04-03 00:57:10 发布

阅读量1k

点赞数

分类专栏： javascript 文章标签： es6/es7

本文链接：https://blog.csdn.net/weixin_43012505/article/details/107669419

版权

javascript 专栏收录该内容

12 篇文章 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.展开数组

let arr=[1,2,3];
function show(a,b,c){
    alert(a);
    alert(b);
    alert(c);
}
show(1,2,3)
show(...arr) //上下等同
let arr1=[1,2,3];
let arr2=[4,5,6];
let arr3=[...arr1,...arr2]; //[1,2,3,4,5,6]


//参数扩展与数组展开嵌套使用
function show(...args){
    fn(...args);
}
function fn(a,b){
    alert(a+b);
}

展开后的效果，跟直接把数组的内容写在这儿一样
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—汇总一堆出来一个

let arr=[1,2,3,4];
let result=arr.reduce(function(tmp,item,index){ //tmp-中间结果 item-计算值 index-计算下标 【index从1开始，0作为第一个tmp】 
    if(index!=this.length-1){ //不是最后一次
        return tmp+item; //求和
    }else{
        return (tmp+item)/arr.length;
    }
})

3.filter—过滤器

let arr=[12,2,3,8,6,9];
let result=arr.filter(item=>{
    if(item%3==0){
        return true; //保留
    }else{
        return false; //过滤
    }
})
let result=arr.filter(item=>item%3==0);
console.log(result) //【12,3,6,9】

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—简化异步操作
异步：操作之间没啥关系，同时进行多个操作【代码更复杂】
同步：同时只能做一件事【代码简单】

let p1=new Promise(function(resolve,reject){
    //异步代码
    //resolve——success
    //reject——fail
    $.ajax({
        url:'arr.txt',
        dataType:'json',
        success(arr){  //json方法简写
            resolve(arr);
        },
        error(err){
            reject(err);
        }
    });
});
let p2=new Promise(function(resolve,reject){
    $.ajax({
        url:'arr.txt',
        dataType:'json',
        success(arr){  
            resolve(arr);
        },
        error(err){
            reject(err);
        }
    });
})
p1.then(
    function(arr){
        alert('success'+arr);
    },
    function(err){
        alert('fail'+err);
    }
)
Promise.all([p1,p2]).then(
    function(arr){
        let [res1,res2]=arr;  //解构赋值
        alert('全部执行成功')
    },
    function(){
        alert('至少有一个失败')
    }
)


function createPromise(url){
    return new Promise(function(resolve,reject){
    $.ajax({
        url,
        dataType:'json',
        success(arr){  
            resolve(arr);
        },
        error(err){
            reject(err);
        }
    });
})
}
Promise.all([
    createPromise(url1),
    createPromise(url2)
]).then(
    function(arr){
        let [res1,res2]=arr;  //解构赋值
        alert('全部执行成功')
    },
    function(){
        alert('至少有一个失败')
    }
)



//Jquery现成promise——JQ中ajax返回的为promise数据
Promise.all([
    $.ajax({url:'',dataType:'json'}),
    $.ajax({url:'',dataType:'json'}),
]).then(
    function(arr){
        let [res1,res2]=arr;  //解构赋值
        alert('全部执行成功')
    },
    function(){
        alert('至少有一个失败')
    }
)


Promise.all([$.ajax({}),$.ajax({})]).then(results=>{
    //success
},err=>{
    //err
})


Promise其他操作
Promise.all
Promise.race——竞速

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'});
    }
    //其他操作
});