JavaScriptアレイ：作成と操作方法

詳細で理解しやすいJavaScriptアレイ：作成と操作の詳細な説明

コアポイント

• javaScriptアレイにはlength属性があり、操作でき、0〜4294967294（包括的）の名前範囲の番号付き属性があります。 JavaScriptは連想配列をサポートしていません。
• JavaScriptアレイはさまざまな方法で作成されており、配列リテラルを使用して新しい配列を作成することをお勧めします。アレイは集中的である可能性があります（長さは番号付き属性の数に等しくなります）またはスパース（番号付き属性の数より大きい長さ）。
• JavaScriptアレイの長さを変更できます。新しい長さが現在の長さよりも少ないと設定されている場合、新しい長さよりも大きく配置されている配列内の任意の数の属性が削除されます。
• JavaScriptは、アレイにエントリを追加、削除、交換する方法を提供します。エントリを追加する方法は、push、unshift、およびspliceを削除する方法が含まれます。 pop shift spliceJavaScriptアレイを操作する方法を学びます。アレイの作成プロセス、配列の長さの変化、エントリの追加、削除、交換をカバーします。オブジェクトの
属性は、JavaScriptの多くの初心者が理解していないプロパティです。多くの人々は、

が配列にいくつのエントリがあるかを正確に伝えることを誤って信じており、これは一部の配列にのみ当てはまります。一部の初心者は、

がアレイの書き込み可能なプロパティであることさえ認識していません。 Array属性がどのように機能するかを明確にするために、自分自身の価値を変更したときに何が起こるかを見てみましょう。ゼロから始めましょう。 JavaScriptアレイには、lengthという名前の属性があり、オプションで、名前が0〜4294967294（包括的）の数字の属性を与えることができます。また、プロパティを操作するためのいくつかの方法もあります。その一部は、lengthプロパティがどのように機能するかを調べるときに検討します。 JavaScriptは連想配列をサポートしていないため、名前付きプロパティを配列に追加できますが、配列の一部を形成せず、すべての配列メソッドでは無視されます。また、長さにも影響しません。さまざまなステートメントを使用するときに配列プロパティに何が起こるかを簡単に表示できるようにするために、各コードの後に​​次の関数を実行します。これにより、アレイの長さとすべての番号付きプロパティがブラウザのコンソールに記録されます。 length length lengthlengthこの記事は、クリス・ペリーとマルチェロ・ラ・ロッカによってレビューされました。 SetePointのコンテンツを完璧にするために、SetePointのすべてのピアレビューアに感謝します！

javaScript

<code class="language-javascript">var test = function(array) {
  console.log('length:'+ array.length);
  array.forEach(function(element, index, array) {
    console.log(index + ':' + element);
  });
};</code>

に配列を作成します

まず、JavaScriptに配列を作成するさまざまな方法を検討します。最初の2つの例で作成された配列は、長さのみに設定されており、番号付きエントリはまったくありません。最後の2つの例では、0からマイナス長のエントリを作成します。番号付き属性よりも大きい長さのアレイはスパースアレイと呼ばれ、番号付き属性に等しい長さのアレイは密な配列と呼ばれます。

<code class="language-javascript">var test = function(array) {
  console.log('length:'+ array.length);
  array.forEach(function(element, index, array) {
    console.log(index + ':' + element);
  });
};</code>

新しい配列を作成する場合、配列リテラル表記が望ましいことに注意してください（空のブラケットで新しい配列を定義します）。

<code class="language-javascript">// 创建一个没有编号条目的数组

var arr = new Array(5);
test(arr);
// length: 5

var arr = [];
arr.length = 5;
test(arr);
// length: 5</code>

番号付き属性（この場合は

）を処理するアレイメソッドは、既存の属性のみを処理します。代わりにforEachまたはforでループする場合、ループは存在しないプロパティを処理しようとし、アレイは存在しないエントリをwhileとして識別します。コードは、上記の最後の例を最初の2つの例と区別することができません。密な配列で作業しているかどうかわからない場合は、常に配列メソッドを使用して配列を処理する必要があります。 undefined

JavaScriptアレイの長さを変更します

次の例では、現在の長さよりも小さいアレイに新しい長さを設定した場合に何が起こるかを確認します。

<code class="language-javascript">var arr = ['a', 'b', 'c', 'd', 'e'];
test(arr);
// length:5, 0:a, 1:b, 2:c, 3:d, 4:e

var arr = [undefined, undefined, undefined, undefined, undefined];
test(arr);
// length:5, 0:undefined, 1:undefined, 2:undefined, 3:undefined, 4:undefined</code>

表記を使用して配列を作成する場合、各エントリは値とコンマが続くことで構成されていることに注意してください。値が省略されている場合、その場所の属性は作成されません。最後のコンマは、このプロパティに値が提供されている場合にのみ省略できます。そうしないと、長さは1つずつ削減されます。 [] JavaScriptアレイからエントリを削除

javaScriptは、3つの方法pop、shift、およびspliceを提供して、アレイからエントリを削除し、それによりアレイの長さを削減します。いずれの場合も、削除された値（または値）はコールによって返されます。

