14.
配列の操作
スプレッド構文
スプレッド構文とは
スプレッド構文（spread syntax）は ... (ドット3つ)で記述する方法で、配列やオブジェクトを展開するときに使用されます。
スプレッド構文の使い方
配列を展開しない場合
... をつけずに（展開せずに） drinks に文字列を追加して、新しい配列を作成します。
array.js
var drinks = ['コーヒー', '紅茶'];
// 展開せずに文字列追加
drinks = [drinks, 'ほうじ茶'];
console.log(drinks);
結果は多次元配列になってしまいます。
結果
[ [ 'コーヒー', '紅茶' ], 'ほうじ茶' ]
配列を展開する場合
...drinks（展開して） 文字列を追加して新しい配列を作成します。
array.js
var drinks = ['コーヒー', '紅茶'];
// 展開して文字列追加
drinks = [...drinks, 'ほうじ茶'];
console.log(drinks);
正しい配列で作成されました。
結果
["コーヒー", "ウーロン茶", "ほうじ茶"]
配列の追加・削除
配列はオブジェクトで、いくつかのプロパティやメソッドが用意されています。
push() メソッド
push() は最後に要素に値を追加するメソッドです。
Array.push(value)
配列にデータ追加
drinks に「炭酸水」を追加します。
array.js
drinks.push('炭酸水');
console.log(drinks);
結果
["コーヒー", "紅茶", "ほうじ茶", "炭酸水"]
pop() メソッド
pop() は最後の要素を削除するメソッドです。
Array.pop()
最後の要素を削除
drinks の最後の要素を削除します。
array.js
drinks.pop();
console.log(drinks);
結果
["コーヒー", "紅茶", "ほうじ茶"]
shift() メソッド
shift() は先頭の要素を削除するメソッドです。
Array.shift()
先頭の要素を削除
drinksの先頭の要素を削除します。
array.js
drinks.shift();
console.log(drinks)
結果
["紅茶", "ほうじ茶"]
unshift() メソッド
unshift() は先頭に要素を追加するメソッドです。
Array.unshift()
先頭にデータ追加
drinksの先頭に「コーヒー」を追加します。
array.js
drinks.unshift('アイスコーヒー');
console.log(drinks);
結果
["アイスコーヒー", "紅茶", "ほうじ茶"]
splice() メソッド
splice() メソッドは指定したインデックスから n番目の要素を削除または追加します。
指定インデックスでデータ追加
Array.splice(Index, n, value)
drinksの1番目の要素を1つ追加します。
array.js
drinks.splice(1, 0, "オレンジジュース");
console.log(drinks);
結果
["アイスコーヒー", "オレンジジュース", "紅茶", "ほうじ茶"]
指定インデックスで削除
Array.splice(Index, n)
drinksのインデックス「2」の要素を1つ削除します。
array.js
drinks.splice(2, 1);
console.log(drinks);
結果
["アイスコーヒー", "オレンジジュース", "ほうじ茶"]
インデックスの取得
指定した値が最初にみつかったインデックスを取得します。
Array.indexOf(value);
drinksから「ほうじ茶」のインデックスを取得します。
array.js
var index = drinks.indexOf('ほうじ茶');
console.log(index);
結果
2
演習
問題1
配列 cities をスプレッド構文で、new_city を追加してみましょう。
var cities = ['Tokyo', 'Osaka', 'Yokohama'];
var new_city = 'Nagoya';
問題2
配列 cities の最後に、new_city を追加してみましょう。
var cities = ['Tokyo', 'Osaka', 'Yokohama'];
var new_city = 'Nagoya';
問題3
配列 cities のインデックス「3」に、new_city を追加してみましょう。
var cities = ['Tokyo', 'Osaka', 'Yokohama'];
var new_city = 'Nagoya';