JS 配列について知っておくべきこと: Array.from

関連する学習に関する推奨事項: JavaScript ビデオ チュートリアル

序文

昨年、文字列の replace メソッドに魔法のような使い方がたくさんあることを発見して以来、このシリーズをやりたいと思っていましたが、時間がなく、良い名前も思いつかなかったので、このようにしました。保留中。先週の金曜日に宿題をしていたときに、コメントで解決策を見つけました。それは、Array.from を使用して 1 行で解決するというもので、非常に効率的です。そこでドキュメントやブログを読み、それを理解した後、このシリーズを始める時期だと思いました。さらに、配列は開発で最も一般的に使用されるデータ構造の 1 つであり、配列を生成する方法の 1 つとして、配列から始めることは理にかなっています。シリーズ名だけで済ませましょう。

• 基本構文

定義: from() メソッドは、オブジェクトまたは length の反復可能オブジェクトを渡すために使用されます。 property 配列を返すオブジェクト。

構文: Array.from(object, mapFunction, thisValue)

##パラメータ説明必須、配列に変換されるオブジェクト。 オプション。配列内の各要素に対して呼び出される関数。 オプション。マッピング関数 (mapFunction) の this オブジェクト。

object
mapFunction
thisValue

#使用例

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]复制代码

これは最も一般的に使用される関数です。これらの例を書いているとき、私はまだ疑問に思っていました。なぜマップは配列に変換できるのに、オブジェクトは空の配列にしか変換できないのかということです。初心者向けのチュートリアルを見て上記の定義を見たときに、理解しました。オブジェクトには長さも反復可能オブジェクトもありません。オブジェクトも反復可能オブジェクトだと思っていました。結局のところ、for-in を使用できます。しかし、実際には、es6 のオブジェクトは反復可能なオブジェクトではありません。ここでは詳しく説明しません。興味のある学生は調べてください。

2. 配列のディープ コピー (コード 1 行)

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 の 2 番目のパラメーター mapFunction を使用します。デフォルトでは、mapFunction は 2 つのパラメーターを渡します。配列の値と添字。

3. 配列の重複排除

function unique(arr){
    return Array.from(new Set(arr))
}复制代码

これは最も基本的な関数であり、最もよく使用される関数の 1 つです。

4. from のその他の使用法

from の定義をもう一度見てください: from() メソッドは、オブジェクトまたは

length を持つオブジェクトを渡すために使用されます。

属性 配列を返す反復可能なオブジェクト。ただ長さがあるだけ？試してみてください

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

わかりましたが、それは何の役に立つのでしょうか?まず、上記のコードのように、特定の範囲内で特定の規則に従って配列を簡単に生成できます。

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

2 番目に、配列の初期化です。たとえば、指定した長さのオブジェクト配列を生成するとします。最初の反応は何でしたか？埋める？

let testArr=Array(3).fill({})
testArr[0]===testArr[1]                                         //true复制代码

ここにあるすべてのオブジェクトは実際には同じです。1 つを変更すると、他のオブジェクトもそれに応じて自然に変更されますが、多くの場合、必要なものはこのようなものではありません。

let testArrb=Array.from({length:3},()=>({}))
testArrb[0]===testArrb[1]                                       //false复制代码

これら 2 つの方法は、必要に応じて使用できます。

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
};复制代码

実行コード: 成功、送信: 失敗しました。くそ？エラーメッセージを見ると、例 2 の「長さと幅」が等しくない状況が無視されていることがわかりました。考え方を変えて、内と外のサイクルを反転させましょう。最も外側のループが実行されるたびに、1 つの列が 1 つの行として扱われます。実行、パス。

しかし、このバージョンは高すぎるように見え、実行時間も遅すぎます。しかし、結局のところ、私はそれを自分で実装したので、コメントエリアに行って他のアイデアを見つけることができます。

以下はマスターがコメント欄で実装したものですが、最初は理解できませんでした。

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]) は、指定された行列の列を転置行列の行として受け取ります。核となるアイデアは私の 2 番目のバージョンと同じですが、実装方法とテクニックが多すぎます。そして処刑時間も短くなります、大神を崇めます。

プログラミング学習について詳しく知りたい方は、

php training

のコラムに注目してください！

以上がJS 配列について知っておくべきこと: Array.fromの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。