2021-08-18

深度挖掘数组使用（一）

Array.from() 使用

• 是ES6新增的一个工厂方法，可以传两个参数，第一个直接传数组或者类数组（伪数组），可以生成新的数组，主要用法就是让一个伪数组生成一个真实的数组方法

let arrayDesc = {
        0: "tom",
        1: "65",
        2: "男",
        3: ["jane", "john", "Mary"],
        length: 4,
};
console.log(Array.from(arrayDesc))  // ["tom", "65", "男", ["jane", "john", "Mary"]]

对于伪数组转数组我们需要注意的是：

1. 伪数组科普： 伪数组又称为类数组我们可以理解为类似数组的一个集合，我们常见的有俩个，一个是arguments还有一个是DOM的children属性，获取回来的子节点集合。他们与数组一样，具有索引(下标)和length属性。
2. 对于Array.from()转化得类数组的对象的属性名必须为数值型或字符串型的数字，否则结果如下

let arrayDesc2 = {
        name: "tom",
        age: "65",
        sex: "男",
        friends: ["jane", "john", "Mary"],
        length: 4,
};
console.log(Array.from(arrayDesc2))  // [undefined, undefined, undefined, undefined]

3. 如果类数组不加length它就是个普通的对象，用Array.from()转化不了就会生成一个空数组，如下：

let arrayDesc3 = {
        0: "tom",
        1: "65",
        2: "男",
        3: ["jane", "john", "Mary"],
};
console.log(Array.from(arrayDesc3))  // []

• Array.from() 是可以传两个参数的，第二个参数就相当于我们用map一样，可以映射出一个新的数组，这个在构建数组期间执行的效率要高于先构建一个数组再把它映射为令一个新数组，如下：

let arrayDesc4 = {
        0: "tom",
        1: "65",
        2: "男",
        3: ["jane", "john", "Mary"],
        length: 4,
};
console.log(Array.from(arrayDesc4, item => {
	if(Array.isArray(item)){
		return item.join(' ')
	}
	if(typeof item === 'string'){
		return item + '++++'
	}
}))  // ["tom++++", "65++++", "男++++", "jane john Mary"]

• Array.from() 还有一个功能不是很常用，相当于展开运算符 … 的作用，如下：

console.log(Array.from('abcd'))  // 结果是  ['a','b','c','d']
// 这种情况就和 [...'abcd'] 方法一样

Array.prototype.join 等方法

先说一个简单的题型，如 ‘JavaScript’ 变成 ‘J a v a S c r i p t’
我们第一时间想到的应该是循环遍历

let str = 'JavaScript';
let newStr = '';
for(let i = 0;i<str.length;i++){
	newStr = newStr + ' ' + str.charAt(i)
}
console.log(newStr) // 'J a v a S c r i p t'

这种看着就比较麻烦，所以可以使用转为数组的操作：

let str = 'JavaScript';
let newStr= [...str].join(' ')
console.log(newStr) // 'J a v a S c r i p t'

或者上面刚讲解过的Array.form()

let str = 'JavaScript';
let newStr = Array.from(str).join(' ');
console.log(newStr) // 'J a v a S c r i p t'

当然方法很多，下面介绍的就是正题了，对于这道题虽然复杂，但是应用于复杂的场景还是挺好的，当然理解起来也相对复杂点，如下：

let str = 'JavaScript';
let newStr = Array.prototype.join.call(str,' ')
console.log(newStr) // 'J a v a S c r i p t'

具体理解：

1. 这是因为字符串和数组的行为类似，也就是说意味着我们可以对字符串使用泛型的字符串方法
2. Array的原型prototype上有个join方法
3. call和apply可以用来改变this指向，相当于str.join(’ ')，但是字符串又没有join方法，上面讲到Array.from()时可以将类数组和字符串转化为数组，其实上面的方法的主要目的就是为了将伪类数组转化为数组

又例如

function demo(a,b,c,d){
	console.log(Array.prototype.slice.call(arguments,0))
}
demo(1,2,3,4)  // [1,2,3,4]

当然刚才的Array.from()使用起来更简单

function demo(a,b,c,d){
	console.log(Array.from(arguments).slice(2))
	// 或者console.log([...arguments])
}
demo(1,2,3,4)  // [3,4]

Array.prototype还有很多使用方法，可以自己挖掘下