コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 上級プログラマーによる JavaScript 配列の概要

上級プログラマーによる JavaScript 配列の概要

韦小宝
リリース： 2018-03-02 10:09:43
オリジナル
1401 人が閲覧しました

JavaScript の データ型 は、JavaScript の日常的な開発で使用する必要があります。この記事では、PHP の配列と JavaScript の配列にほとんど違いはありません。上級プログラマが JavaScript 配列をどのようにまとめているかを見てみましょう

1. 配列の概念

1.1 配列とは何ですか

配列とは、データの順序付きリストを指します。

    配列内の各値は、配列の要素と呼ばれます。

    2. 配列内の各要素にはインデックス (添字、インデックス) と呼ばれる位置があります。配列のインデックスは 0 から始まります

    3. 同じ配列内の要素の型に制限はありません。つまり、Number、String、Boolean、Object オブジェクトなどを同じ配列内で使用できます。どの種類でも同時に入れることができます。配列内の要素であっても、別の配列 (多次元配列を構成する) にすることができます。

1.2 JavaScript の配列の特徴

どの言語にも配列データ構造がありますが、JavaScript の配列はそれらとは大きく異なります。

    配列の長さは動的に変更できます。

    2. 異なるデータ型を同じ配列に格納できます。

    3. 順序付けられたデータのコレクション

    4. 各配列には、配列内の要素の数を表す長さ属性があります

2. 配列の作成 配列には 2 つのタイプがあります基本的な作成方法: リテラルメソッドと

Constructor

2.1 リテラルメソッド

配列リテラル: すべての要素は角かっこで囲まれ、異なる要素はカンマで区切られます。 

//例如：
[“a”, 5, “b”]
ログイン後にコピー
rrree

2.2 コンストラクターメソッド

コンストラクターはオブジェクトを作成する際に使用します。配列コンストラクターの型 Array()

//创建一个长度为 3 的数组，并初始化了3 个元素："abc" "b" "d"
var colors = ["abc", "b", "d"];
//创建一个长度为 0 的空数组数组。里面一个值都没有
var colors = [];
//不要在最后一个元素的后面添加逗号，添加逗号虽然语法没有问题，但是在不同的浏览器可能得到不同的结果
var colors = [5, 6, 7,]; //这样数组的长度可能为 3 也可能为 4。在不同浏览器会得到不同的结果应避免这种创建方式。
ログイン後にコピー
例如：
new Array(数组长度);
ログイン後にコピー

注:

    コンストラクターを使用して配列オブジェクトを作成する場合、最後の要素の後にかっこを追加しないでください。追加しないと、エラーが報告されます。 これは間違っています: new Array("a", )

    2. コンストラクターを使用する場合、数値値が 1 つだけ渡される場合、この値は >= 0 である必要があり、それ以外の場合はエラーが報告されます。

    3. コンストラクターを使用して配列オブジェクトを作成する場合、new キーワードは省略できます。 例: Array(5) これは問題ありません。

3. 配列内の要素にアクセスして変更しますインデックスを使用して配列内の要素にアクセスします。

配列の長さが 5 の場合、配列のインデックスは 0,1,2,3,4 になります

//创建一个长度为 0 的空数组
var colors = new Array();
//创建一个长度为 5 的数组。每个数组的元素的默认值是 undefined。
var colors = new Array(5);
//创建一个长度为 3 的数组，并且3个元素分别是 "blue" "red" "green"
var colors = new Array("blue", "red", "green");
ログイン後にコピー

4 配列の長さ

4.1 の長さを取得します。 array

各配列には、配列の長さ（つまり要素数）を表す length という属性があります。 

//创建一个长度为 5 的数据
var arr = [10, 20, 60, 5, 7];
alert(arr[0]);  //获取下标为 0 的元素，  即：10
alert(arr[2]);  //获取下标为 2 的元素，  即：60
arr[1] = 100;  //把下标为 1 的元素赋值为100。
ログイン後にコピー

4.2 配列の長さを変更する

一般的に強く型付けされた言語では、配列の長さは固定されています。つまり、配列が正常に作成されると、配列の長さは変更できません。

ただし、JavaScript は型指定が弱い動的言語であり、配列の長さはプログラムの実行中に必要に応じて動的に変更できます。

==配列の長さのプロパティは読み取り専用ではなく、変更できます。 ==

1. 長さの値を設定して、配列の長さを指定された値に直接変更します。 

var arr = [10, 20, 60, 5, 7];
alert(arr.length);  //弹出：5
ログイン後にコピー

2. 最後の要素に値を代入して、要素の長さを動的に変更します。 

var arr = ["a", 8, "bc"]; //数组的长度为 3 
arr.length = 6; // 修改数组的长度为 6 
alert(arr.length);  //数组的长度已经被修改为了 6 ，所以此处输出6.
// 下标为 3， 4， 5 的元素的值为undefined的。
alert(arr[3]);  //弹出：undefined的。

