1635614160
JavaScriptの配列を理解する
JavaScriptの配列は、データを格納するために使用されるグローバルオブジェクトの一種です。配列は、0個以上のデータ型を含む順序付けられたコレクションまたはリストで構成され、0特定のアイテムにアクセスするためにから始まる番号付きのインデックスを使用します。
配列は、複数の値を1つの変数に格納するため、非常に便利です。これにより、コードを凝縮して整理し、コードを読みやすく、保守しやすくすることができます。配列には、数値、文字列、オブジェクトなど、任意のデータ型を含めることができます。
配列がどのように役立つかを示すために、世界の5つの海を独自の変数に割り当てることを検討してください。
// Assign the five oceans to five variables
const ocean1 = 'Pacific'
const ocean2 = 'Atlantic'
const ocean3 = 'Indian'
const ocean4 = 'Arctic'
const ocean5 = 'Antarctic'この方法は非常に冗長であり、保守と追跡がすぐに困難になる可能性があります。配列を使用すると、データを単純化できます。
// Assign the five oceans
let oceans = ['Pacific', 'Atlantic', 'Indian', 'Arctic', 'Antarctic']5つの個別の変数を作成する代わりに、5つの要素すべてを含む1つの変数ができました。角かっこ（[]）を使用して配列を作成しました。
特定のアイテムへのアクセスは、変数にインデックスを追加するのと同じくらい簡単です。
// Print out the first item of the oceans array
oceans[0]Pacificこの記事では、配列を作成する方法、配列にインデックスを付ける方法、配列内のアイテムを追加、変更、削除、またはアクセスする方法、および配列をループする方法について学習します。
配列の作成
JavaScriptで配列を作成する方法は2つあります。角括弧を使用する配列リテラルと、newキーワードを使用する配列コンストラクター。
で初期化される配列コンストラクターを使用して、サメ種の配列を作成する方法を示しましょうnew Array()。
// Initialize array of shark species with array constructor
let sharks = new Array('Hammerhead', 'Great White', 'Tiger')これは、で初期化された配列リテラルで作成された同じデータです[]。
// Initialize array of shark species with array literal
let sharks = ['Hammerhead', 'Great White', 'Tiger']どちらの方法でも配列が作成されます。ただし、new Array()コンストラクターメソッドには不整合や予期しない結果が生じる可能性があるため、配列リテラル（角括弧）メソッドの方がはるかに一般的であり、推奨されます。後で遭遇した場合に備えて、配列コンストラクターに注意しておくと便利です。
配列全体を出力できます。これは、入力と同じように表示されます。
// Print out the entire sharks array
sharks;['Hammerhead', 'Great White', 'Tiger']配列は、類似したデータ型のリストをグループ化するためによく使用されますが、技術的には、他の配列を含め、任意の値または値の組み合わせを含めることができます。
// Initialize array of mixed datatypes
let mixedData = ['String', null, 7, ['another', 'array']]配列を作成した後、さまざまな方法でそれらを操作できますが、最初に配列のインデックス付け方法を理解する必要があります。
注：最後のコンマの有無にかかわらず、配列の最後の項目が表示される場合があります。これは、末尾のコンマとして知られています。それらが省略されているのはよくあることですが、バージョン管理の差分がより明確になり、エラーなしでアイテムを簡単に追加および削除できるため、一般的にはコードに含めることが推奨されます。JSONファイルでは末尾のコンマは使用できないことに注意してください。
配列のインデックス付け
JavaScriptで文字列のインデックス作成と操作について学習した場合、文字列は配列に似ているため、配列のインデックス作成の概念についてはすでにご存知かもしれません。
配列には名前と値のペアがありません。代わりに、0。で始まる整数値でインデックスが付けられます。に割り当てられた配列の例を次に示しseaCreaturesます。
let seaCreatures = ['octopus', 'squid', 'shark', 'sea horse', 'starfish']seaCreatures配列内の各アイテムにインデックスを付ける方法の内訳は次のとおりです。
| たこ | イカ | 鮫 | タツノオトシゴ | ヒトデ |
|---|---|---|---|---|
| 0 | 1 | 2 | 3 | 4 |
配列の最初の項目はoctopus、で、インデックスは0。です。最後の項目はstarfish、でインデックス付けされている4です。カウントは0インデックスで始まります。これは、1からカウントを開始するという私たちの自然な直感に反するため、自然になるまでこれを覚えておく必要があります。
lengthプロパティを使用して、配列に含まれるアイテムの数を確認できます。
seaCreatures.length5のインデックスはtoでseaCreatures構成されますが、プロパティは1から始まる配列内のアイテムの実際の量を出力します。04length
など、配列内の特定のアイテムのインデックス番号を知りたい場合は、このメソッドsea horseを使用できますindexOf()。
seaCreatures.indexOf('sea horse')3存在しない値など、インデックス番号が見つからない場合、コンソールはを返し-1ます。
配列内のアイテムへのアクセス
JavaScript配列内のアイテムは、角括弧内のアイテムのインデックス番号を参照することによってアクセスされます。
seaCreatures[1]squid0常に配列の最初の項目を出力することがわかっています。lengthプロパティに対して操作を実行し、それを新しいインデックス番号として適用することで、配列の最後の項目を見つけることもできます。
const lastIndex = seaCreatures.length - 1
seaCreatures[lastIndex]starfish存在しないアイテムにアクセスしようとすると、が返されundefinedます。
seaCreatures[10]undefinedネストされた配列内のアイテムにアクセスするには、内部配列に対応する別のインデックス番号を追加します。
let nestedArray = [
['salmon', 'halibut'],
['coral', 'reef'],
]
nestedArray[1][0]coral上記の例では1、nestedArray変数の位置にある配列にアクセスしてから0、内部配列の位置にあるアイテムにアクセスしました。
配列へのアイテムの追加
当社ではseaCreatures、変数我々はから指標で構成さ5つの項目、持っていた0のを4。配列に新しいアイテムを追加する場合は、次のインデックスに値を割り当てることができます。
seaCreatures[5] = 'whale'
seaCreatures[ 'octopus', 'squid', 'shark', 'sea horse', 'starfish', 'whale' ]アイテムを追加して誤ってインデックスをスキップすると、配列に未定義のアイテムが作成されます。
seaCreatures[7] = 'pufferfish'
seaCreatures[ 'octopus', 'squid', 'shark', 'sea horse', 'starfish', , 'whale', 'pufferfish' ]追加の配列アイテムにアクセスしようとすると、が返されundefinedます。
seaCreatures[6]undefinedこのような問題push()は、配列の最後に項目を追加するメソッドを使用することで回避できます。
// Append lobster to the end of the seaCreatures array
seaCreatures.push('lobster')
seaCreatures[ 'octopus', 'squid', 'shark', 'sea horse', 'starfish', , 'whale', 'pufferfish', 'lobster' ]スペクトルのもう一方の端では、unshift()メソッドは配列の先頭に項目を追加します。
// Append otter to the beginning of the seaCreatures array
seaCreatures.unshift('otter')
seaCreatures[ 'otter', 'octopus', 'squid', 'shark', 'sea horse', 'starfish', , 'whale', 'pufferfish', 'lobster' ]との間push()でunshift()は、配列の最初と最後にアイテムを追加できます。
配列からのアイテムの削除
配列から特定のアイテムを削除する場合は、このsplice()メソッドを使用します。ではseaCreatures、配列、我々は偶然ので、今のremoveを聞かせ、未定義の配列項目以前に作成しました。
seaCreatures.splice(6, 1)
seaCreatures[ 'otter', 'octopus', 'squid', 'shark', 'sea horse', 'starfish', 'whale', 'pufferfish', 'lobster' ]このsplice()メソッドでは、最初のパラメーターは削除するインデックス番号を表し、2番目のパラメーターは削除するアイテムの数です。を入れて1、1つのアイテムだけが削除されることを意味します。
このsplice()メソッドは元の変数を変更します。元の変数を変更しないでおく場合slice()は、結果を使用して新しい変数に割り当てます。
let newArray = slice(6, 1)このpop()メソッドは、配列の最後の項目を削除します。
// Remove the last item from the seaCreatures array
seaCreatures.pop()
seaCreatures[ 'otter', 'octopus', 'squid', 'shark', 'sea horse', 'starfish', 'whale', 'pufferfish' ]lobster配列の最後の項目として削除されました。配列の最初の項目を削除するために、shift()メソッドを使用します。
// Remove the first item from the seaCreatures array
seaCreatures.shift()
seaCreatures[ 'octopus', 'squid', 'shark', 'sea horse', 'starfish', 'whale', 'pufferfish' ]とを使用pop()してshift()、配列の最初と最後からアイテムを削除できます。pop()配列内の残りの項目は同じインデックス番号を保持するため、可能な限り使用することをお勧めします。
配列内のアイテムの変更
通常の変数の場合と同じように、代入演算子を使用して新しい値を割り当てることにより、配列内の任意の値を上書きできます。
// Assign manatee to the first item in the seaCreatures array
seaCreatures[0] = 'manatee'
seaCreatures[ 'manatee', 'squid', 'shark', 'sea horse', 'starfish', 'whale', 'pufferfish' ]値を変更する別のsplice()方法は、新しいパラメーターを使用してメソッドを使用することです。sea horseインデックスのアイテムであるの値を変更したい場合は3、それを削除して、その場所に新しいアイテムを追加できます。
// Replace sea horse with sea lion using splice method
seaCreatures.splice(3, 1, 'sea lion')
seaCreatures()[ 'manatee', 'squid', 'shark', 'sea lion', 'starfish', 'whale', 'pufferfish' ]上記の例ではsea horse、配列から削除し、新しい値をインデックスにプッシュしました3。
配列をループする
プロパティforを利用して、キーワードを使用して配列全体をループできますlength。この例では、shellfish各インデックス番号と各値の配列を作成してコンソールに出力できます。
// Create an array of shellfish species
let shellfish = ['oyster', 'shrimp', 'clam', 'mussel']
// Loop through the length of the array
for (let i = 0; i < shellfish.length; i++) {
console.log(i, shellfish[i])
}0 'oyster' 1 'shrimp' 2 'clam' 3 'mussel'for...ofJavaScriptの新機能であるループを使用することもできます。
// Create an array of aquatic mammals
let mammals = ['dolphin', 'whale', 'otter']
// Loop through each mammal
for (let mammal of mammals) {
console.log(mammal)
}dolphin whale otterfor...ofループは、配列の要素のインデックス番号を取得しませんが、それは一般的に、配列をループする、よりシンプルで簡潔な方法です。ループの使用は、Webサイトのデータベースからアイテムを表示する場合など、配列の値全体を出力する場合に非常に役立ちます。
結論
配列は、JavaScriptでのプログラミングの非常に用途が広く基本的な部分です。この記事では、配列の作成方法、配列のインデックス作成方法、およびアイテムの作成、削除、変更など、配列での作業で最も一般的なタスクのいくつかについて学習しました。また、データを表示するための一般的な方法として使用される、配列をループする2つの方法を学びました。
リンク: https://www.taniarascia.com/understanding-arrays-in-javascript/
What is GEEK
Buddha Community
1635614160
JavaScriptの配列を理解する
JavaScriptの配列は、データを格納するために使用されるグローバルオブジェクトの一種です。配列は、0個以上のデータ型を含む順序付けられたコレクションまたはリストで構成され、0特定のアイテムにアクセスするためにから始まる番号付きのインデックスを使用します。
配列は、複数の値を1つの変数に格納するため、非常に便利です。これにより、コードを凝縮して整理し、コードを読みやすく、保守しやすくすることができます。配列には、数値、文字列、オブジェクトなど、任意のデータ型を含めることができます。
配列がどのように役立つかを示すために、世界の5つの海を独自の変数に割り当てることを検討してください。
// Assign the five oceans to five variables
const ocean1 = 'Pacific'
const ocean2 = 'Atlantic'
const ocean3 = 'Indian'
const ocean4 = 'Arctic'
const ocean5 = 'Antarctic'この方法は非常に冗長であり、保守と追跡がすぐに困難になる可能性があります。配列を使用すると、データを単純化できます。
// Assign the five oceans
let oceans = ['Pacific', 'Atlantic', 'Indian', 'Arctic', 'Antarctic']5つの個別の変数を作成する代わりに、5つの要素すべてを含む1つの変数ができました。角かっこ（[]）を使用して配列を作成しました。
特定のアイテムへのアクセスは、変数にインデックスを追加するのと同じくらい簡単です。
// Print out the first item of the oceans array
oceans[0]Pacificこの記事では、配列を作成する方法、配列にインデックスを付ける方法、配列内のアイテムを追加、変更、削除、またはアクセスする方法、および配列をループする方法について学習します。
配列の作成
JavaScriptで配列を作成する方法は2つあります。角括弧を使用する配列リテラルと、newキーワードを使用する配列コンストラクター。
で初期化される配列コンストラクターを使用して、サメ種の配列を作成する方法を示しましょうnew Array()。
// Initialize array of shark species with array constructor
let sharks = new Array('Hammerhead', 'Great White', 'Tiger')これは、で初期化された配列リテラルで作成された同じデータです[]。
// Initialize array of shark species with array literal
let sharks = ['Hammerhead', 'Great White', 'Tiger']どちらの方法でも配列が作成されます。ただし、new Array()コンストラクターメソッドには不整合や予期しない結果が生じる可能性があるため、配列リテラル（角括弧）メソッドの方がはるかに一般的であり、推奨されます。後で遭遇した場合に備えて、配列コンストラクターに注意しておくと便利です。
配列全体を出力できます。これは、入力と同じように表示されます。
// Print out the entire sharks array
sharks;['Hammerhead', 'Great White', 'Tiger']配列は、類似したデータ型のリストをグループ化するためによく使用されますが、技術的には、他の配列を含め、任意の値または値の組み合わせを含めることができます。
// Initialize array of mixed datatypes
let mixedData = ['String', null, 7, ['another', 'array']]配列を作成した後、さまざまな方法でそれらを操作できますが、最初に配列のインデックス付け方法を理解する必要があります。
注：最後のコンマの有無にかかわらず、配列の最後の項目が表示される場合があります。これは、末尾のコンマとして知られています。それらが省略されているのはよくあることですが、バージョン管理の差分がより明確になり、エラーなしでアイテムを簡単に追加および削除できるため、一般的にはコードに含めることが推奨されます。JSONファイルでは末尾のコンマは使用できないことに注意してください。
配列のインデックス付け
JavaScriptで文字列のインデックス作成と操作について学習した場合、文字列は配列に似ているため、配列のインデックス作成の概念についてはすでにご存知かもしれません。
配列には名前と値のペアがありません。代わりに、0。で始まる整数値でインデックスが付けられます。に割り当てられた配列の例を次に示しseaCreaturesます。
let seaCreatures = ['octopus', 'squid', 'shark', 'sea horse', 'starfish']seaCreatures配列内の各アイテムにインデックスを付ける方法の内訳は次のとおりです。
| たこ | イカ | 鮫 | タツノオトシゴ | ヒトデ |
|---|---|---|---|---|
| 0 | 1 | 2 | 3 | 4 |
配列の最初の項目はoctopus、で、インデックスは0。です。最後の項目はstarfish、でインデックス付けされている4です。カウントは0インデックスで始まります。これは、1からカウントを開始するという私たちの自然な直感に反するため、自然になるまでこれを覚えておく必要があります。
lengthプロパティを使用して、配列に含まれるアイテムの数を確認できます。
seaCreatures.length5のインデックスはtoでseaCreatures構成されますが、プロパティは1から始まる配列内のアイテムの実際の量を出力します。04length
など、配列内の特定のアイテムのインデックス番号を知りたい場合は、このメソッドsea horseを使用できますindexOf()。
seaCreatures.indexOf('sea horse')3存在しない値など、インデックス番号が見つからない場合、コンソールはを返し-1ます。
配列内のアイテムへのアクセス
JavaScript配列内のアイテムは、角括弧内のアイテムのインデックス番号を参照することによってアクセスされます。
seaCreatures[1]squid0常に配列の最初の項目を出力することがわかっています。lengthプロパティに対して操作を実行し、それを新しいインデックス番号として適用することで、配列の最後の項目を見つけることもできます。
const lastIndex = seaCreatures.length - 1
seaCreatures[lastIndex]starfish存在しないアイテムにアクセスしようとすると、が返されundefinedます。
seaCreatures[10]undefinedネストされた配列内のアイテムにアクセスするには、内部配列に対応する別のインデックス番号を追加します。
let nestedArray = [
['salmon', 'halibut'],
['coral', 'reef'],
]
nestedArray[1][0]coral上記の例では1、nestedArray変数の位置にある配列にアクセスしてから0、内部配列の位置にあるアイテムにアクセスしました。
配列へのアイテムの追加
当社ではseaCreatures、変数我々はから指標で構成さ5つの項目、持っていた0のを4。配列に新しいアイテムを追加する場合は、次のインデックスに値を割り当てることができます。
seaCreatures[5] = 'whale'
seaCreatures[ 'octopus', 'squid', 'shark', 'sea horse', 'starfish', 'whale' ]アイテムを追加して誤ってインデックスをスキップすると、配列に未定義のアイテムが作成されます。
seaCreatures[7] = 'pufferfish'
seaCreatures[ 'octopus', 'squid', 'shark', 'sea horse', 'starfish', , 'whale', 'pufferfish' ]追加の配列アイテムにアクセスしようとすると、が返されundefinedます。
seaCreatures[6]undefinedこのような問題push()は、配列の最後に項目を追加するメソッドを使用することで回避できます。
// Append lobster to the end of the seaCreatures array
seaCreatures.push('lobster')
seaCreatures[ 'octopus', 'squid', 'shark', 'sea horse', 'starfish', , 'whale', 'pufferfish', 'lobster' ]スペクトルのもう一方の端では、unshift()メソッドは配列の先頭に項目を追加します。
// Append otter to the beginning of the seaCreatures array
seaCreatures.unshift('otter')
seaCreatures[ 'otter', 'octopus', 'squid', 'shark', 'sea horse', 'starfish', , 'whale', 'pufferfish', 'lobster' ]との間push()でunshift()は、配列の最初と最後にアイテムを追加できます。
配列からのアイテムの削除
配列から特定のアイテムを削除する場合は、このsplice()メソッドを使用します。ではseaCreatures、配列、我々は偶然ので、今のremoveを聞かせ、未定義の配列項目以前に作成しました。
seaCreatures.splice(6, 1)
seaCreatures[ 'otter', 'octopus', 'squid', 'shark', 'sea horse', 'starfish', 'whale', 'pufferfish', 'lobster' ]このsplice()メソッドでは、最初のパラメーターは削除するインデックス番号を表し、2番目のパラメーターは削除するアイテムの数です。を入れて1、1つのアイテムだけが削除されることを意味します。
このsplice()メソッドは元の変数を変更します。元の変数を変更しないでおく場合slice()は、結果を使用して新しい変数に割り当てます。
let newArray = slice(6, 1)このpop()メソッドは、配列の最後の項目を削除します。
// Remove the last item from the seaCreatures array
seaCreatures.pop()
seaCreatures[ 'otter', 'octopus', 'squid', 'shark', 'sea horse', 'starfish', 'whale', 'pufferfish' ]lobster配列の最後の項目として削除されました。配列の最初の項目を削除するために、shift()メソッドを使用します。
// Remove the first item from the seaCreatures array
seaCreatures.shift()
seaCreatures[ 'octopus', 'squid', 'shark', 'sea horse', 'starfish', 'whale', 'pufferfish' ]とを使用pop()してshift()、配列の最初と最後からアイテムを削除できます。pop()配列内の残りの項目は同じインデックス番号を保持するため、可能な限り使用することをお勧めします。
配列内のアイテムの変更
通常の変数の場合と同じように、代入演算子を使用して新しい値を割り当てることにより、配列内の任意の値を上書きできます。
// Assign manatee to the first item in the seaCreatures array
seaCreatures[0] = 'manatee'
seaCreatures[ 'manatee', 'squid', 'shark', 'sea horse', 'starfish', 'whale', 'pufferfish' ]値を変更する別のsplice()方法は、新しいパラメーターを使用してメソッドを使用することです。sea horseインデックスのアイテムであるの値を変更したい場合は3、それを削除して、その場所に新しいアイテムを追加できます。
// Replace sea horse with sea lion using splice method
seaCreatures.splice(3, 1, 'sea lion')
seaCreatures()[ 'manatee', 'squid', 'shark', 'sea lion', 'starfish', 'whale', 'pufferfish' ]上記の例ではsea horse、配列から削除し、新しい値をインデックスにプッシュしました3。
配列をループする
プロパティforを利用して、キーワードを使用して配列全体をループできますlength。この例では、shellfish各インデックス番号と各値の配列を作成してコンソールに出力できます。
// Create an array of shellfish species
let shellfish = ['oyster', 'shrimp', 'clam', 'mussel']
// Loop through the length of the array
for (let i = 0; i < shellfish.length; i++) {
console.log(i, shellfish[i])
}0 'oyster' 1 'shrimp' 2 'clam' 3 'mussel'for...ofJavaScriptの新機能であるループを使用することもできます。
// Create an array of aquatic mammals
let mammals = ['dolphin', 'whale', 'otter']
// Loop through each mammal
for (let mammal of mammals) {
console.log(mammal)
}dolphin whale otterfor...ofループは、配列の要素のインデックス番号を取得しませんが、それは一般的に、配列をループする、よりシンプルで簡潔な方法です。ループの使用は、Webサイトのデータベースからアイテムを表示する場合など、配列の値全体を出力する場合に非常に役立ちます。
結論
配列は、JavaScriptでのプログラミングの非常に用途が広く基本的な部分です。この記事では、配列の作成方法、配列のインデックス作成方法、およびアイテムの作成、削除、変更など、配列での作業で最も一般的なタスクのいくつかについて学習しました。また、データを表示するための一般的な方法として使用される、配列をループする2つの方法を学びました。
リンク: https://www.taniarascia.com/understanding-arrays-in-javascript/