6 个让你少写多做的 ES6 技巧

前端Q

共 3131字,需浏览 7分钟

 · 2023-02-17

前端Q
我是winty,专注分享前端知识和各类前端资源,乐于分享各种有趣的事,关注我,一起做个有趣的人~
公众号

点击上方 前端Q,关注公众号

回复加群,加入前端Q技术交流群

英文 | https://fatfish.medium.com/6-cool-array-functions-in-es6-you-must-know-92c31706b427


今天这篇文章,主要想跟大家分享6个实用的ES6技巧,希望这6个小技巧能够帮助到你。

下面我们开始今天的内容吧。

1. Array.of

关于奇怪的 Array 函数:

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

初始化一个指定长度的数组。

设置数组的初始值。

// 1. Initialize an array of the specified lengthconst array1 = Array(3) // [ , , ]// 2. Set the initial value of the arrayconst 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 3const 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 对象转换为真正的数组。

1).类数组对象

const arrayLike = {  0: 'fatfish',  1: 'medium',  length: 2}const array1 = [].slice.call(arrayLike) // ['fatfish', 'medium']// A more convenient wayconst 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的第二个参数

我们可以像“[].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]

3. includes

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

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

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

const nums = [ 1234 ]const num = 1if (nums.includes(num)) {  console.log(num) // 1}

4.使用“at方法”读取数组的尾元素

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

const array = [ 12345 ]const lastEle = array[ array.length - 1 ] // 5// You can't read like thatconst lastEle = array[ - 1 ] // undefined

还有别的办法吗?

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

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

5. flat

flat() 方法创建一个新数组,其中所有子数组元素以递归方式连接到指定深度。

const array = [ 1, [ 2, [ 3, [ 4, [ 5 ] ] ] ] ]// The default depth is 1const 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) // 0const index2 = array.findIndex((num) => num >= 10) // 2

写在最后

以上就是我今天跟你分享的全部内容,希望这些内容对你有所帮助,也希望你能从中学到新的东西,如果你觉得我分享的内容对你有用的话,请记得点赞我,关注我,并将这篇文章分享给你的朋友,也许能够帮助到他。

最后,感谢你的阅读。

往期推荐


细说 Vue 响应式原理的 10 个细节!
36张图,一次性补全网络基础知识
9 个JSON.stringify 的秘密大多数开发人员却不知道

最后


  • 欢迎加我微信,拉你进技术群,长期交流学习...

  • 欢迎关注「前端Q」,认真学前端,做个专业的技术人...

前端Q
本公众号主要分享一些技术圈(前端圈为主)相关的技术文章、工具资源、学习资料、招聘信息及其他有趣的东西...
公众号

点个在看支持我吧

浏览 1
点赞
评论
收藏
分享

手机扫一扫分享

举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

举报