ECMAScript 6

var、let、const

var

在讲解 let、const 之前,先来了解下 var。

var 声明一个变量,并可选地将其初始化为一个值。

  1. var 用以声明变量;
  2. var 声明的变量,不存在块级作用域,在全局范围内都有效;
  3. var 存在变量提升现象,因此 var 定义的变量可以先使用,后声明;

example one:

function fn() {
  var a = 1
  console.log(a)    // 1
}
fn()

example two:

function fn() {
  if (true) {
    console.log(a)    // undefined
  } else {
    var a = 1
  }
}
fn()

上面这段代码打印出 undefined 是因为 var 变量提升,代码等价于:

function fn() {
  var a
  if (true) {
    console.log(a)
  } else {
    a = 1
  }
}
fn()

example three:
现在有如下代码,如何只暴露 fn 一个全局变量呢?

var a = 1
window.fn1 = function() {
  console.log(a)
}

因为var a = 1会产生一个全局变量 a

假如我们把代码包裹在一个函数里,代码如下:

function fn2() {
  var a = 1
  window.fn1 = function() {
    console.log(a)
  }
}

如果像上面这样,a 虽然是局部变量了,但是呢,这个函数有名字 fn2,也是一个全局变量

所以使用立即执行函数,代码如下:

(function() {
  var a = 1
  window.fn1 = function() {
    console.log(a)
  }
}())

但是这段代码太麻烦了,在ES6中,使用let就可以很方便解决此问题!


let

let 语句声明一个块级作用域的本地变量,并且可选的将其初始化为一个值。

  1. let 关键字用来声明变量;
  2. let 关键字声明的变量不能重复声明;
  3. 存在块级作用域,只在其声明的块或子块中可用;
  4. 不存在变量提升,只可以先声明,后使用;
  5. let 声明的变量存在暂时性死区,只要块级作用域中存在 let,那么它所声明的变量就绑定了这个区域,不再受外部的影响;

example one:

{
  let a = 1
  console.log(a)    // 1
    {
      let a = 2
      console.log(a)    // 2
    }
}

example two:

{
  let a = 1
  console.log(a)    // 1
    {
      console.log(a)    // 报错
      let a = 2
    }
}

example three:

{
  let a = 1
  console.log(a)    // 1
  let a = 2    // 报错,a已经声明
}

const

const 关键字用来声明常量,常量是块级作用域,很像使用 let 语句定义的变量。常量的值不能通过重新赋值来改变,并且不能重新声明。

  1. const 在声明时必须赋予初始值,一旦声明,其声明的值就不允许改变,更不允许重复声明;
  2. const 用于声明只读的常量;
  3. 存在块级作用域,只在其声明的块或子块中可用;
  4. 标识符一般为大写;
  5. 不存在变量提升,只可以先声明,后使用;
  6. const 声明的变量存在暂时性死区,只要块级作用域中存在 const,那么它所声明的变量就绑定了这个区域,不再受外部的影响;

example one:

{
  const a = 1
  console.log(a)    // 1
  a = 2    // 报错
}

example two:

const arr = [1, 2, 3]
arr[0] = 2
console.log(arr)    // [2, 2, 3]

const obj = {
  name: 'zww',
  age: 18
}
obj.name = 'lq'
console.log(obj)    // {name: "lq", age: 18}

注意:对于数组和对象的元素修改,不算做对常量的修改,不会报错。


相关题目

Question One

var a = 1

function fn() {
    console.log(a)
  } 
? ? ? ? 
fn()

答:

var a = 1

function fn() {
  console.log(a)    // 2
}
a = 2
fn()

Question Two

下面代码将打印什么?

for (var i = 0; i < 5; i++) {}
console.log(i)

答:
以上代码等价于:

var i
for (i = 0; i < 5; i++) {}
console.log(i)    // 5

Question Three

下面代码将打印什么?

for (var i = 0; i < 5; i++) {
  function fn() {
    console.log(i)
  }
  button.onclick = fn
}
console.log(i)

答:都将打印5


Question Four

点击第三个li将打印什么,如何解决此问题?

var liTags = document.querySelectorAll('li')    // 假设只有6个li
for (var i = 0; i < liTags.length; i++) {
  liTags[i].onclick = function() {
    console.log(i)
  }
}

答:不管点击哪个li都将打印出6!

method one:

var liTags = document.querySelectorAll('li')
for (var i = 0; i < liTags.length; i++) {
  let j = i
  liTags[j].onclick = function() {
    console.log(j)
  }
}

method two:

var liTags = document.querySelectorAll('li')
for (var i = 0; i < liTags.length; i++) {
  (function(j) {
    liTags[j].onclick = function() {
      console.log(j)
    }
  })(i)
}

method three:

var liTags = document.querySelectorAll('li')
for (let i = 0; i < liTags.length; i++) {
  liTags[i].onclick = function() {
    console.log(i)
  }
}

参考资料

阮一峰 - let和const命令

MDN - var

MDN - let

MDN - const

知乎 - 我用了两个月的时间才理解let


变量的解构赋值

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

数组的解构赋值

let name = ['zww', 'lq', 'lqzww']
let [a, b, c, d] = name
console.log(a, b, c, d);    // zww lq lqzww undefined

对象的解构赋值

let info = {
  name: 'zww',
  age: 18,
  like: function() {
    console.log("game");
  }
}
let { name, age, like } = info
console.log(name, age, like);    // zww 18 ƒ ()
like()    // game

字符串的解构赋值

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

let str = 'hello'
let [a, b, c, d, e, f] = str
console.log(a, b, c, d, e, f)    // h e l l o undefined

let { length: len } = str
console.log(len)    // 5

字符串的扩展

模板字符串

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

  1. 模板字符串中可以出现换行符;
  2. 可以使用 ${xxx} 的形式嵌入变量;
  3. 模板字符串中还能调用函数;
let str = `我也是字符串`
console.log(str, typeof str);    // 我也是字符串 string

let name = `<ul><li>a</li><li>b</li></ul>`

let like = 'game'
let out = `${like}喜欢`
console.log(out);    // game喜欢

function fn() {
  console.log("fn")
}
`${fn()}`    // fn

trimStart()、trimEnd()

它们的行为与 trim() 一致,trimStart() 消除字符串头部的空格,trimEnd() 消除尾部的空格。它们返回的都是新字符串,不会修改原始字符串。

除了空格键,这两个方法对字符串头部(或尾部)的 tab 键、换行符等不可见的空白符号也有效。

浏览器还部署了额外的两个方法,trimLeft() 是 trimStart() 的别名,trimRight() 是 trimEnd() 的别名。

let str = '  hello world  '

console.log(str)    //   hello world  
console.log(str.trimStart())    // hello world  
console.log(str.trimEnd())    //   hello world

数组的扩展

扩展运算符

扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列,对数组进行解包。

let name = ['zww', 'lq', 'lqzww']

function fn() {
  console.log(arguments)    // Arguments [Array(3), callee: ƒ, Symbol(Symbol.iterator): ƒ]
  console.log(...arguments)    // (3) ["zww", "lq", "lqzww"]
}
fn(name)
// 扩展运算符可用于数组的合并
let name = ['zww', 'lq', 'lqzww']
let age = [18, 20]
var info = [...name, ...age]
console.log(info)    // (5) ["zww", "lq", "lqzww", 18, 20]
// 扩展运算符可用于数组的克隆 - 浅拷贝
let name = ['zww', 'lq', 'lqzww']
let copyName = [...name]
console.log(copyName)    // (3) ["zww", "lq", "lqzww"]
// 扩展运算符可将伪数组转为真正的数组
<div></div>
<div></div>

var div = document.querySelectorAll("div")
var arrDiv = [...div]
console.log(div)    // NodeList(2) [div, div]
console.log(arrDiv)    // (2) [div, div]

Array.from()

Array.from() 方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。

let arr = {
  '0': 'a',
  '1': 'b',
  '2': 'c',
  length: 3
};
console.log(Array.from(arr))    // (3) ["a", "b", "c"]

Array.of()

Array.of() 方法用于将一组值,转换为数组。

Array.of() 总是返回参数值组成的数组。如果没有参数,就返回一个空数组。

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

includes()

该方法表示某个数组是否包含给定的值,返回一个布尔值。

该方法的第二个参数表示搜索的起始位置,默认为 0。如果第二个参数为负数,则表示倒数的位置。

let arr = ['天龙八部', '英雄联盟', '王者荣耀', '部落冲突']

console.log(arr.includes('天龙八部'))    // true
console.log(arr.includes('皇室战争'))    // false

console.log(arr.includes('天龙八部', 1))    // false

flat()、flatMap()

flat()

flat() 用于将嵌套的数组“拉平”,变成一维的数组。该方法返回一个新数组,对原数据没有影响。

flat() 默认只会“拉平”一层,如果想要“拉平”多层的嵌套数组,可以将 flat() 方法的参数写成一个整数,表示想要拉平的层数,默认为1。如果参数为 Infinity,表示可展开任意深度的嵌套数组。

let arr = [1, 2, [3, 4, [5, 6, [7]]]]

console.log(arr.flat())    // (5) [1, 2, 3, 4, Array(3)]
console.log(arr.flat(2))    // (7) [1, 2, 3, 4, 5, 6, Array(1)]
console.log(arr.flat(Infinity))    // (7) [1, 2, 3, 4, 5, 6, 7]

