ES6篇

1. 说说var、let、const之间的区别

1.1 var

在ES5中，顶层对象的属性和全局变量是等价的，用var声明的变量既是全局变量，也是顶层变量注意：顶层对象，在浏览器环境指的是window对象，在 Node 指的是global对象

const a = 10
console.log(window.a) // 10

使用var声明的变量存在变量提升的情况

console.log(a) // undefined
var a = 20

在编译阶段，编译器会将其变成以下执行

let a
console.log(a)
a = 20

使用var，我们能够对一个变量进行多次声明，后面声明的变量会覆盖前面的变量声明

var a = 20
var a = 30
console.log(a) // 30

在函数中使用使用var声明变量时候，该变量是局部的

const a = 20
function change() {
  const a = 30
}
change()
console.log(a) // 20

而如果在函数内不使用var，该变量是全局的

let a = 20
function change() {
  a = 30
}
change()
console.log(a) // 30

1.2 let

let是ES6新增的命令，用来声明变量用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效

{
  const a = 20
}
console.log(a) // ReferenceError: a is not defined.

不存在变量提升

console.log(a) // 报错ReferenceError
let a = 2

这表示在声明它之前，变量a是不存在的，这时如果用到它，就会抛出一个错误只要块级作用域内存在let命令，这个区域就不再受外部影响

const a = 123
if (true) {
  a = 'abc' // ReferenceError
  let a
}

使用let声明变量前，该变量都不可用，也就是大家常说的“暂时性死区”最后，let不允许在相同作用域中重复声明

let a = 20
let a = 30
// Uncaught SyntaxError: Identifier 'a' has already been declared

注意的是相同作用域，下面这种情况是不会报错的

const a = 20
{
  const a = 30
}

因此，我们不能在函数内部重新声明参数

function func(arg) {
  let arg
}
func()
// Uncaught SyntaxError: Identifier 'arg' has already been declared

1.3 const

const声明一个只读的常量，一旦声明，常量的值就不能改变

const a = 1
a = 3
// TypeError: Assignment to constant variable.

这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值

const a
// SyntaxError: Missing initializer in const declaration

如果之前用var或let声明过变量，再用const声明同样会报错

var a = 20
let b = 20
const a = 30
const b = 30
// 都会报错

const实际上保证的并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动

对于简单类型的数据，值就保存在变量指向的那个内存地址，因此等同于常量

对于复杂类型的数据，变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的，并不能确保改变量的结构不变

const foo = {}

// 为 foo 添加一个属性，可以成功
foo.prop = 123
foo.prop // 123

// 将 foo 指向另一个对象，就会报错
foo = {} // TypeError: "foo" is read-only

其它情况，const与let一致

1.4 区别

var、let、const三者区别可以围绕下面五点展开：

• 变量提升

• 暂时性死区

• 块级作用域

• 重复声明

• 修改声明的变量

• 使用

变量提升

var声明的变量存在变量提升，即变量可以在声明之前调用，值为undefinedlet和const不存在变量提升，即它们所声明的变量一定要在声明后使用，否则报错

// var
console.log(a) // undefined
var a = 10

// let
console.log(b) // Cannot access 'b' before initialization
let b = 10

// const
console.log(c) // Cannot access 'c' before initialization
const c = 10

暂时性死区

var不存在暂时性死区let和const存在暂时性死区，只有等到声明变量的那一行代码出现，才可以获取和使用该变量

// var
console.log(a) // undefined
var a = 10

// let
console.log(b) // Cannot access 'b' before initialization
let b = 10

// const
console.log(c) // Cannot access 'c' before initialization
const c = 10

块级作用域

var不存在块级作用域let和const存在块级作用域

// var
{
  var a = 20
}
console.log(a) // 20

// let
{
  const b = 20
}
console.log(b) // Uncaught ReferenceError: b is not defined

// const
{
  const c = 20
}
console.log(c) // Uncaught ReferenceError: c is not defined

