javascript　脱初心者を目指して　その１

javascriptで基本は抑えたけれど
もう少しレベルアップするにはどうしたらいいか？

そんな方に向けて以下をまとめました。
jsfiddleで実際に記述しながら読むことをおすすめします。

目次

javascript　脱初心者を目指して　その１(今回)

・配列の基本
・オブジェクトの基本
・繰り返しの基本
　①for 構文
　②for in 構文
　③for of 構文
　④配列にオブジェクトが入った場合の繰り返し
・if文と判定処理

javascript　脱初心者を目指して　その2（次回）

・アロー関数と省略記法
・コールバック関数
・コールバック関数とループ処理
・配列とforEachメソッド
・配列とreduceメソッド　

配列の基本

まずは基本です。

配列宣言の方法は２種類


//配列宣言1
const arry1 = new Array(1,2,3,4,5)
//配列宣言2
const arry2 = [1,2,3,4,5]

変数名にarrayを使うのは避けましょう。
理由は大文字小文字を区別するため使えるが
バグの原因になる可能性があるためです。

javascriptの配列の特徴

数値/文字列/Boolean（true/false）など異なる型を格納できる

const arry = [1,2,3,4,5,'文字',false]  //数値、文字列、boolean

const(定数)で宣言しても中身の変更は可能
同配列名を複数作ることはできない

const arry = [1,2,3,4,5,'文字',false]
arry[0] = 8  //結果 [8,2,3,4,5,'文字',false]
const arry =[7,4,5,2,6] //同配列名のためエラー

配列の取り出しは他の言語同様ブランケットに数字を入れて指定

const arry = [1,2,3,4,5,'文字',false]
arry1[0] // 結果 1(0が１番目)
arry1[1] // 結果 2
arry1[3] // 結果 3

配列でよく使われる処理
※上から順に実行した場合です

const arry = [1,2,3,4,5] 

配列の個数を数える .length
arry.length   // 結果 5 

配列の末尾に要素追加 .push
arry.push('末尾に追加') // 結果 [1,2,3,4,5,'末尾に追加']

配列の先頭に追加 .unshift
arry.unshift('先頭に追加') // 結果 ['先頭に追加',1,2,3,4,5,'末尾に追加']

末尾を削除 .pop
arry.pop() // 結果 ['先頭に追加',1,2,3,4,5]

削除した末尾を変数に代入 .pop応用
const val = arry.pop(); // 結果 ['先頭に追加',1,2,3,4] val=5

先頭を削除 .shift
arry.shift() // 結果 [1,2,3,4]

先頭を削除して変数に代入 .shift応用
const val2 = arry.shift(); // 結果 [2,3,4] val2=1

オブジェクトの基本

オブジェクトの作成/データの取り出し/書き換え

最初から用意する
const dog = {name:'pochi'};

後から追加する
const cat ={};
cat.name='tama'; // {cat:'tama'}となる

配列やオブジェクトの格納も可能
const person = {
  name: ['taro','yamada'],
  age:15,
  bloodType:'A',
  personalData:{
    language:'japanese',
    gender:'male'
  }
}

データの取り出し
console.log(person.bloodType); //'A'を取り出しコンソールに出力
console.log(person.name[0]); //'taro'を取り出しコンソールに出力
console.log(person.personalData.language); //'japanese'を取り出しコンソールに出力

データの取り出し応用
const bloodKey = 'bloodType';   //変数にキーに入れる
console.log(person[bloodKey]);  //変数で呼び出す場合はブラケットで呼び出し

データの書き換え
person.age = 20 //  15→20へ書き換え
const person{}; //  同名の新規オブジェクト作成はエラー

関数の格納
const person = {
  name: ['taro','yamada'],
  age:15,
  bloodType:'A',
  personalData{
    language:'japanese',
    gender:'male'
  },
  getFullname:function(){  //関数格納部分
    console.log(this.name[0] + this.name[1]);  //thisはオブジェクト名(ここではperson)
  }
}

person.getFullname(); //taroyamadaをコンソールに出力

key：valueの形が見えていれば.と[]で指定するだけです。
{}や()が増えても慌てずに全体を見てkey:valueを見定めましょう

繰り返し(for / for in /for of)

for構文

頻繁に出てくる繰り返し処理です。
省略形の書き方を覚えましょう。