flatMap()

flatMap() 方法对原数组的每个成员执行一个函数(相当于执行Array.prototype.map()),然后对返回值组成的数组执行 flat() 方法。该方法返回一个新数组,不改变原数组。

flatMap() 方法的参数是一个遍历函数,该函数可以接受三个参数,分别是当前数组成员、当前数组成员的位置(从零开始)、原数组。

let arr = [1, 2, 3]
let res1 = arr.map(item => [item * 2])
console.log(res1)    // (3) [Array(1), Array(1), Array(1)]

let res2 = arr.flatMap(item => [item * 2])
console.log(res2)    // (3) [2, 4, 6]

函数的扩展

函数参数默认值

ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。

function add(a, b) {
  return a + b;
}
console.log(add(1, 2));    // 3
console.log(add(1));    // NaN
function add(a, b = 10) {
  return a + b;
}
console.log(add(1, 2));    // 3
console.log(add(1));    // 11

rest参数

ES6 引入 rest 参数(形式为...变量名),用于获取函数的多余参数,用来代替 arguments,rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。

function fn(...args) {
  console.log(args)
}
fn(1, 2)    // (2) [1, 2]
function fn(a, b, ...args) {
  console.log(args)
}
fn(1, 2, 3, 4, 5)    // (3) [3, 4, 5]

注意:rest 参数必须要放到参数最后。


箭头函数

ES6 允许使用“箭头”(=>)定义函数。

let fn1 = function() {}
// 等价于
let fn2 = () => {}
// 简写形式
var f = x => n * n
var f = (x, y) => x + y
var f = (x, y) => {
  return x + y
}
// 箭头函数 this 指向声明时所在作用域下 this 的值
let fn1 = function() {
  console.log(this.name);
}
let fn2 = () => {
  console.log(this.name);
}

var name = 'zww';
const home = {
  name: "home"
}

fn1()    // zww
fn2()    // zww

fn1.call(home)    // home
fn2.call(home)    // zww
// 箭头函数不能作为构造函数实例化
let Person = name => {
  this.name = name;
}
let person = new Person('zww');
console.log(person);    // 报错:Person is not a constructor
// 箭头函数不能使用 arguments
let fn = () => {
  console.log(arguments);
}
fn(1, 2);    // 报错:arguments is not defined

总结:

  1. 如果形参只有一个,那么小括号可以省略;
  2. 函数体如果只有一条语句,则花括号可以省略,函数的返回值为该条语句的执行结果;
  3. 箭头函数 this 指向声明时所在作用域下 this 的值;
  4. 箭头函数不能作为构造函数实例化,也就是说,不可以使用new命令,否则会抛出一个错误。
  5. 不能使用 arguments,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。

数值的扩展

二进制和八进制表示法

ES6 提供了二进制和八进制数值的新的写法,分别用前缀 0b(或0B)和 0o(或0O)表示。

如果要将 0b 和 0o 前缀的字符串数值转为十进制,要使用 Number 方法。

let b = 0b111;
console.log(b)   // 7

let o = 0o234;
console.log(o)   // 156

let x = 0xabc;
console.log(x)   // 2748

console.log(Number('0b111'))   // 7
console.log(Number('0o10'))   // 8

Number.EPSILON

ES6 在 Number 对象上面,新增一个极小的常量 Number.EPSILON。它表示 1 与大于 1 的最小浮点数之间的差。

Number.EPSILON 实际上是 JavaScript 能够表示的最小精度。误差如果小于这个值,就可以认为已经没有意义了,即不存在误差了。

Number.EPSILON 的实质是一个可以接受的最小误差范围。

function equal(a, b) {
  if (Math.abs(a - b) < Number.EPSILON) {
    return true;
  } else {
    return false;
  }
}
console.log(0.1 + 0.2 === 0.3)   // false
console.log(equal(0.1 + 0.2, 0.3))   // true

Number.isFinite() 与 Number.isNaN()

Number.isFinite() 用来检查一个数值是否为有限的(finite),即不是 Infinity。如果参数类型不是数值,Number.isFinite 一律返回 false。

Number.isNaN() 用来检查一个值是否为 NaN。如果参数类型不是 NaN,Number.isNaN 一律返回 false。

console.log(Number.isFinite(1))   // true
console.log(Number.isFinite(1 / 0))   // false
console.log(Number.isFinite(Infinity))   // false
console.log(Number.isFinite(-Infinity))   // false

console.log(Number.isNaN(1))   // false
console.log(Number.isNaN(NaN))   // true
console.log(Number.isNaN(NaN / 0))   // true
console.log(Number.isNaN('true' / 0))   // true
console.log(Number.isNaN('true' / 'true'))   // true

