ホームページ ウェブフロントエンド jsチュートリアル JS 配列について知っておくべきこと: Array.from

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

Sep 08, 2020 pm 01:21 PM
js配列

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

es6配列から要素を削除する方法 es6配列から要素を削除する方法 Jan 11, 2023 pm 03:51 PM

方法: 1. 最初の要素を削除するには、shift() を使用します。構文は「array.shift()」です; 2. 最後の要素を削除するには、pop() を使用します。構文は「array.pop()」です; 3. splice() を使用して任意の位置の要素を削除します。構文は「array.splice(位置, 数値)」です。 4. length を使用して最後の N 要素を削除します。構文は「array.length=元の配列の長さ-N」です。 ; 5. 空の配列「[ ]」を直接代入して要素をクリアします; 6. delete を使用して、指定した添え字の要素を削除します。

jsで配列の長さを取得する方法 jsで配列の長さを取得する方法 Jun 20, 2023 pm 05:33 PM

JS で配列の長さを取得するのは非常に簡単です。各配列には length プロパティがあり、配列の最大長、つまり、その値は添字の最大値に 1 を加えたものを返します。数値の添え字は 2^32-1 未満である必要があるため、長さ属性の最大値は 2^32-1 に等しくなります。次のコードでは、空の配列を定義し、インデックスが 100 である要素に値を割り当てます。その後、length プロパティは 101 を返します。したがって、長さ属性は実際の配列要素の数を反映できません。

JavaScriptで文字列を配列に変換する方法 JavaScriptで文字列を配列に変換する方法 Nov 23, 2022 pm 07:28 PM

3 つの変換方法: 1. 指定された文字列を文字列配列に分割するには、split() を使用します。構文は「str.split (区切り文字、配列の最大長)」です; 2. 拡張演算子「...」を使用します (反復可能)文字列オブジェクトの場合、文字配列に変換します (構文 "[...str]"; 3. Array.from() を使用して文字列を配列に変換します (構文 "Array.from(str) "。

js配列をphp配列に変換できますか? js配列をphp配列に変換できますか? Jun 02, 2023 am 10:06 AM

js配列をphp配列に変換することができます 操作方法は、 1.phpサンプルファイルを作成する; 2.「JSON.stringify()」という構文を使用して、js配列をJSON形式の文字列に変換する; 3.構文「json_decode()」を使用します。「JSON 形式の文字列を PHP 配列に変換します。パラメータ true がここに追加されます。これは、JSON 形式の文字列が PHP 連想配列に変換されることを意味します。

js配列から要素を削除するにはいくつかの方法があります js配列から要素を削除するにはいくつかの方法があります Aug 02, 2023 am 10:09 AM

js 配列から要素を削除するには 4 つの方法があります: 1. splice を使用する; 2. filter を使用する; 3. pop メソッドとシフトを使用する; 4. delete キーワードを使用する。

JS 配列のソート:sort() メソッドの使用方法 JS 配列のソート:sort() メソッドの使用方法 Dec 27, 2023 pm 03:40 PM

JavaScript の Array.prototype.sort() メソッドは、配列の要素をソートするために使用されます。このメソッドはその場でソートします。つまり、ソートされた新しい配列を返すのではなく、元の配列を変更します。デフォルトでは、sort() メソッドは Unicode コード ポイント値に従って文字列を並べ替えます。これは、オブジェクトやその他の複雑なデータ型の並べ替えではなく、主に文字列と数値の並べ替えに使用されることを意味します。

JavaScript で配列の要素の長さと合計を見つける方法 JavaScript で配列の要素の長さと合計を見つける方法 Sep 20, 2022 pm 02:11 PM

JavaScript では、 length 属性を使用して配列の長さを取得できます。構文は「array object.length」です。また、reduce() 関数または ReduceRight() 関数を使用して要素の合計を求めることができます。構文は「」です。 arr.reduce(function f(pre,curr){return pre+cur})」または「arr.reduceRight(function f(pre,curr){return pre+cur})」。

js配列をphp配列に変換する方法 js配列をphp配列に変換する方法 Mar 22, 2023 am 11:24 AM

Web 開発では、JavaScript (JS) と PHP が最も一般的に使用される 2 つのプログラミング言語であるため、開発プロセスでは配列が避けられません。この状況に対応して、多くの場合、JS 配列を PHP 配列に変換する必要があります。この機能を実現するにはさまざまな方法がありますが、以下で 1 つずつ紹介します。

See all articles