让你少写多做的 ES6 技巧
创始人
2025-05-29 03:02:29
0
  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 ]
  1. Array.from

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

1).类数组对象

在这里插入图片描述
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的第二个参数

我们可以像“[].map”一样使用 Array.from 方法。


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]
  1. 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
  1. 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 ]
  1. 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

相关内容

热门资讯

新型政策性金融工具有望助力“准... 来源:华泰睿思 核心观点 今年1-6月,财政前置发力:中央+地方政府财政总支出同比增长8.9%,相比...
问赢|问赢律师平台|问赢律师|... 在法治社会不断推进的当下,法律知识的传播与法律从业者之间的交流愈发重要。问赢律师平台应运而生,它作为...
英国商店盗窃频发,修改法律呼声... 【环球时报综合报道】综合多家英媒报道,由于英国商店盗窃问题极其严重,英国民众、警方和立法者均强烈呼吁...
B费首轮数据:5次关键传球+2... 在2023年英超联赛首轮的比赛中,曼联迎来了与阿森纳的较量。这场备受瞩目的比赛不仅是两队的实力对决,...
欧洲领导人:若不能达成停火协议... 欧洲理事会主席科斯塔(资料图) 当地时间8月17日,欧洲理事会主席科斯塔在社交媒体发文表示,目前跨大...
1分惜败!中国男篮获得亚洲杯亚... 北京时间8月18日凌晨,2025年男篮亚洲杯决赛中,中国男篮以1分之差(89-90)憾负澳大利亚男篮...
山东新潮能源股份有限公司 关于... 证券代码:600777 证券简称:*ST新潮 公告编号:2025-085 山东新潮能源股份有限公司 ...
亚洲电视控股(00707):终... 亚洲电视控股(00707)发布公告,内容有关香港科技园公司作为原告与公司附属公司亚洲电视有限公司作为...
莱奥7年磨一剑!米兰首战破门,... 在意大利杯首轮的比赛中,AC米兰与巴里展开激烈角逐。比赛刚开始不久,红黑军团的明星球员莱奥便打破了僵...
7000亿央企巨头重组,狂扫资... 7000亿市值央企巨头中国神华最新公告,公司股票将在8月18日(明天)复牌! 公司拟通过发行A股股...