千锋教育-做有情怀、有良心、有品质的职业教育机构

400-811-9990
手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

上海
  • 北京
  • 郑州
  • 武汉
  • 成都
  • 西安
  • 沈阳
  • 广州
  • 南京
  • 深圳
  • 大连
  • 青岛
  • 杭州
  • 重庆
当前位置:沈阳千锋IT培训  >  技术干货  >  6个ES6中很酷的数组函数

6个ES6中很酷的数组函数

来源:千锋教育
发布人:qyf
时间: 2022-11-24 17:27:00

  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]

6个ES6中很酷的数组函数

  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

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

10年以上业内强师集结,手把手带你蜕变精英

请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通

免费领取

今日已有369人领取成功

刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取

猜你喜欢LIKE

抖音流量池到底是什么概念?

2022-11-25

直播间场景的重要性以及有什么影响?

2022-11-25

表单的数据采集和提交

2022-11-24

最新文章NEW

小店体验分越来越低,该如何提升分数?

2022-11-28

为什么开播的时候在线人数很高,随着直播时长越往后在线人数越少?

2022-11-25

新号在线人数稳定一段时间后,为什么最近在线人数突然就掉到很少了?

2022-11-25

相关推荐HOT

更多>>

快速通道 更多>>

最新开班信息 更多>>

网友热搜 更多>>