【転職して痛感…】配列とオブジェクトの大切さ_配列編

【転職して痛感…】配列とオブジェクトの大切さ_配列編:

どうしてこの記事を書こうと思ったのか

フロントとサーバーサイドを任されるも、いかにデータの受け渡しの流れを理解し、データを正確に表示させるか

に悩まされる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" 

例1デモ

基本的な配列の扱い方は以上になりますが、例1のような書き方で配列を作ることは、実務ではまずありません。

例2では簡略化した書き方をしてみます。

例2:配列作成の簡略化

// 3つの値を持つ配列 
const array = ["a", true, 3847]; 
 
console.log(array); 

例2デモ

記述のとおりになりますが、文字列、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] 

例3デモ

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)が不要になり、スッキリしたコードになります。

次回はオブジェクトについて記事にいたします。