ECMAScript 6 笔记

Posted 2020-08-29 超然haha

ES6中的基本扩展

一、字符串的扩展

　　1. 字符的Unicode表示法

　　用两个双字节的形式表达字符时，如果直接在\u后面跟上超过0xFFFF的数值（比如\u20BB7），javascript会理解成\u20BB+7。由于\u20BB是一个不可打印字符，所以只会显示一个空格，后面跟着一个7。

　　ES6 对这一点做出了改进，只要将码点放入大括号，就能正确解读该字符。

"\u{20BB7}"
// "??"

"\u{41}\u{42}\u{43}"
// "ABC"

　　2. codePointAt()

　　JavaScript内部，字符以UTF-16的格式储存，每个字符固定为2个字节。对于那些需要4个字节储存的字符（Unicode码点大于0xFFFF的字符），JavaScript会认为它们是两个字符。

var s = "??";

s.length // 2
s.charAt(0) // ‘‘
s.charAt(1) // ‘‘
s.charCodeAt(0) // 55362
s.charCodeAt(1) // 57271

　　对于这种4个字节的字符，JavaScript不能正确处理，字符串长度会误判为2，而且charAt方法无法读取整个字符，charCodeAt方法只能分别返回前两个字节和后两个字节的值。

　　ES6提供了codePointAt方法，能够正确处理4个字节储存的字符，返回一个字符的码点。

 

var s = ‘??a‘;

s.codePointAt(0) // 134071
s.codePointAt(1) // 57271

s.codePointAt(2) // 97

 

　　codePointAt方法的参数，是字符在字符串中的位置（从0开始）。上面代码中，JavaScript将“??a”视为三个字符，codePointAt方法在第一个字符上，正确地识别了“??”，返回了它的十进制码点134071（即十六进制的20BB7）。在第二个字符（即“??”的后两个字节）和第三个字符“a”上，codePointAt方法的结果与charCodeAt方法相同。

　　codePointAt方法会正确返回32位的UTF-16字符的码点。对于那些两个字节储存的常规字符，它的返回结果与charCodeAt方法相同。

 　　codePointAt方法返回的是码点的十进制值，如果想要十六进制的值，可以使用toString方法转换一下。

　　codePointAt方法是测试一个字符由两个字节还是由四个字节组成的最简单方法。

function is32Bit(c) {
  return c.codePointAt(0) > 0xFFFF;
}

is32Bit("??") // true
is32Bit("a") // false

 

　　3. String.fromCodePoint()

　　ES5提供String.fromCharCode方法，用于从码点返回对应字符，但是这个方法不能识别32位的UTF-16字符（Unicode编号大于0xFFFF）。

　　ES6提供了String.fromCodePoint方法，可以识别0xFFFF的字符

String.fromCodePoint(0x20BB7)
// "??"
String.fromCodePoint(0x78, 0x1f680, 0x79) === ‘x\uD83D\uDE80y‘
// true

 

　　4. 字符串的遍历器接口

for (let codePoint of ‘foo‘) {
  console.log(codePoint)
}
// "f"
// "o"
// "o"

 

　　除了遍历字符串，这个遍历器最大的优点是可以识别大于0xFFFF的码点，传统的for循环无法识别这样的码点。

var text = String.fromCodePoint(0x20BB7);

for (let i = 0; i < text.length; i++) {
  console.log(text[i]);
}
// " "
// " "

for (let i of text) {
  console.log(i);
}
// "??"

 

　　上面代码中，字符串text只有一个字符，但是for循环会认为它包含两个字符（都不可打印），而for...of循环会正确识别出这一个字符。

　　5. at()

　　ES5对字符串对象提供charAt方法，返回字符串给定位置的字符。该方法不能识别码点大于0xFFFF的字符。

　　ES6字符串at方法

‘abc‘.charAt(0) // "a"
‘??‘.charAt(0) // "\uD842"

‘abc‘.at(0) // "a"
‘??‘.at(0) // "??"

 　　6. normalize()

　　7. includes(), startsWith(), endsWith() 

　　JavaScript只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6又提供了三种新方法。

