1， ECMAScript 和 JavaScript 的关系
ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 JScript 和 ActionScript）
2，Babel 转码器
Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。下面是一个例子。
// 转码前
input.map(item => item + 1)
// 转码后
input.map(function (item) {
return item + 1
})
以上代码使用了箭头函数，Babel将其转为普通函数，就能在不支持箭头函数的JavaScript环境执行了
下面的命令在项目目录中，安装 Babel：
npm install --save-dev @babel/core
配置文件.babelrc
Babel 的配置文件是.babelrc，存放在项目的根目录下。使用 Babel 的第一步，就是配置这个文件。
该文件用来设置转码规则和插件，基本格式如下:
{
"presets": [],
"plugins": []
}
presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装:
// 最新转码规则
$ npm install --save-dev @babel/preset-env
// react 转码规则
$ npm install --save-dev @babel/preset-react
然后，将这些规则加入.babelrc:
{
"presets": [
"@babel/env",
"@babel/preset-react"
],
"plugins": []
}
注意，以下所有 Babel 工具和模块的使用，都必须先写好.babelrc
ES6重点内容一let和const命令
1, ❤ let
特点：1，只在let命令的代码块内有效也就是块级作用域
2，不存在变量提升
3，暂时性死区
4，不能重复声明
1,1只能在let命令的代码块内有效（块级作用域）
ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效:
{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined
b // 1
以上代码中，分别用let和var声明了两个变量，在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了争取的值，这表明，let声明的变量只在代码块内有效
for循环的计数器，很适合使用let命令：
for (let i = 0; i < 10; i++) {
// ....
}
console.log(i) // i is not defined
上面代码中，计数器i只在for循环体内有效，在循环体外引用就会报错
下面的代码如果使用var，最后输出的是10:
var a = []
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i)
}
}
a[6]() // 10
上面代码中，变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i。每一次循环，变量i的值都会发生改变，而循环内被赋给数组a的函数内部的console.log(i)，里面的i指向的就是全局的i。也就是说，所有数组a的成员里面的i，指向的都是同一个i，导致运行时输出的是最后一轮的i的值，也就是 10
如果使用let，声明的变量仅在块级作用域内有效，最后输出的是 6:
var a = []
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i)
}
}
a[6]() // 6
上面代码中，变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是6。你可能会问，如果每一轮循环的变量i都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。
另外，for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域：
for (let i = 0; i < 3; i++) {
let i = 'abc'
console.log(i)
}
// abc
// abc
// abc
上面代码正确运行，输出了 3 次abc。这表明函数内部的变量i与循环变量i不在同一个作用域，有各自单独的作用域。
function f1() {
let n = 5
if (true) {
let n = 10
}
console.log(n) // 5
}
上面的函数有两个代码块，都声明了变量n，运行后输出 5。这表示外层代码块不受内层代码块的影响。如果两次都使用var定义变量n，最后输出的值才是 10。
1.2 不存在变量提升
var命令会发生变量提升现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。
为了纠正这种现象，let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错:
// var 的情况
console.log(foo) // 输出undefined
var foo = 2
// let 的情况
console.log(bar) // 报错ReferenceError
let bar = 2
上面代码中，变量foo用var命令声明，会发生变量提升，即脚本开始运行时，变量foo已经存在了，但是没有值，所以会输出undefined。变量bar用let命令声明，不会发生变量提升。这表示在声明它之前，变量bar是不存在的，这时如果用到它，就会抛出一个错误。
1.3暂时性死区
只要块级作用域内存在let命令，它所声明的变量就绑定这个区域，不再受外部的影响:
var tmp = 123
if (true) {
tmp = 'abc' // ReferenceError
let tmp
}
上面代码中，存在全局变量tmp，但是块级作用域内let又声明了一个局部变量tmp，导致后者绑定这个块级作用域，所以在let声明变量前，对tmp赋值会报错。
ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。
总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（简称 TDZ）。
if (true) {
// TDZ开始
tmp = 'abc' // ReferenceError
console.log(tmp) // ReferenceError
let tmp // TDZ结束
console.log(tmp) // undefined
tmp = 123
console.log(tmp) // 123
}
上面代码中，在let命令声明变量tmp之前，都属于变量tmp的死区
1.4不允许重复声明
let不允许在相同作用域内，重复声明同一个变量:
// 报错
function func() {
let a = 10
var a = 1
}
// 报错
function func() {
let a = 10
let a = 1
}
因此，不能在函数内部重新声明参数:
function func(arg) {
let arg
}
func() // 报错
function func(arg) {
{
let arg
}
}
func() // 不报错
2. ❤ const命令
特点： 1，const用来声明一个常量，一旦声明，常量的值不能改变
2，const一旦声明变量，就必须立即初始化，不能留到以后赋值
3，只在声明所在的块级作用域内有效
4，const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用
5，const声明的常量，也与let一样不可重复声明
2.1const用来声明一个常量，一旦声明，常量的值不能改变
const PI = 3.1415
PI // 3.1415
PI = 3
// TypeError: Assignment to constant variable
2.2 const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。
const foo
// SyntaxError: Missing initializer in const declaration
上面代码表示，对于const来说，只声明不赋值，就会报错。
2.3 const的作用域与let命令相同：只在声明所在的块级作用域内有效。
if (true) {
const MAX = 5
}
MAX // Uncaught ReferenceError: MAX is not defined
2.4const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。
if (true) {
console.log(MAX) // ReferenceError
const MAX = 5
}
上面代码在常量MAX声明之前就调用，结果报错。
2.5 const声明的常量，也与let一样不可重复声明
var message = "Hello!"
let age = 25
// 以下两行都会报错
const message = "Goodbye!"
const age = 30
3. ❤ ES6 声明变量的六种方法
ES5 只有两种声明变量的方法：var命令和function命令。ES6 除了添加let和const命令，后面章节还会提到，另外两种声明变量的方法：import命令和class命令。所以，ES6 一共有 6 种声明变量的方法。
4, ❤ 变量的解构赋值
4.1数组的解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构
以前，为变量赋值，只能直接指定值。
注：1，本质上就是模式匹配,
2，接口不成功的话 变量值等于undefined
3，不完全解构（即等号左边的模式，只匹配一部分等号右边的数组），但是可以解构成功
4，解构赋值允许指定默认值
let a = 1
let b = 2
let c = 3
ES6允许下成下面这样
let [a, b, c] = [1, 2, 3]
上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。
本质上，这种写法属于模式匹配，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。
let [foo, [[bar], baz]] = [1, [[2], 3]]
foo // 1
bar // 2
baz // 3
let [ , , third] = ["foo", "bar", "baz"]
third // "baz"
let [x, , y] = [1, 2, 3]
x // 1
y // 3
let [head, ...tail] = [1, 2, 3, 4]
head // 1
tail // [2, 3, 4]
let [x, y, ...z] = ['a']
x // "a"
y // undefined
z // []
如果解构不成功，变量的值就等于undefined
let [foo] = []
let [bar, foo] = [1]
以上两种情况都属于解构不成功，foo的值都会等于undefined。
另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功:
let [x, y] = [1, 2, 3]
x // 1
y // 2
let [a, [b], d] = [1, [2, 3], 4]
a // 1
b // 2
d // 4
上面两个例子，都属于不完全解构，但是可以成功。
解构赋值允许指定默认值：
let [foo = true] = []
foo // true
let [x, y = 'b'] = ['a'] // x='a', y='b'
let [x, y = 'b'] = ['a', undefined] // x='a', y='b'
注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。
let [x = 1] = [undefined]
x // 1
let [x = 1] = [null]
x // null
上面代码中，如果一个数组成员是null，默认值就不会生效，因为null不严格等于undefined。
4.2对象的解构赋值
let { foo, bar } = { foo: 'aaa', bar: 'bbb' }
foo // "aaa"
bar // "bbb"
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
let { bar, foo } = { foo: 'aaa', bar: 'bbb' }
foo // "aaa"
bar // "bbb"
let { baz } = { foo: 'aaa', bar: 'bbb' }
baz // undefined
上面代码的第一个例子，等号左边的两个变量的次序，与等号右边两个同名属性的次序不一致，但是对取值完全没有影响。第二个例子的变量没有对应的同名属性，导致取不到值，最后等于undefined。
如果解构失败，变量的值等于undefined。
let {foo} = {bar: 'baz'}
foo // undefined
上面代码中，等号右边的对象没有foo属性，所以变量foo取不到值，所以等于undefined。
对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量。
const { log } = console
log('hello') // hello
以上代码将console.log赋值到log变量。
如果变量名与属性名不一致，必须写成下面这样：
let { foo: baz } = { foo: 'aaa', bar: 'bbb' }
baz // "aaa"
let obj = { first: 'hello', last: 'world' }
let { first: f, last: l } = obj
f // 'hello'
l // 'world'
这实际上说明，对象的解构赋值是下面形式的简写:
let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' }
也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
let { foo: baz } = { foo: 'aaa', bar: 'bbb' }
baz // "aaa"
foo // error: foo is not defined
上面代码中，foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。
对象的解构也可以指定默认值:
var {x = 3} = {}
x // 3
var {x, y = 5} = {x: 1}
x // 1
y // 5
var {x: y = 3} = {}
y // 3
var {x: y = 3} = {x: 5}
y // 5
var { message: msg = 'Something went wrong' } = {}
msg // "Something went wrong"
默认值生效的条件是，对象的属性值严格等于undefined
var {x = 3} = {x: undefined}
x // 3
var {x = 3} = {x: null}
x // null
上面代码中，属性x等于null，因为null与undefined不严格相等，所以是个有效的赋值，导致默认值3不会生效。
4.3 字符串的解构赋值
字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。
const [a, b, c, d, e] = 'hello'
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。
let {length : len} = 'hello'
len // 5
4.4数值和布尔值的解构赋值
解构赋值时，如果等号右边是数值和布尔值，则会先转为对象
let {toString: s} = 123
s === Number.prototype.toString // true
let {toString: s} = true
s === Boolean.prototype.toString // true
上面代码中，数值和布尔值的包装对象都有toString属性，因此变量s都能取到值。
解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。
let { prop: x } = undefined // TypeError
let { prop: y } = null // TypeError
4.5函数参数的解构赋值
函数的参数也可以使用解构赋值
function add([x, y]){
return x + y
}
add([1, 2]) // 3
上面代码中，函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，它们能感受到的参数就是x和y。
下面是另一个例子:
[[1, 2], [3, 4]].map(([a, b]) => a + b) // [ 3, 7 ]
例子：
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
}
let { id, status, data: number } = jsonData
console.log(id, status, number)
// 42, "OK", [867, 5309]
5, ❤ 字符串的扩展
5.1字符串的遍历器接口
ES6 为字符串添加了遍历器接口，使得字符串可以被for...of循环遍历。
for (let codePoint of 'foo') {
console.log(codePoint)
}
// "f"
// "o"
// "o"
5.2模板字符串
传统的 JavaScript 语言，输出模板通常是这样写的
$('#result').append(
'There are <b>' + basket.count + '</b> '
)
上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题:
$('#result').append(
`There are <b>${basket.count}</b>`
)
模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量
由于模板字符串的大括号内部，就是执行 JavaScript 代码，因此如果大括号内部是一个字符串，将会原样输出:
`hello ${'world'}` // hello world
6，❤ 字符串的新增方法
6.1实例方法：includes(), startsWith(), endsWith()
传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法:
- includes()：返回布尔值，表示是否找到了参数字符串
- startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部
- endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部
let s = 'Hello world!'
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
这三个方法都支持第二个参数，表示开始搜索的位置
let s = 'Hello world!'
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
上面代码表示，使用第二个参数n时，endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束
6.2repeat()
repeat方法返回一个新字符串，表示将原字符串重复n次
'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
参数如果是小数，会被取整:
'na'.repeat(2.9) // "nana"
如果repeat的参数是负数或者Infinity，会报错
'na'.repeat(Infinity)
// RangeError
'na'.repeat(-1)
// RangeError
但是，如果参数是 0 到-1 之间的小数，则等同于 0，这是因为会先进行取整运算。0 到-1 之间的小数，取整以后等于-0，repeat视同为 0。
'na'.repeat(-0.9) // ""
参数NaN等同于 0
'na'.repeat(NaN) // ""
6.3 padStart()，padEnd()
ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'
上面代码中，padStart()和padEnd()一共接受两个参数，第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串。
如果原字符串的长度，等于或大于最大长度，则字符串补全不生效，返回原字符串。
'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'
如果用来补全的字符串与原字符串，两者的长度之和超过了最大长度，则会截去超出位数的补全字符串:
'abc'.padStart(10, '0123456789')
// '0123456abc'
如果省略第二个参数，默认使用空格补全长度:
'x'.padStart(4) // ' x'
'x'.padEnd(4) // 'x '
6.4trimStart()，trimEnd()
ES2019 对字符串实例新增了trimStart()和trimEnd()这两个方法。它们的行为与trim()一致，trimStart()消除字符串头部的空格，trimEnd()消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串
const s = ' abc '
s.trim() // "abc"
s.trimStart() // "abc "
s.trimEnd() // " abc"
上面代码中，trimStart()只消除头部的空格，保留尾部的空格。trimEnd()也是类似行为。
6.5Number.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
这样做的目的，是逐步减少全局性方法，使得语言逐步模块化。
Number.parseInt === parseInt // true
Number.parseFloat === parseFloat // true
6.6Number.isInteger()
用来判断一个数值是否为整数
Number.isInteger(25) // true
Number.isInteger(25.1) // false
如果参数不是数值，Number.isInteger返回false。
Number.isInteger() // false
Number.isInteger(null) // false
Number.isInteger('15') // false
Number.isInteger(true) // false
6.7Math 对象的扩展
6.7.1Math.trunc() 用来去除一个数的小数部分，返回整数部分
Math.trunc(4.1) // 4
Math.trunc(4.9) // 4
Math.trunc(-4.1) // -4
Math.trunc(-4.9) // -4
Math.trunc(-0.1234) // -0
对于非数值，Math.trunc内部使用Number方法将其先转为数值:
Math.trunc('123.456') // 123
Math.trunc(true) //1
Math.trunc(false) // 0
Math.trunc(null) // 0
对于空值和无法截取整数的值，返回NaN:
Math.trunc(NaN) // NaN
Math.trunc('foo') // NaN
Math.trunc() // NaN
Math.trunc(undefined) // NaN
其他6个一般用不着，这里就 不写了
6.8Number.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
7，❤ 函数的扩展
1，函数的参数可以设置默认值
2，
7.1函数的参数可以设置默认值
function log(x, y = 'World') {
console.log(x, y)
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
网友评论