js Array.from() 和 Array.of() - Kaiqisan

js Array.from() 和 Array.of()

ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである。数组在本质上来说是对象，这次主要来讲讲一个ES6新方法，把特定对象转化为数组。

Array.from(obj, callback, thisArg) 把一个可以遍历的对象（内部有Symbol.iterator迭代器）转化为真正的数组。
第一个参数传入需要转化为数组的对象，第二个是回调函数，该对象被转化为数组之后还需要做什么处理的时候写上，本质上这个回调函数就是map方法,第三个参数thisArg，希望传入的对象并被第二个回调函数以this引用的对象，第三参数不详细讲，大家可以参考我之前写的博客

传送门。

这个方法拥有返回值，需要参数来接收。

现在举几个常用的这个方法的应用场景

• 获取DOM节点信息转化数组。

<ul>
	<li>kaiqisan</li>
	<li>Sam</li>
	<li>Lily</li>
</ul>

const objLi = document.querySelectorAll('li')
console.log(objLi);
// objLi = { 
// 	  length: 3, 
// 	  0: {...节点信息}, 
//    1: {...节点信息}, 
//    2: {...节点信息} 
// }
const name = objLi.map(aa => aa.textContent) // 必报错

此时，objLi只是一个类数组，它的原型是NodeList，它拥有迭代器，可以遍历，但是无法使用数组的方法

此时，Arrey.from() 就可以解决这个问题。

const objLi = document.querySelectorAll('li')
const arrLi = Array.from(objLi)
const name = arrLi.map(aa => aa.textContent)
// 获取标签内部所有文字信息
console.log(name) // ["kaiqisan", "Sam", "Lily"]

上面说到这个Array.from这个方法拥有第二个参数，为回调函数，所以上面的Arrat.from方法和map方法可以合二为一。

const objLi = document.querySelectorAll('li')
let name = Array.from(objLi, aa => aa.textContent)
console.log(name) // ["kaiqisan", "Sam", "Lily"]

• 可以把函数里的数组对象（arguments）转化成真正的数组

function sum() {
    console.log(arguments);
//  arguments = {
//      0: 1,
//      1: 5,
//      2: 7,
//      3: 8,
//      length: 4
//  }
    return arguments.reduce((prev, curr) => prev + curr, 0) // arguments不是数组，必报错
}
sum(1, 5, 7, 8)
//此时，无法直接调用函数，因为此时arguments还不是一个真正的数组，它的原型只是Object(对象)，它没有reduce方法

此时，应该将它正式转化为数组

function sum() {
    console.log(arguments);
    return Array.from(arguments).reduce((prev, curr) => prev + curr, 0) // arguments不是数组，必报错
}
sum(1, 5, 7, 8) // 21

• 可以把字符串转化为数组

const name = 'kaiqisan'
console.log(Array.from(name))
//输出长度为8的由单个字母组成的字符串 
//["k", "a", "i", "q", "i", "s", "a", "n"]

• 可以把set map类型的数据转化为数组

let s = new Set(['app', 100]); 
Array.from(s); 
// ["app", 100]

let m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m); 
// [[1, 2], [2, 4], [4, 8]]

• 这个也是Array.from()转化遵循的最基本原则，上面的DOM转化和arguments转化就是很好的例子

let obj = {
    0: 'aa',
	1: '1212',
	2: 1111,
	length: 3
}
console.log(Array.from(obj)); // ["aa", "1212", 1111]

现在来讲讲它的转化机制，首先，它会浏览对象里面的所有元素，找到键名为数字的一些成员，提取出来，排列成一个临时数组（我的叫法），它的最大下标就是这个数字键名中最大的那个。然后，寻找对象中键名为length的成员，最终形成的数组长度就由这个length值决定，如果临时数组短了，就会再在这个临时数组后面再续一些空成员(undefined),如果临时数组短长了，就要腰斩这个临时数组直到指定的length.
注意，待转化的对象中，这个length必须要有，它的合法值是 0 ~~ +∞，如果没有这个length或者这个length值不合法，只能生成一个空数组。

实例1

let obj = {
    0: 'aa',
	1: '1212',
	2: 1111,
	length: 5  // length偏长
}
console.log(Array.from(obj)); // ["aa", "1212", 1111, undefined, undefined]

实例2

let obj = {
    0: 'aa',
	1: '1212',
	2: 1111,
	length: 2  // length偏短
}
console.log(Array.from(obj)); // ["aa", "1212"] 第三个元素被腰斩抬走了

实例3

// 对象有除了键名为数组的成员之外还有别的成员
let obj = {
    0: 'aa',
	2: '1212',
	5: 1111,
    name: 'ddd',
    id: 1000,
	length: 8
}
console.log(Array.from(obj)); // 对象属性 name id 被丢弃
// ["aa", undefined, "1212", undefined, undefined, 1111, undefined, undefined]

实例4

// 没有length
let obj = {
    0: 'aa',
	1: '1212',
	2: 1111,
}
console.log(Array.from(obj)); // [] 

Array.of(...vals): 用于弥补new Array()一些创建时的机制问题

使用new Array()这个构造函数建立数组的时候，有时候会出现我们不想要的结果

const a =new Array(1) // 产生长度为1的空数组而不是长度为1，值为[1]的数组
const b=new Array(7) // 产生长度为7的空数组，而不是长度为1，值为[7]的数组
const c=new Array(2, 3, 4)// [2, 3, 4]

所以我们使用Array.of()方法会更加灵活，也可以避免上述的错误。

const a = Array.of(7) // 产生长度为1.值为[7]的数组，而不是长度为7，全部值为空的数组
const b = Array.of(2, 3) // 产生长度为2，值为[2,3]的数组
const c = Array.of() // 里面啥也不写，返回空数组 []

总结

温馨提示，部分浏览器内核无法接受ES6新方法，需要手动转化或者使用工具来转化ES6到ES5以便于兼容部分版本低下的浏览器。