ES6-アレイ
変数を使用して値を格納すると、次の制限が発生します-
変数は本質的にスカラーです。つまり、変数宣言には一度に1つしか含めることができません。これは、プログラムにn個の値を格納するには、n個の変数宣言が必要になることを意味します。したがって、より多くの値のコレクションを格納する必要がある場合、変数の使用は実行できません。
プログラム内の変数にはランダムな順序でメモリが割り当てられるため、宣言された順序で値を取得/読み取ることが困難になります。
JavaScriptは、同じことに取り組むために配列の概念を導入しています。
配列は、値の同種のコレクションです。簡単にするために、配列は同じデータ型の値のコレクションです。これはユーザー定義型です。
アレイの機能
配列宣言は、シーケンシャルメモリブロックを割り当てます。
配列は静的です。これは、一度初期化された配列のサイズを変更できないことを意味します。
各メモリブロックは配列要素を表します。
配列要素は、要素の添え字/インデックスと呼ばれる一意の整数によって識別されます。
配列も、変数と同様に、使用する前に宣言する必要があります。
配列の初期化とは、配列要素にデータを入力することです。
配列要素の値は更新または変更できますが、削除することはできません。
配列の宣言と初期化
JavaScriptで配列を宣言して初期化するには、次の構文を使用します-
var array_name; //declaration
array_name = [val1,val2,valn..] //initialization
OR
var array_name = [val1,val2…valn]Note − []のペアは、配列の次元と呼ばれます。
たとえば、次のような宣言： var numlist = [2,4,6,8] 次の図に示すように配列を作成します。
配列要素へのアクセス
配列名とそれに続く添え字は、配列要素を参照するために使用されます。
以下はその構文です。
array_name[subscript]例：単純な配列
var alphas;
alphas = ["1","2","3","4"]
console.log(alphas[0]);
console.log(alphas[1]);上記のコードが正常に実行されると、次の出力が表示されます。
1
2例：単一ステートメントの宣言と初期化
var nums = [1,2,3,3]
console.log(nums[0]);
console.log(nums[1]);
console.log(nums[2]);
console.log(nums[3]);上記のコードが正常に実行されると、次の出力が表示されます。
1
2
3
3配列オブジェクト
配列は、Arrayオブジェクトを使用して作成することもできます。配列コンストラクターは次のように渡すことができます-
配列またはのサイズを表す数値。
カンマ区切り値のリスト。
次の例では、このメソッドを使用して配列を作成します。
例
var arr_names = new Array(4)
for(var i = 0;i<arr_names.length;i++) {
arr_names[i] = i * 2
console.log(arr_names[i])
}上記のコードが正常に実行されると、次の出力が表示されます。
0
2
4
6例：配列コンストラクターはコンマ区切り値を受け入れます
var names = new Array("Mary","Tom","Jack","Jill")
for(var i = 0;i<names.length;i++) {
console.log(names[i])
}上記のコードが正常に実行されると、次の出力が表示されます。
Mary
Tom
Jack
Jill配列メソッド
以下は、Arrayオブジェクトのメソッドとその説明のリストです。
| シニア番号 | 方法と説明 |
|---|---|
| 1 | concat（） 他の配列や値と結合されたこの配列で構成される新しい配列を返します |
| 2 | every（） この配列のすべての要素が提供されたテスト関数を満たしている場合、trueを返します。 |
| 3 | フィルタ（） 提供されたフィルタリング関数がtrueを返す、この配列のすべての要素を使用して新しい配列を作成します。 |
| 4 | forEach（） 配列内の要素ごとに関数を呼び出します。 |
| 5 | の指標（） 指定された値に等しい配列内の要素の最初の（最小の）インデックスを返します。何も見つからない場合は-1を返します。 |
| 6 | join（） 配列のすべての要素を文字列に結合します。 |
| 7 | lastIndexOf（） 指定された値に等しい配列内の要素の最後の（最大の）インデックスを返します。何も見つからない場合は-1を返します。 |
| 8 | 地図（） この配列のすべての要素で提供された関数を呼び出した結果を使用して、新しい配列を作成します。 |
| 9 | ポップ（） 配列から最後の要素を削除し、その要素を返します。 |
| 10 | 押す（） 配列の最後に1つ以上の要素を追加し、配列の新しい長さを返します。 |
| 11 | reduce（） 配列の2つの値（左から右）に対して同時に関数を適用して、配列を1つの値に減らします。 |
| 12 | reduceRight（） 配列の2つの値（右から左）に対して同時に関数を適用して、配列を1つの値に減らします。 |
| 13 | 逆行する（） 配列の要素の順序を逆にします。最初が最後になり、最後が最初になります。 |
| 14 | シフト（） 配列から最初の要素を削除し、その要素スライスを返します。 |
| 15 | スライス（） 配列のセクションを抽出し、新しい配列を返します。 |
| 16 | いくつか（） この配列の少なくとも1つの要素が、提供されたテスト関数を満たしている場合、trueを返します。 |
| 17 | toSource() オブジェクトのソースコードを表します。 |
| 18 | ソート（） 配列の要素を並べ替えます。 |
| 19 | スプライス（） 配列に要素を追加および/または削除します。 |
| 20 | toString（） 配列とその要素を表す文字列を返します。 |
| 21 | unshift（） 配列の前に1つ以上の要素を追加し、配列の新しい長さを返します。 |
ES6-配列メソッド
以下は、ES6で導入されたいくつかの新しい配列メソッドです。
Array.prototype.find
find配列を反復処理して、指定されたコールバック関数がtrueを返す最初の要素を取得できます。要素が見つかると、関数はすぐに戻ります。これは、特定の条件に一致する最初のアイテムだけを取得するための効率的な方法です。
Example
var numbers = [1, 2, 3];
var oddNumber = numbers.find((x) => x % 2 == 1);
console.log(oddNumber); // 1上記のコードが正常に実行されると、次の出力が表示されます。
1Note − ES5 filter() およびES6 find()同義ではありません。Filterは常に一致の配列を返し（そして複数の一致を返します）、findは常に実際の要素を返します。
Array.prototype.findIndex
findIndex findと同様に動作しますが、一致した要素を返す代わりに、その要素のインデックスを返します。
var numbers = [1, 2, 3];
var oddNumber = numbers.findIndex((x) => x % 2 == 1);
console.log(oddNumber); // 0上記の例では、値1（0）のインデックスが出力として返されます。
Array.prototype.entries
entriesは、配列のキーと値をループするために使用できる配列イテレータを返す関数です。エントリは配列の配列を返します。各子配列は[index、value]の配列です。
var numbers = [1, 2, 3];
var val = numbers.entries();
console.log(val.next().value);
console.log(val.next().value);
console.log(val.next().value);上記のコードが正常に実行されると、次の出力が表示されます。
[0,1]
[1.2]
[2,3]または、spread演算子を使用して、エントリの配列を一度に取得することもできます。
var numbers = [1, 2, 3];
var val= numbers.entries();
console.log([...val]);上記のコードが正常に実行されると、次の出力が表示されます。
[[0,1],[1,2],[2,3]]Array.from
Array.from()オブジェクトのような配列から新しい配列を作成できるようにします。Array.from（）の基本的な機能は、2種類の値を配列に変換することです-
配列のような値。
SetやMapのような反復可能な値。
Example
"use strict"
for (let i of Array.from('hello')) {
console.log(i)
}上記のコードが正常に実行されると、次の出力が表示されます。
h
e
l
l
oArray.prototype.keys（）
この関数は、配列インデックスを返します。
Example
console.log(Array.from(['a', 'b'].keys()))上記のコードが正常に実行されると、次の出力が表示されます。
[ 0, 1 ]for…inループを使用した配列トラバーサル
for…inループを使用して、配列をトラバースできます。
"use strict"
var nums = [1001,1002,1003,1004]
for(let j in nums) {
console.log(nums[j])
}ループは、インデックスベースの配列トラバーサルを実行します。上記のコードが正常に実行されると、次の出力が表示されます。
1001
1002
1003
1004JavaScriptの配列
JavaScriptは、配列に関する次の概念をサポートしています-
| シニア番号 | コンセプトと説明 |
|---|---|
| 1 | 多次元配列 JavaScriptは多次元配列をサポートしています。多次元配列の最も単純な形式は2次元配列です |
| 2 | 関数に配列を渡す インデックスなしで配列の名前を指定することにより、配列へのポインタを関数に渡すことができます。 |
| 3 | 関数から配列を返す 関数が配列を返すことを許可します。 |
アレイの構造化
Destructuring配列またはオブジェクトから個別の変数に個々の値を抽出することを指します。配列の値を個々の変数に割り当てる必要があるシナリオを考えてみましょう。これを行う従来の方法を以下に示します-
var a= array1[0]
var b= array1[1]
var c= array1[2]破壊することは、簡潔な方法で同じことを達成するのに役立ちます。
構文
//destructuring an array
let [variable1,variable2]=[item1,item2]
//destructuring an object
let {property1,property2} = {property1:value1,property2:value2}例
<script>
let names = ['Mohtashim','Kannan','Kiran']
let [n1,n2,n3] = names;
console.log(n1)
console.log(n2)
console.log(n3);
//rest operator with array destructuring
let locations=['Mumbai','Hyderabad','Chennai']
let [l1,...otherValues] =locations
console.log(l1)
console.log(otherValues)
//variables already declared
let name1,name2;
[name1,name2] =names
console.log(name1)
console.log(name2)
//swapping
let first=10,second=20;
[second,first] = [first,second]
console.log("second is ",second) //10
console.log("first is ",first) //20
</script>上記のコードの出力は次のようになります-
Mohtashim
Kannan
Kiran
Mumbai
["Hyderabad", "Chennai"]
Mohtashim
Kannan
second is 10
first is 20