ECMAScriptES6核心内容精讲–快速实践ES6(一)

前言

本文大量参照了阮一峰先生的开源教程ECMAScript6入门及MDN,适合新手入门或者对ES6不时因此知识点进行完善回顾,目标是坐比少的字数涵盖ES6同一些ES7在实践中的大部施用状况。更健全、更深切的请求进来者的课。如果您看有遗漏的大规模知识点或者不当的地方,请评论指出!

新的变量声明方式let和const

是什么:

新的变量声明方式,提供变量的块级作用域,同时经过一些限制来再防止我们作错误。也就是说是又好之扬言变量的办法

怎么用

1)let/const与var的别是提供了块级作用域与不再有变量提升(hoisting)

2)在同一个作用域内let/const禁止重复声明相同的变量

var a = 1
let a = 2 // SyntaxError

3)let声明的变量可再次赋值,const声明的变量不可知还赋值,即常量。

4)暂时性死区:在脚下作用域,使用的变量已经在,但是于代码执行到变量声明前禁止访问。

var tmp = 123

if (true) {
  tmp = 'abc' // ReferenceError
  let tmp
}

大规模使用状况

1)因为能创建块级作用域,所以广于if和for中

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

2)const在实践中常用来声称一个目标,之后方可再次指向是目标的性质进行修改

const foo = {
    name: 'bar'
}

foo.name = 'baz'

console.log(foo)

解构

是什么:

据阮一峰大神的布道:ES6同意以一定模式,从数组和对象被领到值,对变量进行赋值,这被称作解构(Destructuring)。也就是说通过模式匹配来开展变量赋值。

怎么用:

1)数组基本用法

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

a //1
b //2
c //3

2)对象基本用法

let { foo, bar } = { foo: "aaa", bar: "bbb" }
foo // "aaa"
bar // "bbb"

3)函数参数的解构赋值

倘以vuex中action不使解构如下:

actions: {
    increment (context) {
      context.commit('increment')
    }
}

使用解构

actions: {
    increment ({ commit }) {
      commit('increment')
    }
}

4)支持非了解构

let [foo, bar] = [1, 2, 3]

5)如果解构不成功,变量的价就是等于undefined,同时解构赋值允许指定默认值,默认值生效的尺码是目标的属性值严格等于undefined。

广大使用状况

1)交换变量的价值

[x, y] = [y, x]

2)提取JSON数据

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
}

let { id, status, data: number } = jsonData

console.log(id, status, number) // 42, "OK", [867, 5309]

3)函数参数的默认值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
}) {
  // ... do stuff
}

4)指定加载模块的呦效果

import { mapActions } from 'vuex'

箭头函数

干嘛的:

箭头函数可以就此来替换函数表达式,不用写function,更加简化。也就是说是函数表达式的简化方式

怎么用:

1)注意箭头函数中之this指为外围的this

2)无法用call/apply/bind来改变this指向。

3)在ES6吃,会默认使用严格模式,因此默认情况下this不是据为window对象,而是undefined。

<script type="text/javascript">
    setTimeout(() => console.log(this), 1000) // undefined,不是window
</script>

4)不得以用arguments对象,该对象在部数体内不存。如果要为此,可以为此rest参数代替。

应用状况:

要害是你要this指于什么

默认参数和rest参数

是什么:

默认参数就是安装参数默认值,rest参数(翻译啊无签参数,也叫做剩余参数)是将盛传的无署的参数作为一个数组集合

怎么用:

一般来说,默认参数为参数与一个默认值,rest参数使用三单点(…)加数组集合名

function foo(arg1 = 1, ...restArg){
    console.log(arg1, restArg)
}

foo(undefined, 2, 3, 4) // 1, [2, 3, 4]

foo(2, 3, 4) // 2, [3, 4]

壮大运算符

是什么:

同rest参数一样,也是三个点。它好比rest参数的逆运算,将一个数组转为用逗号分隔的参数序列。因此经常用于函数调用。

大使用状况:

1)合并数组

let newArr = [...arr1, ...arr2, ...arr3]

2)与解构赋值结合

// ES5
a = list[0], rest = list.slice(1)

// ES6
[a, ...rest] = list

3)将字符串转为数组

[...'test'] // [ "t", "e", "s", "t"]

目标扩大

语法变化

1)属性简写,当对象的一个特性名称与本土变量名相同的时刻,可以概括冒号和价值

var foo = 'bar'
var baz = {foo}
baz // {foo: "bar"}

2)属性名表达式,可以于盖目标字面量方式定义对象是用表达式作为属性名

// ES5只能这样
obj['a' + 'bc'] = 123 

// ES6还能这样
let obj = {
  ['a' + 'bc']: 123
}

3)方法简写,省去:和function

const foo = {
  bar () {
    console.log('1')
  }
}

Object.is()

重复好之判定方法,与===的两样来点儿沾:一是+0不顶-0,二凡是NaN等于我。

NaN === NaN // false
Object.is(NaN, NaN) // true

Object.assign()

1)Object.assign方法用于对象的汇合,用法以及jQuery和underscore的extend方法类似,而且同会变动target。

Object.assign(target, source1, source2)

2)只拷贝源对象的自性质(不拷贝继承属性),也不拷贝不可枚举的特性(enumerable:
false)。

3)Object.assign方法执行的凡浅拷贝,而未是深拷贝。

Object.setPrototypeOf

就此来安装一个对象的prototype对象,返回参数对象自我

Object.setPrototypeOf(object, prototype)

Object.getPrototypeOf()

Object.getPrototypeOf方法可以用来打子类上赢得父类。因此,可以行使这办法判断,一个接近是否继续了别一个类似。参见下面类与持续章节

遍历

目标的每个属性都出一个描述对象(Descriptor),Object.getOwnPropertyDescriptor方法可以收获该属性的叙述对象。这个描述对象来value、writable、enumerable、configurable四大属性。

ES5脚三个操作会忽略enumerable为false的属性。

  • for…in循环:只遍历对象自我之以及累的可枚举的性质
  • Object.keys():返回对象自我的所有可枚举的特性的键名
  • JSON.stringify():只串行化对象自我的可枚举的性能

ES6新增加的操作Object.assign(),也会忽略enumerable为false的习性,只拷贝对象自我的可枚举的属性。

ES6等同旅发生5种方法好遍历对象的性。

(1)for…in

for…in循环遍历对象自我之同累的不过枚举属性(不含Symbol属性)。

(2)Object.keys(obj)

Object.keys返回一个屡屡组,包括对象自我的(不分包继承的)所有可枚举属性(不含Symbol属性)。

(3)Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一个累组,包含对象自我之享有属性(不含Symbol属性,但是连不可枚举属性)。

(4)Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一个勤组,包含对象自我的备Symbol属性。

(5)Reflect.ownKeys(obj)

Reflect.ownKeys返回一个屡次组,包含对象自我之有着属性,不管属性名是Symbol或字符串,也任是不是只是枚举。

以上的5种植方法遍历对象的习性,都遵从同样的特性遍历的程序规则。

  • 先是遍历所有属于性名为数值的性能,按照数字排序。
  • 说不上遍历所有属于性名为字符串的习性,按照转变时间排序。
  • 终极遍历所有属于性名为Symbol值的性能,按照转变时间排序。

大部辰光,我们只关注对象自我之只是枚举属性。所以,尽量不要为此for…in循环,而因此Object.keys()代替。

字符串扩展

此前判断一个字符串是否包含有字符串只能通过indexOf的价是否超出-1来判断,现在激增了三栽办法:

includes():表示是否带有该字符串。

startsWith():表示该字符串是否在头。

endsWith():表示该字符串是否以尾部。

'hello world'.includes('hello') // true

模板字符串

干嘛的:

以及handlebars那些模板引擎功能类似,有模板字符串可以免用拼接字符串了

怎么用:

就此反引号“以全方位字符串包裹起来,${}表示一个变量或者一个表达式,可以嵌套

const tmpl = addrs => `
  <table>
  ${addrs.map(addr => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
  `).join('')}
  </table>
`

const data = [
  { first: 'Jane', last: 'Bond' },
  { first: 'Lars', last: 'Croft' },
]

console.log(tmpl(data))

签模板

函数称为背后紧接一个模板字符串。该函数以于调用来处理这模板字符串。这吃叫作“标签模板”功能(tagged
template)。当字符串模板来变量时,函数的首先独参数为受变量分开的字符串组成的数组,后面的参数依次为变量,这些变量的参数序列可以采取rest参数。

var a = 5
var b = 10

tag`Hello ${ a + b } world ${ a * b }`
// 等同于
tag(['Hello ', ' world ', ''], 15, 50)

数组扩展

Array.of()

Array.of方法用于将同一组值,转换为数组。可以取代Array,且其行十分统一,不像Array只发生一个正要整数参数n时,会生成n个空位构成的数组

Array.of(1) // [1]
Array.of(1, 2, 3) // [1, 2, 3]
Array(1) // [undefined * 1],其实不是undefined,是空位,如下可证明两者并不一样
0 in [undefined, undefined, undefined] // true
0 in [, , ,] // false
Array(1, 2, 3) // [1, 2, 3]

Array.from()

Array.from方法用于将两类对象转为真正的数组:类数组对象(array-like
object)和可遍历(iterable)对象(包括ES6初长的数据结构Set和Map)。Array.from还可领第二独参数,作用类似于数组的map方法,用来针对每个元素进行处理,将拍卖后的价值放入返回的数组。

Array.from({'0': 'a', length: 1}) // ['a']

Array.from('hello') // ['h', 'e', 'l', 'l', 'o'],因为字符串有Iterator接口,可遍历

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

大使用状况:

1)转换NodeList集合。常见的类数组的靶子是DOM操作返回的NodeList集合,以及函数内部的arguments对象。但是后者以rest参数还省事

// NodeList对象
let elementDivList = document.querySelectorAll('div')
Array.from(elementDivList).forEach(function (div) {
  console.log(div)
})

2)数组去再。与下要讲话到之Set配合即可生简单地落实数值去重。

var arr = [1, 3, 5, 5, 8, 3, 2]
var uniqueArr = Array.from(new Set(arr))
console.log(uniqueArr) // [1, 3, 5, 8, 2]

数组实例的copyWithin方法

Array.prototype.copyWithin(target, start = 0, end = this.length)

它接受三单参数。

  • target(必需):从该岗位上马交替数据。
  • start(可选):从该位置上马读取数据,默认为0。如果为负值,表示倒数。
  • end(可选):到该职位前停下读取数据,默认等于数组长度。如果为负值,表示倒数。

    [1, 2, 3, 4, 5].copyWithin(0,2) // [3, 4, 5, 4, 5]
    /* 从索引2开始读取数据,到数组尾部停止,即读到(3, 4, 5),然后从索引0开始替换数据 */
    

数组实例的find和findIndex方法

找到第一个符合条件的item(项)或index(索引),前者相当给underscore中之first方法,后者则同underscore中的同名方法同样。另外,这片个法子都好借助Object.is发现NaN,弥补了反复组的IndexOf方法的供不应求。

[1, 2, 3, 4].find(x => x > 2) // 3
[1, 2, 3, 4].findIndex(x => x > 2) // 2
[NaN].findIndex(x => Object.is(NaN, x)) // 0

数组实例的fill方法

Array.prototype.fill(fillItem, start = 0, end = this.length)

[1, 3, 6, 11, 4].fill(10,2) // [1, 3, 10, 10, 10]

数组实例的includes方法

以及字符串的includes方法类似。该措施属于ES7,但Babel转码器已经支撑。

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

Set和Map

ES6遭受益了少数只新的数据结构:Set和Map。Set是休带有重复复值的列表,而Map则是键和互为呼应的价的汇聚。

Set

是什么:

Set是无含重复复值的不变列表。

怎么用:

1)Set构造函数可以领一个数组(或接近数组的对象)作为参数,用来初始化。

const set = new Set([1, 2, 3, 4, 4])
console.log(set)

2)四单操作方法(add()、delete()、has()、clear())和一个性(size),使用方法根据名字和脚例子就是亮了

const s = new Set()
s.add(1).add(2).add(2) // 注意2被add了两次

s.size // 2

s.has(1) // true
s.has(2) // true
s.has(3) // false

s.delete(2)
s.has(2) // false

s.add(3)
s.size // 2

s.clear()
s.size // 0

3)三单遍历器生成函数(keys()、values()、entries())和一个遍历方法(forEach())

keys方法、values方法、entries方法返回的且是成套历器对象(详见Iterator)。都立足以用任何历器对象的法子for…of进行遍历。由于
Set
结构没有键名,只出键值(或者说键名和键值是暨一个价),所以keys方法以及values方法的行完全一致。forEach方法和ES5累组的forEach类似。

let set = new Set(['red', 'green', 'blue'])

for (let item of set.keys()) {
  console.log(item)
}
// red
// green
// blue

for (let item of set.values()) {
  console.log(item)
}
// red
// green
// blue

for (let item of set.entries()) {
  console.log(item)
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]

set.forEach((value, key) => console.log(value, key))

4)Set转化为数组,有一定量种植方法:…扩展运算符和Array.from()

眼看二者可换,因此前提到的动Array.from()来多次组去再呢足以这样做:[…new
Set(arr)]

// 方法一
let set = new Set([1, 2, 3])
set = new Set([...set].map(val => val * 2))
// set的值是2, 4, 6

// 方法二
let set = new Set([1, 2, 3])
set = new Set(Array.from(set, val => val * 2))
// set的值是2, 4, 6

Map

是什么:

同等栽由键值对聚集构成的数据结构,类似于对象,但是“键”的范围未制止字符串,各种类型的值(包括对象)都得当作键。

const m = new Map();
const o = {p: 'Hello World'};

m.set(o, 'content')
m.get(o) // "content"

怎么用:

1)Set构造函数可以收任何一个怀有Iterator接口的数据结构作为参数

const set = new Set([
  ['foo', 1],
  ['bar', 2]
])
const m1 = new Map(set)
m1.get('foo') // 1

2)5个操作方法(set(key,
value)、get(key)、has(key)、delete(key)、clear())和一个性能(size)

3)遍历生成函数和遍历方法和Set类似,Map结构的默认所有历器接口(Symbol.iterator属性),就是entries方法。

map[Symbol.iterator] === map.entries // true

4)Map转为数组,使用…扩展运算符

WeakSet和WeakMap

WeakSet、WeakMap分别同Set、Map类似,不过存储的凡目标的身故引用方式,这样以内存管理及越便于优化。