どうしてこの記事を書こうと思ったのか
フロントとサーバーサイドを任されるも、いかにデータの受け渡しの流れを理解し、データを正確に表示させるか
に悩まされる1週間だったので復習がてら記事にしていました。
新年1月からWebエンジニアに転職をし、約1週間が経ちました。
任された仕事で使う言語は「Vue.js」と「Node.js」。
どちらもJavaScriptではありますが、ちょっとした癖をもった言語だと思います。
上記の通り、**「いかにデータの受け渡しの流れを理解し、データを正確に表示させるか」**という点で詰まることが多く、独学では壁に遭遇しなかっただけで、ちゃんと理解しないとですね。
配列とは？
簡単に言うとデータを持つ箱です。
空っぽのときもあれば、1つのときや複数のともあります。
配列を作成後もデータを追加、更新、削除することが可能です。
例1:3つの値を保持する配列(Array)
newは新しい値を作成する際に使います。
更に、Array内に[a,b,c]という値を与え、配列から値を取り出してみます。
例1
const array = new Array(3);
// 配列[n]番目に文字列を入れる
array[0] = 'a';
array[1] = 'b';
array[2] = 'c';
console.log(array);
// 配列[n]番目を指定
console.log(array[0]); //"a"
console.log(array[1]); //"b"
console.log(array[2]); //"c"
基本的な配列の扱い方は以上になります。
多少面倒な記述方法ではありますが、値にキーを与える際には使用する記述方法です。
例2では簡略化した書き方をしてみます。
例2:配列作成の簡略化
例1同様の値を使います。
数字をキーにする場合は例2の書き方をよく使います。
const array = ['a','b','c'];
console.log(array);
// ["a","b","c"]
## 例3:型の混合した配列
// 3つの値を持つ配列
const array = ["a", true, 3847];
console.log(array);
例3デモ
記述のとおりになりますが、文字列、true or false、数字を混合した書き方も可能です。
配列とループ
配列を扱っている限り、実務でも必ずループに出くわします。
例3:配列とループで計算
const length = 10;
const array = new Array(length); // 長さ１０の配列
for(let i = 0; i <= length; i++) { // iに１０回足す1をする
array[i] = i; //iをループ
}
console.log(array);
// [0,1,2,3,4,5,6,7,8,9,10]
for-ofとループ
例4:for-ofとループで配列を一つづつ取り出す
const array = [1, 2, 3, 4, 5];
/* Aパターン */
for(const element of array) { // arrayの値を一つづつelmentに格納
console.log(element);
}
/* Bパターン */
/* const array = [1, 2, 3, 4, 5];
for(let i = 0; i < 5; i++) {
const element = array[i];
console.log(element);
} */s
/*
1
2
3
4
5
*/
上記のAパターンとBパターンは同じ結果になります。
for-of文を使うことでカウンタ(i)が不要になり、スッキリしたコードになります。
次回はオブジェクトについて記事にいたします。