社区编辑申请
注册/登录
六个ES6中很酷的数组函数
开发 前端
关于奇怪的 Array 函数,众所周知,我们可以通过Array函数做以下事情。

1、Array .of

关于奇怪的 Array 函数,众所周知,我们可以通过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

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

1)、类数组对象

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']

2)、节点列表

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

3)、 Arguments

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

4)、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

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

“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

最后

以上就是我今天跟你分享的6个关于ES6中的数组函数,如果你觉得有用的话,请记得点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。

责任编辑:庞桂玉 来源: WEB前端开发社区
相关推荐

2021-08-02 05:51:29

2021-04-20 09:48:48

ES5Es6数组方法

2019-12-02 18:45:38

JavaScript开发数组

2022-08-10 12:02:52

面试JavaScript

2022-07-12 10:18:05

JavaScript单行代码

2022-07-08 09:53:51

JavaScript单行代码

2017-12-25 11:15:06

JavaArray数组

2020-08-04 08:30:18

JS数组技巧

2020-09-29 08:14:46

JavaScript开发代码

2020-09-26 21:50:26

JavaScript代码开发

2020-02-27 09:55:46

开发技能代码

2020-02-26 13:38:44

数据结构JavaScript人生第一份工作

2021-03-01 10:34:28

开发技能代码

同话题下的热门内容

Rust难懂?一文解读其“所有权”和“借用”概念太强了!Python 开发桌面小工具,让代码替我们干重复的工作!K8s需要替代品!你离完全理解 SQL 只差这十步分享六个 Vue3 开发必备的 VSCode 插件程序员如何寻找技术突破、体现技术价值?接口性能优化实战:从20s到500ms,三招搞定六七十岁程序员工资暴涨 就因为这门没啥人学的编程语言

编辑推荐

2017年9月编程语言排行榜:Java、C与C++三巨头还能统治排行榜多久?2017年最受欢迎的5个前端框架比较2017年11月编程语言排行榜:脚本语言怎么了?2017年3月编程语言排行榜:Swift首次进入前十最近租房有点烦!技术人如何用Python找到称心如意的“小窝”?
我收藏的内容
点赞
收藏

51CTO技术栈公众号