ES6新特性

ES6，全称是 ECMAScript 6，也被称为 ECMAScript 2015，是 JavaScript 的一种标准，于 2015 年正式发布。ES6 是 JavaScript 新一代标准的缩写，引入了很多新的语法和特性，丰富了 JavaScript 的功能和表现力，提升了开发效率。

新特性
转化
参考

新特性#

1 let和const#

引入了块级作用域的变量声明方式，用于替代 var 关键字。

与var区别：不能重复声明，只会在作用域内生效，没有变量提升。

1
let a = 1 // 声明变量
2

3
const PI = 3.14 // 声明常量

2 箭头函数#

新的函数声明方式，可以更简洁地编写函数表达式。

1
// ES6 允许使用  =>  定义函数
2
//声明函数
3
let fn = (a, b) => {
4
  return a + b
5
}
6
//调用函数
7
console.log(fn(1, 2))

箭头函数中 this 是静态的， this 始终指向函数声明时所在作用域下的 this 的值

1
function getName() {
2
  console.log(this.name)
3
}
4

5
let getName2 = () => {
6
  console.log(this.name)
7
}
8

9
// 设置 window对象 的 name 属性
10
window.name = 'xxyyzz'
11
const school = {
12
  name: 'qinghua',
13
}
14

15
getName() // this 指向 window 输出 xxyyzz
16
getName2() // this 指向 window 输出 xxyyzz
17

18
getName.call(school) // 结果是qinghua
19
getName2.call(school) // 结果还是 xxyyzz

不能作为构造实例化对象

1
let Person = (name, age) => {
2
  this.name = name
3
  this.age = age
4
}
5
let person = new Person('xxyyzz', 18)
6
console.log(person)
7
// 报错: Person is not a constructor

不能使用 arguments 变量

1
let fn1 = () => {
2
  console.log(arguments)
3
}
4
fn1(1, 2, 3)
5
// 报错: arguments is not defined

简写

1
// 1. 只有一个参数省略括号
2
let add = n => {
3
  return n + n
4
}
5

6
// 2. 只有一个return省略花括号
7
let pow = n => n * n
8

9
// 3. 返回对象简写
10
const fn = uname => ({uname: uname})

3 模板字符串#

用反引号（“）来创建多行字符串和插入变量。

1
// 1. 变量
2
const hello = 'hello'
3
const world = 'world'
4
console.log(`${hello} ${world}`) // hello world
5

6
// 2. 字符
7
let str2 = `<ul>
8
              <li>1</li>
9
              <li>2</li>
10
            </ul>`
11
console.log(str2)
12

13
// 3. 表达式
14
let a = 3
15
let b = 4
16
let str3 = `${a + b}`
17
console.log(str3)

4 默认参数#

在函数声明时可以为参数设置默认值。

1
function add(a, b, c = 10) {
2
  return a + b + c
3
}
4
let result = add(1, 2)
5

6
console.log(result) // 13
7

8
// 2. 可以与结构赋值结合
9
function connect({host = '127.0.0.1', username, password, port}) {
10
  console.log(host)
11
  console.log(username)
12
  console.log(password)
13
  console.log(port)
14
}
15

16
connect({
17
  host: 'localhost',
18
  username: 'root',
19
  password: 'root',
20
  port: 3306,
21
})

5 解构赋值#

可以通过解构语法从数组或对象中提取值并赋给变量。

1
// 1. 数组
2
const F4 = ['xx', 'yy', 'zz', 'kk']
3
let [x, y, z, k] = F4
4
console.log(x) // xx
5
console.log(y) // yy
6
console.log(z) // zz
7
console.log(k) // kk
8

9
// 2. 对象
10
const zs = {
11
  name: '张三',
12
  age: 18,
13
  sing: function () {
14
    console.log('我会唱歌')
15
  },
16
}
17

18
let {name, age, sing} = zs // 需要用大括号
19
console.log(name) // 张三
20
console.log(age) // 18
21
console.log(sing) // Function
22

23
sing() // 我会唱歌
24

25
// 3. 多维解构
26
const dog = {
27
  name: 'Gallagher',
28
  attr: {
29
    age: 13,
30
    birth: 'Pinocorni',
31
  },
32
}
33

34
const {
35
  name,
36
  attr: {age, birth},
37
} = dog
38

39
console.log(name) // Gallagher
40
console.log(age) // 13
41
console.log(birth) // Pinocorni

6 类关键字`class`#

