À propos des méthodes de tableau et des boucles en JavaScript

Cet article vous apporte des connaissances pertinentes sur javascript Il présente principalement les méthodes de tableau et les boucles en JavaScript. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

【Recommandations associées : Tutoriel vidéo javascript, front-end web】

1 Concepts de base

Les tableaux JavaScript sont utilisés pour stocker plusieurs valeurs dans une seule variable. Est une collection d'une ou plusieurs valeurs du même type de données

2 Trois façons de créer un tableau

(1) Utilisez le mot-clé JavaScript new pour créer un objet Array et attribuez des valeurs individuellement

//1、创建数组  new 一个Array() 对象
    let arr = new Array();
    arr[0] = "html";
    arr[1] = "css";
    arr[2] = "javascript";
    arr[3] = "java";

. (2) Lors de la déclaration d'une affectation

//2、创建数组  在Array()对象里面直接赋值
    let arr1 = new Array("html","css","java","javaweb","javascript");

(3) Utilisez un tableau littéral pour créer directement

 //3、通过[]直接创建
    let arr2 = ["html","css","java","javascript","javaweb"];

Par souci de simplicité, de lisibilité et de vitesse d'exécution, veuillez utiliser la troisième méthode (méthode littérale de tableau).

3. Accéder au tableau

(1) Référencez un élément du tableau en vous référant au numéro d'index (numéro d'indice) , [0] est le premier élément du tableau. [1] est le deuxième. Les index du tableau commencent à 0 ;

document.write(arr1[0]);

(2) Le tableau complet est accessible en faisant référence au nom du tableau

console.log(arr1);

(3) Modifier les éléments du tableau.

arr[1] = "css";

4. Attributs couramment utilisés des tableaux

L'attribut length renvoie la longueur du tableau (le nombre d'éléments du tableau).

console.log(arr,arr.length);//控制台输出数组和数组长度

5. Méthodes courantes pour les tableaux

(1) join() : mettre tous les éléments du tableau dans une chaîne, séparés par un délimiteur ;

 //1、join()方法 以分隔符将数组分隔转化为string
    let arr = new Array("html","css","javascript","java","web","mysql");
    console.log(arr,typeof(arr));
    let newarr = arr.join("+");
    console.log(newarr,typeof(newarr));

(2) méthode split() La chaîne est converti en un type de tableau tableau via le délimiteur

// 2、split()方法  将字符串通过分隔符转化为array数组类型
    // split() 函数验证邮箱格式
    let email = prompt("请输入你的邮箱：");
    console.log(email);
    let arr1 = email.split("@");
    console.log(arr1,typeof(arr1));
    document.write("你的账号为："+arr1[0]+"<br>"+"你的网站时："+arr1[1]);

Utilisation des deux méthodes ci-dessus pour éliminer tous les espaces entre les chaînes

//功能  剔除字符串里的所有空格
    function trimAll(str){
        let nowstr = str.trim();//先剔除两端的空格
        let arr = nowstr.split(" ");//split()  转换为数组 用空格分隔
        for(let i = 0;i<arr.length;i++){//循环遍历
            if(arr[i] == ""){
                arr.splice(i,1);//遇到空格删除
                i--;
            }
        }
        return arr.join("");//join() 转化为字符串
    }
 
    let nowstr = trimAll("     1     2    4    5    ");
    console.log(nowstr);

(3) sort() : tri du tableau à droite

let arr = [31,23,26,76,45,1,90,6,24,56];
    //sort() 函数  对数组进行排序  默认按数字首位进行排序
    //添加参数  参数为匿名函数
    arr.sort(function(a,b){
        // return a-b;         //正序排序
 
        return b-a;           //倒序排序
    });
 
    console.log(arr);

Remarque : Les méthodes suivantes opèrent sur le tableau lui-même

(4) push() : ajoute un ou plusieurs éléments à la fin du tableau et renvoie la nouvelle longueur ;

(5) pop() : Supprimez l'élément à la fin du tableau ;

(6) unshfit() : ajoutez un élément en tête du tableau 