arr.length = 2; // 修改数组的长度为 2 ，则下标为 >= 的元素被自动从数组移除。
ログイン後にコピー

5. 配列の走査 一般に、配列を走査するには 3 つの方法があります:

    for ループ

    • for…それぞれ (ES5 の新機能)

  • 5.1 通常の for ループを使用して配列を走査します

    var arr = [4, 6, 8];
// 给下标为 10 的元素赋值为 100.  由于最初长度为 3 ，这个赋值操作完成后，数组的长度会自动增长为11
arr[10] = 100;
alert(arr.length);  // 弹出：11
// 没有赋值的元素默认都为 undefined
alert(arr[5]); //弹出：undefined

alert(arr[20]); //弹出： undefined
alert(arr.length); // 长度仍然为11.  上一行代码仅仅去访问元素，而没有赋值操作，则不会引起数组长度的变化
    ログイン後にコピー
5.2 for...in ループを使用して配列を走査します

for-in ステートメントは、次の目的で使用できる正確な反復ステートメントです。オブジェクトのプロパティと配列の要素を列挙します。

例: 

var arr = [50, 20, 10, 5, 15, 6];       
for(var i = 0; i < arr.length; i++){    //数组长度多长，就遍历多少次。  循环变量作为数组的下标
  console.log(arr[i]);
}1234
ログイン後にコピー

5.3 for...each を使用して配列を走査します

ES5 では、各配列に新しいメソッド array.forEach(function) が追加され、このメソッドを使用すると、すべての要素を自動的に走査できます。配列内

var arr = [50, 20, 10, 5, 15, 6];
// 每循环一轮，都会把数组的下标赋值给变量index，然后num就拿到了每个元素的下标。 
//注意:这里index是元素的下标,不是与元素
//对数组来说，index从从0开始顺序获取下标
for (var index in arr) {
  console.log(num);  //循环输出： 0 1 2 3 4 5
}
//这里var 关键字也是可以省略的，但是不建议省略。
for(i in arr){
  console.log(arr[i]);
}
ログイン後にコピー

6. 一般的な配列メソッド

6.1 変換メソッド toString() 変換メソッド:

配列内の各値を連結したカンマ区切りの文字列を返します。 

var arr = [50, 20, 10, 5, 15, 6];
//调用数组的forEach方法，传入一个匿名函数
//匿名函数接受两个参数：   参数1--迭代遍历的那个元素  参数2：迭代遍历的那个元素的下标
//可以在匿名函数内部书需要的代码
arr.forEach( function(element, index) {
  alert(element);
});
ログイン後にコピー

join() メソッド:

    • toString() 方法只能使用逗号连接，而 join() 方法可以使用指定的连接符连接

    <script type="text/javascript">
    var arr = [50, 20, 10, 5, 15, 6];
    alert(arr.join("="));   //  50=20=10=5=15=6
</script>
    ログイン後にコピー

    6.2 栈方法

    栈：一种数据结构。特点：FILO (先进后出)

    向栈中存入元素 称之为 入栈(push)、从栈中移除元素称之为出栈(pop)。先入栈的元素在栈地下，后入栈的元素在栈顶。这两个动作都是对栈顶的元素进行操作。一般栈提供这两个操作足矣。

    上級プログラマーによる JavaScript 配列の概要


    JavaScript中，支持像操作栈一样去操作数组。

    <script type="text/javascript">
  var arr = ["张三", "李四", "王五"];
  //向栈中添加元素(最后添加的元素肯定在栈顶)   数组中的元素："张三", "李四", "王五", "志玲"   
  var len = arr.push("志玲");   //push方法返回添加成功后的数组的长度
  alert(len);  // 弹出：4
  arr.push("a", "b");  //也可以向在push方法中传入多个参数，这样每个参数都会添加到数组中。  栈顶元素是  "b"

  //pop出栈，一次只能出栈一个元素
  var item = arr.pop();  //把栈顶的元素从栈(数组)中移除。并返回移除的这个元素
  alert(item); // 弹出：b
</script>
    ログイン後にコピー

    说明：

    • 入栈其实就是把新的元素添加到数组的后面

    • 出栈其实就是把数组中的最后一个元素从数组中移除

    6.2队列方法

    队列也是一种数据结构。 特点：FIFO(先进先出)

    JavaScript中，对数组的操作也提供了模拟队列的方法。

    1. 向队列头部添加元素(unshift)、从队列头部移除元素(shift)

    2. 向队列尾部添加元素、从队列尾部移除元素

    注意：对队列尾部的操作没有提供新的方法，使用push和pop可以完成相应的操作。

    <script type="text/javascript">
  //把arr当做队列对待，那么 队列头部元素就是 "张三", 队尾元素就是 "王五"
  var arr = ["张三", "李四", "王五"];
  var firstItem = arr.shift();  //把队首元素从队列中移除，并返回移除的这个元素
  alert(firstItem); //张三
  alert(arr);  // 李四, 王五
  var len = arr.unshift("志玲");  //向队列头部添加元素，并返回添加成功后队列(数组)的长度
  alert("数组长度：" + len);  // 数组长度：3
  alert(arr);  // 志玲, 李四, 王五
  arr.unshift("a", "b");
  alert(arr);  // a, b, 志玲, 李四, 王五