引入了 class 关键字，可以更方便地创建基于原型的面向对象编程。

ES5中：

1
// 手机
2
function Phone(brand, price) {
3
  this.brand = brand
4
  this.price = price
5
}
6

7
// 添加方法
8
Phone.prototype.call = function () {
9
  console.log('正在呼叫...')
10
}
11

12
// 实例化对象
13
let honor = new Phone('荣耀', 2499)
14
console.log(honor)
15
honor.call()

ES6中：

1
class Phone {
2
  // 构造方法
3
  constructor(brand, price) {
4
    // constructor 名字不能修改，是固定的
5
    this.brand = brand
6
    this.price = price
7
  }
8
  // 添加方法，（方法必须使用该语法）
9
  call() {
10
    console.log('华为手机正在呼叫...')
11
  }
12
}
13

14
// 实例化对象
15
let honor = new Phone('华为', 2499)
16
console.log(honor)
17
honor.call()

静态成员

1
// 类的静态成员
2
class Phone {
3
  static name = 'nojiya'
4
  static change = function () {
5
    console.log('我可以改变你们')
6
  }
7
}
8

9
let phoneSHI = new Phone()
10
console.log(phoneSHI)
11
console.log(phoneSHI.name) // undefined
12
console.log(Phone.name) // nojiya
13
console.log(Phone.change)

类继承

1
// ES6中使用class实现类继承
2
// 手机
3
class Phone {
4
  constructor(brand, price) {
5
    this.brand = brand
6
    this.price = price
7
  }
8
  call() {
9
    console.log('正在呼叫...')
10
  }
11
}
12

13
// 智能手机
14
// extends关键字
15
class SmartPhone extends Phone {
16
  constructor(brand, price, color, size) {
17
    super(brand, price) //super 关键字用于调用父类的构造函数或方法。
18
    this.color = color
19
    this.size = size
20
  }
21
  photo() {
22
    console.log('正在拍照...')
23
  }
24
}
25

26
// 测试
27
let s = new SmartPhone('荣耀', 1399, '银色', '4.2inch')
28
console.log(s)
29
s.call()
30
s.photo()

class 中的 get 和 set

1
class Phone {
2
  get price() {
3
    console.log('price属性被读取了')
4
    return 'iloveyou'
5
  }
6
  set price(newVal) {
7
    console.log('price属性被修改了')
8
  }
9
}
10

11
// 实例化对象
12
let s = new Phone()
13
console.log(s.price)
14

15
// 赋值
16
s.price = 'free'

7 Promise#

用于处理异步操作的新标准，避免回调地狱的问题。可以返回新的Promise链式调用。

1
// 创建Promise对象
2
const promise = new Promise((resolve, reject) => {
3
  setTimeout(() => {
4
    resolve('成功')
5
  })
6
})
7

8
// Promise.then
9
promise.then(value => {
10
  console.log(value)
11
})
12

13
console.log(result)
14

15
// Promise.catch
16
const promise2 = new Promise((resolve, reject) => {
17
  setTimeout(() => {
18
    reject('出错啦！')
19
  }, 1000)
20
})
21

22
promise2.catch(reason => {
23
  console.warn(reason)
24
})

8 模块化#

引入了 import 和 export 关键字，提供了更好的模块化管理方式。

暴露：export
导入：import

9 扩展运算符`...`#

用三个点（…）可以将数组或对象展开成分散的值。

1
const boys = ['张三', '李四', '王五']
2

3
// 声明一个函数
4
function show() {
5
  console.log(arguments)
6
}
7
show(...boys) // ['张三', '李四', '王五']
8

9
// 案例：合并数组
10
const arr1 = [1, 2, 3]
11
const arr2 = [4, 5, 6]
12

13
const arr = [...arr1, ...arr2]
14
console.log(arr) // [1, 2, 3, 4, 5, 6]

10 简化对象声明#

可以直接写属性名，而无需写键和值。

1
let name = '张三'
2
let change = function () {
3
  console.log('这是一个方法')
4
}
5
const sch = {
6
  // 1. 定义对象的简写形式
7
  // 2. 省略了属性值和冒号
8
  name, // 旧版 name: name
9
  change, // 旧版 change： change
10
  // 3.方法前面省略了function关键字
11
  improve() {
12
    // 旧版improve: function() {
13
    console.log('这是一个方法')
14
  },
15
}
16
console.log(sch)

11 rest 参数#

rest参数获取剩余的所有参数，只能放在最后，返回一个参数数组

