Ce que vous devez savoir sur les tableaux JS : Array.from

Recommandations d'apprentissage associées : Tutoriel vidéo javascript

Préface

Je voulais faire cette série depuis l'année dernière quand j'ai découvert que la méthode de remplacement des chaînes avait de nombreuses utilisations magiques, mais je n'ai jamais eu le temps et je n'ai pas pensé à un bon nom, alors je l'ai mis en attente. Quand je faisais mes devoirs vendredi dernier, j'ai vu une solution dans les commentaires, qui consiste à utiliser Array.from pour le résoudre en une seule ligne, et c'est assez efficace. J'ai donc lu les documents et les blogs, et après avoir compris, j'ai pensé qu'il était temps de commencer cette série. De plus, les tableaux sont l'une des structures de données les plus couramment utilisées dans notre développement. En tant que méthode de génération de tableaux, il est logique de commencer par. Contentons-nous du nom de la série.

• Syntaxe de base

Définition : La méthode from() est utilisée pour passer un objet ou un itérable avec la longueur attribut Objet pour renvoyer un tableau.

Syntaxe : Array.from(object, mapFunction, thisValue)

Paramètres

Description

参数	描述
object	必需，要转换为数组的对象。
mapFunction	可选，数组中每个元素要调用的函数。
thisValue	可选，映射函数(mapFunction)中的 this 对象。

objet

Obligatoire, l'objet à convertir en tableau.

mapFunction

Facultatif, la fonction à appeler pour chaque élément du tableau.

thisValue

Facultatif, l'objet this dans la fonction de mappage (mapFunction).

Exemple d'utilisation

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

C'est notre fonction la plus couramment utilisée lors de l'écriture de ces exemples, je me demandais encore : pourquoi la carte peut être convertie en tableau mais l'objet ne peut être converti qu'en tableau vide. Quand j'ai regardé le tutoriel novice et vu la définition ci-dessus, j'ai compris. L'objet n'a ni longueur ni objet itérable. Je pensais que cet objet était aussi un objet itérable. Après tout, vous pouvez utiliser for-in. Mais en fait, l'objet d'es6 n'est pas un objet itérable, je n'entrerai pas dans les détails ici.

2. Copie complète du tableau (une ligne de code)

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

Le deuxième paramètre mapFunction de Array.from est principalement utilisé ici Par défaut, mapFunction passe deux paramètres. , valeur du tableau et indice.

3. Déduplication de tableau

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

C'est également la fonction la plus basique et l'une de nos fonctions les plus couramment utilisées.

4. Autres utilisations de from

Regardez à nouveau la définition de from : la méthode from() est utilisée pour passer des objets avec la

longueur

attribut ou can Un objet itérable pour renvoyer un tableau. Juste de la longueur ? Essayez-le

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

D'accord, mais à quoi ça sert ? Premièrement, comme le code ci-dessus, vous pouvez facilement générer un tableau

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

dans une certaine plage et avec certaines règles. Deuxièmement, l'initialisation du tableau. Par exemple, vous souhaitez générer un tableau d'objets d'une longueur spécifiée. Quelle a été votre première réaction ? remplir?

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

Chaque objet ici est en fait le même. Si vous en modifiez un, les autres changeront naturellement en conséquence, mais souvent, ce dont nous avons besoin n'est pas comme ça.

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

Ces deux méthodes peuvent être utilisées selon les besoins.

5. Utilisation avancée de

Le contenu ci-dessus est en fait progressivement conçu pour mieux comprendre les idées de résolution de problèmes suivantes. AAQuestion LeetCode 867 :

Étant donné une matrice

, renvoie la matrice transposée de

.

La transposition d'une matrice fait référence au retournement de la diagonale principale de la matrice et à l'échange de l'index de ligne et de l'index de colonne de la matrice.

Exemple 1 : Entrée : [[1,2,3],[4,5,6],[7,8,9]] Sortie : [[1,4,7],[2, 5,8],[3,6,9]] Exemple 2 : Entrée : [[1,2,3],[4,5,6]] Sortie : [[1,4],[2,5], [3,6]]

Ma première réaction a été que ce n'était pas un échange d'indice ? C'est si simple. J'ai donc écrit le code suivant

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

Code d'exécution : réussi, soumission : échouée. Bon sang? En regardant le message d'erreur, j'ai constaté que la situation de l'exemple 2, où la "longueur et la largeur" ​​ne sont pas égales, avait été ignorée. Changez votre façon de penser et inversez les cycles internes et externes. Chaque fois que la boucle la plus externe est exécutée, une colonne est traitée comme une ligne. Exécuter, passer.

Cependant, cette version semble trop chère et le temps d'exécution est trop lent. Mais après tout, je l'ai implémenté moi-même, vous pouvez donc vous rendre dans la zone de commentaires pour trouver d'autres idées. Ce qui suit est implémenté par le maître dans la zone de commentaire, mais je ne l'ai pas compris la première fois.

var transpose = function(A) {    return Array.from({length:A[0].length},(_v,i)=>A.map(v=>v[i]))};复制代码

{length:A[0].length}, utilise la largeur de la matrice donnée comme longueur de la matrice transposée, afin de satisfaire la condition "d'un objet avec la

longueur attribut" . (_v,i)=>A.map(v=>v[i]), prend les colonnes de la matrice donnée comme lignes de la matrice transposée. L'idée de base est la même que celle de ma deuxième version, mais les méthodes et techniques de mise en œuvre sont trop nombreuses. Et le temps d'exécution est également plus court, adorez le grand dieu.

Si vous souhaitez en savoir plus sur la programmation, faites attention à la rubrique

Formation php !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!