这篇文章主要介绍了JS数组之Array.from的案例分析，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
创新互联建站从2013年开始，先为凉山州等服务建站，凉山州等地企业，进行企业商务咨询服务。为凉山州企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
前言
从去年发现字符串的replace方法有很多神奇用法的时候，就想做这个系列，但是一直没空，也没有想到很好的名字，就搁置了。上周五刷题的时候看评论有个解决方法是用Array.from一行解决，而且效率还挺高的。于是啃了一下文档和博客，搞清楚了之后就想正好可以开始这个系列了。而且数组是我们开发中最常用的数据结构之一，作为生成数组的方法之一，以from开始也蛮意思。系列名字就先凑合这么叫吧。
定义：from() 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组。
语法：Array.from(object, mapFunction, thisValue)
| 参数 | 描述 |
object | 必需，要转换为数组的对象。 |
mapFunction | 可选，数组中每个元素要调用的函数。 |
thisValue | 可选，映射函数(mapFunction)中的 this 对象。 |
1. 将类数组转化为数组
Array.from('hello') //["h", "e", "l", "l", "o"]
Array.from(new Set(['name','age'])) //["name", "age"]
Array.from({name:'lgc',age:25}) //[]
let map=new Map()
map.set('name','lgc')
map.set('age',25)
Array.from(map) //[["name", "lgc"],["age", 25]]
function test(){
console.log(Array.from(arguments))
}
test(1,2,3) //[1, 2, 3]复制代码这是我们平时最常用的功能，写这些示例的时候我还奇怪:为什么map能转成数组而object只能转为空数组。当我查看菜鸟教程，看到上述定义我才明白。object既没有length也不是可迭代对象，我之前以为object也是可迭代对象，毕竟都可以用for-in嘛。但其实es6的object不是可迭代对象，这里不多赘述，有兴趣的同学可以去查一下。
2. 数组深拷贝（一行代码）
function clone(arr){
return Array.isArray(arr) ? Array.from(arr, clone):arr
}
let arrayA=[[1,2],[3,4]]
let arrayB=clone(arrayA)
arrayA===arrayB //false
arrayA[0]===arrayB[0] //false复制代码这里主要用到了Array.from的第二个参数mapFunction，mapFunction默认传两个参数，数组的值和下标。
3. 数组去重
function unique(arr){
return Array.from(new Set(arr))
}复制代码这也是from最基本，也是我们最常用的功能之一。
4. from的其他用法
再看一遍from定义：from() 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组。拥有length就行？试一试
Array.from({length:2},(val,index)=>index) //[0,1]复制代码可以，那他有什么用呢？第一，像上面代码，可以很方便生成在一定范围，有一定规则的数组
Array.from({length:3},(val,index)=>index*10) //[0,10,20]复制代码第二，数组的初始化。比如你想生成指定长度的对象数组。第一反应是什么？fill吗？
let testArr=Array(3).fill({})
testArr[0]===testArr[1] //true复制代码这里的每个对象其实都是同一个，你修改一个其他自然会跟着改变，但很多时候我们需要的并不是这样的。
let testArrb=Array.from({length:3},()=>({}))
testArrb[0]===testArrb[1] //false复制代码这两个方法可以根据需求使用。
5. from的进阶用法
上面的内容其实层层递进下来都是为了更好的理解下面的解题思路。
LeetCode第867题：
给定一个矩阵 A， 返回 A 的转置矩阵。
矩阵的转置是指将矩阵的主对角线翻转，交换矩阵的行索引与列索引。
示例 1： 输入：[[1,2,3],[4,5,6],[7,8,9]] 输出：[[1,4,7],[2,5,8],[3,6,9]] 示例 2： 输入：[[1,2,3],[4,5,6]] 输出：[[1,4],[2,5],[3,6]]
当时第一反应这就不是索引互换吗？贼简单。于是写了如下代码
var transpose = function(A) {
let x=A.length
let y=A[0].length
for(let i=0;i0){
[A[i][j],A[j][i]]=[A[j][i],A[i][j]]
}
}
}
return A
};复制代码执行代码：通过，提交：失败。卧槽？看一下错误提示，发现忽略了示例2这种，“长宽”不等的情况。转换思路，内外循环翻转。最外循环每执行一次即一列当做行。执行，通过。
不过这版看起来太捞了，而且执行时间太慢。但毕竟自己实现了，可以去评论区找一下其他思路。
下面这个就是看评论区大神实现，第一次都没看懂。
var transpose = function(A) { return Array.from({length:A[0].length},(_v,i)=>A.map(v=>v[i]))};复制代码{length:A[0].length}，是以给定矩阵的宽作为转置矩阵的长，为了满足“拥有 length 属性的对象”这一条件。(_v,i)=>A.map(v=>v[i])，取给定矩阵的列作为转置矩阵的行。核心思路和我第二版是一样的，但是实现方式和技巧就秀太多了。而且执行时间也较短，膜拜大神。
感谢你能够认真阅读完这篇文章，希望小编分享JS数组之Array.from的案例分析内容对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联-成都网站建设公司行业资讯频道，遇到问题就找创新互联，详细的解决方法等着你来学习!
网页标题：JS数组之Array.from的案例分析-创新互联
转载来于：
http://www.cdkjz.cn/article/hjgsp.html