1
function date1(...args) {
2
  console.log(args)
3
}
4
date1('2021-10-10', '2021-10-11', '2021-10-12') // 得到的是数组

12 生成器函数#

通过 function* 和 yield 关键字实现的一种可暂停和恢复执行的函数。

写法的特殊地方就是需要加个 * 星号，靠左，靠右，中间都行

1
function* gen() {
2
  console.log('hello generator')
3
}
4

5
let iterator = gen()
6
console.log(iterator)

yield可以看成是函数代码的分隔符，通过next方法来控制执行

1
function* gen() {
2
  console.log('111')
3
  yield '我是1' // yield为函数代码的分隔符
4
  console.log('222')
5
  yield '我是2'
6
  console.log('333')
7
  yield '我是3'
8
  console.log('444')
9
}
10

11
let iterator = gen()
12
console.log(iterator)
13
iterator.next() // 111
14
iterator.next() // 222
15
iterator.next() // 333
16
iterator.next() // 444

生成器参考

1
function* gen(arg) {
2
  console.log(arg)
3
  let re1 = yield 111
4
  console.log(re1)
5
  let re2 = yield 222
6
  console.log(re2)
7
  let re3 = yield 333
8
  console.log(re3)
9
}
10

11
// 执行获取迭代器对象
12
let iterator = gen('AAA')
13
console.log(iterator.next())
14

15
// next方法可以传入实参
16
console.log(iterator.next('BBB')) // 第二次调用传入的参数，将作为第一个yield语句的返回结果
17
console.log(iterator.next('CCC')) // 第三次调用传入的参数，将作为第二个yield语句的返回结果
18
console.log(iterator.next('DDD')) // 第四次调用传入的参数，将作为第三个yield语句的返回结果

解决地狱回调

1
// 地狱回调
2
setTimeout(() => {
3
  console.log(111)
4
  setTimeout(() => {
5
    console.log(222)
6
    setTimeout(() => {
7
      console.log(333)
8
    }, 3000)
9
  }, 2000)
10
}, 1000)
11

12
// 解决后
13
function one() {
14
  setTimeout(() => {
15
    console.log(111)
16
    iterator.next() // 执行下一个任务
17
  }, 1000)
18
}
19

20
function two() {
21
  setTimeout(() => {
22
    console.log(222)
23
    iterator.next()
24
  }, 2000)
25
}
26

27
function three() {
28
  setTimeout(() => {
29
    console.log(333)
30
    iterator.next()
31
  }, 3000)
32
}
33

34
// 定义生成器函数
35
function* gen() {
36
  yield one()
37
  yield two()
38
  yield three()
39
}
40

41
// 调用生成器函数
42
let iterator = gen()
43
iterator.next()

13 Map和Set#

新的数据结构，提供了更方便的数据存储和操作方式。

Map 键值对集合#

1
let myMap = new Map()
2

3
// 添加键值对(元素)
4
myMap.set('name', '张三')
5
myMap.set('age', 18)
6

7
let key = {
8
  school: 'university',
9
}
10
myMap.set(key, ['清华大学', '北京大学'])
11
console.log(myMap)
12

13
// 获取Map中的元素个数
14
console.log(myMap.size)
15

16
// 删除元素
17
myMap.delete('age')
18
console.log(myMap)
19

20
// 获取元素
21
console.log(myMap.get('name'))
22
console.log(myMap.get(key))
23

24
// 判断Map中是否存在某个元素
25
console.log(myMap.has('name'))
26
console.log(myMap.has('age'))
27

28
// 遍历Map
29
for (let v of myMap) {
30
  console.log(v)
31
}
32

33
// 清空Map
34
myMap.clear()
35
console.log(myMap)

Set 不重复集合#

1
let mySet = new Set()
2
console.log(mySet)
3
console.log(typeof mySet)
4

5
let mySet2 = new Set(['好事', '坏事', '大事', '好事']) // 自动去重
6
console.log(mySet2)
7

8
// 元素个数
9
console.log(mySet2.size)
10

11
// 添加元素
12
mySet2.add('小事')
13
console.log(mySet2)
14

15
// 删除元素
16
mySet2.delete('坏事')
17
console.log(mySet2)
18

19
// 检测是否有该元素
20
console.log(mySet2.has('大事')) // 返回结果是boolean类型
21

22
// 清空set
23
mySet2.clear()
24
console.log(mySet2)
25

