LoginSignup
0

More than 1 year has passed since last update.

【JavaScript】配列① 〜配列の作成とアクセス〜

Posted at

概要

JavaScriptを学習、理解を深めるため「JavaScript Primer 迷わないための入門書」を読み、
理解した内容等を記載していく。

【JavaScript】JavaScript入門一覧」に他の記事をまとめています。

この記事で理解できること

  • 配列とは
  • 配列の要素の取得
  • 配列の分割代入

配列

  • 値に順序をつけて格納できるオブジェクト。
  • 配列に格納した値を要素、位置をインデックスと呼ぶ。
  • 配列[インデックス]と指定することで要素を参照できる。
  • インデックスは1ではなく0から始まるということがポイント。
// 配列リテラルで名簿のような配列を作成(変数:nameListに代入)
const nameList = ["Taro", "Hanako", "Mike"]; // インデックス:要素 = 0:Taro、1:Hanako、2:Mike

// nameListの要素「Taro」を出力(配列のインデックスは0から..)
console.log(nameList[0]); // => Taro

// 存在しないインデックスを指定すると「undefined」が返される
console.log(nameList[3]); // => undefined
// 配列の配列(多次元配列)も作成できる
const arrayOnArray = ["A", "B", "C", [1, 2, 3]];
// インデックス3(=[1, 2, 3]の配列)、その配列内のインデックス0(=1)を指定
console.log(arrayOnArray[3][0]); // => 1 

要素数の取得

  • 配列には要素数を取得できるlengthプロパティが存在する。
// 配列リテラルで名簿(変数:nameListに代入)
const nameList = ["Taro", "Hanako", "Mike"];

// lengthプロパティを出力
console.log(nameList.length); // => 3

オブジェクトが配列かどうかを判定する

  • あるオブジェクトが配列かどうかを判定するにはisArrayメソッドを利用する。
  • 配列の場合は、trueが返される。
const nameList = ["Taro", "Hanako", "Mike"];
const obj = {};

console.log(Array.isArray(nameList)); // => true
console.log(Array.isArray(obj));      // => false

// typeofでは判定できない(配列もオブジェクトのため)
console.log(typeof array); // => object

配列と分割代入(ES2015〜)

  • 配列の指定したインデックスの値を変数に再定義する方法に、分割代入が存在する。
  • 左辺に配列リテラルに指定したい変数名を、右辺の配列を定義する。
  • 右辺から左辺へ、それぞれのインデックスに該当する位置に要素の代入が行われる。
const array = ["one", "two", "three"];

// 左辺:配列リテラル 右辺:配列で分割代入
const [One, Two, Three] = array;

console.log(One);   // => one
console.log(Two);   // => two
console.log(Three); // => three

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0