JavaScript 再入門(その11) 配列

配列

配列の定義と初期化と要素の長さの取得

配列を定義するには new Array と [] があり、定義済みの変数に対しては配列として初期化します。
配列には、配列の長さ(配列の一番大きな添字より1大きい値)を取得するプロパティ array.length が用意されています。

配列を new Array で定義

// 配列の定義
let ary = new Array() ;
// 配列に値を設定
ary[0] = '車寅次郎' ;
ary[1] = '諏訪さくら' ;
ary[2] = '諏訪博' ;
ary[3] = '諏訪満男' ;
ary[4] = 'タコ社長' ;
ary[5] = '御前様' ;
console.log( ary.length ); // 6
// このように書いても同じ
ary = new Array( '車寅次郎' , '諏訪さくら' , '諏訪博' , '諏訪満男' , 'タコ社長' , '御前様' ) ;
console.log( ary.length ) ; // 6
// 初期化
ary = new Array() ;
console.log( ary.length ); // 0

配列を [] で定義

// 配列の定義と設定
let ary = [ '車寅次郎' , '諏訪さくら' , '諏訪博' , '諏訪満男' , 'タコ社長' , '御前様' ] ;
console.log( ary.length ); // 6
// 初期化
ary = [] ;
console.log( ary.length ); // 0

多次元配列

let ary =  [
	[ '車寅次郎' , '渥美清' ] ,
	[ '諏訪さくら' , '倍賞千恵子' ] ,
	[ 'タコ社長' , '太宰久雄' ] ,
	[ '諏訪博' , '前田吟' ] ,
	[ '諏訪満男' , '吉岡秀隆' ] ,
	[ '御前様' , '笠智衆' ] ,
	[ '源吉' , '佐藤蛾次郎' ] ,
] ;
console.log( ary.length ) ; // 7

オブジェクトをまとめた配列

let ary = [
	{ role: '車寅次郎' , actor: '渥美清' } ,
	{ role: '諏訪さくら' , actor: '倍賞千恵子' } ,
	{ role: '諏訪博' , actor: '前田吟' } ,
	{ role: '諏訪満男' , actor: '吉岡秀隆' } ,
	{ role: 'タコ社長' , actor: '太宰久雄' } ,
	{ role: '御前様' , actor: '笠智衆' } ,
	{ role: '源吉' , actor: '佐藤蛾次郎' } ,
];
console.log( ary.length ) ; // 7

配列の要素はどんな型でも格納できます。
最終行の ary[3]( ‘ひろし’ ) ; は、配列要素の関数を呼び出しています。要素内関数の this は配列を示します。

let ary = [
	[ '車寅次郎' , '渥美清' ] , // 配列
	{ role: '諏訪さくら' , actor: '倍賞千恵子' } , // オブジェクト型
	false , // ブーリアン型
	function( arg ) { // 関数型
		let x = '諏訪博' ;
		let y = '前田吟' ;
		console.log( arg , x , ':' , y  ) ;
      	console.log( this ) ;
	} ,
];
console.log( ary.length ) ; // 4
console.log( ary[0][0] , ':' , ary[0][1] ) ; // 車寅次郎 : 渥美清
console.log( ary[1].role , ':' , ary[1].actor ) ; // 諏訪さくら : 倍賞千恵子
console.log( ary[2] ) ; // false
ary[3]( 'ひろし' ) ; // ひろし 諏訪博 : 前田吟 + aryを表示

要素の代入と配列の長さ

要素の代入はどの位置にでも代入できます。
存在しない配列の要素は undefined になります。
array.length は必ずしも要素数を表しません、表すのは配列の長さ(一番大きな添字より1大きい値)です。

let ary = [ 'とらや' , 'おばちゃん' ] ;
console.log( ary.length ) ; // 2 ***
ary[10] = '車つね' ;		 // 10番目の配列に値を入れる ****
console.log( ary.length ) ; // 11 ***
console.log( ary[0] ) ; // とらや
console.log( ary[1] ) ; // おばちゃん
console.log( ary[2] ) ; // undefined
console.log( ary[8] ) ; // undefined
console.log( ary[10] ) ; // 車つね
console.log( ary.length - 1 ) ; // 車つね
console.log( ary[11] ) ; // undefined

配列のループ

for…of ^*ES2015 を使ってのループ

let ary = [ '車寅次郎' , '諏訪さくら' , '諏訪博' , '諏訪満男' , 'タコ社長' , '御前様' ] ;
for ( let val of ary ) {
	console.log( val ) ;
}
// 車寅次郎
// 諏訪さくら
// 諏訪博
// 諏訪満男
// タコ社長
// 御前様

forEach() ^*ES5 を使ってのループ

let ary = [ '車寅次郎' , '諏訪さくら' , '諏訪博' , '諏訪満男' , 'タコ社長' , '御前様' ] ;
ary.forEach( function( val , idx , ary) {
	if ( idx === 0 ) { console.log( ary ) ; } // (6) ['車寅次郎', '諏訪さくら', '諏訪博', '諏訪満男', 'タコ社長', '御前様']
	console.log( idx , val ) ;
}) ;
// 0 '車寅次郎'
// 1 '諏訪さくら'
// 2 '諏訪博'
// 3 '諏訪満男'
// 4 'タコ社長'
// 5 '御前様'

array.length を使ってのループ

let ary = [ '車寅次郎' , '諏訪さくら' , '諏訪博' , '諏訪満男' , 'タコ社長' , '御前様' ] ;
for( let idx = 0 ; idx < ary.length ; ++idx ) {
	console.log( idx , ary[idx] ) ;
}
// 0 '車寅次郎'
// 1 '諏訪さくら'
// 2 '諏訪博'
// 3 '諏訪満男'
// 4 'タコ社長'
// 5 '御前様'

