Zenn
🥨

配列

2023/04/27に公開
JavaScript
tech

MDN（ https://developer.mozilla.org/ja/docs/Web/JavaScript ）
を参考に勉強するように注意が入ったので、ここを教本にしていきます。
その為、抜粋しながら進めたいと思います。

今回はこちらです。

今回もブラウザーの開発者ツールを使用します。

配列とは

配列オブジェクトは変数に格納されます。
その他の型と同様に扱われ、リスト内の値に個別にアクセスが出来、繰り返しを用いて全ての値に同じことをすることができます。
つまりは、0個や10個…または100個などもっと多くの値を扱いたい場合に、変数を1つずつ作るのは大変ですが、配列を使えば複数の値を1つのデーターの様に取り扱うことができるようになります。

let sequence = [1, 1, 2, 3, 5, 8, 13];
let random = ['tree', 795, [0, 1, 2]];

配列には上記の様に文字列、数値、オブジェクト、その他の変数など格納することができます。

配列を作る

1.配列内の項目を変更

let shopping = ['パン', '牛乳', 'チーズ', 'ハム', '麺'];
shopping[0] = 'タヒーニ';
console.log(shopping);
//  ['タヒーニ', '牛乳', 'チーズ', 'ハム', '麺']

配列中の項目は新しい値を代入することで変更する事ができます。
上記は「０」を指定する事で、パンからタヒーニに変更になりました。

2.配列内の項目を取得

let random = ['tree', 795, [3, 5, 12]];
random[2][1];
//5

2組の角カッコ（[]）を連結することにより、別の配列内にある配列内の項目にアクセスできます。
たとえば、配列内の2番目の項目である配列内の項目の1つにアクセスするには最初のカッコに2、次の括弧に指定する場所の数字を入れます。今回は１にしたので、５が表示されました。

3.配列の長さを見つける

lengthプロパティを使用して配列の数(長さ)を取得できます。

const shopping = ['パン', '牛乳', 'チーズ', 'ハム', '麺'];
console.log(shopping.length);  
// 5

文字列と配列を相互に変換する

1.コンソールで文字列を作成

let myData = '札幌,仙台,東京,名古屋,大阪,博多';

2.コンマごとに分割
データを表形式で表示するにはsplit()メソッドを使用します。

let myArray = myData.split(',');
myArray;
// ['札幌', '仙台', '東京', '名古屋', '大阪', '博多']

3.配列の長さ、いくつかの項目を取得方法

myArray.length;
//６　（長さ）
myArray[0]; 
//'札幌'　（配列の最初の項目）
myArray[myArray.length-1]; 
//'博多'　（配列の最後の項目）

4.配列を文字列に変換

  • join()メソッドを使用
let myNewString = myArray.join(',');
myNewString;
//'札幌,仙台,東京,名古屋,大阪,博多'
  • toString()メソッドを使用
let dogNames = ['ポチ','ハチ','タロウ','モコ'];
dogNames.toString();
//'ポチ,ハチ,タロウ,モコ'

２つの違い
join()メソッドは他の区切り文字が指定できる。
toString()メソッドは使用できる区切り文字がカンマ（,）のみです

項目の追加

1. 配列の最後に項目を追加

配列の最後に項目を追加するにはpush()メソッドを使用します。

let myArray = ['札幌', '仙台', '東京', '名古屋', '大阪', '博多'];
myArray.push('神戸', '広島');
myArray;
//['札幌', '仙台', '東京', '名古屋', '大阪', '博多', '神戸', '広島']

2. 新しい配列の長さを変数に格納

新しい配列の長さを変数に格納したい場合は下記の様に記載します。

let newLength = myArray.push('京都');
myArray;
//['札幌', '仙台', '東京', '名古屋', '大阪', '博多', '神戸', '広島','京都']
newLength;
//9

3.配列の最初に項目を追加

配列の最初に項目を追加するにはunshift()メソッドを使用します。

myArray.unshift('奈良');
myArray;
//['奈良', '札幌', '仙台', '東京', '名古屋', '大阪', '博多', '神戸', '広島','京都']

項目の削除

1. 配列の最後の項目を削除

配列の最後の項目を削除するにはpush()メソッドを使用します。

myArray.pop();
//'京都'

メソッド呼び出しが終わると削除された項目自体が返ります。

let removedItem = myArray.pop();
myArray;
removedItem;
//'広島'

2. 配列の最初の項目を削除

配列の最初の項目を削除するにはshift()メソッドを使用します。

let removedItem = myArray.shift();
myArray;
removedItem;
//'奈良'

3. 項目の長さがわかっている場合の配列から削除

splice()メソッドを使用します。

let myArray = ['札幌', '仙台', '東京', '名古屋', '大阪', '博多'];
  myArray.splice(1);
//['札幌', '東京', '名古屋', '大阪', '博多']

1つだけを消す場合は上記の様に記載します。
複数のアイテム削除の場合は下記の様にsplice(項目の削除を開始する場所, 削除する項目の数);を使用します。