重复声明

var允许重复声明变量let和const在同一作用域不允许重复声明变量

// var
var a = 10
var a = 20 // 20

// let
let b = 10
let b = 20 // Identifier 'b' has already been declared

// const
const c = 10
const c = 20 // Identifier 'c' has already been declared

修改声明的变量

var和let可以const声明一个只读的常量。一旦声明，常量的值就不能改变

// var
let a = 10
a = 20
console.log(a) // 20

// let
let b = 10
b = 20
console.log(b) // 20

// const
const c = 10
c = 20
console.log(c) // Uncaught TypeError: Assignment to constant variable

2. ES6中数组新增了哪些扩展？

2.1 扩展运算符的应用

ES6通过扩展元素符...，好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列

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

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

主要用于函数调用的时候，将一个数组变为参数序列

function push(array, ...items) {
  array.push(...items)
}

function add(x, y) {
  return x + y
}

const numbers = [4, 38]
add(...numbers) // 42

可以将某些数据结构转为数组

[...document.querySelectorAll('div')]

能够更简单实现数组复制

const a1 = [1, 2]
const [...a2] = a1
// [1,2]

数组的合并也更为简洁了

const arr1 = ['a', 'b']
const arr2 = ['c']
const arr3 = ['d', 'e'];
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

注意：通过扩展运算符实现的是浅拷贝，修改了引用指向的值，会同步反映到新数组

下面看个例子就清楚多了

const arr1 = ['a', 'b', [1, 2]]
const arr2 = ['c']
const arr3 = [...arr1, ...arr2]
arr[1][0] = 9999 // 修改arr1里面数组成员值
console.log(arr[3]) // 影响到arr3,['a','b',[9999,2],'c']

扩展运算符可以与解构赋值结合起来，用于生成数组

const [first, ...rest] = [1, 2, 3, 4, 5]
first // 1
rest // [2, 3, 4, 5]

const [first, ...rest] = []
first // undefined
rest // []

const [first, ...rest] = ['foo']
first // "foo"
rest // []

如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错

const [...butLast, last] = [1, 2, 3, 4, 5]
// 报错

const [first, ...middle, last] = [1, 2, 3, 4, 5]
// 报错

可以将字符串转为真正的数组

[...'hello']
// [ "h", "e", "l", "l", "o" ]

定义了遍历器（Iterator）接口的对象，都可以用扩展运算符转为真正的数组

const nodeList = document.querySelectorAll('div')
const array = [...nodeList]

const map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
])

const arr = [...map.keys()] // [1, 2, 3]

如果对没有 Iterator 接口的对象，使用扩展运算符，将会报错

const obj = { a: 1, b: 2 }
const arr = [...obj] // TypeError: Cannot spread non-iterable object

2.2 构造函数新增的方法

关于构造函数，数组新增的方法有如下：

• Array.from()

• Array.of()

Array.from()

将两类对象转为真正的数组：类似数组的对象和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）

const arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
}
const arr2 = Array.from(arrayLike) // ['a', 'b', 'c']

还可以接受第二个参数，用来对每个元素进行处理，将处理后的值放入返回的数组

Array.from([1, 2, 3], x => x * x)
// [1, 4, 9]

Array.of()

用于将一组值，转换为数组

Array.of(3, 11, 8) // [3,11,8]

没有参数的时候，返回一个空数组

当参数只有一个的时候，实际上是指定数组的长度

参数个数不少于 2 个时，Array()才会返回由参数组成的新数组

[] // []
Array.from({ length: 3 }) // [, , ,]
  [3, 11, 8] // [3, 11, 8]

2.3 实例对象新增的方法

关于数组实例对象新增的方法有如下：

• copyWithin()

• find()、findIndex()

• fill()

• entries()，keys()，values()

• includes()

• flat()，flatMap()

copyWithin()

将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组

参数如下：

• target（必需）：从该位置开始替换数据。如果为负值，表示倒数。

