深入理解es6（附代码-上）

深入理解es6

ES6 第一章：let和const

let

没有变量提升
不可以重复声明
不会给window增加属性

const

没有变量提升
不可以重复声明
不会给window增加属性
const定义变量在声明时必须赋值
const定义的是一个常量

块级作用域

一个{}就是一个块级作用域
块级作用域下let和const声明的变量是私有的
{}表示对象时不能放在行首，可以用括号包起来或者用一个变量接收
for循环括号中的let是私有的变量

ES6 第二章：解构赋值

数组解构赋值

引用赋值

let arr = [1,2,3,4]
let [w,x,y,z] = arr
console.log(w,x,y,z)
输出: 1 2 3 4

设置默认值

let [x1,x2=10] = [1]
console.log(x1, x2)
输出: 1 10
只有后面解构的值是undefined时才会走默认值

省略赋值

let [,,m2] = [1,2,3]
console.log(m2)
输出: 3

不定参数赋值

let [y1,y2,...y3] = [1,2,3,4,5]
console.log(y3)
输出: [3,4,5]

对象解构赋值

省略赋值

key与value一致时可简写为一个
let {name,age} = {name:'张三', age: 20}
console.log(name, age)
输出: 张三 20

设置默认值

let {name,age=10} = {name:'张三', age: undefiend}
let {name,age=10} = {name:'张三', undefiend}
console.log(name, age)
输出: 张三 10

嵌套赋值

let {name,age=100,list:[a,b,c,d]}= {name:'张三',undefiend,list:['js','node','vue','react']}
console.log(name, age, a, b, c, d)
输出: 张三 100 js node vue react

{}放在行首时为代码块，当做最想赋值时需要加上括号
let x1,x2
({x1,x2}) = {x1:1,x2:2}
({x1,x2} = {x1:1,x2:2})
console.log(x1,x2)
输出: 1 2

其他数据类型解构赋值

数组赋值非数组类型

右边不是数组会默认将右边转换成数组(类似数组的对象，必须有length属性)
let [x,y] = '123'
console.log(x,y)
输出: 1 2

对象赋值非对象类型

默认将等号右边转换为对象，无法转换时会报错
冒号左边是解构时的key值
冒号左边找不到时解构失败
冒号右边的是声明的变量
解构成功时冒号右边的变量会被赋值为被解构出来的value
解构失败时冒号右边的变量会被赋值为undefined
冒号两边为一致时可简写为一个变量名

// 默认将数字1转换成Object，然后将对应的__proto__属性解构给a
let {__proto__:a} = 1
console.log(a)
输出: Number {...}

// 默认将字符串'1234'转换成Object，然后将对应的length属性解构给b
let {length:b} = '1234'
console.log(b)
输出: 4

函数参数解构赋值

参数为数组

function getA([a,b,c,...d]) {
    console.log(a,b,c,d)
}
getA([1,2,3,4,5])
输出: 1 2 3 [4,5]

参数为对象

//  参数必须是对象
function getB({name='张三',age=20}) {
    console.log(name, age)
}
getB()  // 报错，不能是undefined或者null

//  参数不传时用等号右边的对象解构
//  传参时会用传入的参数替换等号右边的参数进行解构
function getB({name='张三',age=20}={}) {
    console.log(name, age)
}
getB()  //  输出：张三 20
getB({})  //  输出：张三 20

//  不传参数时用等号右边的对象解构
//  传参时会用传入的参数替换等号右边的参数进行解构
function getB({name='张三',age=50}={name:'李四',age:20}) {
    console.log(name, age)
}
getB()  // 输出: 李四 20
getB({})    // 输出: 张三 50

//  不传参数时用等号右边的对象解构
//  传参时会用传入的参数替换等号右边的参数进行解构
function getB({name,age}={name:'李四',age:20}) {
    console.log(name, age)
}
getB()      //  输出: 李四 20
getB({})    //  空对象解构失败,输出: undefined undefined

ES6 第三章：字符串扩展

原型上扩展的方法

includes

说明:
判断字符串中有没有指定字符

语法:
str.includes(searchString[, position])

返回值<Boolean>：
如果当前字符串包含被搜寻的字符串，就返回 true；否则返回 false。

参数:

名称	类型	必选	描述
searchString	String	Y	要在此字符串中搜索的字符串
position	Number	N	从当前字符串的哪个索引位置开始搜寻子字符串，默认值为0

//  position不为数字时默认使用Number转为数字 Number()
let str = 'abcdefg12345'
console.log(str.includes('d', null))
输出: true

startsWith

说明:
判断当前字符串是否是以另外一个给定的子字符串"开头"的

语法:
str.startsWith(searchString [, position])

返回值<Boolean>：
如果在当前字符串中被搜索的字符串位置与给定的位置一致，就返回 true；否则返回 false。

参数:

名称	类型	必选	描述
searchString	String	Y	要搜索的子字符串
position	Number	N	在 str 中搜索 searchString 的开始位置，默认值为 0，也就是真正的字符串开头处

//  position不为数字时默认使用Number转为数字 Number()
let str = 'abcdefg12345'
console.log(str.startsWith('a', null))
输出: true

endsWith

说明:
确定一个字符串是否在另一个字符串的末尾，这个方法是大小写敏感的

语法:
str.endsWith(searchString [, position])

返回值<Boolean>：
如果传入的子字符串在搜索字符串的末尾，返回 true；否则返回 false

参数:

名称	类型	必选	描述
searchString	String	Y	要搜索的子字符串
position	Number	N	作为str的长度，默认值为 str.length

//  position不为数字时默认使用Number转为数字 Number()
//  当前字符串为0到position的字符串
let str = 'abcdefg12345'
console.log(str.endsWith('c', 3))
输出: true

repeat

说明:
构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的字符串的副本

语法:
let resultString = str.repeat(count)

返回值<String>：
包含指定字符串的指定数量副本的新字符串

参数:

名称	类型	必选	描述
count	Number	Y	介于0和正无穷大之间的整数 : [0, +∞) 。表示在新构造的字符串中重复了多少遍原字符串

//  将字符串重复count次
//  count不可以是负数或者Infinity
//  0到-1之间的数或正的小数会取整
let str = 'abcdefg12345'
console.log(str.repeat(1.3))
输出: 'abcdefg12345'

padStart

说明:
==(ES7语法)==用另一个字符串填充当前字符串(重复，如果需要的话)，以便产生的字符串达到给定的长度。填充从当前字符串的开始(左侧)应用的

语法:
str.padStart(targetLength [, padString])

返回值<String>：
在原字符串开头填充指定的填充字符串直到目标长度所形成的新字符串

参数:

名称	类型	必选	描述
targetLength	Number	Y	当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身
padString	String	N	填充时所用的字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。默认值为 " "（U+0020）

//  按照指定字符补全字符串的长度
let str = 'ab'
console.log(str.padStart(5, 'g'))
输出: 'gggab'
console.log(str.padStart(5, 'gh'))
输出: 'ghgab'
console.log(str.padStart(5, 'ghk'))
输出: 'ghkab'
console.log(str.padStart(5, 'ghkj'))
输出: 'ghkab'

padEnd

说明:
==(ES7语法)==用一个字符串填充当前字符串（如果需要的话则重复填充），返回填充后达到指定长度的字符串。从当前字符串的末尾（右侧）开始填充

语法:
str.padEnd(targetLength [, padString])

返回值<String>：
在原字符串末尾填充指定的填充字符串直到目标长度所形成的新字符串

参数:

名称	类型	必选	描述
targetLength	Number	Y	当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身
padString	String	N	填充时所用的字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。默认值为 " "（U+0020）

//  按照指定字符补全字符串的长度
let str = 'ab'
console.log(str.padEnd(5, 'g'))
输出: 'abggg'
console.log(str.padEnd(5, 'gh'))
输出: 'abghg'
console.log(str.padEnd(5, 'ghk'))
输出: 'abghk'
console.log(str.padEnd(5, 'ghkj'))
输出: 'abghk'

模板字符串

==` `==中可以使用变量,添加变量用==${变量名}==

let a = 'hello'
let b = 'world'
console.log(`${a} ${b}!!!`)
输出: hello world!!!

ES6 第四章：数组的扩展

Array类上扩展的方法

Array.of()

说明:
方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型

语法:
Array.of(element0[, element1[, ...[, elementN]]])

返回值<Array>：
新的 Array 实例

参数:

名称	类型	必选	描述
elementN	Any	N	任意个参数，将按顺序成为返回数组中的元素

//  Array类是一个函数，返回一个数组
//  Array(x,y,z)将参数变成一个数组返回[x,y,z]
//  注意：只有一个参数并且参数是一个数字n，返回有n个空位的数组
//  Array.of() 跟Array一样的 唯一不同的是 参数是一个数字的时候返回只有一个元素的数组，数组的值为传入的值
console.log(Array(1,2,3))
输出: [1,2,3]

console.log(Array('1'))
输出: ['1']

console.log(Array(4))
输出: [empty × 4] 即 [ , , , ]

console.log(Array.of(4))
输出: [4]

console.log(Array.of(1, 2, 3)) 
输出: [1, 2, 3]

console.log(Array.of(undefined))
输出: [undefined]

Array.from()

说明:
从一个类似数组或可迭代对象中创建一个新的数组实例

语法:
Array.from(arrayLike[, mapFn[, thisArg]])

返回值<Array>：
一个新的数组实例

参数:

名称	类型	必选	描述
arrayLike	Object	Y	想要转换成数组的伪数组对象或可迭代对象
mapFn	CallBack	N	如果指定了该参数，新数组中的每个元素会执行该回调函数
thisArg	Object	N	执行回调函数 mapFn 时 this 对象

// 可以将类数组转换为数组
let a = '12345'
console.log(Array.from(a))
输出: [1,2,3,4,5]

Array原型上扩展的方法

copyWithin

说明:
从原数组中读取内容，替换数组的指定位置的内容

语法:
arr.copyWithin(target[, start[, end]])

返回值<Array>：
改变之后的数组

参数:

名称	类型	必选	描述
target	Number	N	替换的目标起始位置target，负数时从末尾计算
start	Number	N	查找的起始位置，负数时从末尾计算
end	Number	N	查找的结束位置，不包含end这个位置的元素，负数时从末尾计算

// 原数组length不变，超出的部分截取
let arr = [1,2,3,4,5,6,7,8]
console.log(arr.copyWithin(2,4,7))   // 从start开始到end不包含7索引的位置取值，得出结果[5，6，7]，从2索引出开始替换
输出: [1,2,5,6,7,6,7,8]

fill

说明:
按照指定字符填充数组的指定位置

语法:
arr.fill(value[, start[, end]])

返回值<Array>：
改变之后的数组

参数:

名称	类型	必选	描述
value	Number	N	用来填充数组元素的值
start	Number	N	起始索引，默认值为0
end	Number	N	终止索引，默认值为 this.length

//  将数组的每一项都变成指定字符
let arr = [1,2,3,4,5]
console.log(arr.fill('张三'))
输出: ['张三','张三','张三','张三','张三']
//  从指定位置开始替换
let arr = [1,2,3,4,5]
console.log(arr.fill('张三', 3))
输出: [1, 2, 3, "张三", "张三"]
//  从指定位置开始替换,不包含end处的元素
let arr = [1,2,3,4,5]
console.log(arr.fill('张三', 3, 4))
输出: [1, 2, 3, "张三", 5]

filter

说明:
变量数组根据返回值去过滤原数组

语法:
var new_array = arr.filter(callback(element[, index[, array]])[, thisArg])

返回值<Array>：
改变之后的数组

参数:

名称	类型	必选	描述
callback	Function	Y	用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)。返回true表示保留该元素（通过测试），false则不保留
(element)	Any	N	当前在数组中处理的元素
(index)	Number	N	正在处理元素在数组中的索引
(array)	Array	N	调用了filter的数组
thisArg	Object	N	执行 callback 时的用于 this 的值

let a = [1,2,3,'张三',4,'张三']
let obj = {a:'李四',b:100}
let arr = a.filter(function(element,index,array){
    //  element，每次遍历时的数组的元素
    //  index，每次遍历时的数组的索引
    //  array，调用filter函数的数组a
    //  this.arg，this = obj
    //  为true时会添加到新的数组元素中，否则不添加
    return typeof item === 'Number'
}, obj)
console.log(arr)    //  返回一个新数组，原数组不变
输出: [1,2,3,4]

find

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

语法:
arr.find(callback[, thisArg])

返回值<Any>：
当某个元素通过 callback 的测试时，返回数组中的一个值，否则返回 undefined

参数:

名称	类型	必选	描述
callback	Function	Y	在数组每一项上执行的函数，接收 3 个参数
(element)	Any	N	当前遍历到的元素
(index)	Number	N	当前遍历到的索引
(array)	Array	N	数组本身
thisArg	Object	N	可选，指定 callback 的 this 参数

let a = [1,2,3,'张三',4,'张三']
let obj = {a:'李四',b:100}
let item = a.find(function(item){
    return typeof item === 'string'
})
console.log(item)
输出: '张三'

findIndex

说明:
返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1

语法:
arr.findIndex(callback[, thisArg])

返回值<Any>：
当某个元素通过 callback 的测试时，返回数组中的一个值，否则返回 undefined

参数:

名称	类型	必选	描述
callback	Function	Y	在数组每一项上执行的函数，接收 3 个参数
(element)	Any	N	当前遍历到的元素
(index)	Number	N	当前遍历到的索引
(array)	Array	N	数组本身
thisArg	Object	N	可选，指定 callback 的 this 参数

let a = [1,2,3,'张三',4,'张三']
let obj = {a:'李四',b:100}
let item = a.findIndex(function(item){
    return typeof item === 'string'
})
console.log(item)
输出: 3

includes

说明:
返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1

语法:
arr.includes(searchElement)
arr.includes(searchElement, fromIndex)

返回值<Boolean>：
包含返回true，否则返回false

参数:

名称	类型	必选	描述
searchElement	Any	Y	需要查找的元素值
fromIndex	Any	N	从该索引处开始查找searchElement。如果为负值，则按升序从 array.length - fromIndex 的索引开始搜索。默认为 0

let arr = [1,2,3,'张三',4,'张三']
console.log(arr.includes('张三'))
输出: true

let arr = [1,2,3,'张三',4,'张三']
console.log(arr.includes(3, 3))
输出: true

every

说明:
测试数组的所有元素是否都通过了指定函数的测试,全部通过为true，否则为false

语法:
arr.every(callback[, thisArg])

返回值<Boolean>：
全部符合规则返回true，否则返回false

参数:

名称	类型	必选	描述
callback	Function	Y	用来测试每个元素的函数
thisArg	Object	N	执行 callback 时使用的 this 值

let arr = [1,2,3,'张三',4,'张三']
console.log(arr.every(function(item){
    return typeof item === 'number' || typeof item === 'string'
}))
输出: true

some

说明:
测试数组中的某些元素是否通过由提供的函数实现的测试，有一项通过为true，否则为false

语法:
arr.some(callback[, thisArg])

返回值<Boolean>：
有一项通过为true，否则为false

参数:

名称	类型	必选	描述
callback	Function	Y	用来测试每个元素的函数
thisArg	Object	N	执行 callback 时使用的 this 值

let arr = [1,2,3,'张三',4,'张三']
console.log(arr.some(function(item){
    return typeof item === 'number'
}))
输出: true

reduce

说明:
对累计器和数组中的每个元素（从左到右）应用一个函数，将其简化为单个值

语法:
arr.reduce(callback,[initialValue])

返回值<Any>：
函数累计处理的结果

参数:

名称	类型	必选	描述
callback	Function	Y	执行数组中每个值的函数，包含四个参数
(accumulator)	Any	N	累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue
(currentValue)	Any	N	数组中正在处理的元素
(currentIndex)	Any	N	数组中正在处理的当前元素的索引。如果提供了initialValue，则起始索引号为0，否则为1
(array)	Any	N	当前数组
initialValue	Any	N	作为第一次调用 callback函数时的第一个参数的值。如果没有提供初始值，则将使用数组中的第一个元素。在没有初始值的空数组上调用 reduce 将报错

let arr = [1,2,3,4,5]
console.log(arr.reduce(function(accumulator,currentValue){
    return accumulator + currentValue
}))
输出: 15

reduceRight

说明:
接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值

语法:
arr.reduceRight(callback[, initialValue])

返回值<Any>：
函数累计处理的结果

参数:

名称	类型	必选	描述
callback	Function	Y	执行数组中每个值的函数，包含四个参数
(accumulator)	Any	N	上一次调用回调的返回值，或提供的 initialValue
(currentValue)	Any	N	当前被处理的元素
(currentIndex)	Any	N	当前处理元素的索引
(array)	Any	N	当前数组
initialValue	Any	N	可作为第一次调用回调 callback 的第一个参数

//  相比reduce是从右往左迭代
let arr = [1,2,3,4,5]
console.log(arr.reduceRightfunction(accumulator,currentValue){
    return accumulator + currentValue
}))
输出: 15

keys

说明:
返回一个包含数组中每个索引键的Array Iterator对象

语法:
arr.keys()

返回值<Iterator>：
一个新的 Array 迭代器对象

let arr = [1,2,3,4,5]
console.log(arr.keys())
输出: Array Iterator {}

// 遍历每一项的索引
let arr = [1,2,3,4,5]
for(let key of arr.keys()) {
    console.log(key)
}
输出: 0 1 2 3 4

// 遍历每一项的值
let arr = [1,2,3,4,5]
for(let item of arr) {
    console.log(item)
}
输出: 1 2 3 4 5

entries

说明:
返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对

语法:
arr.entries()

返回值<Iterator>：
一个新的 Array 迭代器对象，它的原型（proto:Array Iterator）上有一个next方法，可用用于遍历迭代器取得原数组的[key,value]

let arr = [1,2,3,4,5]
console.log(arr.entries())
输出: Array Iterator {}

// 遍历后是一个数组，包含索引和当前值
let arr = [1,2,3,4,5]
for(let itemArr of arr.entries()) {
    console.log(itemArr)
}
输出: [0,1] [1,2] [2,3] [3,4] [4,5]
// 通过解构赋值获取遍历的结果
let arr = [1,2,3,4,5]
for(let [index,item] of arr.entries()) {
    console.log(index,item)
}
输出：
0 1
1 2
2 3
3 4
4 5

总结

遍历数组的方法，参数是一个函数，这个函数中的this是window，我们可以通过第二个参数改变函数中的this
reduce和reduceRight中的函数不可以改变this

最后编辑于：2019.07.06 16:36:48

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,189评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,577评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,857评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,703评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,705评论 5赞 366
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,620评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,995评论 3赞 396
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,656评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,898评论 1赞 298
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,639评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,720评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,395评论 4赞 319
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,982评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,953评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,195评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 44,907评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,472评论 2赞 342

深入理解es6（附代码-上）