(7) shfit() : supprimez l'élément en tête du tableau ; (8) splice() : Méthode universelle du tableau : 1. Supprimer des éléments dans le tableau ; 2. Ajouter des éléments ; 3. Remplacer des éléments

 let arr = ["html","java","csss","javascript"];
    console.log("旧数组："+arr);
    //对数组自身进行操作
    arr.push("weeb");//在数组末尾添加元素  可以有多个参数 之间用逗号隔开
    arr.pop();//删除末尾元素  没有参数
    arr.unshift("react","mysql");//在数组头部添加元素  可以有多个参数  之间用逗号隔开
    arr.shift();//删除数组头部的元素  没有参数
    arr.shift();//删除需要多次删除  或者利用循环
    arr.splice(0,2);//数组万能方法  删除任意位置元素  参数为： 起始下标，删除数目
    arr.splice(3,2,"java","html");//添加元素  参数为：数组没有的下标，添加数目，添加的数据
    arr.splice(1,1,"javaweb")//替换元素  参数为：起始下标，替换个数，替换数据  如果替换数据小于替换个数  则执行删除功能
    console.log("新数组："+arr);

6. continuez lorsque les conditions sont remplies. Répétez une opération

1. Utilisez une boucle for pour parcourir les conditions connues et la longueur connue, puis la boucle

let arr = new Array("html","css","javascript","java","web","mysql");
    //1、利用for循环遍历数组  已知条件  已知长度  先判断后循环
    for (let i = 0;i < arr.length;i++){
        document.write(arr[i]+"<br>");
    }

2. longueur inconnue. Jugez d'abord, puis bouclez

//2、利用while循环遍历数组  未知条件 未知长度  先判断后循环
    let i = 0;
    while(i < arr.length){
        document.write(arr[i]+"<br>");
        i++;
    }

3. faites while Parcourez le tableau et exécutez-le au moins une fois

//3、至少执行一次 do while 循环遍历数组
    let j = 0;
    do{
        document.write(arr[j]+"<br>");
        j++;
    }
    while(j < arr.length);

4 for of La boucle à travers la valeur du tableau est directement la valeur de l'élément

//4、for of  循环遍历数组  value直接元素值  
    for(let value of arr){
        document.write(value+"<br>");
    }

5. for in Loop. à travers l'objet i est la clé clé Il est spécialement utilisé pour parcourir l'objet, et vous pouvez également parcourir le tableau

//5.for in 循环遍历对象  i 为  key键  专门用来循环遍历对象
    for(let i in arr){
        document.write(arr[i]+"<br>");
    }

6. Méthode de tableau forEach() Fonction de rappel anonyme [Boucle à travers le tableau]

//6.forEach()  数组方法  匿名回调函数  【循环遍历数组】
    arr.forEach(function(value,index,arr){
        document.write(index+"---"+value+"----"+arr+"<br>");
    })

7. Utilisez la méthode de tableau map() pour parcourir le tableau et renvoyer une valeur

//7、利用map() 数组方法遍历数组 有返回值
    // 返回一个新的数组  和老数组长度一定一致，有可能是二维数组
    let newarr = arr.map(function(value,index,oldarr){
        document.write(index+"---"+value+"----"+oldarr+"<br>");
 
        if(index == 0){
            value = "12345";
        }
        return [value,index];
 
    });
    console.log(newarr);

8. Utilisez la méthode de tableau flatmap() pour parcourir le tableau et renvoyer une valeur. Elle renvoie également un nouveau tableau

//8、利用flatmap() 数组方法遍历数组 有返回值 同样返回一个新的数组 
    //长度有可能和原来数组不一致，但一定是一维数组  flat() 为降维函数
    let newarr1 = arr.flatMap(function(value,index,oldarr){
        document.write(index+"---"+value+"----"+oldarr+"<br>");
 
        if(index == 0){
            value="321";
        }
        return [value,index];
    });
    console.log(newarr1);

【Connexe. recommandations :

tutoriel vidéo javascript,

front-end web

】

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!