es6语法总结

最新推荐文章于 2022-08-18 09:35:18 发布

西瓜柚子水蜜桃

最新推荐文章于 2022-08-18 09:35:18 发布

阅读量175

点赞数

文章标签： es6 语法

本文链接：https://blog.csdn.net/weixin_41111987/article/details/83384770

版权

1、let const命令

let和var的区别：

（1）let申明的变量只在块级作用域中生效

（2）let变量不能重复定义

const 定义常量常量的含义是就是不能修改的数

const使用的时候要注意两点

（1）const也是有块级作用域的

（2）const申明的时候必须赋值

补充：什么是块级作用域？用大括号{}包起来的

2、解构赋值

简而言之：就是赋值，是左边的结构和右边的结构要一一对应数据的类型必须要一样

举例来说对象的解构赋值

{
   let a, b
   ({a,b}={a:1,b:2});   //左右两边的结构一一对应
}

使用结构赋值的好处

（1）变量的交换 [a,b]=[b,a]; 不需要使用中间变量

（2）函数数据的一一对应

{
   function f(){
      return [1,2]
   }
   let a, b
   [a,b]=f();
   cosole.log(a, b);
}

下面这个例子更好的说明了解构赋值的好处，有点绕多看几遍就领会了

{
   let metaData={
      title:’abc’,
      test:[{title:’test’,desc:’descrption’}]
      }
   let{title:esTitle,test[{title:cnTitle}]}=metaData;
   console.log(esTitle,cnTitle)
}

3、正则扩展

（说实话，我怕正则扩展怕的要死没办法硬着头皮学吧）

es6正则扩展主要是解决匹配字符大于两个字符的时候一个非常好的解决方法使用{}

注意：

    // #正则表达式中，点（.）是一个特殊字符，代表任意的单个字符，但是行终止符（line terminator character）除外
    // U+000A 换行符（\n）
    // U+000D 回车符（\r）
    // U+2028 行分隔符（line separator）
    // U+2029 段分隔符（paragraph separator）

4、字符串扩展

导入兼容库

npm install babel-polyfill --save-dev
（1）codePointAt() includes() startsWith() endWith() repeat()字符串方法 
codePointAt() 对这种4个字节的字符，es5不能处理，正确处理4个字节存储的字符，返回字符的一个码点
includes() 是否包含某一字符串
startsWith() 以什么字符串开始
endWith() 以什么字符串结束 
repeat(n) 字符串重复几遍

(2) 处理日期很好用的padStart() PadEnd() 方法

{
    console.log('1'.padStart(2,'0'));   //01
    console.log('1'.padEnd(2,'0'));   //10
}

（3）非常好用的标签模板（强烈推荐使用在vue项目中也使用了这个）

使用标签模板的好处处理XXX攻击处理多语言转换的问题

看例子

{
    let user={
        name:'list',
        info:'hello world'
    }
   console.log( abc`i am ${user.name} ${user.info}`)
    function abc(s,v1,v2) {
        console.log(s,v1,v2)
        return s+v1+v2
    }
}

（4）raw对所有的\进行转义使用的频率不高了解即可

5、数值扩展

主要是一些方法的介绍

Number.isFinite()    //判断是不是数 返回的是布尔值
Number.isNaN()      //判断是不是NAN的值 返回的是布尔值
isInteger()         //判断是不是整数 返回的是布尔值
Number.MAX_SAFE_INTEGER   //这是一个常量 表示数的上线 返回的是2^53
Number.MIN_SAFE_INTEGER   //这是一个常量 表示数的下线 返回的是2^(-53)
Number.isSafeInteger()   //判断这个数是不是在上线和下线范围内 如果不在的话 数据存储就不准确了 
Math.trunc()    //判断带小数的整数部分并返回 返回小数的整数部分
Math.sign()    //判断一个数是正数、负数还是0 返回的是1、-1、0
Math.cbrt()     //立方根的计算

6、数组的扩展

Array.of() 就是把数组中的元素放置其中

Array.from() 把一些枚数组或者集合转换成真正的数组，并且使用数组里面的方法去遍历