Number.parseInt() 与 Number.parseFloat()

ES6 将全局方法 parseInt() 和 parseFloat(),移植到 Number 对象上面,行为完全保持不变。

console.log(Number.parseInt('1.34abc'))   // 1
console.log(Number.parseFloat('1.34abc'))   // 1.34

Number.isInteger()

Number.isInteger() 用来判断一个数值是否为整数。

console.log(Number.isInteger(123))   // true
console.log(Number.isInteger(1.34))   // false

Math.trunc()

Math.trunc 方法用于去除一个数的小数部分,返回整数部分。

console.log(Math.trunc(123))   // 123
console.log(Math.trunc(1.34))   // 1

Math.sign()

Math.sign 方法用来判断一个数到底是正数、负数、还是零。对于非数值,会先将其转换为数值。

它有如下五种返回值:

  1. 参数为正数,返回 +1;
  2. 参数为负数,返回 -1;
  3. 参数为 0,返回 0;
  4. 参数为 -0,返回 -0;
  5. 其他值,返回 NaN。
console.log(Math.sign(0))   // 0
console.log(Math.sign(-0))   // -0
console.log(Math.sign(1))   // 1
console.log(Math.sign(-1))   // -1
console.log(Math.sign(NaN))   // NaN

指数运算符

指数运算符(**)用来实现幂运算,功能与 Math.pow 结果相同。

console.log(Math.pow(2, 10))   // 1024

console.log(2 ** 10)   // 1024

console.log(2 ** 3 ** 2)   // 512

注意:指数运算符的一个特点是右结合,而不是常见的左结合。多个指数运算符连用时,是从最右边开始计算的。


对象的扩展

简化对象的写法

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

let name = 'zww'
let change = function() {
  console.log('change');
}
let info = {
  name,
  change,
  like() {
    console.log('game');
  }
}
console.log(info);    // {name: "zww", change: ƒ, like: ƒ}

Object.is()

Object.is() 它是用来比较两个值是否严格相等,返回true / false,与严格比较运算符(===)的行为基本一致。

Object.is() 方法如果满足以下条件则两个值相等:

  1. 都是undefined;
  2. 都是null;
  3. 都是true或false;
  4. 都是相同长度的字符串且相同字符按相同顺序排列;
  5. 都是相同对象(意味着每个对象有同一个引用);
  6. 都是数字且都是+0;都是-0;都是NaN;或都是非零而且非 NaN且为同一个值;
Object.is('hello','hello')    // true
Object.is('hello','hi')   // false

Object.is([],[])    // false

Object.is(null,null)    // true
Object.is(null,undefined)   // false

Object.is(0,+0)   // true
Object.is(0,-0)   // false
Object.is(-0,+0)    // false
Object.is(NaN,0/0)    // true

Object.assign()

Object.assign() 方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。

Object.assign() 方法的第一个参数是目标对象,后面的参数都是源对象。

let obj1 = {
  name: 'zww',
  age: 18,
  like: 'game'
}
let obj2 = {
  name: 'lq',
  age: 111,
  size: 22
}
console.log(Object.assign(obj1, obj2))    // {name: "lq", age: 111, like: "game", size: 22}

注意:

  1. 如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性;
  2. 如果只有一个参数,Object.assign() 会直接返回该参数;
  3. 如果该参数不是对象,则会先转成对象,然后返回;
  4. 由于 undefined 和 null 无法转成对象,所以如果它们作为参数,就会报错;
  5. Object.assign() 方法实行的是浅拷贝,而不是深拷贝,也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用;

该方法有如下常见用途:

  1. 为对象添加属性
  2. 为对象添加方法
  3. 克隆对象
  4. 合并多个对象
  5. 为属性指定默认值

Object.setPrototypeOf()、Object.getPrototypeOf()

Object.setPrototypeOf():用来设置一个对象的原型对象(prototype),返回参数对象本身。

Object.getPrototypeOf():用于读取一个对象的原型对象。

let a = {
  name: 'zww'
}
let b = {
  age: 18
}
console.log(Object.setPrototypeOf(a, b))    // {name: "zww"}
console.log(Object.getPrototypeOf(a))    // {age: 18}

Object.keys()、Object.values()、Object.entries()

Object.keys()

ES5 引入了 Object.keys 方法,返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。

ES2017 引入了跟 Object.keys 配套的 Object.values 和 Object.entries,作为遍历一个对象的补充手段,供 for...of 循环使用。

var obj = {
  name: 'zww',
  age: 22
};
console.log(Object.keys(obj))    // (2) ["name", "age"]

Object.values()

Object.values 方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值,它只返回对象自身的可遍历属性。

