ES6新特性使用小结

Posted 2020-10-08 U.m.a

一、let const 命令

　　

‘use strict‘;
/*function test(){
 //let a = 1;
    for(let i=1;i<3;i++){
        console.log(i)
    }
    console.log(i);     //引用错误

    let a = 1;
    let a= 2;       //报错  let 不能重复定义同一个变量
}
test();
*/
function last(){
    const PI = 3.1515926;
    //const  也具有块级作用域  const 声明变量时 *必须赋值
   // PI = 8;         报错 const声明的原始类型常量无法修改 PI is readOnly
   // console.log(PI);

    const K = {
        a:1
    };
    K.b=3;                          //const声明的引用类型可以随意修改  const指向指针
    K.a = 0;
    console.log(PI,K);
}
last();

 

二、解构赋值

　　

{
    let a, b, reset;
    [a, b] = [1, 2];
    console.log(a, b);                    // a =1  b =2
}

{
    let a, b, reset;
    [a, b, ...reset] = [1, 2, 3, 4, 5, 6];
    console.log(a, b, reset);             //a = 1  b= 2  reset = [3,4,5,6]
}

{
    let a, b;
    ({a, b} = {a: 1, b: 2});
    console.log(a, b)                //1,2
}

{
    let a, b, c;
    [a, b, c = 3] = [1, 2];
    console.log(a, b, c);         //1,2,3

    [a, b, c] = [1, 2];
    console.log(a, b, c);         //1,2,  undefined
}

{
    let a = 1;                  //      使用场景    1 、变量交换
    let b = 2;
    [a,b]=[b,a];
    console.log(a,b);       // 2  1
}

{
    function f (){              //      使用场景   2、 接收函数返回的多个值
        return [1,2];
    }
    let a ,b;
    [a,b]=f();
    console.log(a,b);      //1 2
}

{
    function f(){
        return[1,2,3,4,5]
    }
    let  a,b,c;
    [a,,,b,c]=f();
    console.log(a,b,c)                      //1  4   5                       选择性接收
}
{
    function f(){
        return[1,2,3,4,5]
    }
    let  a,b,c;
 /*
   [a,...b]=f();
    console.log(a,b)                      //1  [2,3,4,5]                      选择性接收
 */
    [a,,...b]=f();
    console.log(a,b)                    //1  [3,4,5]                      选择性接收
}

{
    let o = {p:42,q:true};
    let {p,q} = o;
    console.log(p,q);       // 42 true
}

{
        let {a=10,b=5} = {a:3};
        console.log(a,b)  // 3 5
}

{
    let metaData = {
        title:‘abc‘,
        test:[{
            title:‘test‘,
            desc:‘description‘
        }]
    }
    let {title:esTitle,test:[{title:cnTitle}]} = metaData;

    console.log(esTitle,cnTitle);        // abc      test
}

 

三、RegExp扩展

{
    //  ES5 中创建 RegExp 对象的两种方式
    let regexp = new RegExp(‘xyz‘, ‘i‘);      // i 忽略大小写
    let regexp1 = new RegExp(/xyz/i);

    console.log(regexp.test(‘xyz123‘));         //true
    console.log(regexp1.test(‘xyz123‘));        //true


    //  ES6

    let regexp2 = new RegExp(/xyz/ig,‘i‘);       //ES6中可以接受两个参数 第二参数会覆盖修饰符
    console.log(regexp2.flags);     //  i           RegExp.flags 得到修饰符
}

{
    let s = ‘bb_bbb_bbbb‘;
    let a1 = /b+/g;
    let a2 = /b+/y;

    /*
    *  修饰符  g  y
    *       g修饰符会在匹配过程中碰到不匹配的字符就忽略
    *       y修饰符从开始检测在碰到不匹配的字符就停止       粘连模式
    * */

    console.log(‘one‘,a1.exec(s),a2.exec(s));       //[bb]  [bb]
    console.log(‘two‘,a1.exec(s),a2.exec(s));       //[bb]  null

        //RegExp.sticky 判断一个正则对象是否开启的粘连模式
    console.log(a1.sticky,a2.sticky);       //fasle true
}

{
    /*
    *   修饰符 u       通关unicode码来匹配   对大于两个字符的要用 u 来匹配
    * */

}

 

四、String扩展

{
    /*
     *   字符UNICODE表示法
     * */
    console.log(‘a‘, `\u0061`);          //a     a
    console.log(‘s‘, `\u20bb7`);         //s     ?7          当unicode码超过了 0xffff 时 会显示为两个字符
    //\u20bb    7
    console.log(‘s‘, `\u{20bb7}`);       //s     ??
}

{
    /*
     *   String API  codePointAt
     * */
    let s = ‘??‘;
    console.log(‘s‘, s.length);          //s     2
    console.log(‘0‘, s.charAt(0));       //0     ?
    console.log(‘1‘, s.charAt(1));       //1     ?
    console.log(‘0‘, s.charCodeAt(0));       //0     55362
    console.log(‘1‘, s.charCodeAt(1));       //1     57271

    let s1 = ‘??a‘;
    console.log(‘s1‘, s1.length);                          //s1    3
    console.log(‘code0‘, s1.codePointAt(0));               //134071
    console.log(‘code0‘, s1.codePointAt(0).toString(16));     //20bb7
    console.log(‘code1‘, s1.codePointAt(1)); //只取了 占两个字符的后两位
    console.log(‘code2‘, s1.codePointAt(2));
}

