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 です。