var obj = {
  name: 'zww',
  age: 22
};
console.log(Object.values(obj))    // (2) ["zww", 22]

Object.entries()

Object.entries() 方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组。

var obj = {
  name: 'zww',
  age: 22
};
console.log(Object.entries(obj))    // (2) [Array(2), Array(2)]

Object.entries 方法的另一个用处是,将对象转为真正的 Map 结构。


Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors() 方法,返回指定对象所有自身属性(非继承属性)的描述对象。

var obj = {
  name: 'zww',
  age: 22
}

console.log(Object.getOwnPropertyDescriptors(obj))    // {name: {…}, age: {…}}

Object.fromEntries()

Object.fromEntries() 方法是 Object.entries() 的逆操作,用于将一个键值对数组转为对象。

该方法的主要目的,是将键值对的数据结构还原为对象,因此特别适合将 Map 结构转为对象。

let arr = Object.fromEntries([
  ['name', 'zww'],
  ['age', 18]
])
console.log(arr)    // {name: "zww", age: 18}

let m = new Map()
m.set('name', 'lq')
let res = Object.fromEntries(m)
console.log(res)    // {name: "lq"}

Symbol

ES6 引入了一种新的原始数据类型 Symbol,表示独一无二的值。它是JavaScript 语言的第七种数据类型,前六种是:undefined、null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。

// 通过 Symbol() 创建
let s = Symbol()
console.log(s, typeof s)    // Symbol() "symbol"

let s1 = Symbol('zww')
let s2 = Symbol('zww')
console.log(s1 == s2)    // false
console.log(s1 === s2)    // false
// 通过 Symbol.for() 创建
let s = Symbol.for('1')
console.log(s, typeof s)    // Symbol(1) "symbol"

let s1 = Symbol.for('zww')
let s2 = Symbol.for('zww')
console.log(s1 == s2)    // true
console.log(s1 === s2)    // true
// 对象添加 Symbol 类型的两种方式
// 第一种
let info = {
  name: 'zww',
  like: function() {}
}

let myInfo = {
  like: Symbol()
}

info[myInfo.like] = function() {
  console.log('hh')
}
console.log(info)    // {name: "zww", like: ƒ, Symbol(): ƒ}

// 第二种
let game = {
  name: 'tlbb',
  [Symbol('ts')]: function() {},
  [Symbol('em')]: function() {}
}
console.log(game)    // {name: "tlbb", Symbol(ts): ƒ, Symbol(em): ƒ}

注意:

  1. Symbol 的值是唯一的,用来解决命名冲突的问题
  2. Symbol 值不能与其他数据进行运算
  3. Symbol 定义的对象属性不能使用 for…in 循环遍历,但是可以使用 Reflect.ownKeys 来获取对象的所有键名

阮一峰 - Symbol


迭代器

遍历器(Iterator)就是这样一种机制。它是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所有成员)。

Iterator 的作用有三个:一是为各种数据结构,提供一个统一的、简便的访问接口;二是使得数据结构的成员能够按某种次序排列;三是 ES6 创造了一种新的遍历命令for...of循环,Iterator 接口主要供for...of消费。

原生具备 Iterator 接口的数据(可用 for of 遍历)的有:Array、Arguments、Set、Map、String、TypedArray、NodeList。

let arr = [1, 2, 3]

for (let i of arr) {
  console.log(i)    // 1 2 3
}

Iterator 的工作原理如下:

  1. 创建一个指针对象,指向当前数据结构的起始位置;
  2. 第一次调用对象的 next 方法,指针自动指向数据结构的第一个成员;
  3. 接下来不断的调用 next 方法,指针一直往后移动,直到指向最后一个成员;
  4. 每调用 next 方法返回一个包含 value 和 done 属性的对象;
let arr = [1, 2, 3]

let iterator = arr[Symbol.iterator]();
console.log(iterator)    // Array Iterator {}
console.log(iterator.next());    // {value: 1, done: false}
console.log(iterator.next());    // {value: 2, done: false}
console.log(iterator.next());    // {value: 3, done: false}
console.log(iterator.next());    // {value: undefined, done: true}

使用迭代器可以自定义遍历数据,例如:

// 遍历 info 里的 like 数组
const info = {
  name: "zww",
  like: ['tlbb', 'xylm', 'wzry'],
  [Symbol.iterator]() {
    let index = 0;
    let that = this;
    return {
      next: function() {
        if (index < that.like.length) {
          const result = {
            value: that.like[index],
            done: false
          };
          index++;
          return result;
        } else {
          return {
            value: undefined,
            done: true
          }
        }
      }
    }
  }
}

for (let i of info) {
  console.log(i);    // tlbb xylm wzry
}

阮一峰 - Iterator 和 for...of 循环


生成器

Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同。