配列のメソッド

Array.isArray

配列であるかを判定する。

let ary = [
	[ '車寅次郎' , '渥美清' ] , // 配列であるこの要素だけが true となる
	{ role: '諏訪さくら' , actor: '倍賞千恵子' } , // オブジェクト型なので false
	false , // ブーリアン型なので false
	function( arg ) { // 関数型なので false
		let x = '諏訪博' ;
		let y = '前田吟' ;
		console.log( arg , x , ':' , y  ) ;
	} ,
];

for ( let val of ary ) {
	if ( Array.isArray(val) ) { // 配列であるかを判定して、配列であればコンソールに表示
		console.log( val ) ;
	}
}
// (2) ['車寅次郎', '渥美清']

pop

最後の要素を取り除いて、その要素を返します。

let ary = [ '車寅次郎' , '諏訪さくら' , '諏訪博' , '諏訪満男' , 'タコ社長' , '御前様' ] ;
console.log( ary.pop() ) ; // 御前様
console.log( ary ) ; // (5) ['車寅次郎', '諏訪さくら', '諏訪博', '諏訪満男', 'タコ社長']

shift

最初の要素を取り除いて、その要素を返します。

let ary = [ '車寅次郎' , '諏訪さくら' , '諏訪博' , '諏訪満男' , 'タコ社長' , '御前様' ] ;
console.log( ary.shift() ) ; // 車寅次郎
console.log( ary ) ; // (5) ['諏訪さくら', '諏訪博', '諏訪満男', 'タコ社長', '御前様']

push

配列の末尾に要素を追加して、新しい length を返します。

let ary = [ '車寅次郎' , '諏訪さくら' , '諏訪博' , '諏訪満男' , 'タコ社長' , '御前様' ] ;
console.log( ary.push('源吉') ) ; // 7
console.log( ary ) ; // (7) ['車寅次郎', '諏訪さくら', '諏訪博', '諏訪満男', 'タコ社長', '御前様', '源吉']

unshift

配列の先頭に要素を追加して、新しい length を返します。

let ary = [ '車寅次郎' , '諏訪さくら' , '諏訪博' , '諏訪満男' , 'タコ社長' , '御前様' ] ;
console.log( ary.unshift('源吉') ) ; // 7
console.log( ary ) ; // (7) ['源吉', '車寅次郎', '諏訪さくら', '諏訪博', '諏訪満男', 'タコ社長', '御前様']

push と unshift は一度に複数の要素を追加することができます。

let ary = [ '諏訪博' , '諏訪満男' , 'タコ社長' ] ;
console.log( ary.push('御前様' , '源吉') ) ; // 5
console.log( ary ) ; // (5) ['諏訪博', '諏訪満男', 'タコ社長', '御前様', '源吉']
console.log( ary.unshift('車寅次郎' , '諏訪さくら') ) ; // 7
console.log( ary ) ; // (7) ['車寅次郎', '諏訪さくら', '諏訪博', '諏訪満男', 'タコ社長', '御前様', '源吉']

reverse

配列の要素を反転し、書き換えられた配列の参照を返します。

let ary = [ '車寅次郎' , '諏訪さくら' , '諏訪博' , '諏訪満男' , 'タコ社長' , '御前様' ] ;
console.log( ary.reverse() ) ; // (6) ['御前様', 'タコ社長', '諏訪満男', '諏訪博', '諏訪さくら', '車寅次郎']
console.log( ary ) ; // (6) ['御前様', 'タコ社長', '諏訪満男', '諏訪博', '諏訪さくら', '車寅次郎']

indexOf **^*ES5**

引数に与えられた内容と同じ内容を持つ最初の配列要素の添字を返します。存在しない場合は -1 を返します。
第2引数で検索開始位置を指定することができます。

let ary = [ '車寅次郎' , '諏訪さくら' , '諏訪博' , '諏訪満男' , 'タコ社長' , '御前様' , '諏訪さくら'] ;
console.log( ary.indexOf('諏訪さくら') ) ; // 1
console.log( ary.indexOf('諏訪さくら' , 2) ) ; // 6
console.log( ary.indexOf('山田洋次') ) ; // -1

includes

引数に与えられた内容が配列に含まれているかを true または false で返します。
第2引数で検索開始位置を指定することができます。

let ary = [ '車寅次郎' , '諏訪さくら' , '諏訪博' , '諏訪満男' , 'タコ社長' , '御前様' ] ;
console.log( ary.includes('諏訪さくら') ) ; // true
console.log( ary.includes('諏訪さくら' , 2) ) ; // false
console.log( ary.includes('山田洋次') ) ; // false

文字列と配列の変換

String.split と Array.join を使って文字列を配列に変換します。
CSV形式のデータの処理などに利用されます。

let str = '車寅次郎,諏訪さくら,諏訪博,諏訪満男,タコ社長,御前様' ;
let ary = str.split(',') ;
console.log( ary ) ; // (6) ['車寅次郎', '諏訪さくら', '諏訪博', '諏訪満男', 'タコ社長', '御前様']
ary.push('源吉') ;
console.log( ary ) ; // (7) ['車寅次郎', '諏訪さくら', '諏訪博', '諏訪満男', 'タコ社長', '御前様', '源吉']
let outStr = ary.join(',') ;
console.log( outStr ) ; // '車寅次郎,諏訪さくら,諏訪博,諏訪満男,タコ社長,御前様,源吉'