ES6

let和const

  1. let和const有块级作用域
  2. 变量不能重复let定义
    let a = 1;
    let a = 2;//报错
复制代码
  1. const定义时就要赋值
  2. const常量名称应该是全大写
  3. 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.`
复制代码

解构赋值

  1. 数组结构赋值√
  • 直接赋值
    [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];
  1. 对象解构赋值√
  • 通过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. 字符串解构赋值
  2. 布尔值解构赋值
  3. 函数参数解构赋值√
{
    //  代码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]
}
复制代码
  1. 数值解构赋值

正则表达式

  1. 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也是新增的,用于获取表达式范围
复制代码
  1. 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
复制代码
  1. 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
复制代码
  1. s修饰符
    s修饰符 es6中没有实现 功能是处理换行等字符

转载于:https://juejin.im/post/5d09e5c26fb9a07f04204c76

评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符 “速评一下”
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页