• start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算。

• end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。

[1, 2, 3, 4, 5].copyWithin(0, 3) // 将从 3 号位直到数组结束的成员（4 和 5），复制到从 0 号位开始的位置，结果覆盖了原来的 1 和 2
// [4, 5, 3, 4, 5]

find()、findIndex()

find()用于找出第一个符合条件的数组成员

参数是一个回调函数，接受三个参数依次为当前的值、当前的位置和原数组

[1, 5, 10, 15].find((value, index, arr) => {
  return value > 9
}) // 10

findIndex返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1

[1, 5, 10, 15].findIndex((value, index, arr) => {
  return value > 9
}) // 2

这两个方法都可以接受第二个参数，用来绑定回调函数的this对象。

function f(v) {
  return v > this.age
}
const person = { name: 'John', age: 20 };
[10, 12, 26, 15].find(f, person) // 26

fill()

使用给定值，填充一个数组

['a', 'b', 'c'].fill(7)
// [7, 7, 7]

Array.from({ length: 3 }).fill(7)
// [7, 7, 7]

还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置

['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

注意，如果填充的类型为对象，则是浅拷贝

entries()，keys()，values()

keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历

or (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"

includes()

用于判断数组是否包含给定的值

[1, 2, 3].includes(2) // true
  [1, 2, 3].includes(4) // false
  [1, 2, Number.NaN].includes(Number.NaN) // true

方法的第二个参数表示搜索的起始位置，默认为0

参数为负数则表示倒数的位置

[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1) // true

flat()，flatMap()

将数组扁平化处理，返回一个新数组，对原数据没有影响

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]

flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]

  [1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

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

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap(x => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

flatMap()方法还可以有第二个参数，用来绑定遍历函数里面的this

2.4 数组的空位

数组的空位指，数组的某一个位置没有任何值

ES6 则是明确将空位转为undefined，包括Array.from、扩展运算符、copyWithin()、fill()、entries()、keys()、values()、find()和findIndex()

建议大家在日常书写中，避免出现空位

3. ES6中对象新增了哪些扩展？

3.1 属性的简写

ES6中，当对象键名与对应值名相等的时候，可以进行简写

const baz = { foo }

// 等同于
const baz = { foo }

方法也能够进行简写

const o = {
  method() {
    return 'Hello!'
  }
}

// 等同于

const o = {
  method() {
    return 'Hello!'
  }
}

在函数内作为返回值，也会变得方便很多

function getPoint() {
  const x = 1
  const y = 10
  return { x, y }
}

getPoint()
// {x:1, y:10}

注意：简写的对象方法不能用作构造函数，否则会报错

const obj = {
  f() {
    this.foo = 'bar'
  }
}

new obj.f() // 报错

3.2 属性名表达式

ES6 允许字面量定义对象时，将表达式放在括号内

const lastWord = 'last word'

const a = {
  'first word': 'hello',
  [lastWord]: 'world'
}

a['first word'] // "hello"
a[lastWord] // "world"
a['last word'] // "world"

表达式还可以用于定义方法名

const obj = {
  ['h' + 'ello']() {
    return 'hi'
  }
}

obj.hello() // hi

注意，属性名表达式与简洁表示法，不能同时使用，会报错

// 报错
const foo = 'bar';
const bar = 'abc';
const baz = { [foo] };

// 正确
const foo = 'bar';
const baz = { [foo]: 'abc'};

注意，属性名表达式如果是一个对象，默认情况下会自动将对象转为字符串[object Object]

const keyA = { a: 1 }
const keyB = { b: 2 }

const myObject = {
  [keyA]: 'valueA',
  [keyB]: 'valueB'
}

myObject // Object {[object Object]: "valueB"}

3.3 super关键字

this关键字总是指向函数所在的当前对象，ES6 又新增了另一个类似的关键字super，指向当前对象的原型对象

const proto = {
  foo: 'hello'
}

const obj = {
  foo: 'world',
  find() {
    return super.foo
  }
}

Object.setPrototypeOf(obj, proto) // 为obj设置原型对象
obj.find() // "hello"

3.4 扩展运算符的应用

在解构赋值中，未被读取的可遍历的属性，分配到指定的对象上面

const { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }
x // 1
y // 2
z // { a: 3, b: 4 }

注意：解构赋值必须是最后一个参数，否则会报错

解构赋值是浅拷贝

const obj = { a: { b: 1 } }
const { ...x } = obj
obj.a.b = 2 // 修改obj里面a属性中键值
x.a.b // 2，影响到了结构出来x的值

对象的扩展运算符等同于使用Object.assign()方法

3.5 属性的遍历

ES6 一共有 5 种方法可以遍历对象的属性。

• for...in：循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）

• Object.keys(obj)：返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名

• Object.getOwnPropertyNames(obj)：回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名

• Object.getOwnPropertySymbols(obj)：返回一个数组，包含对象自身的所有 Symbol 属性的键名

• Reflect.ownKeys(obj)：返回一个数组，包含对象自身的（不含继承的）所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举

上述遍历，都遵守同样的属性遍历的次序规则：

• 首先遍历所有数值键，按照数值升序排列

• 其次遍历所有字符串键，按照加入时间升序排列

• 最后遍历所有 Symbol 键，按照加入时间升序排

Reflect.ownKeys({ [Symbol()]: 0, b: 0, 10: 0, 2: 0, a: 0 })
// ['2', '10', 'b', 'a', Symbol()]

3.6 对象新增的方法

关于对象新增的方法，分别有以下：

• Object.is()

• Object.assign()

• Object.getOwnPropertyDescriptors()

• Object.setPrototypeOf()，Object.getPrototypeOf()

• Object.keys()，Object.values()，Object.entries()

• Object.fromEntries()

Object.is()

严格判断两个值是否相等，与严格比较运算符（===）的行为基本一致，不同之处只有两个：一是+0不等于-0，二是NaN等于自身

+0 === -0 // true
Number.NaN === Number.NaN // false

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

Object.assign()

Object.assign()方法用于对象的合并，将源对象source的所有可枚举属性，复制到目标对象targetObject.assign()方法的第一个参数是目标对象，后面的参数都是源对象

const target = { a: 1, b: 1 }

const source1 = { b: 2, c: 2 }
const source2 = { c: 3 }

Object.assign(target, source1, source2)
target // {a:1, b:2, c:3}

注意：Object.assign()方法是浅拷贝，遇到同名属性会进行替换

Object.getOwnPropertyDescriptors()

返回指定对象所有自身属性（非继承属性）的描述对象

const obj = {
  foo: 123,
  get bar() { return 'abc' }
}

Object.getOwnPropertyDescriptors(obj)
// { foo:
//    { value: 123,
//      writable: true,
//      enumerable: true,
//      configurable: true },
//   bar:
//    { get: [Function: get bar],
//      set: undefined,
//      enumerable: true,
//      configurable: true } }

Object.setPrototypeOf()

Object.setPrototypeOf方法用来设置一个对象的原型对象

Object.setPrototypeOf(object, prototype)

// 用法
const o = Object.setPrototypeOf({}, null)

Object.getPrototypeOf()

用于读取一个对象的原型对象

Object.getPrototypeOf(obj)

Object.keys()

返回自身的（不含继承的）所有可遍历（enumerable）属性的键名的数组

const obj = { foo: 'bar', baz: 42 }
Object.keys(obj)
// ["foo", "baz"]

Object.values()

返回自身的（不含继承的）所有可遍历（enumerable）属性的键对应值的数组

const obj = { foo: 'bar', baz: 42 }
Object.values(obj)
// ["bar", 42]

Object.entries()

返回一个对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对的数组

const obj = { foo: 'bar', baz: 42 }
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]

Object.fromEntries()

用于将一个键值对数组转为对象

Object.fromEntries([
  ['foo', 'bar'],
  ['baz', 42]
])
// { foo: "bar", baz: 42 }

4. ES6中函数新增了哪些扩展

4.1 参数

ES6允许为函数的参数设置默认值

function log(x, y = 'World') {
  console.log(x, y)
}

console.log('Hello') // Hello World
console.log('Hello', 'China') // Hello China
console.log('Hello', '') // Hello

函数的形参是默认声明的，不能使用let或const再次声明

function foo(x = 5) {
  let x = 1 // error
  const x = 2 // error
}

参数默认值可以与解构赋值的默认值结合起来使用

function foo({ x, y = 5 }) {
  console.log(x, y)
}

foo({}) // undefined 5
foo({ x: 1 }) // 1 5
foo({ x: 1, y: 2 }) // 1 2
foo() // TypeError: Cannot read property 'x' of undefined

上面的foo函数，当参数为对象的时候才能进行解构，如果没有提供参数的时候，变量x和y就不会生成，从而报错，这里设置默认值避免

function foo({ x, y = 5 } = {}) {
  console.log(x, y)
}

foo() // undefined 5

参数默认值应该是函数的尾参数，如果不是非尾部的参数设置默认值，实际上这个参数是没发省略的

function f(x = 1, y) {
  return [x, y];
}

f() // [1, undefined]
f(2) // [2, undefined]
f(, 1) // 报错
f(undefined, 1) // [1, 1]

4.2 属性

函数的length属性

length将返回没有指定默认值的参数个数

(function (a) {}).length // 1
((a = 5) => {}).length // 0
((a, b, c = 5) => {}).length // 2

rest 参数也不会计入length属性

(function (...args) {}).length // 0

如果设置了默认值的参数不是尾参数，那么length属性也不再计入后面的参数了

(function (a = 0, b, c) {}).length // 0
((a, b = 1, c) => {}).length // 1

name属性

返回该函数的函数名

function f() {}

// ES5
f.name // ""

// ES6
f.name // "f"

如果将一个具名函数赋值给一个变量，则 name属性都返回这个具名函数原本的名字

function bar() {}
bar.name // "baz"

Function构造函数返回的函数实例，name属性的值为anonymous

(new Function()).name // "anonymous"

bind返回的函数，name属性值会加上bound前缀

function foo() {}
foo.bind({}).name // "bound foo"

(() => {}).bind({}).name // "bound "

4.3 作用域

一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域

等到初始化结束，这个作用域就会消失。这种语法行为，在不设置参数默认值时，是不会出现的

下面例子中，y=x会形成一个单独作用域，x没有被定义，所以指向全局变量x

const x = 1

function f(y = x) {
  // 等同于 let y = x
  const x = 2
  console.log(y)
}

f() // 1

4.4 严格模式

只要函数参数使用了默认值、解构赋值、或者扩展运算符，那么函数内部就不能显式设定为严格模式，否则会报错

// 报错
function doSomething(a, b = a) {
  'use strict'
  // code
}

// 报错
const doSomething = function ({ a, b }) {
  'use strict'
  // code
}

// 报错
const doSomething = (...a) => {
  'use strict'
  // code
}

const obj = {
  // 报错
  doSomething({ a, b }) {
    'use strict'
    // code
  }
}

4.5 箭头函数

使用“箭头”（=>）定义函数

var f = v => v

// 等同于
var f = function (v) {
  return v
}

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分

var f = () => 5
// 等同于
var f = function () { return 5 }

var sum = (num1, num2) => num1 + num2
// 等同于
var sum = function (num1, num2) {
  return num1 + num2
}

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回

function sum(num1, num2) { return num1 + num2 }

如果返回对象，需要加括号将对象包裹

const getTempItem = id => ({ id, name: 'Temp' })

注意点：

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

• 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误

• 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替

• 不可以使用yield命令，因此箭头函数不能用作 Generator 函数