copeWith（）方法 console.log([1,2,3,4,5].copyWithin(0,3,4)); [4,2,3,4,5] //不常用

find() 查找到符合的元素就返回，只返回一个元素

findIndex（）与find类似，但是返回的是元素的下标

fill()将数组所有的元素都用填充

keys() 返回下标值索引

let index of values() 返回内容

let values of entries() 返回全部

let [index,values] of includes() 是否包含某一元素返回true或false

7、函数的扩展

//参数默认值
function test(x,y='world'){
    console.log('默认值',x,y);
}
    test('hello')
谨记：如果你在y，后面在加一个参数 c，这个时候c必须也要赋初始值，不然就会报错

//作用域
{
    let a='test'
    function test2(a,y=a){
        console.log('作用域',a,y)
    },
    test2('hello')   //输出a和y的值都是hello
}

//rest参数
{
    function test3(...arg){
        for(let v of arg){
         console.log('rest',v)
        }
    }
    test3(1,2,3,4,'a')   rest 1
                         rest 2
                         ......
}
//扩展运算符
{
    console.log(...[1,2,3]);
    console.log(a,...[1,2,3]);
}
//箭头函数
{
    let arrow = v =>v*2;
    console.log('arrow',arrow(2));
    let arrow2 = () =>5;
    console.log('arrow2',arrow(2));
}
//尾调用
{
    function tail(x){
        console.log('tail',x);
    }
    function fx(x){
        return tail();
    }
    fx(123)  //tail 123
}

8、对象扩展

//属性表达式
{
    let a='b';
    let es6_obj={
        [a]:'c'
    }  
}
//Object新增方法
Object.is()  相当于===
Object.assign() 拷贝
Object.entries()

9、Symbol的用法

1、Symbol 返回的是一个唯一值

2、Symbol.for() //指向的是一个指针

下面这个例子很好的阐述了Symbol的使用?

{
    let a1=Symbol.for('abc');
    let obj={
        [a1]:'123',
        'abc':345,
        'c':456
    };
    console.log('obj',obj)
    for(let [keys,values] of Object.entries(obj)){
        console.log('let of',keys,values)
    }
    Object.getOwnPropertySymbols(obj).forEach(function (item) {
        console.log(obj[item]);
    })
    Reflect.ownKeys(obj).forEach(function (item) {
        console.log('ownkeys',item,obj[item])
    })
}

10、set—map数据结构

set
     new Set() 定义方法 可以传参数也可以不传参数
     特性：数值的唯一性 去重
     set的四个方法 add delete clear has
     set的遍历keys() values() entries() forEach()
Weakset
    WeakSet和Set支持的数据类型不一样
    WeakSet的元素只能是对象 数值什么的都不行
    WeakSet是弱引用：不和垃圾回收机制拉钩 地址的引用 不检测地址是否被垃圾回收了
    没有clear方法 不能遍历
Map
    set添加元素使用add方法
    map添加元素使用set（）方法
    map得到数据时get()方法

//数据结构横向对比，增，查，改，删
{
    let map=new Map();
    let array=[];
    //增
    map.set('t',1);
    array.push({t:1});
    console.info('map-array',map,array);
    //查
    let map_exist=map.has('t');
    let array_exist=array.find(item=>item.t);
    console.info('map-array-modify',map,array);
    //改
    map.set('t',2);
    array.forEach(item=>item.t?item.t=2:'');
    console.info('map-array-modify',map,array);
    //删
    map.delete('t');
    let index=array.findIndex(item=>item.t);
    array.splice(index,1);
    console.info('set-array-empty',set,array);
}
{
    //map,set,object对比
    let item={t:1};
    let map=new Map();
    let set=new Set();
    let obj={};

    //增
    map.set('t',1);
    set.add(item);
    obj['t']=1;

    console.info('map-set-obj',obj,map,set);

    //查
    console.info({
        map_exist:map.has('t'),
        set_exist:set.has(item),
        obj_exist:'t' in obj
    })

    //改
    map.set('t',2);
    item.t=2;
    obj['t']=2;
    console.info('map-set-obj-modify',obj,map,set);

    //删除
    map.delete('t');
    set.delete(item);
    delete obj['t'];
    console.info('map-set-obj-empty',obj,map,set)
}

