理解Array.prototype.fill和Array.from

Posted 饭特稠

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了理解Array.prototype.fill和Array.from相关的知识,希望对你有一定的参考价值。

之所以将这两个方法放在一起说,是因为经常写这样的代码: Array.from({length: 5}).fill(0),看起来很简洁,但是踩到坑之后才发现自己对这两个方法实在是不求甚解。

Array.from

这个静态方法可以将某些值转换成数组,值可以是一个字符串,一个set,一个map或者一个类数组对象,最终返回一个数组。例子如下:

Array.from(\'一二三四五六七\')
// ["一", "二", "三", "四", "五", "六", "七"]
// 等效的es5是\'一二三四五六七\'.split(\'\')

Array.from(new Set([1,2,1,2]))
// 等效[...new Set([1,2,1,2])] =>  [1,2]
// 用来数组去重

Array.from(new Map([[1, 2], [2, 4], [4, 8]])) // 接受一个map

// 接受一个类数组对象
Array.from(arguments)

Array.from(document.querySelectorAll(\'div\'))

Array.from({1: 2,length:3}) // [undefined, 2, undefined]

接受类数组对象这里很有意思,比如Array.from({length:5})new Array(5)有什么区别。这里不在多说,可以看这篇文章了解一下。

除了一个必须参数外,这个方法还接受两个可选参数,一个mapFn,一个this参数,看个例子来了解一下:


Array.from(\'一二三四五六七\', week => `周${week}`)
// ["周一", "周二", "周三", "周四", "周五", "周六", "周七"]

Array.from(\'一二三四五六七\', function(week){
  return `周${week} ${this.time}`
}, {time: \'下午3点\'})

//["周一 下午3点", "周二 下午3点", ...]

Array.prototype.fill

Array.prototype.fill,顾名思义,是用来填充数组的。这个方法也可以接受3个参数,分别是fill的值,开始的index,结束的index(貌似Array的方法都有这么一个特点,要么自己接受的参数多,要么给callback传的参数多,所以不好完全掌握

以上是关于理解Array.prototype.fill和Array.from的主要内容,如果未能解决你的问题,请参考以下文章

带有对象的 Array.prototype.fill() 传递引用而不是新实例

ES6(2015)Array数组

数组常用方法——汇总

javascript 创建给定大小的空数组

我对 AR 应用程序中指南针和 GPS 功能的理解是不是正确?

指针理解——指针数组数组指针指针函数函数指针