let myArray = ['札幌', '仙台', '東京', '名古屋', '大阪', '博多'];
  myArray.splice(1, 3);
//['札幌', '大阪', '博多']

すべてのアイテムへのアクセス

※米国対応に記載していた物なので、コードの書き方を日本のMDNに寄せています

1.配列内のすべての項目

for...ofを使用し、反復可能オブジェクトをソースとした一連の値を処理するループを実行します。

const birds = ['Parrot', 'Falcon', 'Owl'];
for (const element of birds) {
  console.log(element);
}
//Parrot
//Falcon
//Owl

2.新しい配列を取得

map()を使用し、コールバック関数を使用して配列に反復処理を行い、新しい配列を生成します。

const numbers = [5, 2, 7, 6];
const doubled = numbers.map(function(number){
    return number *2;
});
console.log(doubled);  
// [ 10, 4, 14, 12 ]

上記の記載は数値の配列を受け取り、各数値を倍増した物です。

3.配列のデータを抽出

filter()配列内のすべてのアイテムに対してこの関数を呼び出し、アイテムを渡します。アイテムは新しい配列に追加され、新しい配列を生成します。

const cities = ['London', 'Liverpool', 'Totnes', 'Edinburgh'];
const result = cities.filter(word => word.length > 8);
console.log(result);
//['Liverpool', 'Edinburgh']

上記の記載は文字列の配列を受け取り、8文字を超える配列を返しています。

アクティブラーニング

1. 商品を印字しよう！

  1. // No.1 というコメントの下に、商品の名前と価格をコロン (:) で繋げた、いくつか文字列が並んでいます。これをproductsという名前の配列にしてください。
  2. // No.2 というコメントの行から for ループが始まっています。この行にはi <= 0と書かれています。「iの値が 0 以下でなくなれば終了」と書かれており、iは 0 から始まるので、この for ループは一度しか実行されません。この条件を i が products 配列の長さより小さくなくなった場合に終了するような条件に置き換えて下さい。
  3. // No.3 のコメントの直下に 1 行で、現在の配列の項目 (name:price) を 2 つに分割するコードを書いてください。一方は商品の名前、もう一方は価格です。もしどうすればいいのかわからなければ、便利な文字列のメソッドの記事を参照してください。さらに文字列と配列を相互に変換するも役に立つでしょう。
  4. 上記のコードの一部として、価格を文字列から数値に変換する必要もあるでしょう。どのようにすべきか思い出せなければ、文字列の最初の記事を確認してみましょう。
  5. コードの先頭に total という名前の変数が宣言されて、0 で初期化されています。ループの中で (// No.4 の下) 繰り返している現在の項目の価格を total 変数に加算するコードを一行で書いてください。そうすれば、コードの最後で正しい合計が請求書に印字されます。恐らく代入演算子が役に立つでしょう。
  6. // No.5 のコメントの直下のコードを itemText 変数が「現在の項目の商品名 — $現在の項目の価格」となるように変更してください。「靴 — $23.99」という感じです。そうすれば正しい情報が請求書に印字されます。これはもう慣れたはずの単純な文字列結合で実現できます。

答え

// No.1〜No.5の文章(```let itemText = 0;```は書き換えられています。)
  let products = ['パンツ:6.99',
  '靴下:5.99',
  'T シャツ:14.99',
  'ズボン:31.99',
  '靴:23.99'];

　　　　for(let i = 0; i < products.length; i++) {
  let subArray = products[i].split(':');
  let name = subArray[0];
  let price = Number(subArray[1]);
  total += price;
  itemText = name + ' — $' + price;
説明
  • for ( 初期値; 条件式; 増減値 ){ 繰り返す処理 } を使用し、 products 配列の長さより小さくなくなった場合に終了するような条件を記載します。
  • let subArray = products[i].split(':');の「：」で２つに区切ります。
  • let price = Number(subArray[1]);で配列の二番目の項目を指定しています。（例：'パンツ:6.99'の場合は「：」の後の数字の6.99です。）
  • total += price;の「+=」で先ほど指定した数字を足していきます。
  • itemText = name + ' — $' + price;で表示します。

2. 上位5件の検索

  1. // No.1 コメントの下に、検索ボックスに入力された検索語を配列の先頭に追加するコードを書いてください。検索語は searchInput.value と書いて取得します。
  2. // No.2 コメントの下に、配列の最後の項目を削除するコードを書いてください。

答え

searchBtn.onclick = function() {
 if(searchInput.value !== '') {
 // No.1
 myHistory.unshift(searchInput.value);

 if(myHistory.length >= 5) {
 //No.2
 myHistory.pop();
 }
説明

// No.1

  • myHistory.unshift(searchInput.value);は先頭に追加という指定があるのでunshift()を使用します。

// No.2

  • myHistory.pop();は配列の最後という指定があるのでpop()を使用します。

参考文献

Discussion