• includes()：返回布尔值，表示是否找到了参数字符串。
• startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。
• endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。

　　这三个方法都支持第二个参数，表示开始搜索的位置。

var s = ‘Hello world!‘;

s.startsWith(‘world‘, 6) // true
s.endsWith(‘Hello‘, 5) // true
s.includes(‘Hello‘, 6) // false

 

　　使用第二个参数n时，endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。

　　8. repeat()

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

　　参数如果是小数，会被取整。

　　如果repeat的参数是负数或者Infinity，会报错。

　　但是，如果参数是0到-1之间的小数，则等同于0，这是因为会先进行取整运算。0到-1之间的小数，取整以后等于-0，repeat视同为0。

　　参数NaN等同于0。

　　如果repeat的参数是字符串，则会先转换成数字。

‘x‘.repeat(3) // "xxx"
‘hello‘.repeat(2) // "hellohello"
‘na‘.repeat(0) // ""

 

　　9. padStart()，padEnd()

　　　ES7推出了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart用于头部补全，padEnd用于尾部补全。

‘x‘.padStart(5, ‘ab‘) // ‘ababx‘
‘x‘.padStart(4, ‘ab‘) // ‘abax‘

‘x‘.padEnd(5, ‘ab‘) // ‘xabab‘
‘x‘.padEnd(4, ‘ab‘) // ‘xaba‘

 

　　10. 模板字符串

//传统JavaScript语言
$(‘#result‘).append(
  ‘There are <b>‘ + basket.count + ‘</b> ‘ +
  ‘items in your basket, ‘ +
  ‘<em>‘ + basket.onSale +
  ‘</em> are on sale!‘
);

//es6引入了模板字符串

