https://segmentfault.com/a/1190000003857670?_ea=396445
新增的数组方法
from
from 方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。
常用方式
将字符串转化为数组。
Array.from('hello') // [ 'h', 'e', 'l', 'l', 'o' ]
传参为数组类型对象时原样输出。
Array.from([1, 2, 3]) // [ 1, 2, 3 ]
将 Set 对象转换为数组。
Array.from(new Set(['a', 'b'])) // [ 'a', 'b' ]
传参为无 length 属性的 Object。
Array.from({ 0: 'a', 1: 'b', 2: 'c' }) // []
传参为有 length 属性的 Object。
Array.from({ 0: 'a', 1: 'b', 2: 'c', length: 3 }) // [ 'a', 'b', 'c' ]
通过对比可以得知一个结论：
任何有 length 属性的对象，都可以通过 from 方法转为数组。
与此同时，Spread 运算符 ... 也可以将实现了遍历器接口 Symbol.iterator 的数据结构转为数组。
var o = {0:'a',1:'b',2:'c', length:3}Array.from(o)//['a','b','c'][...o]//TypeError
通过上述🌰可以说明 ... 的局限性。对象赋值了 length 属性，但并未实现 Symbol.iterator ，所以报错。
再举个比较实用的场景，罗列一下类数组对象 arguments 转换为数组的几种方式。（类数组对象实现了遍历器接口Symbol.iterator，它有length属性，数据结构和数组很像，但是它不是数组。具体的可以参考文章《Array-like Objects in JavaScript》）。
ES5
functionfoo(){ [].slice.call(arguments);}
ES6 Array.from
functionfoo(){Array.from(arguments);// [ 'a', 'b', 'c' ]}
ES6 Spread Operator ...
functionfoo(){ [...arguments]; // ['a','b','c']}
将对象转换为数组的几种形式。
// key值为整形varo = {0:'a',1:'b',2:'c',length:3}Array.from(o)// [ 'a', 'b', 'c' ]// key值为只包含数字内容的字符串varo = {'0':'a','1':'b','2':'c',length:3}console.log(Array.from(o));// [ 'a', 'b', 'c' ]// key值不从0起varo = {1:'a',2:'b',3:'c',length:3}Array.from(o)// [ undefined, 'a', 'b' ]// key值为不能转化为数字的字符串varo = {a:'a',b:'b',c:'c',length:3}Array.from(o)// [ undefined, undefined, undefined ]// key值为包含数字和字符混杂的形式varo = {'0a':'a','1':'b','2':'c',length:3}console.log(Array.from(o));// [ undefined, 'b', 'c' ]// key值既有字符又有数字varo = {a:'a',2:'b',c:'c',length:3}console.log(Array.from(o));// [ undefined, undefined, 'b' ]// key值既有字符又有数字并且length属性大于对象除length属性外定义属性的个数varo = {a:'a',2:'b',c:'c',length:4}Array.from(o)// [ undefined, undefined, 'b', undefined ]
from 是通过key作为下标并且参照 length 属性大小来填充元素的。当没有合适的元素插入时就会插入 undefined 补位。
兼容性
对于还没有部署该方法的浏览器，可以使用Array.prototype.slice方法替代。
const toArray = (() => Array.from ? Array.from : obj => Array.prototype.slice.call(obj))();
写的很精简有木有，但是可能会让人觉得一下子不太好消化。
consttoArray = (function(){returnArray.from ?Array.from :function(obj){returnArray.prototype.slice.call(obj); };})();
这段代码和上段代码有异曲同工之妙，会不会好理解一些呢？如果觉得还是不太好理解，没事儿，咱再看一段代码。
consttoArray = (function(){if(Array.from) {returnArray.from; }else{returnfunction(obj){returnArray.prototype.slice.call(obj); } }})();
看到这个简单明了了吧，如果还是有什么疑问的话，那只能说，妈妈叫你回家学基础了。
类似map()的用法
Array.from(arrayLike,x=>x * x);// 等同于Array.from(arrayLike).map(x=>x * x);Array.from([1,2,3],(x) =>x * x)// [ 1, 4, 9 ]
下面的例子将数组中布尔值为false的成员转为0。
Array.from([1, , 2, , 3], (n) => n || 0) // [1, 0, 2, 0, 3]
Array.from()可以将各种值转为真正的数组，并且还提供map功能。这实际上意味着，你可以在数组里造出任何想要的值。
Array.from({ length: 2 }, () => 'jack') // ['jack', 'jack']
上面代码中，Array.from的第一个参数指定了第二个参数运行的次数。这种特性可以让该方法的用法变得非常灵活。
Array.from()的另一个应用是，将字符串转为数组，然后返回字符串的长度。因为它能正确处理各种Unicode字符，可以避免JavaScript将大于uFFFF的Unicode字符（超纲字），算作两个字符的bug。
functioncountSymbols(string){returnArray.from(string).length;}
Array.of()
Array.of与Array()的异同
Array.of的行为很统一。
Array.of()// []Array.of(3)// [ 3 ]Array.of(3,11,8)// [ 3, 11, 8 ]Array.of(undefined)// [undefined]
当传入单个参数时，Array()的行为表现的不统一。
Array()// []Array(3)// [ , , ]Array(3,11,8)// [ 3, 11, 8 ]
童鞋们知道当传入单个参数时，Array是怎么处理的么？生成的数组的元素都是什么类型的呢？既然之前学了Array.from类似map()方法的运用，这里怎么的也得实战一下子啊。
functiontypesof() {returnArray.from(arguments,v => typeof v);}typesof(...Array(3)) // ['undefined','undefined','undefined' ]
这里还顺带了操作扩展符（...）逆转化数组的芝士点。不懂的童鞋看看阮一峰老湿的《函数的扩展》吧。请叫我雷锋。
兼容性
Array.of方法可以用下面的代码模拟实现。
functionArrayOf() {return[].slice.call(arguments);}
数组实例的copyWithin()
常用方式
数组实例的copyWithin方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。
Array.prototype.copyWithin(target, start = 0, end = this.length)
它接受三个参数。
target（必需）：从该位置开始替换数据。
start（可选）：从该位置开始读取数据，默认为0。如果为负值，表示倒数。
end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
这三个参数都应该是数值，如果不是，会自动转为数值。
[1, 2, 3, 4, 5].copyWithin(0, 3) // [ 4, 5, 3, 4, 5 ]
上面代码表示将从3号位直到数组结束的成员（4和5），复制到从0号位开始的位置，结果覆盖了原来的1和2。
下面是更多例子。
// 将3号位复制到0号位[1,2,3,4,5].copyWithin(0,3,4)// [ 4, 2, 3, 4, 5 ]// 上面和下面这两个方法等同// -2相当于3号位，-1相当于4号位[1,2,3,4,5].copyWithin(0,-2,-1)// [ 4, 2, 3, 4, 5 ]// 将3号位复制到0号位[].copyWithin.call({length:5,3:1},0,3)// { '0': 1, '3': 1, length: 5 }// 将2号位到数组结束，复制到0号位vari32a =newInt32Array([1,2,3,4,5]);i32a.copyWithin(0,2);// Int32Array [3, 4, 5, 4, 5]
兼容性
对于没有部署TypedArray的copyWithin方法的平台，需要采用下面的写法。
[].copyWithin.call(new Int32Array([1,2,3,4,5]),0,3,4);// Int32Array [4, 2, 3, 4, 5]
多说几句
既然使用了copuWithin方法会修改当前数组，那么我们就总结一下还有哪些方法也会更改当前数组，哪些则不会。只列取常用的，贵精不贵全。
不会修改当前数组的方法
concat()方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
vararr =Array.of(1,2,3);varresArr = arr.concat(4);arr// [ 1, 2, 3 ]resArr// [ 1, 2, 3, 4 ]
join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
vararr =Array.of(1,2,3);varresStr = arr.join(",");arr// [ 1, 2, 3 ]resStr// 1,2,3
会修改当前数组的方法
pop()方法用于删除并返回数组的最后一个元素。
vararr =Array.of(1,2,3);varresEle = arr.pop();arr// [ 1, 2 ]resEle// 3
push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。
vararr =Array.of(1,2,3);varresLen = arr.push('a');arr// [ 1, 2, 3, 'a' ]resLen// 4
sort()方法用于对数组的元素进行排序。
vararr =Array.of(3,11,8);varres = arr.sort();arr// [ 11, 3, 8 ]res// [ 11, 3, 8 ]
结果是不是很意外，没错，排序并不是按整型大小，而是字符串对比，就是取第一个字符的ANSI码对比，小的排前面，相同的话取第二个字符再比，如果要按整型数值比较，可以这样。
vararr =Array.of(3,11,8);varres = arr.sort((a, b) =>a - b);arr// [ 3, 8, 11 ]res// [ 3, 8, 11 ]
reverse()方法用于颠倒数组中元素的顺序。
vararr =Array.of(3,11,8,9);varres = arr.reverse();arr// [ 9, 8, 11, 3 ]res// [ 9, 8, 11, 3 ]
数组实例的find()和findIndex()
数组实例的find方法，用于找出第一个符合条件的数组成员。
它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。
[1, 4, -5, 10].find((n) => n < 0) // -5
上面代码找出数组中第一个小于0的成员。
[1,5,10,15].find(function(value, index, arr) { return value >9;})// 10
上面代码中，find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。
数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。
数组实例的fill()
fill方法使用给定值，填充一个数组。
['a','b','c'].fill(7)// [7, 7, 7]newArray(3).fill(7)// [7, 7, 7]
上面代码表明，fill方法用于空数组的初始化非常方便。数组中已有的元素，会被全部抹去。
fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。
['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c']
凡是带这种传参有startIndex和endIndex的方法，都是以startIndex开始，以endIndex为结束但不包含endIndex元素上的值。
