JavaScript配列について知らない3つのこと

配列プログラミング言語の広く使用されている機能です。彼らです 特別な変数 それは同時に複数の値を格納するために使用することができます。しかしJavaScriptについては、学ぶのと同じくらい簡単なので、探求することが常にたくさんあります。.

この記事では、これまで知らなかった3つのあまり知られていないが重要なJavaScript配列の機能について説明します。.

1.配列にカスタムプロパティを追加する

あなたがJavaScript配列の徹底的な定義を探しているインターネットを精査しようとしているなら、あなたはほとんどすべてのソースが間違いなく配列として配列をリストすることに気付くでしょう。 本当に です, オブジェクト.

実際、JavaScriptで扱うほとんどすべてのものが 物であることが判明. JavaScriptには2種類のデータ型があります, プリミティブ そして オブジェクト, しかし プリミティブは常にオブジェクトの内側にまとめられています.

配列、関数、日付などは 事前定義されたJavaScriptオブジェクト 組み込みのメソッド、プロパティ、独自の標準化された構文があります。.

JavaScriptの配列は 3種類のプロパティ：

配列のインデックス また特性である
組み込みプロパティ
カスタムプロパティ 自分で追加できます

最初の2つはよりよく知られています、あなたは毎日それらを使うかもしれません、しかしあなたが配列にあなた自身のカスタムプロパティを追加する方法に飛び込む前にすぐにそれらを見てみましょう。.

特性としての指数

JavaScriptの配列は 角括弧の構文, といった var ary = ["orange"、 "apple"、 "lychee"];.

配列要素の添字は基本的に プロパティ どこ プロパティ名 あります 常に負でない整数.

の インデックス要素ペア 配列の キーと値のペア オブジェクトの.

インデックスはArrayオブジェクトの独自の機能であり、他の組み込みプロパティとは異なり、次のようになります。 括弧の構文だけで設定, といった ary [3] = "peach";.

組み込みプロパティ

配列も持っています 組み込みプロパティ, といった array.length. の 長さ プロパティは整数値を 配列の長さを表します.

一般に、組み込みプロパティは配列のような事前定義されたJavaScriptオブジェクトに頻繁に見られます。組み込みメソッドと共に、それらは役立ちます オブジェクトがさまざまなニーズに合うように汎用オブジェクトをカスタマイズする.

組み込みプロパティは次のいずれかでアクセスできます。 object.key または object ["key"] 構文。だからあなたも書くことができます ary ["length"] 配列の長さにアクセスする.

配列オブジェクトのカスタムプロパティを作成する

それでは、話をしましょう。 独自のプロパティを配列に追加する. 配列は、さまざまなインデックスにさまざまな種類の値を格納する定義済みオブジェクトです。.

通常、カスタムプロパティを配列に追加する必要はあまりありません。これは初心者が通常この機能について教えられない理由の1つです。実際、配列にキーと値のペアを追加して配列を通常のオブジェクトのように扱いたい場合は、 あなたの目的のために普通のオブジェクトを使う. しかし、これはないという意味ではありません 特殊なケース 1つ以上のカスタムプロパティを追加することで、配列がオブジェクトであるという事実を利用できる場合.

たとえば、次のようにカスタムプロパティを配列に追加できます。 その要素の「種類」または「クラス」を識別します, 以下の例で見ることができるように.

 var ary = ["orange"、 "apple"、 "lychee"]; ary.itemClass = "fruits"; console.log（ary + "are" + ary.itemClass）; //「オレンジ、アップル、ライチは果物です」

配列に追加したカスタムプロパティは 列挙可能, それはそれがのようなループによって拾われることを意味します で… ステートメント.

2.配列要素をループする

あなたはおそらく "私はすでに知っている"と言っていますが、これは本当のことですが、あなたは既に配列の要素を通り抜ける方法を知っています。しかし、実際にループスルーするのは次のようになるので、「配列エレメントをループスルーする」と言うのは少し抽象的です。 配列のインデックス.

配列インデックスは単に 負でない整数, 通常ゼロから始まり配列の全長で終わる整数値を繰り返し、次にその繰り返し値を使用して、指定されたインデックスの配列要素にアクセスします。.

しかし、ECMAScript 6以降、以下の方法があります。 配列値を直接ループする インデックスを気にすることなく、それを使用して行うことができます の ループ.

配列では、 の loopは配列要素をループします インデックス順に, 言い換えれば、インデックスを繰り返し処理して、 既存の配列値 与えられたインデックスでこのループは、すべての配列要素をループしてそれらを処理したい場合に最適です。.

 var ary = ["orange"、 "apple"、 "lychee"]; for（aryのitem）console.log（item）; // "オレンジ"、 "アップル"、 "ライチ"

比較のために、通常の にとって ループ、我々は出力として値の代わりにインデックスを得る.

 var ary = ["orange"、 "apple"、 "lychee"]; （var item = 0; itemの場合 < ary.length; item++) console.log(item);  // 0, 1, 2

3.要素数は長さではありません

典型的には、 配列の長さ, これは配列が保持する値の数か、手動で配列に与えた長さのどちらかだと思います。しかし実際には、配列の長さは 最大の既存インデックス その中.

長さは 非常に柔軟な財産. すでに配列の長さを固定しているかどうかにかかわらず、配列に値を追加し続ける場合は、その長さ それに応じて増え続ける.

 var ary = []; ary.length = 3; console.log（ary.length）; // 3 ary [5] = "abcd"; console.log（ary.length）; // 6

上の例では、インデックス5で1つの値だけを配列に指定し、長さが6になっていることがわかります。インデックス5に値を追加することによって、0から4のインデックスが自動的に作成されたと考えます。それから あなたの仮定は間違っています. 本当にあります 0から4までの既存のインデックスなし その配列で。あなたはこれを使用して確認することができます に オペレーター.

 var ary = []; ary.length = 3; console.log（ary.length）; // 3 ary [5] = "abcd"; console.log（ary.length）; // 6 console.log（0がary）; // false

配列 あい 我々が呼ぶものです 「スパース」配列, インデックスが配置されている配列 連続して作成されていません, そして ギャップがある. 「スパース」配列の逆は、 「密」配列 インデックスが配列内に連続して存在し、要素の数が 長さ.

の 長さ プロパティも可能です 配列を切り捨てる, 配列に存在する最高のインデックスが常に それ自身よりも少ない, として 長さ デフォルトでは常に最大のインデックスよりも数値的に大きい.

以下の例では、インデックス5の要素を減らすことによって、どのようにしてインデックス5の要素が失われるのかがわかります。 長さ の あい アレイ.

 var ary = []; ary.length = 3; console.log（ary.length）; // 3 ary [5] = "abcd"; console.log（ary.length）; // 6 ary.length = 2; console.log（ary.length）; // 2 console.log（ary [5]）; //未定義

参考文献

今までに知っておくべき10のJavaScript用語
あまり一般的ではありませんが役に立つ4つのJavascriptステートメント
JS Hintを使用したコードの最適化 - Javascriptをリンティングするためのツール