26
// 遍历Set:  集合实现了iterator接口，所以可以使用for...of进行遍历
27
for (let item of mySet2) {
28
  console.log(item)
29
}

14 Symbol#

ES6（ECMAScript 2015）引入了一种新的原始数据类型 Symbol。Symbol 是一种独一无二且不可变的数据类型，每个通过 Symbol 函数创建的 Symbol 值都是唯一的，即使符号名相同也不会相等。Symbol 主要用于对象属性的标识符，可以作为对象的属性名，用来解决属性名冲突的问题。

下面是 Symbol 的一些特点和用法：

独一无二性：每个 Symbol 值都是唯一的，不会与其他的 Symbol 值相等。这使得 Symbol 可以用作对象的属性名，保证属性的唯一性。
不可改变性：Symbol 是不可变的，一旦创建就不能修改其值。
Symbol 作为对象属性名：使用 Symbol 作为对象的属性名，可以确保属性不会被意外覆盖。可以通过 Symbol() 方法创建一个 Symbol 值，然后作为属性名定义在对象中。
内置 Symbol 值：ES6 提供了一些预定义好的 Symbol 值，如 Symbol.iterator、Symbol.toStringTag 等，用于标识特定行为，可以在对象上使用这些 Symbol 值进行定制。
Symbol.for() 和 Symbol.keyFor()：ES6 还提供了两个与全局 Symbol 相关的静态方法 Symbol.for() 和 Symbol.keyFor()。Symbol.for() 方法接收一个字符串作为参数，如果存在相同字符串的 Symbol 值则返回，否则新建一个；Symbol.keyFor() 方法则是返回与 Symbol 关联的键。

1
// 1. 创建Symbol
2
let s = Symbol()
3
console.log(s, typeof s) // Symbol() 'symbol'
4

5
// 2. 每一个都是独一无二的
6
let s2 = Symbol('张三')
7
let s3 = Symbol('张三')
8

9
console.log(s2, s3)
10
console.log(s2 === s3) // false
11

12
// 3. Symbol.for 创建可以得出相同值
13
let s4 = Symbol.for('李四')
14
let s5 = Symbol.for('李四')
15

16
console.log(s4, s5)
17
console.log(s4 === s5) // true
18

19
// 4. 作为对象属性
20
let info = {
21
  name: '张三',
22
  [Symbol('age')]: 20,
23
  [Symbol('say')]: function () {
24
    console.log('我要说话了！')
25
  },
26
}

15 迭代器#

ES6 引入了迭代器（Iterator）的概念，迭代器是一种能够让我们遍历数据结构的方法。通过迭代器，我们可以按照特定顺序逐个访问数据结构中的元素，而不必关心数据结构的具体实现细节。

下面是关于 ES6 迭代器的一些重要信息和特点：

迭代器协议：ES6 迭代器是基于迭代器协议（Iterator Protocol）实现的，在一个对象上部署了 Symbol.iterator 方法，该对象就被视为可迭代对象（iterable），可以通过迭代器进行遍历。
迭代器对象：迭代器对象必须具有一个 next() 方法，每次调用 next() 方法后都会返回一个包含 value 和 done 两个属性的对象，value 表示下一个元素的值，done 表示是否遍历结束。
可迭代对象：实现了迭代器协议的对象被称为可迭代对象，例如数组、字符串、Map、Set 和自定义对象等，它们可以通过 for…of 循环、展开运算符(…)、解构赋值等方式进行遍历。
Symbol.iterator 方法：可迭代对象都会具有一个 Symbol.iterator 方法，调用该方法会返回一个迭代器对象，从而实现迭代访问。
for…of 循环：ES6 引入的 for…of 循环可以遍历可迭代对象，自动调用迭代器的 next() 方法，简化了遍历操作。
内置数据结构：ES6 的内置数据结构如数组、Map、Set 等都实现了迭代器协议，因此可以直接使用 for…of 循环来遍历这些数据结构。

迭代器工作原理：

创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。
第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。
第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。
不断调用指针对象的next方法，直到它指向数据结构的结束位置。
每一次调用next方法都会返回一个包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。

1
// 1. for...of
2
const arr = [1, 2, 3, 4, 5]
3
for (let element of arr) {
4
  console.log(element)
5
  // 输出：1 2 3 4 5
6
}
7

8
// 2. 迭代器
9
const arr = [1, 2, 3, 4, 5]
10
let iterator = arr[Symbol.iterator]()
11