function* gen() {
  yield 'hi'
  yield 'generator'
}
let iterator = gen()
console.log(iterator)    // gen {<suspended>}
console.log(iterator.next())    // {value: "hi", done: false}
console.log(iterator.next())    // {value: "generator", done: false}
console.log(iterator.next())    // {value: undefined, done: true}

生成器函数可以传入参数:

function* gen(arg) {
  console.log(arg)
  let one =
    yield 'one'
  console.log(one)
  let two =
    yield 'two'
  console.log(two)
}

let iterator = gen('A')
console.log(iterator.next())
console.log(iterator.next('B'))
console.log(iterator.next('CCC'))

使用生成器函数可以避免回调地狱:

function one() {
  setTimeout(() => {
    let data = 'tlbb'
    iterator.next(data);
  }, 1000)
}

function two() {
  setTimeout(() => {
    let data = 'yxlm'
    iterator.next(data);
  }, 2000)
}

function* gen() {
  let t = yield one();
  console.log(t)
  let y = yield two();
  console.log(y)
}

let iterator = gen();
iterator.next();

注意:

    • 的位置没有限制,但必须在 function 与函数名之间;
  1. 生成器函数返回的结果是迭代器对象,调用迭代器对象的 next 方法可以得到 yield 语句后的值;
  2. yield 相当于函数的暂停标记,也可认为是函数的分隔符,每调用一次 next 方法,执行一段代码;
  3. next 方法可以传递实参,作为 yield 语句的返回值;

阮一峰 - Generator 函数的语法


Promise

传送门 - Promise从入门到放弃


async、await - 待完善


Set

ES6 提供了新的数据结构 Set(集合)。它类似于数组,但是成员的值都是唯一的,没有重复的值(自带去重)。它实现了 iterator 接口,所以可以使用扩展运算符、for...of。

Set 本身是一个构造函数,用来生成 Set 数据结构。

let s = new Set()
console.log(s, typeof s)   // Set(0) {} "object"

Set 结构的实例具有以下几个属性:

  1. Set.prototype.constructor:构造函数,默认就是Set函数;
  2. Set.prototype.size:返回 Set 实例的成员总数;

Set 实例的方法分为两大类,分别为操作方法遍历方法

操作方法如下:

  1. .add(value):用于添加某个值,返回 Set 结构本身;
  2. .delete(value):用于删除某个值,返回的是布尔值,表示是否删除成功;
  3. .has(value):用于检测该值是否为 Set 成员,返回一个布尔值;
  4. .clear():用于清除 Set 所有成员,没有返回值;
let s = new Set([1, 2, 3, 2, 1])
console.log(s)   // Set(3) {1, 2, 3}
console.log(s.size)   // 3

console.log(s.add(4))   // Set(4) {1, 2, 3, 4}

console.log(s.delete(1))   // true
console.log(s)   // Set(3) {2, 3, 4}

console.log(s.has(2))   // true

s.clear()
console.log(s)   // Set(0) {}

遍历方法如下:

  1. .keys():返回键名的遍历器;
  2. .values():返回键值的遍历器;
  3. .entries():返回键值对的遍历器;
  4. .forEach():使用回调函数遍历每个成员;

注意:Set 的遍历顺序就是插入顺序。

阮一峰 - ECMAScript6入门 - Set


Map

ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。它也实现了 iterator 接口,所以可以使用扩展运算符、for...of。

let m = new Map()
console.log(m, typeof m)   // Map(0) {} "object"

Map 结构的实例具有以下属性和操作方法:

  1. .size:返回 Map 结构的成员总数;
  2. .set(key, value):设置键名 key 对应的键值为 value,返回整个 Map 结构。如果key已经有值,则键值会被更新,否则就新生成该键。set 方法返回的是当前的 Map 对象,因此可以采用链式写法;
  3. .get(key):读取 key 对应的键值,如果找不到 key,返回 undefined;
  4. .has(key):表示某个键是否在当前 Map 对象之中,返回一个布尔值;
  5. .delete(key):删除某个键,返回 true。如果删除失败,返回 false;
  6. .clear():清除所有成员,没有返回值;
let m = new Map()

m.set("name", "zww")
m.set("like", function() {
  console.log("game")
})
console.log(m)   // Map(2) {"name" => "zww", "like" => ƒ}

console.log(m.size)   // 2

console.log(m.get("name"))   // zww
console.log(m.get("age"))   // undefined

console.log(m.has("name"))   // true

console.log(m.delete("like"))   // true
console.log(m)   // Map(1) {"name" => "zww"}

m.clear()
console.log(m)   // Map(0) {}

阮一峰 - ECMAScript6入门 - Map


class

基本使用

在没有 ES6 class 之前的常规写法:

