《深切明白ES6》笔记—— 革新数组的功用(10)

ES5供应的数组已很壮大,然则ES6中继承改进了一些,主假如增加了新的数组要领,所以这章的学问异常少。

建立数组

ES5中建立数组的体式格局:数组字面量、new一个数组。

const arr1 = [] //数组字面量
const arr2 = new Array() //new构建

ES6建立数组:Array.of()、Array.from()

Array.of()

ES5中new一个人数组的时刻,会存在一个令人困惑的状况。当new一个数字的时刻,天生的是一个长度为该数字的数组,当new一个字符串的时刻,天生的是该字符串为元素的数组。

const a = new Array(2)
const b = new Array("2")
console.log(a, b) //[undefined, undefined] ["2"]

如许一来,致使new Array的行动是不可展望的,Array.of()出现为的就是处理这个状况。

const c = Array.of(2)
const d = Array.of("2")
console.log(c, d) // [2] ["2"]

运用Array.of()建立的数组传入的参数都是作为数组的元素,而不在是数组长度,如许就避免了运用上的歧义。

Array.from()

假如说Array.of()是建立一个新数组,而Array.from()是将类数组转换成数组

下面的例子讲的是将arguments转换成数组。arguments是类数组对象,他示意的是当前函数的一切参数,假如函数没有参数,那末arguments就为空。

function test(a, b) {
  let arr = Array.from(arguments)
  console.log(arr)
}
test(1, 2) //[1, 2]

映照转换:Array.from(arg1, arg2),我们能够给该要领供应2个参数,第二个参数作为第一个参数的转换。看个简朴例子你就懂了。

function test(a, b) {
  let arr = Array.from(arguments, value => value + 2)
  console.log(arr)
}
test(1, 2) //[3, 4]

Array.from还能够设置第三个参数,指定this。

Array.from()转换可迭代对象:这个用法只需要一个例子,数组去重。

function test() {
  return Array.from(new Set(...arguments))
}
const s = test([1, "2", 3, 3, "2"])
console.log(s) // [1,"2",3]

给数组增加新要领

ES6给数组增加了几个新要领:find()、findIndex()、fill()、copyWithin()。

1、find():传入一个回调函数,找到数组中相符当前搜刮划定规矩的第一个元素,返回它,而且停止搜刮。

const arr = [1, "2", 3, 3, "2"]
console.log(arr.find(n => typeof n === "number")) // 1

2、findIndex():传入一个回调函数,找到数组中相符当前搜刮划定规矩的第一个元素,返回它的下标,停止搜刮。

const arr = [1, "2", 3, 3, "2"]
console.log(arr.findIndex(n => typeof n === "number")) // 0

3、fill():用新元素替代掉数组内的元素,能够指定替代下标局限。

arr.fill(value, start, end)

测试一下

const arr = [1, 2, 3]
console.log(arr.fill(4)) // [4, 4, 4] 不指定最先和完毕,悉数替代

const arr1 = [1, 2, 3]
console.log(arr1.fill(4, 1)) // [1, 4, 4] 指定最先位置,从最先位置悉数替代

const arr2 = [1, 2, 3]
console.log(arr2.fill(4, 0, 2)) // [4, 4, 3] 指定最先和完毕位置,替代当前局限的元素

4、copyWithin():挑选数组的某个下标,从该位置最先复制数组元素,默许从0最先复制。也能够指定要复制的元素局限。

arr.copyWithin(target, start, end)

测试一下

const arr = [1, 2, 3, 4, 5]
console.log(arr.copyWithin(3)) // [1,2,3,1,2] 从下标为3的元素最先,复制数组,所以4, 5被替代成1, 2

const arr1 = [1, 2, 3, 4, 5]
console.log(arr1.copyWithin(3, 1)) // [1,2,3,2,3] 从下标为3的元素最先,复制数组,指定复制的第一个元素下标为1,所以4, 5被替代成2, 3

const arr2 = [1, 2, 3, 4, 5]
console.log(arr2.copyWithin(3, 1, 2)) // [1,2,3,2,5] 从下标为3的元素最先,复制数组,指定复制的第一个元素下标为1,完毕位置为2,所以4被替代成2

其他新增要领

其他另有定型数组、数组缓冲区的观点,你能够细致检察书上教程。

总结

控制新的建立数组的体式格局,以及数组新增的几个要领,就够你运用了。定型数组和数组缓冲区常人能够不必相识的太细致。

=> 返回文章目次

    原文作者:二月
    原文地址: https://segmentfault.com/a/1190000010416845
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