11、Proxy Reflect

//直接上代码就一清二楚了

{
    let obj={
        time:'2017-3-10',
        name:'net',
        _r:123
    }
    let monitor =new Proxy(obj,{
        //拦截数据的读取
        get(target,key){
            return target[key].replace('2017','2018');
        },
        //拦截对象设置属性
        set(target,key,value){
           if(key==='name'){
               return target[key]=value
           }else {
               return target[key]
           }
        },
        //拦截key in object操作
        has(target,key){
            if(key==='name'){
                return true
            }else{
                return false
            }
        },
        //拦截删除操作
        deleteProperty(target,key){
            if(key.IndexOf('_')>-1){
                delete target[key]
                return true
            }else {
                return target[key]
            }
        },
        //拦截Object.keys Object.getOwnPropertySymbols Object.getOwnPropertyNames
        ownKeys(target){
            return Object.keys(target).filter(item=>item!='time')
        }
    })
    monitor.time='2019'
    monitor.name='mukewang'
    console.log('get',monitor.time)
    console.log('set',monitor.time,monitor)
    // console.log('has','name' in monitor,'time' in monitor)
    // console.log('delete',monitor)
    // delete  monitor._r
    // console.log('delete',monitor)
    console.log(' ownKeys',Object.keys(monitor))
}
{
    let obj={
        time:'2017-3-10',
        name:'net',
        _r:123
    }
    console.log('Reflect.set',Reflect.set(obj,'name','mukewang'));
    // console.log('Reflect.get',Reflect.get(obj,'name'))
    console.log('Reflect.get', Reflect.get(obj,'time'));
    console.log('Reflect.has',Reflect.has(obj,'_r'))
}

{
    function validator(target,validator){
        return new Proxy(target,{
            _validator:validator,
            set(target,key,value,proxy){
                if(target.hasOwnProperty(key)){
                    let va=this._validator[key];
                    if(!!va(value)){
                        return Reflect.set(target,key,value,proxy)
                    }else{
                        throw Error(`不能设置${key}到${value}`)
                    }
                }else{
                    throw Error(`${key} 不存在`)
                }
            }
        })
    }

    const personValidators={
        name(val){
            return typeof val==='string'
        },
        age(val){
            return typeof val === 'number' && val>18
        },
        mobile(val){

        }
    }

    class Person{
        constructor(name,age){
            this.name=name;
            this.age=age;
            this.mobile='1111';
            return validator(this,personValidators)
        }
    }

    const person=new Person('lilei',30);

    console.info(person);

    person.name='Han mei mei';

    console.info(person);
}

12、类与对象

//基本定义和生成实例
{
    class Parent{
        constructor(name='mukewang'){
            this.name=name;
        }
    }
    let v_parent=new Parent('v');
}

//继承   class Child extends Parent{ }

//继承传递参数
{
    class Parent{
        constructor(name='pengjing'){
            this.name=name;
        }
    }
    class Child extends Parent{
        constructor(name='child'){
            super(name);   //这个必须要被放在第一行 后面的属性this.  要跟在后面 不然会报错
            this.type='child'
        }
    }
    console.log('继承传递参数',new Child())
}
静态方法依赖于类，通过类调用静态方法
实例方法依赖于类的对象，需要创建对象后
不管是静态方法还是静态属性都是直接通过类去调用
类的对象是new

//静态方法
{
    class Parent {
        constructor(name = 'mukewang') {
            this.name = name;
        }
        static tell(){
            console.log('tell')
        }
    }
    Parent.tell()  //静态方法的调用
}
//静态属性
{
    class Parent {
        constructor(name = 'mukewang') {
            this.name = name;
        }
        static tell(){
            console.log('tell')
        }
    }
    Parent.type='test';
    console.log('静态属性',Parent.type)
}

13、Promise 异步请求

以前执行异步请求一般都是通过callback（）但是如果有多个异步请求的话使用call'back（）回调函数是特别复杂的