12
console.log(iterator.next()) // { value: 1, done: false }
13
console.log(iterator.next()) // { value: 2, done: false }
14
console.log(iterator.next()) // { value: 3, done: false }
15
console.log(iterator.next()) // { value: 4, done: false }
16
console.log(iterator.next()) // { value: 5, done: false }
17
console.log(iterator.next()) // { value: undefined, done: true }
18

19
// 3. 自定义迭代器
20
// 声明一个对象
21
const banji = {
22
  name: '终极一班',
23
  stus: ['xiaoming', 'xiaoning', 'xiaotian', 'knight'],
24
  [Symbol.iterator]() {
25
    // 索引变量
26
    let index = 0
27
    return {
28
      next: () => {
29
        if (index < this.stus.length) {
30
          // 构建一个yield返回值
31
          const result = {value: this.stus[index], done: false}
32
          // 下标自增
33
          index++
34
          return result
35
        }
36
        // 返回结束标志
37
        return {value: undefined, done: true}
38
      },
39
    }
40
  },
41
}
42

43
for (let v of banji) {
44
  console.log(v)
45
}

16 数值扩展#

Number.EPSILON 是JavaScript表示的最小精度, EPSILON 属性的值接近于 2.2204460492503131e-16
引入进制
Number.isFinite()
Number.isNaN()
Number.parserInt()、Number.parseFloat()，将字符串转为整数（浮点数）
Number.isInteger()，判断一个数是否为整数
Math.trunc()，将数字的小数部分抹掉
Math.sign()，判断一个数是正数、负数、还是零，返回：1，-1

1
// 1. EPSILON 属性的值接近于 2.2204460492503131e-16
2
function equal(a, b) {
3
  if (Math.abs(a - b) < Number.EPSILON) {
4
    return true
5
  } else {
6
    return false
7
  }
8
}
9
console.log(0.1 + 0.2) // 0.30000000000004
10
console.log(0.1 + 0.2 === 0.3) // false
11
console.log(equal(0.1 + 0.2, 0.3)) // true
12

13
// 2. 二进制、八进制、十进制、十六进制
14
let b = 0b10
15
let o = 0o10
16
let d = 10
17
let x = 0x10
18
console.log(b, o, d, x) // 2 8 10 16
19

20
// 3. 判断极大数
21
function isFinite(num) {
22
  return Number.isFinite(num)
23
}
24
console.log(isFinite(5)) // true
25
console.log(isFinite(5.0)) // true
26
console.log(isFinite(5.1)) // true
27
console.log(isFinite(Infinity)) // false
28

29
// 4. 判断NaN
30
function isNaN(num) {
31
  return Number.isNaN(num)
32
}
33
console.log(isNaN(5)) // false
34
console.log(isNaN(NaN)) // true

17 对象方法扩展#

Object.is 对象是否完全相等
Object.assign 对象的合并
Object.setPrototypeOf 设置原型对象
Object.getPrototypeOf 获取原型对象

转化#

并不是所有的浏览器都能向chrome一样都能识别ES6新特性,所以需要进行转换

1
# 安装工具： babel-cli babel-preset-env browserify
2
npm i babel-cli babel-preset-env browserify -D
3
npx babel src/js -d dist/js --presets=babel-preset-env
4
npx browserify dist/js/app.js -o dist/bundle.js

参考#

ES6 新特性（0基础，精简版，学ES6看这篇就够了！！！）

ES6（ECMAScript 2015）

Lovely March7th!

新特性#

1 let和const#

2 箭头函数#

3 模板字符串#

4 默认参数#

5 解构赋值#

6 类关键字`class`#

7 Promise#

8 模块化#

9 扩展运算符`...`#

10 简化对象声明#

11 rest 参数#

12 生成器函数#

13 Map和Set#

Map 键值对集合#

Set 不重复集合#

14 Symbol#

15 迭代器#

16 数值扩展#

17 对象方法扩展#

转化#

参考#

赞助支持

目录

Lovely March7th!

ES6新特性

新特性#

1 let和const#

2 箭头函数#

3 模板字符串#

4 默认参数#

5 解构赋值#

6 类关键字class#

7 Promise#

8 模块化#

9 扩展运算符...#

10 简化对象声明#

11 rest 参数#

12 生成器函数#

13 Map和Set#

Map 键值对集合#

Set 不重复集合#

14 Symbol#

15 迭代器#

16 数值扩展#

17 对象方法扩展#

转化#

参考#

赞助支持

目录

6 类关键字`class`#

9 扩展运算符`...`#