Array.from总结。

Posted 2020-10-31 hjdjs

Array.from的作用是将类数组转换为数组。那么什么是类数组呐？我的理解，有length属性的数据结构，但是又不能用Array的方法的结构。不会改变原数组结构。
类数组都有哪些呐？ string，arguments，set，map，nodeList。不确定string，set，map算不算，但是这些都可以转换为数组，姑且算是吧。如果有大神欢迎指导。万分感谢。

那么，接下来看看Array.from(arrayLike，mapFn,thisArg)的参数，第一个就是类数组，第二个是一个map函数，第三个是map中的this。

先说第一个，arrayLike的要求就是不为undefined并且含有length属性。比如｛length: 6｝也是可以的，在不设置mapFn的前提下会得到一个[]。

那么接着说第二个，mapFn，就是以arrayLike的length做了一个循环，执行map方法。关于map方法有什么用就不做介绍了。大家自己看一下就好了。

第三个参数，thisArg，也就是mapFn中的this，如果不传的话有两种问题，当是function(){}时this会是window，但是当为箭头函数时候()=>{}会是上面的执行作用域。关于这个我做了一个例子，仅供参考,大家自行测试。

var obj ={
    name: ‘hjd‘,
    say:function(){
        Array.from(‘123‘,()=>{
        console.log(this)
        })
    }
}
obj.say()        

var obj ={
    name: ‘hjd‘,
    say:function(){
        Array.from(‘123‘,function(){
        console.log(this)
        })
    }
}   
obj.say(); 

最后说下应用：最常用的就是数组的去重。利用set结构进行去重，至于set是什么，大家参考下http://es6.ruanyifeng.com/#docs/set-map。es6官方文档。
不多说上代码

//1,数组去重
let arr = [1,2,2]
let nArr = Array.from(new Set(arr))
console.log(nArr)

let nArr = [...new Set(arr)] //利用结构赋值实现。

同理也可以实现字符的去重。大家自行扩展。