<code class="language-javascript">var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
test(arr);
// length:6, 0:a, 1:b, 2:c, 3:d, 4:e, 5:f

arr.length = 5;
test(arr);
// length:5, 0:a, 1:b, 2:c, 3:d, 4:e

var arr = ['a','b','c','d','e','f',,,];
test(arr);
// length:8, 0:a, 1:b, 2:c, 3:d, 4:e, 5:f

arr.length = 7;
test(arr);
// length:7, 0:a, 1:b, 2:c, 3:d, 4:e, 5:f</code>

配列にエントリを追加する方法

番号付き属性がまだ存在しない場所を指定するだけで、アレイに新しいエントリを追加できます。また、JavaScript（push、unshift、およびspliceが提供する3つの方法のいずれかを使用して、新しいエントリを挿入し、必要に応じて古いエントリを移動することもできます。

<code class="language-javascript">// pop() 从数组中移除最后一个元素
var arr = ['a','b','c','d','e','f'];
var el = arr.pop();
test(arr); // length:5, 0:a, 1:b, 2:c, 3:d, 4:e
console.log(el); // f

// shift() 从数组中移除第一个元素
var arr = ['a','b','c','d','e','f'];
var el = arr.shift();
test(arr); // length:5, 0:b, 1:c, 2:d, 3:e, 4:f
console.log(el); // a

// splice() 可以移除现有元素
var arr1 = ['a','b','c','d','e','f'];
var arr2 = arr1.splice(0,2); // 从索引0开始移除2个元素
test(arr1); // length:4, 0:c, 1:d, 2:e, 3:f
test(arr2); // length:2, 0:a, 1:b

var arr1 = ['a','b','c','d','e','f',,,'i'];
var arr2 = arr1.splice(6,2); // 从索引6开始移除2个元素
test(arr1); // length:7, 0:a, 1:b, 2:c, 3:d, 4:e, 5:f, 6:i
test(arr2); // length:2</code>

JavaScript Arrayのエントリを交換します

既存のエントリに新しい値を割り当てると、エントリは新しい値を取得するだけで、残りの配列は影響を受けません。同様に、調査したsplice()メソッドのバリエーションを組み合わせることで、既存のエントリを交換したり、アレイのブランクを埋めたりすることができます。

<code class="language-javascript">var arr = ['a','b','c','d','e','f',,,'i'];
arr[11] = 'l';
test(arr);
// length:12, 0:a, 1:b, 2:c, 3:d, 5:f, 8:i, 11:l

// push() 将一个或多个元素添加到数组的末尾
var arr = ['a','b','c','d','e','f',,,,];
arr.push('j');
test(arr);
// length:10, 0:a, 1:b, 2:c, 3:d, 5:f, 9:j

// unshift() 将一个或多个元素添加到数组的开头
var arr = ['a','b','c','d','e','f',,,,];
arr.unshift('x');
test(arr);
// length:10, 0:x, 1:a, 2:b, 3:c, 4:d, 5:e, 6:f

arr1 = ['a','b','c','d','e','f',,,'i'];
arr2 = arr1.splice(6,0,'g','h'); // 从索引6移除0个元素，并插入'g'、'h'
test(arr1); // length:11, 0:a, 1:b, 2:c, 3:d, 5:f, 6:g, 7:h, 10:i
test(arr2); // length:0</code>

結論

上記の例は、配列の動作のlengthプロパティをよりよく理解する必要があります。これは、配列内のエントリの数以上にすることができます。等しい場合、密な配列があります。特定の配列メソッドの正確な役割は、特定の位置に対応するスパースアレイにプロパティがあるかどうかによって異なります。配列の長さを変更すると、位置が新しい長さよりも大きい配列内の任意の数字の属性が削除されます。長さが番号付き属性の数に等しく、長さを増やす場合、密な配列をスパースアレイに変換します。アレイ内に属性を削除および追加する配列メソッドは、必要に応じて既存のエントリを移動し、属性間のギャップを保存および移動します。

JavaScriptアレイFAQ（FAQ）

JavaScriptの配列に要素を追加する方法は？

javascriptでは、push()メソッドを使用してアレイに要素を追加できます。この方法は、新しいアイテムを配列の端に追加し、新しい長さを返します。例は次のとおりです。

<code class="language-javascript">var test = function(array) {
  console.log('length:'+ array.length);
  array.forEach(function(element, index, array) {
    console.log(index + ':' + element);
  });
};</code>

JavaScriptアレイから要素を削除する方法は？

javascriptは、配列から要素を削除するいくつかの方法を提供します。 pop()メソッドは、アレイから最後の要素を削除し、要素を返します。 shift()メソッドは、アレイから最初の要素を削除し、要素を返します。これらの方法の使用方法は次のとおりです

<code class="language-javascript">// 创建一个没有编号条目的数组

var arr = new Array(5);
test(arr);
// length: 5

var arr = [];
arr.length = 5;
test(arr);
// length: 5</code>

（後続のFAQコンテンツは元のテキストと一致しており、複製を避けるためにここで省略されています）

以上がJavaScriptアレイ：作成と操作方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。