ES6

最新推荐文章于 2022-05-18 20:18:22 发布

weixin_34242509

最新推荐文章于 2022-05-18 20:18:22 发布

阅读量166

点赞数

原文链接：https://juejin.im/post/5d09e5c26fb9a07f04204c76

版权

let和const

let和const有块级作用域
变量不能重复let定义

    let a = 1;
    let a = 2;//报错
复制代码

const定义时就要赋值
const常量名称应该是全大写
const定义的数据不能再发生更改,但是对于对象来说,只有地址不能发生更改,里面的属性是可以更改的

变量引用

es5中我们文本赋值的形式如下

document.getElementById('p1').innerHTML = "This demonstrates the output of HTML \
content to the page, including student's\
" + name + ", " + seatNumber + ", " + sex + " and so on.";
复制代码

es6中可以用反引号和${}完成

document.getElementById('p2').innerHTML = `This demonstrates the output of HTML content to the page, 
including student's ${name.split('').reverse().join('')}, ${parseInt(seatNumber)+1}, ${sex} and so on.`
复制代码

解构赋值

数组结构赋值√

直接赋值
[a, b] = [1, 2];
取前n个值或后n个值的数组
[a, b, ...rest] = [1, 2, 3, 4, 5, 6, 7];
[a,,,,...b] = [1, 2, 3, 4, 5, 6, 7];
设置默认值
[a, b, c = 3] = [1, 2];
交换值
[a, b] = [b, a];

对象解构赋值√

通过key取value

const student = {
        name: 'susan',
        age: '22',
        sex: 'male',
        height: '183cm'
    }

    const {name, height, sex, age} = student;
    
    let {a,b} = {a: 1, b: 2};
    ({a, b} = {a: 1, b: 2});
复制代码

设置默认值

({a=10, b=13} = {a: 1, b: 2});
复制代码

多层参数取值

let metaData = {
        title:'abc',
        test:[{
            title: 'test',
            desc:'description'
        }]
    }
    let {title:esTitle,test:[{title:cnTitle}]} = metaData;
复制代码

字符串解构赋值
布尔值解构赋值
函数参数解构赋值√

{
    //  代码1：左边为默认值
    function move({x = 0, y = 0} = {}) {
        return [x, y];
    }
    console.log(move({x: 3, y: 8})); // [3, 8]
    console.log(move({x: 3})); // [3, 0]
    console.log(move({})); // [0, 0]
    console.log(move()); // [0, 0]
//
// 代码2：
    function move2({x, y} = { x: 0, y: 0 }) {
        return [x, y];
    }
    console.log(move2({x: 3, y: 8})); // [3, 8]
    console.log(move2({x: 3})); // [3, undefined]
    console.log(move2({})); // [undefined, undefined]
    console.log(move2()); // [0, 0]
}
复制代码

数值解构赋值

正则表达式

es5中

let regex = new RegExp('xyz','i');
    let regex2 = new RegExp(/xyz/i);
    console.log(regex.test('xyz123')); //true
    console.log(regex2.test('xyz123')); //true
复制代码

es6中可以将上两种写法杂合在一起

let regex3 = new RegExp(/xyz/ig,'i');//i会覆盖ig
    console.log(regex3.flags);//i  flags也是新增的,用于获取表达式范围
复制代码

y修饰符(全局查找,但是只能匹配第一个字符就找到的形式)

    let s = 'bbb_bb_b';
    let a1 = /b+/g;//全局 可以多次搜索 从上次找到的位置往后搜索
    let a2 = /b+/y;//全局 查找的第一个字符必须匹配

    console.log('one',a1.exec(s),a2.exec(s));//one ["bbb", index: 0, input: "bbb_bb_b", groups: undefined] ["bbb", index: 0, input: "bbb_bb_b", groups: undefined]
    console.log('two',a1.exec(s),a2.exec(s));//two ["bb", index: 4, input: "bbb_bb_b", groups: undefined] null
    console.log(a1.sticky,a2.sticky);//false true判断是否开启带y的表达式
    console.log(a1.test(s));//true
    console.log(a2.test(s));//false
复制代码

u修饰符(u表示Unicode 处理Unicode字符的匹配)

console.log('u-1',/^\uD83D/.test('\uD83D\uDC2A'));//true \uD83D\uDC2A四个字节被视为两个字符
    console.log('u-2',/^\uD83D/u.test('\uD83D\uDC2A'));//false 加u后\uD83D\uDC2A四个字节被视为一个字符

    console.log(/\u{61}/.test('a'));//false
    console.log(/\u{61}/u.test('a'));//true 加上u {}内的才会被认为是unicode

    console.log('\u{20BB7}');
    let s = '?';
    console.log('u',/^.$/.test(s));//false  .是任何字符,但是匹配不上
    console.log('u-2',/^.$/u.test(s));//true 加上u,能匹配,字符大于两个字节时,要加上u

    console.log('test',/?{2}/.test('??'));//false
    console.log('test',/?{2}/u.test('??'));//true
复制代码