ES6 语法

Posted 2020-11-22 addie

一、let和const

es6新增加了块作用域，也就是{}包起来的代码。

function test(){
  let a = 0;
  const b = 0;        
}

const常量不能修改，并且声明常量必须赋值！

const和let的唯一区别就是，const不可以被更改，所以当声明变量的时候，尤其是在声明容易被更改的全局变量的时候，尽量使用const。

• 更好的代码语义化，一眼看到就是常量。
• 另一个原因是因为javascript 编译器对const的优化要比let好，多使用const，有利于提高程序的运行效率。
• 所有的函数都应该设置为常量。

二、解构赋值

解构赋值的分类：数组结构赋值（左右都是数组）、对象结构赋值（左右都是对象）、字符串结构赋值（左数组、右字符串）、布尔值结构赋值、函数参数解构赋值（数组解构赋值在函数上的引用）、数值解构赋值。

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

 

如果c没有赋值，找不到可以配对的值，c就是undifined。
适用场景：变量交换，选择性获取返回值。

 

{
    let a=1;
    let b=2;
    [a, b]=[b,a];
    console.log(a, b);//2 1
}
{
    function f() {
       return [1,2];
    }
    let a,b;
    [a, b]=f();//1 2
}
{
    function f1() {
        return [1,2,3,4,5];
    }
    let a,b,c;
    [a, , ,b]=f1();
    console.log(a, b);//1 4
}
{
    function f1() {
        return [1,2,3,4,5];
    }
    let a,b,c;
    [a,...b]=f1();
    console.log(a, b);//1 [2,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  a=10是默认值，找不到匹配项时才=10
}

 

使用场景：

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

 

函数的参数如果是对象的成员，优先使用解构赋值。
如果函数返回多个值，优先使用对象的解构赋值，而不是数组的解构赋值。这样便于以后添加返回值，以及更改返回值的顺序。

 

三、正则扩展

正则新增特性：u修饰符、y修饰符、s修饰符。

{
    //es5
    let regex=new RegExp(‘xyz‘,‘i‘);
    let regex2=new RegExp(/xyz/i);//或者直接/xyz/i
    console.log(regex.test(‘xyz123‘));//true
    console.log(regex2.test(‘xyz123‘));//true

    //es6，参数可以下面这样
    let regex3=new RegExp(/xyz/ig,‘i‘);
    console.log(regex3.flags);//i 即第二个参数的修饰符会覆盖前面正则表达式的修饰符
}
{
    //y修饰符 vs g修饰符
    let s=‘bbb_bb_b‘;
    let a1=/b+/g;
    let a2=/b+/y;
    console.log(‘one‘,a1.exec(s),a2.exec(s));//bbb bbb
    console.log(‘two‘,a1.exec(s),a2.exec(s));//bb null
    //相同点：都是全局匹配
    //不同点：g是上一次匹配的下一个字符开始，即_，不强调在第一个字符就能匹配上
    //不同点：y是上一次匹配的下一个字符开始，即_，但是必须得在第一个字符就能匹配上
    console.log(a1.sticky,a2.sticky);//false true 是否开启y
}
{
    //u修饰符：unicode
    console.log(‘u-1‘,/^uDB3D/.test(‘uDB3DuDC2A‘));//u-1 true //uDB3DuDC2A当成两个字符
    console.log(‘u-2‘,/^uDB3D/u.test(‘uDB3DuDC2A‘));//u-2 false //uDB3DuDC2A当成一个字符

    console.log(/u{61}/.test(‘a‘));//false
    console.log(/u{61}/u.test(‘a‘));//true

    console.log(`u{20BB7}`);//unicode编码大于FFFF，即大于两个字节
    let s=‘??‘;
    console.log(/^.$/.test(s));//false
    console.log(/^.$/u.test(s));//true

    console.log(‘test‘,/??{2}/.test(‘????‘));//test false
    console.log(‘test2‘,/??{2}/u.test(‘????‘));//test2 true
    //总结，大于两个字节长度的字符，要加u
    //但是仍然不能匹配换行符，回车符，行分隔符，段分隔符
    //如果要能匹配，使用s修饰符，但是s修饰符es6尚未实现
}

 

四、字符串扩展

安装补丁库，处理兼容：npm install babel-polyfill --save-dev
需要引入兼容库