$(‘#result‘).append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

 

　　模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

// 普通字符串
`In JavaScript ‘\n‘ is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

 　　如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。

var greeting = `\`Yo\` World!`;

 

　　如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。比如<ul>标签前面会有一个换行。如果你不想要这个换行，可以使用trim方法消除它。

$(‘#list‘).html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`.trim());

　　模板字符串中嵌入变量，需要将变量名写在${}之中。

function authorize(user, action) {
  if (!user.hasPrivilege(action)) {
    throw new Error(
      // 传统写法为
      // ‘User ‘
      // + user.name
      // + ‘ is not authorized to do ‘
      // + action
      // + ‘.‘
      `User ${user.name} is not authorized to do ${action}.`);
  }
}

 

　　大括号内部可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性。

　　模板字符串之中还能调用函数。

　　如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法。

　　模板字符串甚至还能嵌套。

var x = 1;
var y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

var obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// 3

//调用函数
function fn() {
  return "Hello World";
}

`foo ${fn()} bar`
// foo Hello World bar

 

　　11. 模板编译

　　比较复杂，用到时查阅相关例子

 

二、正则的扩展

 　　在ES5中，RegExp构造函数的参数有两种情况。

　　第一种情况是，参数是字符串，这时第二个参数表示正则表达式的修饰符（flag）。

　　flag：

g ---表示全局模式，及模式将应用与所有字符串，而非发现的第一个匹配项的大小写

i ---表示不区分别大小写模式，即在确定匹配时忽略模式与字符串的大小写

m---表示多行模式，即在到达一行文本末尾时还会继续查找下一行中是否存在模式匹配的项

　　未完待续。。。

三、数值的扩展

　　1. 二进制和八进制表示法

　　ES6提供了二进制和八进制数值的新的写法，分别用前缀0b（或0B）和0o（或0O）表示。

0b111110111 === 503 // true
0o767 === 503 // true

 

　　如果要将0b和0o前缀的字符串数值转为十进制，要使用Number方法。

Number(‘0b111‘)  // 7
Number(‘0o10‘)  // 8

 

　　2. Number.isFinite(), Number.isNaN()

　　ES6在Number对象上，新提供了Number.isFinite()和Number.isNaN()两个方法。

　　Number.isFinite()用来检查一个数值是否为有限的（finite）。

Number.isFinite(15); // true
Number.isFinite(0.8); // true
Number.isFinite(NaN); // false
Number.isFinite(Infinity); // false
Number.isFinite(-Infinity); // false
Number.isFinite(‘foo‘); // false
Number.isFinite(‘15‘); // false
Number.isFinite(true); // false

 

　　Number.isNaN()用来检查一个值是否为NaN。

Number.isNaN(NaN) // true
Number.isNaN(15) // false
Number.isNaN(‘15‘) // false
Number.isNaN(true) // false
Number.isNaN(9/NaN) // true
Number.isNaN(‘true‘/0) // true
Number.isNaN(‘true‘/‘true‘) // true

 

　　它们与传统的全局方法isFinite()和isNaN()的区别在于，传统方法先调用Number()将非数值的值转为数值，再进行判断，而这两个新方法只对数值有效，非数值一律返回false。

isFinite(25) // true
isFinite("25") // true
Number.isFinite(25) // true
Number.isFinite("25") // false

isNaN(NaN) // true
isNaN("NaN") // true
Number.isNaN(NaN) // true
Number.isNaN("NaN") // false

 

　　3. Number.parseInt(), Number.parseFloat()

　　ES6将全局方法parseInt()和parseFloat()，移植到Number对象上面，行为完全保持不变。

// ES5的写法
parseInt(‘12.34‘) // 12
parseFloat(‘123.45#‘) // 123.45

// ES6的写法
Number.parseInt(‘12.34‘) // 12
Number.parseFloat(‘123.45#‘) // 123.45

　　4. Number.isInteger()

　　Number.isInteger()用来判断一个值是否为整数。需要注意的是，在JavaScript内部，整数和浮点数是同样的储存方法，所以3和3.0被视为同一个值。

　　5. Number.EPSILON

　　ES6在Number对象上面，新增一个极小的常量Number.EPSILON。

Number.EPSILON
// 2.220446049250313e-16
Number.EPSILON.toFixed(20)
// ‘0.00000000000000022204‘

　　引入一个这么小的量的目的，在于为浮点数计算，设置一个误差范围。

　　但是如果这个误差能够小于Number.EPSILON，我们就可以认为得到了正确结果。Number.EPSILON的实质是一个可以接受的误差范围。

5.551115123125783e-17 < Number.EPSILON
// true

　　6. 安全整数和Number.isSafeInteger() 

　　用来判断一个整数是否落在-2^53到2^53之间

　　7. Math对象的扩展

　　Math.trunc():用于去除一个数的小数部分，返回整数部分。

　　对于非数值，Math.trunc内部使用Number方法将其先转为数值。

　　对于空值和无法截取整数的值，返回NaN。

　　Math.sign():判断一个数到底是正数、负数、还是零。

　　它会返回五种值:

• 参数为正数，返回+1；
• 参数为负数，返回-1；
• 参数为0，返回0；
• 参数为-0，返回-0;
• 其他值，返回NaN。

　　Math.cbrt():计算一个数的立方根

　　未完待续。。。

　　8. 指数运算符

　　ES7新增了一个指数运算符（**），目前Babel转码器已经支持。

　　指数运算符可以与等号结合，形成一个新的赋值运算符（**=）。

2 ** 2 // 4
2 ** 3 // 8

let a = 2;
a **= 2;
// 等同于 a = a * a;

let b = 3;
b **= 3;
// 等同于 b = b * b * b;

 

三、数组的扩展

　　1. Array.from() 

　　用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。

　　2.Array.of()

　　将一组值，转换为数组

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

 

　　这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

 

　　上面代码中，Array方法没有参数、一个参数、三个参数时，返回结果都不一样。只有当参数个数不少于2个时，Array()才会返回由参数组成的新数组。参数个数只有一个时，实际上是指定数组的长度。Array.of基本上可以用来替代Array()或new Array()，并且不存在由于参数不同而导致的重载。它的行为非常统一。

　　Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组。

　　3. 数组实例的copyWithin()

　　4. 数组实例的find()和findIndex()

　　数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

　　5. 数组实例的fill()

　　fill方法使用给定值，填充一个数组。

[‘a‘, ‘b‘, ‘c‘].fill(7)
// [7, 7, 7]

new Array(3).fill(7)
// [7, 7, 7]

 

　　fill方法用于空数组的初始化非常方便。数组中已有的元素，会被全部抹去。

　　fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。

[‘a‘, ‘b‘, ‘c‘].fill(7, 1, 2)
// [‘a‘, 7, ‘c‘]

 

　　6. 数组实例的entries()，keys()和values() 

for (let index of [‘a‘, ‘b‘].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of [‘a‘, ‘b‘].values()) {
  console.log(elem);
}
// ‘a‘
// ‘b‘

for (let [index, elem] of [‘a‘, ‘b‘].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

 

　　如果不使用for...of循环，可以手动调用遍历器对象的next方法，进行遍历。

let letter = [‘a‘, ‘b‘, ‘c‘];
let entries = letter.entries();
console.log(entries.next().value); // [0, ‘a‘]
console.log(entries.next().value); // [1, ‘b‘]
console.log(entries.next().value); // [2, ‘c‘]

 

　　7. 数组实例的includes() 

　　Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, NaN].includes(NaN); // true

 

　　该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

　　下面代码用来检查当前环境是否支持该方法，如果不支持，部署一个简易的替代版本。

const contains = (() =>
  Array.prototype.includes
    ? (arr, value) => arr.includes(value)
    : (arr, value) => arr.some(el => el === value)
)();
contains(["foo", "bar"], "baz"); // => false

 

　　8. 数组的空位

　　数组的空位指，数组的某一个位置没有任何值。比如，Array构造函数返回的数组都是空位。

Array(3) // [, , ,]

 

　　注意，空位不是undefined，一个位置的值等于undefined，依然是有值的。空位是没有任何值，in运算符可以说明这一点。

0 in [undefined, undefined, undefined] // true
0 in [, , ,] // false

 

　　由于空位的处理规则非常不统一，所以建议避免出现空位。

　　9. ES6 中的 Set、Map 和 WeakMap

　　set

　　Set 是 ES6 新增的有序列表集合，它不会包含重复项。之前我们通常用对象（Object）或者数组（Array）来实现没有重复项的集合。

　　Set 支持 add(item) 方法，用来向 Set 添加任意类型的元素，如果已经添加过则自动忽略；has(item) 方法用来检测 Set 中是否存在指定元素；delete(item) 方法用来从 Set 中删除指定元素；clear() 用来清空 Set；获取 Set 集合长度用 size 属性

var set = new Set();
set.add(window);
set.has(window); // true
set.size; // 1
set.add(window);
set.add(1);
set.size; // 2
set.delete(window);
set.has(window); // false
set.clear();
set.size; // 0

 

　　map

　　Map 是 ES6 新增的有序键值对集合。键值对的 key 和 value 都可以是任何类型的元素。通过 set(key, value) 方法为 Map 设置新的键值对，如果设置的 key 已经存在则用新的 value 覆盖，Map 在比较 key 时也不做类型转换，跟 Set 类似；Map 的 get(key) 方法用来获取指定 key 的值；Map 的 has(key) 、 delete(key) 、clear() 这些方法和 size 属性，与 Set 类似

　　

var map = new Map();
var key1 = {toString : function() { return 2}};
var key2 = 2;
map.set(key1, 1);
map.set(key2, 2);

map.has(key1); // true
map.has(‘2‘); // false，类型不同
map.delete(2);
map.size; // 1
map.get(key2); // undefined

 

　　迭代

　　可以用 ES6 提供的新方法 for...of 来遍历它们。

　　Set 和 Map 有几个方法会返回可迭代对象（Iterator Objects），分别是 entries()、keys() 和 values()。直接遍历 Set/Map，等同于遍历 entries()；keys() 和 values() 则分别返回 key 和 value 的集合；对于 Set，key 和 value 是一样的。这些方法和 for...of 现阶段都只有 Firefox 支持，下面的例子需要在 Firefox 下运行

　　

var set = new Set();
set.add(‘this is a demo.‘);
set.add(window);
set.add(top);

for(let item of set) {
    console.log(item);
}