ES6、7、8、9新语法新特性

前言

如果你擅长这种扩散式学习方式，不妨再进一步温习一下整个 ES6 引入的新特性，笔者强烈推荐阮一峰老师的 ECMAScript 6 入门 一书。

ES2018 引入的特性还太新，单在对 ES6 特性的使用应该和对 ES3 一样熟练。

如果你身边的小伙伴还对 ES6 特性感到惊讶，请把这篇文章分享给他，防止退化为 “只剩项目经验的 JS 入门者”。

1、let和const命令

let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

{
  let a = 10;
  var b = 1;
}
a // ReferenceError: a is not defined.

const声明一个只读的常量。一旦声明，常量的值就不能改变。

const PI = 3.1415;
PI // 3.1415
PI = 3;
// TypeError: Assignment to constant variable

2、变量的解构赋值

基本用法

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

（1）数组的解构赋值

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo //
bar //
baz //
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
let [x, , y] = [1, 2, 3];
x //
y //
let [head, ...tail] = [1, 2, 3, 4];
head //
tail // [2, 3, 4]
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

（2）对象的解构赋值

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

(3)字符串的解构赋值

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

（4）数值和布尔值的解构赋值

解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。

let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true

（5）函数参数的解构赋值

[[1, 2], [3, 4]].map(([a, b]) => a + b);
// [ 3, 7 ]
function add([x, y]){
  return x + y;
}
add([1, 2]); //

3、字符串的扩展

API：

• codePointAt()：能够正确处理4个字节储存的字符，返回一个字符的码点
• String.fromCodePoint()：用于从码点返回对应字符，但是这个方法不能识别32位的UTF-16字符
• at()：返回字符串给定位置的字符。该方法不能识别码点大于0xFFFF的字
• normalize()：用来将字符的不同表示方法统一为同样的形式，这称为Unicode正规化。
• includes()：返回布尔值，表示是否找到了参数字符串。
• startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部
• endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。
• repeat()：返回一个新字符串，表示将原字符串重复n次。
• padStart(）padEnd()：如果某个字符串不够指定长度，会在头部或尾部补全。padStart用于头部补全，padEnd用于尾部补全。

（1）字符的Unicode表示法

只要将码点放入大括号，就能正确解读该字符。

"\u{20BB7}"
// "