对象解构
移除不想要的属性
1 | // 移除 _internal 和 tooBig 这两个属性 |
1 | let obj = { |
在函数参数中使用嵌套对象解构
在这个例子中 engine 是一个嵌套在 car 里面的对象,如果我们只需要 engine 里面的属性 vin 我们可以这样做。
1 | const car = { |
合并对象
扩展运算符…
1 | let object1 = { a:1, b:2,c:3 } |
根据条件添加对象属性
你不再需要根据条件创建两个不同的对象,以使其具有特定属性。扩展操作符将是一个完美的选择
1 | const getUser = (emailIncluded) => { |
解构原始数据
你曾经有处理过拥有非常多属性的对象吗?我相信你一定有过。可能最常见的情况是我们有一个用户对象,它包含了所有的数据和细节。这里,我们可以调用新的 ES 解构方法来处理这个大麻烦。让我们看看下面的例子。
1 | const rawUser = { |
合并对象数组
1 | // 将对象数组合并成一个对象 |
数组映射
不使用 Array.map
1 | const cities = [ |
数组的解构
交换2个值
1 | const [post, comments] = Promise.all([ |
Set 使用 Array 的方法
可以通过 (…) 扩展运算符将 Set 转换成 Array 这样我们就可以在 Set 使用所有 Array 的方法了。
1 | let mySet = newSet([1,2, 3, 4, 5]) |
Set
使用 set 来对数组去重
1 | let arr = [1, 1, 2, 2, 3, 3] |
Map
使用对象初始化 Map 实例
1 | let obj = { a: 1, b: 1, c: 1 } |
模板字符串
如果这样做的话:
1 | const string = `First |
那么它会创建出像下面的字符串:
1 | First |
有一个简单的方法可以修复这个问题,只需要将第一行置为空,然后添加了右边的翻译好后调用一个 trim() 方法,就可以消除第一个字符前的所有空格:
1 | const string = ` |
对象方法
Object.is() 确定两个值是不是同一个
1 | Object.is(a, b) |
扩展运算符
用在字符串上的时候,展开操作符会以字符串中的每一个字符创建一个数组:
1 | const hey = 'hey' |
不定参数
在之前的语法规范中,你只能通过fn.apply(null, arr)
的方式来实现,但是这种方式不是很友好和易读。
1 | const arr = [1, 3, 0, -1, 20, 100] |
1 | const array = [1, 2, 3, 4, 5] |
现在,剩余参数(rest element)在和数组解构(array destructuring)搭配使用来实现。
1 | const array = [1, 2, 3, 4, 5] |
箭头函数没有 arguments
Generator
一个解释generator如何工作的例子:
1 | function *calculator(input) { |
我们先初始化它:
1 | const calc = calculator(10) |
然后我们在generator中开始进行iterator迭代:
1 | calc.next() |
具体过程如下:代码运行了函数,并把input=10
传入到生成器构造函数中,该函数一直运行直到抵达 yield,并返回 yield 输出的内容: input / 2 = 5
,因此,我们得到的值为5,并告知迭代器还没有 done (函数只是暂停了)。
在第二个迭代处,我们输入7:
1 | { |
7被作为 doubleThat 的值,注意:你可能会把input/2
作为输入参数,但这只是第一次迭代的返回值。现在我们忽略它,使用新的输入值7,并将其乘以2。
然后,我们得到第二个 yield 的值,它返回 doubleThat,因此返回值为14。
之后,也是最后一个迭代器,我们输入100:
1 | calc.next(100) |
当迭代器完成时(没有更多的 yield 关键字),我们返回 input doubleThat another,这相当于10 * 14 * 100
。
Iterator
扩展运算符
不使用 Apply 去调用函数
这一点我们叫它Function.prototype.apply
1 | function doSomething (x, y, z) {} |
通过扩展运算符我们可以避免使用apply
1 | doSomething(...args) |
使代码更简洁
合并数组
1 | // es5 |
复制数组
浅拷贝,只复制指针,相当于slice
1 | let arr1 = [1, 2, 3] |
arguments 或 nodelist 转为数组
1 | // es5 |
使用 Math 函数
1 | let numbers = [9, 4, 7, 1] |
Array.from
1 | Array.from(arrayLike[, mapFunction[, thisArg]]) |
- arrayLike:必传参数,想要转换成数组的伪数组对象或可迭代对象。
- mapFunction:可选参数,mapFunction(item,index){…} 是在集合中的每个项目上调用的函数。返回的值将插入到新集合中。
- thisArg:可选参数,执行回调函数 mapFunction 时 this 对象。
1 | // 将类数组的每一项乘以2 |
应用:
- 将类数组转换成数组
克隆数组(浅拷贝)
实现深拷贝:1
2
3
4
5
6
7
8
9function recursiveClone(val) {
return Array.isArray(val) ? Array.from(val, recursiveClone) : val
}
const numbers = [[0, 1, 2], ['one', 'two', 'three']]
const numbersClone = recursiveClone(numbers)
numbersClone // => [[0, 1, 2], ['one', 'two', 'three']]
numbers[0] === numbersClone[0] // => false填充数组
使用相同的值来初始化数组1
2
3
4
5
6
7
8
9
10const length = 3
const init = 0
// ES5
const result = Array(length).fill(init)
// ES6
const result = Array.from({ length }, () => init)
result // => [0, 0, 0]使用对象填充数组
1
2
3
4
5
6
7
8
9
10
11const length = 3
const resultA = Array.from({ length }, () => ({}))
const resultB = Array(length).fill({})
const resultC = Array(length).map(() => init)
resultA // => [{}, {}, {}]
resultB // => [{}, {}, {}]
resultC // => [undefined, undefined, undefined]
resultA[0] === resultA[1] // => false
resultB[0] === resultB[1] // => true这是因为 Array(length) 创建了一个有3个空项的数组。Array.from 的 () => ({}) 会返回一个新的对象。fill() 方法创建的 resultB 使用相同的空对象实例进行初始化。不会跳过空项。map() 方法会跳过空项。
生成数字范围
1
2
3
4
5
6// 生成一个数组,从0到 end - 1
function range(end) {
return Array.from({ length: end }, (_, index) => index)
}
range(4) // => [0, 1, 2, 3]数组去重