function Person(name, age) {
  this.name = name
  this.age = age
}
Person.prototype.sayHi = function(sing) {
  console.log(this.name + "唱了" + sing)
}

var zname = new Person('zww', 22)
console.log(zname)    // Person {name: "zww", age: 22}
zname.sayHi('啊哈哈')   // zww唱了啊哈哈

在 ES6 中新增加了类的概念,可以使用 class 关键字声明一个类,之后以这个类来实例化对象。

类抽象了对象的公共部分,它泛指某一大类。

对象特指某一个,通过类实例化一个具体的对象。

class Star {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  sayHi(sing) {
    console.log(this.name + "唱了" + sing);
  }
}
let zname = new Star("zww", 11)
console.log(zname)    // Star {name: "zww", age: 11}
zname.sayHi("我爱你")    // zww唱了我爱你

console.log(zname.hasOwnProperty('name'))    // true
console.log(zname.hasOwnProperty('sayHi'))    // false
console.log(zname.__proto__.hasOwnProperty('sayHi'))    // true

注意:

  1. 类必须使用new实例化对象
  2. 通过class关键字创建类,类名首字母一般大写
  3. 类里面有个constructor函数,可以接收传递过来的参数,同时返回实例对象
  4. 类里面所有函数都不需要写function
  5. 多个函数方法之间不需要用逗号隔开

set、get

我们先来看看 ES5 中 set、get 的使用:

var info = {
  _age: 18,
  set age(newValue) {
    if (newValue > 18) {
      console.log("大于18")
    } else {
      console.log("小于18")
    }
  },
  get age() {
    console.log("get age")
    return this._age
  }
}
info.age = 10    // 小于18
info.age = 100    // 大于18
info.age    // get age

下面我们再来看看在 ES6 中 class 里使用 set、get:

class Info {
  constructor(age) {
    this._age = age
  }
  set age(newValue) {
    if (newValue > 18) {
      console.log("大于18")
    } else {
      console.log("小于18")
    }
  }
  get age() {
    console.log("get age")
    return this._age
  }
}
let info = new Info(18)
info.age = 10    // 小于18
info.age = 100    // 大于18
info.age    // get age

静态方法

如果在 class 中定义了一个方法,该方法是可以被实例所调用的,那么如果我们不希望实例继承这个方法,只想这个方法被类本身被调用的时候,就需要将方法标记为静态方法,使用 static 关键字来标识一个静态方法,下面是基本的使用方法:

class Point {
  constructor(x, y) {
    this.x = x
    this.y = y
  }
  getPosition() {
    return `(${this.x},${this.y})`
  }
  static getClassName() {
    return Point.name
  }
}
let p = new Point(1, 2)
console.log(p.getPosition())    // (1,2)
// console.log(p.getClassName())    // 报错,p.getClassName is not a function
console.log(Point.getClassName())    // Point

new.target

new 是从构造函数生成实例对象的命令。ES6 为 new 命令引入了一个 new.target 属性,该属性一般用在构造函数之中,返回 new 命令作用于的那个构造函数。如果构造函数不是通过 new 命令或 Reflect.construct() 调用的,new.target 会返回 undefined,因此这个属性可以用来确定构造函数是怎么调用的。

在普通函数中使用:

function Point() {
  console.log(new.target)
}
let p1 = new Point()    // ƒ Point() { window.runnerWindow.proxyConsole.log(new.target) }
let p2 = Point()    // undefined

在 class 中使用:

class Point {
  constructor() {
    console.log(new.target)
  }
}
let p = new Point()    // class Point { constructor() { window.runnerWindow.proxyConsole.log(new.target) } }

在 class 的继承中使用:

class Parent {
  constructor() {
    console.log(new.target)
  }
}
class Child extends Parent {
  constructor() {
    super()
  }
}
let c = new Child()    // class Child extends Parent { constructor() { super() } }

类的继承

JavaScript 中的类可以继承某个类,其中被继承的类称为父类,而继承父类的被称为子类。

子类可以有自己的函数和构造器,当子类中存在父类相同的方法时,则该方法不会从父类继承,而使用子类的方法。

我们首先来看看在 ES5 中如何实现继承:

function Father(name, age) {
  this.name = name
  this.age = age
}
Father.prototype.sayHi = function(sing) {
  console.log(this.name + '的年龄是' + this.age + ',并且唱了' + sing)
}

function Son() {

}
Son.prototype = new Father('zww', 18)
let son = new Son()
son.sayHi('哈哈')    // zww的年龄是18,并且唱了哈哈

接下来我们再来看看 ES6 中是如何实现继承的:

class Father {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  sayHi(sing) {
    console.log(this.name + '的年龄是' + this.age + ',并且唱了' + sing)
  }
}
class Son extends Father { }
var father = new Father('zww', 18)
console.log(father)    // Father {name: "zww", age: 18}

