文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

六个你必须知道的 ES6 中很酷的数组函数

2024-11-30 02:24

关注

关于数组函数,众所周知,我们可以通过Array函数做以下事情。

// 1. Initialize an array of the specified length
const array1 = Array(3) // [ , , ]
// 2. Set the initial value of the array
const array2 = Array() // []
const array3 = Array(undefined) // [ undefined ]
const array4 = Array(1, 2, 3) // [ 1, 2, 3 ]

传递给Array函数的参数个数不一样,其功能也不一样。这常常让我感到困惑。

幸运的是,我们可以使用Array.of来弥补Array的缺点。

// it's not initializing an array of length 3
const array1 = Array.of(3) // [ 3 ]
const array2 = Array.of() // []
const array3 = Array.of(undefined) // [ undefined ]
const array4 = Array.of(1, 2, 3) // [ 1, 2, 3 ]

2. Array.from

在该方法中,我们可以通过 Array.from 方法将类数组对象、arguments 对象和 NodeList 对象转换为真正的数组。

类似数组的对象

const arrayLike = {
  0: 'fatfish',
  1: 'medium',
  length: 2
}
const array1 = [].slice.call(arrayLike) // ['fatfish', 'medium']
// A more convenient way
const array2 = Array.from(arrayLike) // ['fatfish', 'medium']

1). 节点列表

const domsNodeList = document.querySelectorAll('div')
const domsArray = Array.from(domsNodeList) // [ dom, dom, dom, ... ]

2). Arguments

const logInfo = function () {
  console.log('arguments', arguments)
  console.log('Array.from arguments', Array.from(arguments))
}
logInfo('fatfish', 100)
logInfo('fatfish')

3).Array.from的第二个参数

我们可以使用 Array.from 方法,例如“[].map”。

const array = [ 1, 2, 3 ]
const array2 = array.map((num) => num * 2) // [2, 4, 6]
const array3 = Array.from(array, (num) => num * 2) // [2, 4, 6]

3. includes

我们经常会写这样的判断语句,当其中一个条件满足时做某事。

const num = 1
if (num === 1 || num === 2 || num === 3 || num === 4) {
  console.log(num) // 1
}

其实可以通过include方法来简化代码。

const nums = [ 1, 2, 3, 4 ]
const num = 1
if (nums.includes(num)) {
  console.log(num) // 1
}

4.使用at方法读取数组尾部元素

如何读取数组的尾部元素?是的,我们需要以“array.length-1”作为下标来读取。

const array = [ 1, 2, 3, 4, 5 ]
const lastEle = array[ array.length - 1 ] // 5
// You can't read like that
const lastEle = array[ - 1 ] // undefined

还有其他办法吗?

是的,“at”方法将是你的魔力。当然,您可以读取数组中其他位置的元素。

const array = [ 1, 2, 3, 4, 5 ]
const lastEle = array.at(-1) // 5
const ele1 = array.at(0) // 1

5. flat

来自 MDN:“flat() 方法创建一个新数组,其中所有子数组元素递归地连接到其中,直到指定的深度。”

const array = [ 1, [ 2, [ 3, [ 4, [ 5 ] ] ] ] ]
// The default depth is 1
const flat1 = array.flat() // [ 1, 2, [ 3, [ 4, [ 5 ] ] ] ]
const flat2 = array.flat(2) // [ 1, 2, 3, [ 4, [ 5 ] ] ]
const flatAll = array.flat(Infinity) // [ 1, 2, 3, 4, 5 ]

6.findIndex

来自 MDN:“findIndex() 方法返回数组中满足所提供的测试函数的第一个元素的索引。否则,返回-1,表示没有元素通过测试。”

const array = [ -1, 0, 10, 10,  20, 100 ]
const index1 = array.findIndex((num) => num < 0) // 0
const index2 = array.findIndex((num) => num >= 10) // 2


来源:web前端开发内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