</script>
    ログイン後にコピー

    6.3 数组中元素的倒置

    <script type="text/javascript">     
    var arr = ["张三", "李四", "王五"];
    alert("数组倒置前：" + arr); 
    //对数组元素进行倒置。
    arr.reverse();  
    alert("数组倒置后：" + arr);  
</script>
    ログイン後にコピー

    注意：

    ==倒置操作是对原数组本身做了操作，返回的也是原数组对象，并不是一个新创建的数组。==

    6.4 查找指定元素在数组中的索引

    indexOf(item): 从前面开始向后查找 item 第一次出现的位置

    lastIndexOf(item): 从尾部开始向前查找 item 第一次出现的位置

    • 如果找不到元素，则返回 -1

    <script type="text/javascript">     
    var arr = ["张三", "张三", "李四", "王五", "张三", "李四", "王五"];
    alert(arr.indexOf("张三"));  // 0
    alert(arr.lastIndexOf("张三"));  // 4
</script>
    ログイン後にコピー

    indexOf(item, fromBack): 从第二个参数的位置开向后始查找 item 第一次出现的位置

    lastIndexOf(item, fromForward): 从第二个参数的位置开始向前查找 item 第一次出现的位置

    <script type="text/javascript">     
    var arr = ["张三", "张三", "李四", "王五", "张三", "李四", "王五"];
    alert(arr.indexOf("张三", 2));  // 4
    alert(arr.lastIndexOf("张三", 3));  // 1
</script>
    ログイン後にコピー

    6.4 获取新的数组

    1. arr.contact(arrayX,arrayX,……,arrayX)

    该方法用于连接两个或多个数组。至少传入一个参数，参数可以是数组也可以是元素。

    ==注意：该方法是返回的一个新的数组，原数组没有做任何改变==

    <script type="text/javascript">     
    var arr1 = ["a", "b", "c"];
    //把参数数组与arr1连接起来，并返回连接后的新数组
    var newArr = arr1.concat(["c", "d"]);
    //新数组的长度是 5
    alert(newArr.length);
    //原数组的长度还是 3  。原数组中的元素没有做任何变化
    alert(arr1.length);

    //把两个元素和一个数组与原数组arr1连接起来，并返回新的数组
    var newArr2 = arr1.concat("e", "f", ["g", "h"]);
    //新数组长度为：7
    alert(newArr2.length);  
</script>
    ログイン後にコピー

    1. arr.slice(start,end) : 截取数组，并返回截取到的新数组

    • start:必须。从原数组中的start位置开始截取==(包括下标为start的元素)==。 如果是负数表示从尾部开始截取： -1表示最后一个元素

    • end: 可选。截取到指定位置==(不包括下标为end的元素)==。如果没指定，则指的是截取到最后一个元素

    • end要大于start，否则截取不到元素

    ==注意：该方法是返回的一个新的数组，原数组没有做任何改变==

    <script type="text/javascript">     
    var arr1 = ["a", "b", "c", "d", "e", "f"];
    // 从下标为0的位置开始截取，截取到下标2，但是不包括下标为2的元素. 原数组没有任何的变化
    var newArr = arr1.slice(0, 2);
    alert(newArr);// a, b
    alert(arr1.slice(1, 4)); // b,c,d
    //从下标为2的元素开始截取，一直到最后一个元素
    alert(arr1.slice(2));  //c,d,e,f
    //从倒数第5个元素，截取到倒数第2个
    alert(arr1.slice(-5, -2)); // b c d
</script>
    ログイン後にコピー

    1. arr.splice(index,howmany,item1,…..,itemX) 方法向/从数组中添加/删除元素，然后==返回被删除的元素组成的数组。==

    • 必需。整数，规定添加/删除元素的位置，使用负数可从数组结尾处规定位置。

    • 必需。要删除的元素数量。如果设置为 0，则不会删除元素。 如果添加元素这里应该是0

    • 可选。向数组添加的新项目。

    ==注意：这个方法会对原数组做出修改。==

    • 删除元素

    <script type="text/javascript">     
    var arr1 = ["a", "b", "c", "d", "e", "f"];
    //因为第2个参数不为0，所以表示删除元素：从小标为1的位置开始删除，共删除2个元素。(2个中包括下标为1的元素)
    var deleted = arr1.splice(1, 2);    //返回值为删除的元素组成的数组
    //原数组
    alert(arr1);  // a,d,e,f
    alert(deleted); // b,c
