之所以将这两个方法放在一起说,是因为经常写这样的代码: 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的更多相关文章

  1. ES6中新添加的Array.prototype.fill

    用法 array.fill(start=0, end=this.length) 示例 [1, 2, 3].fill(4) // [4, 4, 4] [1, 2, 3].fill(4, 1) // [1 ...

  2. Array.prototype.fill 填充值被复用的问题

    考察如下示例代码: // 创建二维数组 const arr = Array(2).fill([]); // 操作第一个元素 arr[0].push(1); // 结果是操作了所有数组 console. ...

  3. Array.prototype.map()和Array.prototypefilter()

    ES5 => 筛选功能  Array.prototypefilter(): 代码: var words = ['spray', 'limit', 'elite', 'exuberant', 'd ...

  4. Array,prototype.concat.apply与[].conat.apply.

    一直都知道JS数组Array内置对象有一个concat方法,但是也没怎么研究过,今天偶然就看了看 concat是连接一个或多个数组 返回的是连接后数组的一个副本 var oldArr=[]; var ...

  5. Array.prototype

    Array.prototype  属性表示 Array 构造函数的原型,并允许您向所有Array对象添加新的属性和方法. /* 如果JavaScript本身不提供 first() 方法, 添加一个返回 ...

  6. js 数组map用法 Array.prototype.map()

    map 这里的map不是"地图"的意思,而是指"映射".[].map(); 基本用法跟forEach方法类似: array.map(callback,[ thi ...

  7. 解析Array.prototype.slice.call(arguments)

    在es5标准中,我们经常需要把arguments对象转换成真正的数组 // 你可以这样写 var arr = Array.prototype.slice.call(arguments) // 你还可以 ...

  8. 【02】[].slice和Array.prototype.slice

    [02][].slice和Array.prototype.slice 01,Array是一个构造函数.浏览器内置的特殊对象.   02,Array没有slice方法. 03,Array.prototy ...

  9. ES6--Array.prototype.fill 替换数组

    Array.prototype.fill

随机推荐

  1. FortiGate设置E-mail告警

    1.配置邮件服务器 2.配置告警

  2. 890. Find and Replace Pattern找出匹配形式的单词

    [抄题]: You have a list of words and a pattern, and you want to know which words in words matches the ...

  3. saltstack 使用salt ‘*’ test.ping 报错Minion did not return(转)

    原文地址:http://blog.51cto.com/4634721/2093019 saltstack 使用salt ‘*’ test.ping 报错Minion did not return. [ ...

  4. Node.js 中使用 ES6 中的 import / export 的方法大全

    https://blog.csdn.net/universsky2015/article/details/83754741

  5. javaweb开发2.新建一个javaweb项目

    1.File → New → Dynamic Web Project 2.创建一个Dynamic Web Project 3.点击“Next”下一步 4.点击“Next”下一步 5.点击“Finish ...

  6. rsync 定时备份<crontab+backrsync.sh> 简陋版

    数据需要定时的备份至其它的目录中,但是备份之前检查检查一下是否有rsync正在运行,曾经因为数据过大,导致有很多rsync进程在跑,然后服务器有出现卡死的现象.最终写了一条bash,先检查一下是否有这 ...

  7. linux学习第十二天 (Linux就该这么学)找到一本不错的Linux电子书,附《Linux就该这么学》章节目录

    本书是由全国多名红帽架构师(RHCA)基于最新Linux系统共同编写的高质量Linux技术自学教程,极其适合用于Linux技术入门教程或讲课辅助教材,目前是国内最值得去读的Linux教材,也是最有价值 ...

  8. CentOS6.9安装Python-3.6.3

    CentOS6.9上默认安装的python版本是2.6的.因为系统自带的python会被系统很多软件环境依赖使用,所以不要卸载原来的Python版本,根据需要进行安装新版本即可,本人此处安装的是3.6 ...

  9. WeexSDK源码分析(iOS)

    0.从工作原理谈起 Weex 表面上是一个客户端技术,但实际上它串联起了从本地开发.云端部署到分发的整个链路.开发者首先可在本地像编写 web 页面一样编写一个 app 的界面,然后通过命令行工具将之 ...

  10. Windows UDP sockets: recvfrom() fails with error 10054

    https://stackoverflow.com/questions/34242622/windows-udp-sockets-recvfrom-fails-with-error-10054 #in ...