指导书籍：ES6入门教程

简介

ECMAScript 6.0是 JavaScript 语言的下一代标准
- Ecmascript 是 JavaScript 语言的标注规范
- JavaScript 是 Ecmascript 规范的具体实现
Babel转码器（后面会讲到）

Babel是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。

let命令

块级作用域

let命令类似于var，但是它遵守块级作用域（一般在局部作用域中，var声明的变量在外部是可以访问的到的）

{
    var a = 1
    let b = 2
}

console.log(a)  //1
console.log(b) //b is not defined

a会正常输出，b会报错，即表明let只在块级作用域才会有效（for循环便可使用该命令防止命名污染）

作用

防止内层变量覆盖外层变量
防止计数的循环变量泄露为全局变量（for循环以及其它循环）

不存在变量提升

var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。
let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。

暂时性死区

var a = 2
if (true) {
    a = 3
    let a
}

在上面的代码中，已经在全局变量中声明了一个a，同时在块级作用域内为其赋值，但是因为在块级作用域中同时又声明了一个let命令的a,所以就产生了暂时性死区，这时对a的赋值就会报错

总结

在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）
如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错
暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

不允许重复声明

let在块级作用域内不允许重复声明同一个变量

const

声明一个常量。一旦声明，常量的值就不能改变
其它特性同let一致

注意：

const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

变量的解构赋值

数组的解构赋值

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

1	let [a, b, c] = [3, 2, 1]

1
2
3

let [a, ...b] = [1, 2, 3, 4]
a // 1
b // [2, 3, 4]

1 2	let [a, , c] = [1, 2, 3] //a:1, c:3

解构不成功的值就等于undefined

解构赋值允许指定默认值

1	let [a = 1] = []; //a:1

注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。

如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。

function f() {
  console.log('a')
}

let [x = f()] = [1]
//x:1

惰性求值：表达式不在它被绑定到变量之后就立即求值，而是在该值被取用的时候求值

对象的解构赋值

1 2	let { a, b } = { a: 'aaa', b: 'bbb' }; //a:aaa, b:bbb

字符串、数值以及布尔值的解构赋值比较少用，这里没列出来，以后用到会学

函数参数的解构赋值

函数的参数同样可以使用解构赋值

function a([x, y]){
  return x + y;
}

add([1, 2]); // 3

字符串新增方法

实例方法：includes(), startsWith(), endsWith()

首先定义一个字符串

1	let s = 'Hello world!'

includes()：返回布尔值，表示是否找到了参数字符串。
1
2
s.includes('w') //返回true
s.includes('a') //返回false
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
1
s.startsWith('Hello') // 返回true
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
1
s.endsWith('!')//返回true
repeat()

repeat(n)返回一个字符串，将原字符串重复n次。

1	'a'.repeat(3) // "aaa"

🔺模板字符串

在ES5的时候，我们常用拼接的方式去拼接大量以及想要出现空格的字符串，如：

1 2	var f = 'hhhhh' var a = 'a' + 'b' + 'c' + f

在ES6时，引入了模板字符串解决这个问题

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

let name = 'lihua'
let a = ` 你好啊， hello world
 我的名字叫 ${name}，
 很高兴认识大家
`

执行结果：

其中，${name}可以嵌入其他的变量，以及可以在大括号{}内进行其它的运算以及引用对象属性

数组扩展

在ES6中，建议在方法名前加入命名空间，例如：Number.isNaN()，目的是逐步减少全局性方法，使得语言逐步模块化

扩展运算符

扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

Array.from()

Array.from方法可将伪数组转为真正的数组

let arr1 = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
}
console.log(arr1)

let arr2 = Array.from(arr1)
console.log(arr2)

执行结果

Array.of()

Array.of方法用于将一组值，转换为数组

1	Array.of(1,2,3) // [1,2,3]

find()

方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

1 2	[1, 2, 3, 4].find((n) => n === 3) // 返回3

实现原理

//定义一个测试数组
var abc = [{
        id: 1,
        name: '拜拜'
    },
    {
        id: 2,
        name: '李四'
    }, {
        id: 3,
        name: '麻木'
    }, {
        id: 4,
        name: '天哪'
    }, {
        id: 5,
        name: '我的'
    }
]
//自己封装find函数
Array.prototype.findme = function(callback) {
    for (var i = 0; i < this.length; i++) {
    	if(callback(this[i],i)){
    		return this[i]
    	}
    }
}
//测试
console.log(abc.findme(function(item){
	return item.id === 3
})) 
//结果：{ id: 3, name: '麻木' }

findIndex()

返回数组中满足提供的测试函数的第一个元素的索引

1 2	[1, 2, 3, 4].findIndex((n) => n === 3) // 返回2

entries()，keys() 和 values()

可以用for...of循环进行遍历

keys()是对键名的遍历

var a = [1,2,3]

for (let index of a.keys()) {
	console.log(index)
}

values()是对键值的遍历

1
2
3

for(let emm of a.values()) {
	console.log(emm)
}

entries()是对键值对的遍历

1
2
3

for(let [b,c] of a.entries()) {
	console.log(b,c)
}

includes()

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

1 2	[1, 2, 3].includes(2) // 返回true [1, 2, 3].includes(5) // 返回false

函数扩展

函数参数的默认值

ES6 允许为函数的参数设置默认值，直接写在参数定义的后面。function a (x, y = 1){}，其中y=1便是默认值

//函数参数的默认值
function a (x, y = 1) {
	console.log(x,y)
}

a(2)
a(2,3)
a()

结果

注意:

参数变量是默认声明的，所以不能用let或const再次声明
使用参数默认值时，函数不能有同名参数
参数默认值是惰性求值的

🔺箭头函数

ES6 使用=>定义函数。

//ES5
var a = function (b) {
  return b
}
//ES6
var a = b => b

若不带参数，使用()代表参数

var c = 3
var a = () => c

console.log(a())

若有多个语句，则使用{}将函数体括起来，并加上return

//多语句使用{}
var a = (b, c) => {
    return b + c
}

console.log(a(2,3))

若返回对象，为避免{}解析成代码块，使用()将对象括起来

1	let getTempItem = id => ({ id: id, name: "Temp" })

用处

简化回调函数（使用频率较高）

// 正常函数写法
[1,2,3].map(function (x) {
  return x * x;
});

// 箭头函数写法
[1,2,3].map(x => x * x);

使用注意点

🔺函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象

function Person({ name = 'Jack', age = 18 }) {
  this.name = name
  this.age = age
}

Person.prototype.sayHello = function () {
  setTimeout(() => {
    console.log(`hello name: ${this.name}, age: ${this.age}`)
  }, 1000)
}

var p = Person()
p.sayHello()

PS：这里node执行不了，原因未知，可能不支持吧

不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误
1
2
3
4
5
6
let F = (x, y) => {
return x + y
}

var f = new F(10, 20)
//报错
不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替
1
2
3
4
5
6
let f = (...args) => {
console.log(args)
return args[0] + args[1]
}

f(10, 20)
不可以使用yield命令，因此箭头函数不能用作 Generator 函数

对象扩展

属性的简洁表示法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁

下面两者相等

//ES5
var a = 1
var b = {a}
//ES6
var b = {a:1}

方法的简洁表示

方法的 name 属性

函数的name属性，返回函数名。对象方法也是函数，因此也有name属性

const person = {
  sayName() {
    console.log('hello!');
  },
};

person.sayName.name   // 返回"sayName"

对象属性成员的 get 和 set 方法

var xiaoming = {
  name: 'Jack',
  _age: 10,
  get age () {
    return this._age
  },

  set age (value) {
    if (value < 0 || value > 100) {
      throw new Error('年龄不合法')
    }
    this._age = value
  }
}

自我理解，类似于C#的属性构造器，用来保护私有变量_age，通过age更改或访问_age

Object.keys

获取一个对象所有键名数组

1	console.log(Object.keys(xiaoming))