</script>
    ログイン後にコピー

    • 添加元素

    <script type="text/javascript">     
    var arr1 = ["a", "b", "c", "d", "e", "f"];
    //因为第2参数为0，所以表示添加元素：从下标为1的位置插入元素。其余的元素会自动向后移动
    var v = arr1.splice(1, 0, "m", "n");    // 因为是添加元素，所以返回的数组长度为 0
    alert(v.length);  // 0
    alert(arr1);    // a,m,n,b,c,d,e,f
</script>
    ログイン後にコピー

    七、 数组排序

    JavaScript中，所有的数组对象都提供了一个排序函数。

    arr.sort(sortby) 方法用于对数组的元素进行排序。

    • sortby 可选。规定排序顺序。必须是函数。

    1. 不传入参数的时候，是默认的升序排列。但是做升序排列的时候，是把每个元素转换成string之后，按照编码表中的顺序排序的。

    <script type="text/javascript">     
    var arr1 = ["a", "ab", "fca", "cd", "eb", "f"];
    arr1.sort();    //默认情况按照编码表中的顺序排列
    alert(arr1);    // a, ab, cd, eb, f, fca

    var arr2 = [10, 8, 6, 20, 30, 15];
    arr2.sort();
    console.alert(arr2); // 10,15,20,30,6,8</script>
    ログイン後にコピー

    从上面可以看出来，当数组中的元素是Number的时候，按照编码表排序并不太符合我们的预期，我们更想按照数字的大小排序。这时，我们可以传递一个 “比较函数”。

    <script type="text/javascript">
    /*
        sort方法进行排序的时候，会调用这个函数，来确定谁大谁小，从而来确定他们的位置。
        排序函数的规则：
        1、比较函数必须具有两个参数  num1, num2
        2、若返回值 > 0, 则认为num1 > num2, 排序的时候num1在num2之后
        3、若返回值 == 0,则认为num1== num2，排序的时候两个数的顺序就保持不变
        4、若返回值 < 0, 则认为num < num2,  排序的时候num1在num2之前。

        总结：
        1、若num1 > num2 返回 正数， num1 < num2 返回 负数，则是升序
        2、若num1 > num2 返回 负数， num1 < num2 返回 正数，则是降序
    */
    function sortNumber (num1, num2) {
        //升序
        if(num1 > num2){
            return 1;
        }else if(num1 == num2){
            return 0;
        }else {
            return -1;
        }
    }
    var arr2 = [10, 8, 6, 20, 30, 15];
    arr2.sort(sortNumber);
    console.log(arr2.toString());
</script>
    ログイン後にコピー

    • 纯数字的数组，还有一种更简洁的排序函数。

    //升序函数
function sortAsc(num1, num2){
    return num1 - num2;   //num1 > num2 就返回正数
}
// 降序函数
function sortDesc(num1, num2){
    return num2 - num1; //num1 > num2 就返回负数
}
    ログイン後にコピー

    八、 数组检测

    如何检测一个对象是不是一个Array。

    1. 使用instanceof运算符。

    2. 使用Array.isArray(arr) 方法。

    8.1 instanceof运算符

    JavaScript中instanceof运算符会返回一个 Boolean 值，指出对象是否是特定构造函数的一个实例。

    var arr = [];
alert(arr instanceof Array); //true12
    ログイン後にコピー

    8.2 Array.isArray(arr) 方法

    Array.isArray(arr) , 如果arr是数组，则返回true，否则返回false

    var arr = [];
alert(Array.isArray(arr));  //true
alert(Array.isArray("abc"));    // false
    ログイン後にコピー

    九、 二维数组

    如果数组中的元素存储的是数组，则就构成了二维数组。

    //数组中的每个元素都是数组，则就是一个二维数组
var towDimArr = [
                  [4, 5], 
                  [7, 8],
                  [50, 9, 10],
                  [5]
                ];
alert(towDimArr.length); //数组的长度为 4

//使用嵌套循环来遍历二维数组。
for (var i = 0; i < towDimArr.length; i++) {
    for (var j = 0; j < towDimArr[i].length; j++) {
      alert(towDimArr[i][j]);
    }
}
    ログイン後にコピー

    详细的讲述了JavaScript中数组，大家可以详细的阅读一下哦！

    相关推荐：

    JavaScript数组进化与性能分析实例

    以上が上級プログラマーによる JavaScript 配列の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
javascript js プログラマー
ソース：php.cn
前の記事：Vue で this.$router.push パラメータを取得する方法 次の記事：js オブジェクトを作成するさまざまな方法が詳細に説明されています
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 2024-04-06 19:25:49
0
1
505
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート