ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript の配列メソッドとループについて

JavaScript の配列メソッドとループについて

WBOY
リリース: 2022-09-08 20:35:37
転載
1977 人が閲覧しました

この記事は、主に JavaScript の配列メソッドとループを紹介する javascript に関する関連知識を提供するものであり、非常に参考になり、皆様のお役に立てれば幸いです。

JavaScript の配列メソッドとループについて

[関連する推奨事項: JavaScript ビデオ チュートリアル Web フロントエンド ]

1. 基本概念

JavaScript 配列は、複数の値を 1 つの変数に格納するために使用されます。同じデータ型を持つ 1 つ以上の値のコレクションです

2. 配列を作成する 3 つの方法

(1) JavaScript キーワード new を使用して Array オブジェクトを作成し、別途値を代入する

1

2

3

4

5

6

//1、创建数组  new 一个Array() 对象

    let arr = new Array();

    arr[0] = "html";

    arr[1] = "css";

    arr[2] = "javascript";

    arr[3] = "java";

ログイン後にコピー

(2) 宣言時に値を代入する

1

2

//2、创建数组  在Array()对象里面直接赋值

    let arr1 = new Array("html","css","java","javaweb","javascript");

ログイン後にコピー

(3) 配列リテラルを使って直接作成する

1

2

//3、通过[]直接创建

   let arr2 = ["html","css","java","javascript","javaweb"];

ログイン後にコピー

とりあえず単純さ、読みやすさ、実行速度の点で、3 番目の方法 (配列テキスト方式) を使用してください。

3. 配列へのアクセス

(1) インデックス番号(添え字番号) を参照して配列要素を参照します。[0] はその要素です。配列の最初の要素。 [1]は2番目です。配列インデックスは 0 から始まります;

1

document.write(arr1[0]);

ログイン後にコピー

(2) 完全な配列には、配列名

1

console.log(arr1);

ログイン後にコピー

(3) を参照することでアクセスできます。3) 配列要素を変更します。

1

arr[1] = "css";

ログイン後にコピー

4. 配列の共通プロパティ

length プロパティは、配列の長さ (配列要素の数) を返します。

1

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

ログイン後にコピー

5. 配列の一般的なメソッド

(1) join(): 配列のすべての要素を文字列に入れ、区切り文字で区切ります;

1

2

3

4

5

//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)split()メソッドは区切り文字を介して文字列を配列配列型に変換します

1

2

3

4

5

6

7

// 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]);

ログイン後にコピー

上記 2 つの方法を使用して、文字列間のすべてのスペースを削除します。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

//功能  剔除字符串里的所有空格

    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(): 配列を並べ替えます

1

2

3

4

5

6

7

8

9

10

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);

ログイン後にコピー

注: 次のメソッドは配列自体を操作します

(4) Push(): 配列の末尾に 1 つ以上の要素を追加します。 、新しい長さを返します;

(5) Pop(): 配列の末尾の要素を削除します;

(6) unshfit(): 配列の先頭に要素を追加します配列;

(7) shfit(): 配列の先頭要素を削除;

(8) splice(): 汎用配列メソッド: 1. 配列内の要素を削除; 2.要素を追加する; 3. 要素を置き換える

1

2

3

4

5

6

7

8

9

10

11

12

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. 配列をループする一般的な方法

ループ: ループとは、次のときに特定の関数を繰り返し実行することです。条件が満たされています。1 つの操作です。

1. for ループを使用して配列を走査します。既知の条件と既知の長さです。最初に判断してからループします。

1

2

3

4

5

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. while ループを使用して配列を走査します。未知の条件と未知の長さ。最初に判断してからループします。

1

2

3

4

5

6

//2、利用while循环遍历数组  未知条件 未知长度  先判断后循环

    let i = 0;

    while(i < arr.length){

        document.write(arr[i]+"<br>");

        i++;

    }

ログイン後にコピー

3. do while 配列をループし、少なくとも 1 回実行します。

1

2

3

4

5

6

7

//3、至少执行一次 do while 循环遍历数组

    let j = 0;

    do{

        document.write(arr[j]+"<br>");

        j++;

    }

    while(j < arr.length);

ログイン後にコピー

4. for of 配列値をループします。直接要素の値

1

2

3

4

//4、for of  循环遍历数组  value直接元素值 

    for(let value of arr){

        document.write(value+"<br>");

    }

ログイン後にコピー

5. for in オブジェクトを介したループ i は key Key はオブジェクトをループするために特別に使用され、配列

1

2

3

4

//5.for in 循环遍历对象  i 为  key键  专门用来循环遍历对象

    for(let i in arr){

        document.write(arr[i]+"<br>");

    }

ログイン後にコピー

6 をループすることもできます。配列メソッド 匿名コールバック関数 [配列をループ]

1

2

3

4

//6.forEach()  数组方法  匿名回调函数  【循环遍历数组】

    arr.forEach(function(value,index,arr){

        document.write(index+"---"+value+"----"+arr+"<br>");

    })

ログイン後にコピー

7.map() 配列メソッドを使用する 配列を走査すると戻り値が得られます

1

2

3

4

5

6

7

8

9

10

11

12

//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. flatmap() 配列メソッドを使用して走査します配列には戻り値があり、新しい配列も返します

1

2

3

4

5

6

7

8

9

10

11

//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);

ログイン後にコピー

[関連する推奨事項 :JavaScript ビデオ チュートリアルWeb フロントエンド]

以上がJavaScript の配列メソッドとループについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:jb51.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート