ECMAScript 6 笔记（二）

时间 2019-11-24

原文原文链接

ES6中的基本扩展

1、字符串的扩展

　　1. 字符的Unicode表示法

　　用两个双字节的形式表达字符时，若是直接在\u后面跟上超过0xFFFF的数值（好比\u20BB7），JavaScript会理解成\u20BB+7。因为\u20BB是一个不可打印字符，因此只会显示一个空格，后面跟着一个7。html

　　ES6 对这一点作出了改进，只要将码点放入大括号，就能正确解读该字符。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方法相同。app

　　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）。this

　　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. 模板编译

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

2、正则的扩展

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

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

　　flag：

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

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

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

　　未完待续。。。

3、数值的扩展

　　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;

3、数组的扩展

　　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);
}