這篇文章主要介紹了JS數(shù)組之Array.from的案例分析，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站從2013年開始，先為涼山州等服務建站，涼山州等地企業(yè)，進行企業(yè)商務咨詢服務。為涼山州企業(yè)網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

前言

從去年發(fā)現(xiàn)字符串的replace方法有很多神奇用法的時候，就想做這個系列，但是一直沒空，也沒有想到很好的名字，就擱置了。上周五刷題的時候看評論有個解決方法是用Array.from一行解決，而且效率還挺高的。于是啃了一下文檔和博客，搞清楚了之后就想正好可以開始這個系列了。而且數(shù)組是我們開發(fā)中最常用的數(shù)據結構之一，作為生成數(shù)組的方法之一，以from開始也蠻意思。系列名字就先湊合這么叫吧。

• 基礎語法

定義：from() 方法用于通過擁有 length 屬性的對象或可迭代的對象來返回一個數(shù)組。

語法：Array.from(object, mapFunction, thisValue)

參數(shù)	描述
object	必需，要轉換為數(shù)組的對象。
mapFunction	可選，數(shù)組中每個元素要調用的函數(shù)。
thisValue	可選，映射函數(shù)(mapFunction)中的 this 對象。

• 示例用法

1. 將類數(shù)組轉化為數(shù)組

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能轉成數(shù)組而object只能轉為空數(shù)組。當我查看菜鳥教程，看到上述定義我才明白。object既沒有l(wèi)ength也不是可迭代對象，我之前以為object也是可迭代對象，畢竟都可以用for-in嘛。但其實es6的object不是可迭代對象，這里不多贅述，有興趣的同學可以去查一下。

2. 數(shù)組深拷貝（一行代碼）

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的第二個參數(shù)mapFunction，mapFunction默認傳兩個參數(shù)，數(shù)組的值和下標。

3. 數(shù)組去重  

function unique(arr){
    return Array.from(new Set(arr))
}復制代碼

這也是from最基本，也是我們最常用的功能之一。

4. from的其他用法  

再看一遍from定義：from() 方法用于通過擁有 length 屬性的對象或可迭代的對象來返回一個數(shù)組。擁有l(wèi)ength就行？試一試

Array.from({length:2},(val,index)=>index)                        //[0,1]復制代碼

可以，那他有什么用呢？第一，像上面代碼，可以很方便生成在一定范圍，有一定規(guī)則的數(shù)組

Array.from({length:3},(val,index)=>index*10)                     //[0,10,20]復制代碼

第二，數(shù)組的初始化。比如你想生成指定長度的對象數(shù)組。第一反應是什么？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;i<x;i++){
        for(let j=0;j<y;j++){
            if(j-i>0){
                [A[i][j],A[j][i]]=[A[j][i],A[i][j]]
            }
        }
    }
    return A
};復制代碼

執(zhí)行代碼：通過，提交：失敗。臥槽？看一下錯誤提示，發(fā)現(xiàn)忽略了示例2這種，“長寬”不等的情況。轉換思路，內外循環(huán)翻轉。最外循環(huán)每執(zhí)行一次即一列當做行。執(zhí)行，通過。

不過這版看起來太撈了，而且執(zhí)行時間太慢。但畢竟自己實現(xiàn)了，可以去評論區(qū)找一下其他思路。

下面這個就是看評論區(qū)大神實現(xiàn)，第一次都沒看懂。

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])，取給定矩陣的列作為轉置矩陣的行。核心思路和我第二版是一樣的，但是實現(xiàn)方式和技巧就秀太多了。而且執(zhí)行時間也較短，膜拜大神。

感謝你能夠認真閱讀完這篇文章，希望小編分享JS數(shù)組之Array.from的案例分析內容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)-成都網站建設公司行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細的解決方法等著你來學習!

分享題目：JS數(shù)組之Array.from的案例分析-創(chuàng)新互聯(lián)
轉載來于：http://chinadenli.net/article38/hjgsp.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站建設、虛擬主機、靜態(tài)網站、營銷型網站建設、全網營銷推廣、網站改版

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)