const arry = ['red','blue','green','orange','black'];

コンソールに要素を１つずつ出力
for(let i = 0; i < 5; i = i + 1){ //iに0を代入  回数はiは5未満まで iに１を足す
  console.log(arry[i]);
}
上記を省略した書き方
for(let i = 0; i < arry.length ; i++){
  console.log(arry[i]);
}

実行結果

for in構文

i部分は任意に指定できますがindexの頭文字を取ることが多く
可読性も高まるのでインデックスはiを使いましょう

const arry = ['red','blue','green','orange','black'];

for(let i in arry){
  console.log(i); //インデックスを順番に１つずつ取り出し
}

for(let i in arry){
  console.log(i,arry[i]);  //インデックスと値を１つずつ取り出し
}

実行結果

for of構文

v部分は任意に指定できますがvalueの頭文字を取ることが多く
可読性も高まるので値はvを使いましょう

const arry = ['red','blue','green','orange','black'];

for(let v of arry){ //値を１つずつ取り出し
  console.log(v);
}

実行結果

インデックスが不要であれば引数が１つで値が取れるため
for文に比べてスッキリ記述できます。

応用（配列にオブジェクトが入った場合）

todosという配列には３つの要素としてオブジェクトが入っています。
１つのオブジェクトにはid/title/completedと３つのプロパティが入ります。

if文を使ってcompletedの真偽（true/false）で出力を変えてみましょう

const todos = [
  {
    id:1,
    title:'javascript study',
    completed:true
  },
 {
    id:2,
    title:'ruby study',
    completed:true
  },
 {
    id:3,
    title:'html/css study',
    completed:false
  }
]

for(let i = 0; i < todos.length; i++){
  let todo = todos[i];  //todosの要素を１つずつ処理
  if(todo.completed === true){
    console.log(i,todo.title);
  }
}

実行結果

id:３はcompletedプロパティがfalseのため出力されません。

todosやtodo部分の名前は任意ですが配列を１つずつ処理するため
複数単数の形にすると可読性がよくなります。

if文と判定処理

まずはif文のおさらいです。
()内の判定条件で出力が変わります。

//下記はfalse判定になる
if(false){
  console.log('これはtrueです');
}else if(false){
  console.log('これはis elseです');
}else{
  console.log('これはfalseです' )  //ここが出力
}

次に===と==の違いについてです。
===はデータ型まで加味して判定しますが
==はデータ型を加味せずに判定します。

//false判定になる（データの型まで比較）
if(1==='1'){
  console.log('これはtrueです');
    }else{
  console.log('これはfalseです' ) //ここが出力される
}

//true判定になる(データの型を比較しない)
右辺の'1'を左辺の数値型に変換してから比較

if(1=='1'){
  console.log('これはtrueです');　//ここが出力される
}else{
  console.log('これはfalseです' ) 
}

==を使用した場合、左辺のデータ型と右辺のデータ型を
検証して判定するので1とtrueはtrueになります。

//true判定になる
if(1==true){
  console.log('これはtrueです'); //ここが出力
}else{
  console.log('これはfalseです' )
}

!は等しくないという判定になりますが
!==と!=もデータ型を検証するかしないかという点で
異なる結果が得られます。


//データ型を判定して1は'1'と等しくない
if(1 !== '1'){
  console.log('これはtrueです');  //こちらが出力される
    }else{
  console.log('これはfalseです' )
}

//データ型は判定しないため1と'１'は等しい
if(1 != '1'){
  console.log('これはtrueです');
}else{
  console.log('これはfalseです' )  //こちらが判定される
}

変数名のみを記述した場合は値の有無を判定します。
また変数名の前に!をつけることで判定をひっくり返すことができます。

const num = 5;
if(num){
  console.log('これはtrueです'); //ここが出力
}else{
  console.log('これはfalseです' )
}

if(!num){
  console.log('これはtrueです'); 
}else{
  console.log('これはfalseです' ) //ここが出力
}

nullやundefinedや0はfalseの判定になります。
真偽がわからない場合はboolean()に調べたい値を入れて確認しましょう

const num = 0;

if(num){
  console.log('これはtrueです');
}else{
  console.log('これはfalseです' ) //ここが出力される
}

次回はjavascript　脱初心者を目指して　その2　です。