import ‘babel-polyfill‘;

{
    console.log(‘a‘,‘u0061‘);//a a
    console.log(‘a‘,‘u20BB7‘);//a ?7 超过了0xFFF，即两个字节，会被当成两个字符
    console.log(‘s‘,`u{20BB7}`);//s ??
}
{
    let s=‘??‘;
    //es5
    console.log(‘length‘,s.length);//2 （码字大于两个字节，当四个字节处理，计算长度的时候每两个字节算一个长度）
    console.log(‘0‘,s.charAt(0));//0 乱码
    console.log(‘0‘,s.charAt(2));//0 乱码
    console.log(‘at0‘,s.charCodeAt(0));//at0 55362
    console.log(‘at1‘,s.charCodeAt(1));//at0 57271
    //es6
    let s1=‘??a‘;
    console.log(‘length‘,s1.length);//3
    console.log(‘code0‘,s1.codePointAt(0));//134071 取出4个字节
    console.log(‘code0‘,s1.codePointAt(0).toString(16));//20bb7
    console.log(‘code1‘,s1.codePointAt(1));//57271 取出后两个字节
    console.log(‘code1‘,s1.codePointAt(2));//97 就是a
    //.toString(16)转成16进制
}
{
    //es5
    console.log(String.fromCharCode(‘0x20BB7‘));//乱码
    //es6
    console.log(String.fromCodePoint(‘0x20BB7‘));//??
}
{
    let str=‘u{20BB7}abc‘;
    for (let i=0;i<str.length;i++){
        console.log(‘es5‘,str[i]);//前两个乱码 a b c
    }
    for (let code of str){
        console.log(‘es6‘,code);//?? a b c
    }
}
{
    let str=‘string‘;
    console.log(‘includes‘,str.includes(‘r‘));//true
    console.log(‘start‘,str.startsWith(‘str‘));//true
    console.log(‘end‘,str.endsWith(‘ng‘));//true
}
{
    let str=‘abc‘;
    //es5是用+
    console.log(str.repeat(2));//abcabc
}
//模板字符串
{
    let name=‘list‘;
    let info=‘hello world‘;
    let m=`i am ${name},${info}`;
    console.log(m);//i am list,hello world
    console.log(‘1‘.padStart(2,‘0‘));//01
    console.log(‘1‘.padEnd(2,‘0‘));//10
}
//标签模板：防止XSS攻击，处理多语言
{
    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);//["i am ", ",", "",] "list" "hello world"
        return s+v1+v2;//i am ,,,listhello world
    }
}
{
    console.log(String.raw`Hi
${1-2}`);//Hi 
-1
    console.log(‘Hi
${1+2}‘);//Hi 换行 ${1+2}
}

 

五、数值扩展

{
    console.log(0b11110111);//247 0b二进制（大小写均可）
    console.log(0o11111);//4681 0o八进制（大小写均可）
}
{
    console.log(‘15‘,Number.isFinite(15));//true
    console.log(‘NaN‘,Number.isFinite(NaN));//false
    console.log(‘1/0‘,Number.isFinite(1/0));//false
    console.log(‘NaN‘,Number.isNaN(NaN));//true
    console.log(‘0‘,Number.isNaN(0));//false

    console.log(‘25‘,Number.isInteger(25));//true
    console.log(‘25.0‘,Number.isInteger(25.0));//true 25.0=25
    console.log(‘25.1‘,Number.isInteger(25.1));//false
    console.log(‘25.0‘,Number.isInteger(‘25.0‘));//false

    console.log(Number.MAX_SAFE_INTEGER);
    console.log(Number.MIN_SAFE_INTEGER);
    console.log(Number.isSafeInteger(10));//true 是否位于上面两个数的范围内
    console.log(Number.isSafeInteger(‘a‘));//false

    //es5：Math.floor，Math.ceil
    console.log(4.1,Math.trunc(4.1));//4
    console.log(4.9,Math.trunc(4.9));//4

    console.log(‘-5‘,Math.sign(-5));//-1
    console.log(‘5‘,Math.sign(5));//1
    console.log(‘0‘,Math.sign(0));//0
    console.log(‘a‘,Math.sign(‘a‘));//NaN

    //开立方根
    console.log(Math.cbrt(-1));//-1
    console.log(Math.cbrt(8));//2
}