ES6学习

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

---

转换器还有Google公司的Traceur转换器，也可以将ES6转换成ES5,需要了解的可以到阮一峰ES6学习

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 ' + basket.count + ' ' 
)

上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题:

$('#result').append(
  `There are ${basket.count}`
)

模板字符串（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

7.2函数允许使用箭头 （=>）定义函数