{
    console.log(String.fromCharCode(‘0x20bb7‘));        //?         ES5
    console.log(String.fromCodePoint(‘0x20bb7‘));       //??        ES6 对unicode超过最大值的处理
}

{
    let str = "\u{20bb7}abc";
    for (let i = 0; i < str.length; i++) {
        //console.log(‘es5‘,str[i]);
        //  前两个字符乱码 abc可以正常输出
    }

    for (let code of str) {
        console.log(‘es6‘, code);
        //??a b c               可以正常输出
    }
}

{
    /*
     *   判断字符串中是否包含某个字符 或者 以某个字符 起 始
     *       includes        startsWith          endsWith
     * */
    let str = ‘string‘;
    console.log(‘includes‘, str.includes(‘r‘));      //true
    console.log(‘includes‘, str.includes(‘c‘));      //false

    console.log(‘start‘, str.startsWith(‘str‘));     //true          判断是否以 str 开始
    console.log(‘start‘, str.endsWith(‘ng‘));     //true          判断是否以 ng 结束
}

{
    /*
     *   字符串复制拼接
     *       repeat
     * */
    let str = ‘abc‘;
    console.log(str.repeat(2));         //abcabc
    console.log(str.repeat(3));         //abcabcabc
}

{
    /*
     *   模版字符串拼接
     * */
    let name = ‘list‘;
    let info = ‘hello world‘;

    let m = `i am ${name},${info}`;
    console.log(m);                       //i am list,hello world
}
/*
 *   string API  padStart/padEnd(长度，填充字符)
 * */

{
    console.log(‘1‘.padStart(3, ‘0‘));        //001      向前补位
    console.log(‘1‘.padEnd(3, ‘0‘));      //100        向后补位
}
/*
 *   标签模版           1、 防止XSS  2、 多语言转换
 * */

{
    let user = {name: ‘list‘, info: ‘helloWorld‘};
    console.log(abc`i am ${user.name},${user.info}`);
    function abc(s, v1, v2) {
        // s:原生字符串    v1:变量1  v2:变量2
        console.log(s, v1, v2);
        return s + v1 + v2;
    }
}

/*
 *   string API  String.raw         对所有的\进行转义
 * */
{
    console.log(String.raw`Hi\n${2+3}`);        //  HI\n5       \n换行未生效
    console.log(`Hi\n${2+3}`);                  // HI
                                                //  5

}

 

五、Number扩展

　

{
　　//　　二进制和 八进制 表示法
    console.log(0b11111);           //二进制数值都是以0b开头
    console.log(0o11111);          //八进制数组以0o开头
}

/*
*   Number API Number.isFinite  判断一个数值是否有尽
* */
{
    console.log(‘25‘,Number.isFinite(25));          //25 true
    console.log(‘NaN‘,Number.isFinite(NaN));          //NnN false
    console.log(‘0‘,Number.isFinite(0));          //0 true
    console.log(‘1/0‘,Number.isFinite(‘true‘/0));          //分母为0 false

    //ES5 中判断是否为数值
    console.log(‘Nan‘,Number.isNaN(NaN));   //true
    console.log(‘0‘,Number.isNaN(0));       //false
}

/*
*   Number API Number.isInteger 判断一个数值是否为整数
* */

{
    console.log(‘35‘,Number.isInteger(35));      //35   true
    console.log(‘35.0‘,Number.isInteger(35.0));      //35.0   true      小数部分为0
    console.log(‘35.1‘,Number.isInteger(35.1));      //35.1   false
    console.log(‘35‘,Number.isInteger(‘35‘));      //35  false              **接受参数必须为Number类型
    console.log(‘hello‘,Number.isInteger(‘hello‘));      //hello  false
}

/*
*  Number  新常量  MAX_SAFE_INTEGER/MIN_SAFE_INTEGER   9007199254740991/-9007199254740991
*           表示数值最大的上限和最小的下限
*       API Number.isSafeInteger    判断一个数值是否在安全范围内
* */
{
    console.log(Number.MAX_SAFE_INTEGER);
    console.log(Number.MIN_SAFE_INTEGER);
    console.log(‘10‘,Number.isSafeInteger(10));     //10    true
    console.log(‘a‘,Number.isSafeInteger(false));     //a    false          **接受参数必须为Number类型
}

/*
 *   Math API Math.trunc    返回一个小数的整数部分
 * */

{
    console.log(‘4.1‘,Math.trunc(4.1));                 //4.1       4
    console.log(‘4.9‘,Math.trunc(4.9));                 //4.9       4
}

/*
 *   Math API Math.sign    判断一个数值 正数/负数/0
 * */

{
    console.log(‘-8‘,Math.sign(-8));            //-8    -1
    console.log(‘8‘,Math.sign(8));              //8      1
    console.log(‘0‘,Math.sign(0));              //0      0
    console.log(‘50‘,Math.sign(‘50‘));              //50      1         **可以被Number()转换的字符串也可以正常输出
    console.log(‘f00‘,Math.sign(‘f00‘));              //f00     NaN
}

/*
*   Math API    Math.cbrt     立方根的计算        三角函数方法      对数方法....
* */

{
    console.log(‘-1‘,Math.cbrt(-1));        //-1    -1
    console.log(‘8‘,Math.cbrt(8));          //8     2
}