资讯专栏INFORMATION COLUMN

《深入理解ES6》笔记—— 改进数组的功能(10)

inapt / 3123人阅读

摘要:创建数组中创建数组的方式数组字面量一个数组。传入一个回调函数,找到数组中符合当前搜索规则的第一个元素,返回它,并且终止搜索。用新元素替换掉数组内的元素,可以指定替换下标范围。

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://www.ucloud.cn/yun/84472.html

相关文章

  • 深入理解ES6笔记—— 改进数组功能10

    摘要:创建数组中创建数组的方式数组字面量一个数组。传入一个回调函数,找到数组中符合当前搜索规则的第一个元素,返回它,并且终止搜索。用新元素替换掉数组内的元素,可以指定替换下标范围。 ES5提供的数组已经很强大,但是ES6中继续改进了一些,主要是增加了新的数组方法,所以这章的知识非常少。 创建数组 ES5中创建数组的方式:数组字面量、new一个数组。 const arr1 = [] //数组字...

    张率功 评论0 收藏0
  • 深入理解ES6笔记——导读

    摘要:最近买了深入理解的书籍来看,为什么学习这么久还要买这本书呢主要是看到核心团队成员及的创造者为本书做了序,作为一个粉丝,还是挺看好这本书能给我带来一个新的升华,而且本书的作者也非常厉害。 使用ES6开发已经有1年多了,以前看的是阮一峰老师的ES6教程,也看过MDN文档的ES6语法介绍。 最近买了《深入理解ES6》的书籍来看,为什么学习ES6这么久还要买这本书呢?主要是看到Daniel A...

    Godtoy 评论0 收藏0
  • 深入理解ES6笔记——导读

    摘要:最近买了深入理解的书籍来看,为什么学习这么久还要买这本书呢主要是看到核心团队成员及的创造者为本书做了序,作为一个粉丝,还是挺看好这本书能给我带来一个新的升华,而且本书的作者也非常厉害。 使用ES6开发已经有1年多了,以前看的是阮一峰老师的ES6教程,也看过MDN文档的ES6语法介绍。 最近买了《深入理解ES6》的书籍来看,为什么学习ES6这么久还要买这本书呢?主要是看到Daniel A...

    wupengyu 评论0 收藏0
  • 深入理解ES6之《改进数组功能

    摘要:方法由于构造函数创建数组时的怪异行为,比方说如下方法总会创建一个包含所有参数的数组方法不通过属性确定返回值的类型,它使用当前构造函数,也就是方法中的值来确定正确的返回数据的类型方法以前总是使用将类数组转换成数组方法可接受可迭代对象或类数组对 Array.of方法 由于Array构造函数创建数组时的怪异行为,比方说如下: let items = new Array(2) console....

    Awbeci 评论0 收藏0
  • 深入理解ES6之《改进数组功能

    摘要:方法由于构造函数创建数组时的怪异行为,比方说如下方法总会创建一个包含所有参数的数组方法不通过属性确定返回值的类型,它使用当前构造函数,也就是方法中的值来确定正确的返回数据的类型方法以前总是使用将类数组转换成数组方法可接受可迭代对象或类数组对 Array.of方法 由于Array构造函数创建数组时的怪异行为,比方说如下: let items = new Array(2) console....

    jubincn 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<