网站首页 » 前端开发 » JavaScript » 《ES6 标准入门》查缺补漏
上一篇:
下一篇:

《ES6 标准入门》查缺补漏

前言

这篇文章主要是对第一次阅读 《ES6 标准入门》 完了之后一些疏漏或者遗忘的知识点进行查缺补漏,尽管这一次也不可能把所有的知识都都补上,那至少补上了一些。本文不会一次更新完,时间也不允许,只能在空闲的琐碎时间一章一章地回味。并且像这种也不可以操作之过急,得一步一个脚印。

第2章:let 和 const 命令

1、关于 let , 在 for 循环中,循环变量部分为一个父作用域,循环体内部是一个单独的子作用域。

let i;
for(let i=0;i<5;i++){
    let i = '云库网';
    console.log(i);
}

像上面的例子会打印出五个云库网,三处声明了同一个变量 i,都没有提示:

报错信息

Uncaught SyntaxError: Identifier ‘i’ has already been declared

说明,三个变量声明都是没问题的。

2、隐蔽的死区

function fn(x=y,y=2){
    return [x,y]
}

会提示:

报错信息

Uncaught ReferenceError: y is not defined

因为 y 在赋值的时候还没被声明。

3、严格模式下 if 语句一定要加中括号,否则会报错

'use strict';
if(true)
{
    function you() {}
}
报错信息

Uncaught SyntaxError: In strict mode code, functions can only be declared at top level or immediately within another function.

const 声明变量时必需同时初始化,说值不可变只是单纯的值不可变,如果是对象,对象里的属性和属性值是可变的。

4、严格模式下,函数内的 this 为 undefined

'use strict';
function you() {
    console.log(this);
}

但 new Function(‘return this’)() 不管在普通模式下,还是严格模式下都总是返回 window 对象

var _this = new Function('return this')()
console.log(_this);

5、在浏览器和 Web Worker 中,self 也指向顶层对象

第3 章:变量的解构赋值

1、数组成员要严格等于 undefined,默认值才会生效,比如下面的解构赋值的默认值就不会生效:

let [x=1]=[null]
console.log(x); // null

2、数值和布尔值的解构赋值时,会先转为对象,比如:

let{toString:s} = 123;

3、undefined 和 null 无法转为对象所以对它们进行解构赋值时都会报错:

报错信息

Uncaught TypeError: Cannot match against ‘undefined’ or ‘null’.

4、函数解构赋值好示例

// 例子一:
function move({x=0,y=0} = {}){
    console.log([x,y]);
}
move({x:3,y:8}); //[3, 8]
move({x:3}); //[3, 0]
move({}); // [0, 0]
move(); // [0, 0]

// 例子二:
function move({x,y} = {x:0,y:0}){
    console.log([x,y]);
}
move({x:3,y:8}); //[3, 8]
move({x:3}); //[3, undefined]
move({}); //[undefined, undefined]
move(); // [0, 0]

注意例子一和例子二在解构赋值时的写法不一样,导致了打印出来的结构也不一样,那么上面这两种写法要怎么理解呢?

我相信你一定有用过下面这种写法来给变量赋值:

let x = y || 0;
console.log(x); // 0

在 y 有定义但未被初始化(值相当于 false)时,x 的值就是取后者。这是一种常见的设置默认值的方法。

当然了,直接运行上面的代码是会报错的:

报错信息

Uncaught ReferenceError: y is not defined

因为我们的 y 值还没定义,你可以声明一下变量 y,比如:let y 。

其实上面的解构赋值跟这种设置默认值的原理是一样的,只不过有一个优先级的问题,也就是说,你传入参数优先作为解构赋值。

我们就拿例子一来说:

当执行 move({x:3,y:8})时,解构赋值相当于下面这样:

let {x=0,y=0} = {x:3,y:8} || {}

再比如:调用 move();时,没有传参数,即为 undefined,此时解构赋值就相当于下面这样:

let {x=0,y=0} = undefined || {}

也就是简化成这样:

let {x=0,y=0} = {}

现在你再使用解构赋值的原理再来解构,你就知道为什么 x,y 的值都为 0 了。

第4章:字符串的扩展

codePointAt():返回一个字符的码点的十进制,用来处理 4 个字节的字符,可以认为它是 charCodeAt() 的增强版本。

String.fromCodePoint() 用于从码点返回对应的字符,可以识别大于 0xFFFF 的字符,可以认为它是 String.fromCharCode() 的增强版本。

ES6 新增了字符串遍历器接口,使得字符串可以由 for…of 循环遍历,并且 for…of 可以识别大于 0xFFFF 的码点。

normalize() 用于Unicode 正规化,用来将字符的不同表示方法统一为同样的形式。

inclues() 返回布尔值,表示是否找到了参数字符串。

startsWith() 返回布尔值,表示参数字符串是否在源字符串的头部。

endsWith() 返回布值,表示参数字符串是否在源字符串的尾部。

repeat() 方法返回一个新的字符串,表示将原字符串重复 n 次。

padStart() 用于头部补全。

padEnd() 用于尾部补全。

String.raw() ,此方法可以充当字符串的处理函数,返回一个反斜线都被转义的字符串,除此这处,它还可以充当正常的函数来使用,第一个参数为具有 raw 属性的对象同,且 raw 属性的值应该是一个数组。

第5章:正则的扩展

以前写法有两种:

var regex = new RegExp('xyz','i');
var regex = /xyz/i;

ES6 新增一种写法

var regex = new RegExp(/xyz/ig,'i')

如果传了第二个参数,则会覆盖前面的修饰符, 其实这种方法就是 ES5 中写法的升级版,我觉得这种方法可以就是为了容错而新增的,ES6 中你就可以用任何姿势写正则,妈妈再也不用担心我的姿势不对了。

新增 3个修改符

u 修改符,表示 Unicode 模式,用于处理大于 \uFFFF 的 Unicode 字符。

y 修饰符,“粘连”,后一次匹配都从上一次匹配成功的下一个位置开始。

s 修改符,让点(.)可以匹配任意单个字符。

先行断言|先行否定断言:匹配模式在前,条件在后。

后行断言|后行不定断言:条件在前,匹配模式在后。

先行断言|先行否定断言例子说明
/\d+(?=%)/
// 先行断言,匹配模式\d+,条件(?=%),匹配多个数字但数字最后一定要有%
/\d+(?!%)/
// 先行否定断言,匹配模式\d+,条件(?!%),匹配多个数字但数字最后没有%

关于正则的最后一个就是具名组匹配,这个我个人觉得很实用。给圆括号匹配的组添加一个名字,让匹配组更便于阅读理解,并且匹配组改变了,也无需跟着修改调用。

具名组匹配示例
const RE_DATE = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const matchObj = RE_DATE.exec('2018-12-31');
const year = matchObj.group.year; // 2018
const month = matchObj.group.month; //12
const day= matchObj.group.day; //31

有了这个具名,我们就可以很方便地通过解构赋值来取匹配到的值了。

比如上面匹配到的 matchObj:

let {groups:{year,month,day}} = matchObj;
//这样就可以得到 year=2018;month=12;day=31 了

具名引用,可以使用\k<组名>,比如下面:

const RE_TWICE = /^(?<word>[a-z]+)!\k<word>$/
RE_TWICE.test('abc!abc') //true

持续更新……

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/es6-primer-check-missing-patch/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END