之所以将这两个方法放在一起说，是因为经常写这样的代码: 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传的参数多,所以不好完全掌握?），举几个例子:

[1,2,3,4].fill(1) //[1, 1, 1, 1][1,2,3,4].fill(1, 1, 3) // [1, 1, 1, 4][1,2,3,4].fill(1, 2) //[1, 2, 1, 1]

此外，start和end还能传负值，如果传了负值，会被当成length+start和length+end对待:

[1,2,3,4].fill(1, -3, -1) // 等同于[1,2,3,4].fill(1, 1, 3)

看起来这个方法没什么坑，人畜无害嘛。但是当你传一个对象进去的时候，就要小心了，因为最后fill的是这个对象的引用,惊不惊喜，意不意外。。。举(chao)个例子：

// Objects by reference.var arr = Array(3).fill({}) // [{}, {}, {}];arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

上面这个例子表明，当你用对象去fill 的时候，数组被fill的每一个元素都是对这个对象的引用，所以会出现改一个，所有值都发生改变的情况。。。不过想想也合理，众所周知，深拷贝一个js对象是一件很麻烦的事，假如这个方法fill的是对象的拷贝，那岂不是提供了一个拷贝对象的简便方法？然而事实证明，这个确实是YY了。

最后再说一句，刚刚看到文章最开头的例子可以写成Array(5).fill(0),所以fill方法是无视原来的数组是不是存在空元素的，那么开头的所谓简洁写法也变得多此一举了（?）。