var son = new Son('lq', 22)
console.log(son)    // Son {name: "lq", age: 22}
son.sayHi('呵呵')    // lq的年龄是22,并且唱了呵呵

console.log(son instanceof Son)    // true
console.log(son instanceof Father)    // true

Object.getPrototypeOf()

Object.getPrototypeOf() 方法可以用来从子类上获取父类。因此,可以使用这个方法判断,一个类是否继承了另一个类。

class Father {}
class Son extends Father {}

console.log(Object.getPrototypeOf(Son) === Father)    // true

super关键字

super 关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数,也可以调用父类的普通函数。

super 这个关键字,既可以当作函数使用,也可以当作对象使用。在这两种情况下,它的用法完全不同。

首先我们来看看 super 作为函数使用:

class Father {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  sayHi() {
    console.log('父类函数')
  }
}
class Son extends Father {
  constructor(name, age, sex) {
    super(name, age)
    this.sex = sex
  }
  sonfn() {
    super.sayHi()
    console.log('子类函数')
  }
}
var son = new Son('lq', 22, '女')
console.log(son)    // Son {name: "lq", age: 22, sex: "女"}
son.sonfn('丫丫')   // 父类函数 子类函数

接下来看看 super 作为对象使用:

  1. 在普通方法中,它指向的是父类的原型对象;
  2. 在静态方法中,它指向的是父类;
class Father {
  constructor() {
    this.type = 'father'
  }
  getName() {
    return this.type
  }
}
Father.getType = () => {
  return 'Father'
}
class Son extends Father {
  constructor() {
    super()
    console.log('constructor:' + super.getName())
  }
  getFatherName() {
    console.log('getFatherName:' + super.getName())
  }
}
var son = new Son()   // constructor:father
son.getFatherName()   // getFatherName:father
class Father {
  constructor() {
    this.type = 'father'
  }
  getName() {
    return this.type
  }
}
Father.getType = () => {
  return 'is Father'
}
class Son extends Father {
  constructor() {
    super()
    console.log('constructor:' + super.getName())
  }
  getFatherName() {
    console.log('getFatherName:' + super.getName())
  }
  static getFatherType() {
    console.log('getFatherType:' + super.getType())
  }
}
var son = new Son()   // constructor:father
son.getFatherName()   // getFatherName:father
Son.getFatherType()   // getFatherType:is Father

注意:

  • 在 ES6 中类没有变量提升,所以必须先定义类,才能通过类实例化对象;
  • 类里面的共有的属性和方法一定要加 this;
  • this 的指向问题;constructor 里面的 this 指向的是创建的实例对象;方法里面的 this 指向这个方法的调用者;
  • 子类的 __proto__ 指向父类本身;
  • 子类的 prototype 属性的 __proto__ 指向父类的 prototype 属性;
  • 实例的 __proto__ 属性的 __proto__ 指向父类实例的 __proto__;

原生构造函数的继承

原生构造函数是指语言内置的构造函数,通常用来生成数据结构。原生构造函数大致如下:

  1. Boolean()
  2. Number()
  3. String()
  4. Array()
  5. Date()
  6. Function()
  7. RegExp()
  8. Error()
  9. Object()
class MyArray extends Array {
  constructor(...args) {
    super(...args)
  }
}
let arr = new MyArray(4, 5, 6)
console.log(arr)
console.log(arr.join('--'))

模块化

模块功能主要由两个命令构成:export 和 import。export 命令用于规定模块的对外接口,import 命令用于输入其他模块提供的功能。

export 暴露模块的三种方法:

  1. 分别暴露;
  2. 统一暴露;
  3. 默认暴露;
// 1. 分别暴露
export var name = 'zww';
export function like() {
  console.log("like");
}

// 2. 统一暴露
var name = 'zww';

function like() {
  console.log("like");
}
export { name, like }

// 3. 默认暴露
export default {
  name: 'zww',
  like: function() {
    console.log("like");
  }
}

import 引入模块的三种方式:

  1. 通用方式;
  2. 解构赋值形式;
  3. 简便形式,只适用于默认暴露;
// 1. 通用方式
import * as m from './module.js'

// 2. 解构赋值形式
import { name, like } from './module.js'
import { name as myname, like } from './module.js'    // 如果重名,可以使用 as 来别名
import { default as m } from './module.js'

// 3. 简便形式
import m from './module.js'

注意:在引入模块时,要在 script 标签写上 type="module"。


参考链接

阮一峰 - ECMAScript6入门

尚硅谷 - ES6教程

posted @ 2020-09-28 14:08  LqZww  阅读(57)  评论(0编辑  收藏