//callback回调函数的使用
{
    let ajax=function (callback) {
        console.log('执行1');
        setTimeout(function () {
            callback&&callback.call()
        },1000)
    };
    ajax(function () {
        console.log('timeout')
    })
}

//Promise
{
    let ajax=function () {
        console.log('执行2');
        return new Promise(function (resolve,reject) {
            setTimeout(function () {
                resolve()
            },1000);
        })
    };
    ajax().then(function () {
        console.log('promise','timeout2')
    })
}
{
    let ajax=function () {
        console.log('执行3');
        return new Promise(function (resolve,reject) {
            setTimeout(function () {
                resolve()
            },1000);
        })
    };
    ajax().then(function () {
        return new Promise(function (resolve,reject) {
            setTimeout(function () {
                resolve()
            },2000)
        })
    }).then(function () {
        console.log('timeout3')
    })
}
//Promise异常捕获
{
    let ajax=function (num) {
       console.log('执行4');
       return new Promise(function (resolve, reject) {
           if(num>5){
               resolve()
           }else {
               throw new  Error ('出错了')
           }
       })
    };
    ajax(6).then(function () {
        console.log('log',6);
    }).catch(function (err) {
        console.log('catch',err)
    });
    ajax(3).then(function () {
        console.log('log',3);
    }).catch(function (err) {
        console.log('catch',err)
    });
}
//所有的图片都加载完在添加到页面
{
   function loadImg(src) {
       return new Promise(function (resolve, reject) {
           let img=document.createElement("img");
           img.src=src;
           img.οnlοad=function () {
               resolve(img)
           }
           img.οnerrοr=function () {
               reject(err);
           }
       })
   }
   function showImg(imgs) {
        imgs.forEach(function (img) {
            document.body.appendChild(img);
        })
   }
   Promise.all([
    loadImg(''),
    loadImg(''),
    loadImg('h')
]).then(showImg)
}
//有一个图片加载完就添加到页面
{
    function loadImg(src) {
        return new Promise(function (resolve, reject) {
            let img=document.createElement("img");
            img.src=src;
            img.οnlοad=function () {
                resolve(img)
            }
            img.οnerrοr=function () {
                reject(err);
            }
        })
    }
    function showImgs(img) {
        let p=document.createElement("p");
        p.appendChild(img);
        document.body.appendChild(p)
    }
    Promise.race([
        loadImg(''),
        loadImg(''),
        loadImg('')
    ]).then(showImgs)
}

14、Iterator 接口

//自定义iterator接口
{
    let obj={
        start:[1,3,2],
        end:[7,9,8],
        [Symbol.iterator](){
            let self=this;
            let index=0;
            let arr=self.start.concat(self.end);
            let len=arr.length;
            return{
                next(){
                    if(index<len){
                        return {
                            value:arr[index++],
                            done:false
                        }
                    }else {
                        return {
                            value: arr[index++],
                            done:true
                        }
                    }
                }
            }
        }
    }
    for (let key of obj){
        console.log(key)
    }
}

15、Generator

next函数的用法
yeild^*的用法
{
    let obj={};
    obj[Symbol.iterator]=function *() {
        yield "1";
        yield "2";
        yield "3"
    }
    for(let value of obj){
        console.log('value',value)
    }
}

15、Decorator
       函数 修饰行为 修饰类的行为
       安装插件
       npm install babel-plugin-transform-decorators-legacy --save-dev
       在.babelrc中写入
       常规的修饰都在第三方库中，可以引入
       core-decorators
       可以安装
       npm install core-decorators
       然后通过improt引入

类修饰符?

{
    let log=(type)=>{
        return function (target,name,descriptor) {
            let src_method=descriptor.value;
            descriptor.value=(...arg)=>{
                src_method.apply(target.arg);
                console.info(`log ${type}`)
            }
        }
    }
    class AD{
        @log('show')
        show(){
            console.log('ad is show')
        }
        @log('click')
        click(){
            console.log('ad is click')
        }
    }
    let ad =new AD();
    ad.show();
    ad.click()
}