ES6基础姿势

1,变量

Var 的缺陷
1-1,可以重复声明,但是在C语言里面不可以;
1-2,无法限制修改,即无法设置常量。在C语言里面是可以定义常量的,这个常量放在data区域,不能修改,但是var定义一个常量,是可以更改的;
1-3,没有块级作用域。在C语言里面{}就是块,在块里面定义的变量即使与块外面的定义的变量一致,那么也不会相互影响。

ES6里面的定义变量关键字let和const

使用let无法重复声明,使用const也无法重复声明,且不可修改。存在块级作用域。
只要写在{}里面,在{}外面调用的就报错。

2,函数-箭头函数

()当只有一个参数的时候可以省去
只有一个return时,可以省去{return}

3,函数的参数

3-1,参数扩展和展开
收集参数,举个栗子

function show(a,b,…args){}
show(1,2,3,4,5);

那么args=3,4,5
数组展开传参,举个栗子

function show(a,b,c){}

Show需要传三个参数,但是参数写在了一个数组中

let arr = [1,2,3];
//此时可以用show(…arr);相当于show(1,2,3);

展开数组的效果就跟直接把数组的内容取出来传参。

总之…能够将分离的参数打包,也可以将打包好的参数解开成单个的参数,对于数组来说,说白了可以直接将方括号[]去掉。
3-2,默认参数
在函数里面的默认参数可以这样写:

show(a,b=2,c=10){
    console.log(a,b,c)//1,2,10
}

4,解构赋值

4-1,左右两边解构必须一样
举个栗子

let [a,b,c] = [1,2,3]
let {a,b,c} = {a:1,b:2,c:3}

4-2,右边必须是个合法的东西,{1,2}就会报错
4-3,声明和赋值不能分开,必须放在一起
举个栗子

let [a,b];
[a,b] = [1,2]

这样写的话就会报错

5,数组

5-1,map映射,一对一,返回数组
举个栗子

let arr=[1,2,3]
let result = arr.map(item=>item*2)
let result = arr.map(item=>item>=1?’d大于1:’’小于1);

5-2,reduce汇总 - 返回一个数而不是数组,如可以计算总数和 平均数
举个栗子

let score = [100,101,102]
score.reduce((tmp, item, index)=>{

    return tmp+item

} )

可以看到返回的是总数
5-3,filter过滤器,返回的是数组
举个栗子

let arr=[1,2,3,4,5,6]
let result = arr.filter(item=>item%3==0);

返回被3整除的数字
5-4,forEach 循环迭代

6,字符串

6-1,多了两个新方法

startWith和endWith

6-2,字符串模板

let a= 12
let str = `a${a}bc`//a12bc

7,面向对象

7-1,class关键字,构造器和类分来了
7-2,class里面直接加方法
7-3,继承,通过super来继承
之前的类的写法:


function User( ){
    this.name = name;
    this.age = age;
} 

User.prototype.showName = function(){
    console.log(this.name)
}
User.prototype.showAge = function(){
    console.log(this.age)
}

var user1 = new User(‘张三’,21);

ES6对类的写法:

class User{
    constructor(name, age){
        this.name = name;
        this.age = age
    }
    showName(){
        console.log(this.name);
    }
    showAge(){
        console.log(this.age);
    }
}

之前类的继承:

function VipUser(name, age, gender){
    User.call(this,name,age);
    this.gender = gender;
}

VipUser.prototype = new User();
VipUser.prototype.constructor=VipUser;
VipUser.prototype.showGender = function(){
    console.log(this.gender)
}

ES6的继承

class VipUser extends User{
    constructor(name,age,gender){
        super(name, age);//继承超类(继承父类)
        this.gender=gender
    }
    showGender(){
        console.log(this.gender)
    }
}

8,面向对象的应用

React - 强依赖于ES6面向对象
8-1,组件化,一个组件就是一个class
8-2,jsx语法

9,json

JSON.stringify变成字符串
JSON.parse()变成JSON
需要注意的是在转换成JSON过程中,字符串的标准写法
1,必须是双引号
2,所有名字都需要加双引号
否则不能转换成功

简写方法:

可以直接写变量,只要json对象的key值和value名字一致就可以

如let a =12; let b=12;
但是此时需要传一个json对象,后端要求的对象属性名也是a,b,那么可以这样写:

let json = {a,b,c:32}
如果里面有函数,那么可以省去:function
举个栗子

let json = {
    a:1,
    show(){
        alert(this.a)
    }
}

10,promise函数

ES6自带promise,需要的时候通过new来创建。

注意promise.all 和promise.race的使用和区别
但是也有缺点,比如好几个请求互相之间有逻辑关系,那么此时的promise就不适用了,写法和jQuery的ajax一样都是在嵌套。此时就需要用到generator函数。

11,generator-生成器

是一个特殊的函数,普通函数一路执行到底,generator函数中间可以停止,使用关键字yield
适用场景:当我们发起请求1后的结果作为请求2的参数再发起请求,请求2的结果要作为请求3的参数。使用generator就可以优雅的写成同步式的代码,避免多层嵌套。但是这个生成器使用的时候要借助外部库runner。ES7里面将这个函数改成了async await。使用时不再利用第三方库或者封装generator了。可以优雅的将异步的代码写成同步方式。
举个栗子

function getCode(){
    return axios.get('json/code.json');
}
function getlist(params){
    return axios.get('json/person.json',{params})
}

getlist的Parmas参数要用到getcode请求的结果,常规做法如下:

function getFinal(){
      console.log("我是getFinal函数")
      getCode().then(function(res){
         if(res.data.code == 0){
               console.log(res.data.code);
                 var params = {
                      code:res.data.code
                  }
               getlist(params).then(function(res){
                    if(res.data.code == 0){
                         console.log(res.data.list);
                       }
                   })
                }
          })
      }
  getFinal();

但是使用async和await可以这样写:

async function getResult(){
            let code = await getCode();
            console.log(code.data.code);
            if(code.data.code == 0){
                var params = {
                    code:code.data.code
                }
                let list = await getlist(params);
                console.log(list.data.list);
            }
        }
getResult();

12,set函数

Set是为了构建某一类型对象,所以也叫构造函数。 - 对象的实例化。

set本身的方法:

  • size()-对象的长度;
  • clear()-清空所有项;
  • delete(var)-清空某项值,不是下标;
  • add(var)-添加不重复的值;
  • has(var)-是否包含某项值。

注意:可以链式调用

应用:

数组去重,举个栗子

let a = [2,1,2,1,3,5,6,5]
let b = new Set(a);
console.log(b)//[2,1,3,5,6]

但是这是一个set对象,不是数组,所以需要进行转换

let c = [...b]

你可能感兴趣的:(ES6基础姿势)