オブジェクト

javascript オブジェクト

更新日:

 

1 配列

基礎編でやったように

const ten1 = 80;
const ten2 = 90;
const ten3 = 40;

このようにしてもいいけど、まとめておくほうがすっきりする。

const mten = [80,90,40];

このようにまとめておくと便利

 

 

2 要素にアクセス

const1,2,3にしてログ表示するときその変数をかけばいいが配列は?

配列から90を呼び出すには・・

console.log(mten[1]); ←配列では0,1,2という並びなので90点は1になる。

 

配列の80,90,40→40を44に変更したい。

constは再代入できないが配列の時は再代入できる。

mten[2] = 44;

↑これで変更できたので、consolo.log(mten);これでログは80,90,44

 

配列数を取得

consolo.log(mten.length); ログは3と表示

 

 

3 配列とループ処理

console.log(mten[0]);
console.log(mten[1]);
console.log(mten[2]);

このように書くのは面倒で、3つならいいがたくさんあると大変

 

配列短縮1

for (let i = 0; i < 3; i++){ ←iは0-2までの間1ずつ増やしなさい
console.log(`点数 ${mten[i]}`);
}

※配列数が変わるたびにi < ○を変えないといけない

 

配列短縮2・・絶対覚えて!

for (let i = 0; i < mten.length; i++){
console.log(`点数 ${mten[i]}`);
}

ログ:点数80、点数90、点数40

 

console.log(`点数${i}- ${scores[i]}`);

点数1-80、点数2-90、点数3-40

 

 

4 配列に追加削除

先頭に追加 unshift()
末尾に追加 push() ←よく使う

先頭を削除 shift()
末尾を削除 pop()

const ten = [80,90,40,70];

末尾に追加 ten.push(60,50);
先頭を削除 ten.shift(); ←削除は1つずつしかできない

これを一気に表示するには?前回のコードのように書けばいい

for (let i = 0; i < ten.length; i++){
console.log(`${ten[i]}`);
}

配列数をすべて表示してくれるので、ログには90,40,70,60,50

 

 

5 配列の間に追加・削除

前回同様これを使います。 const ten = [80,90,40,70];

90ではなく60,30だったのでこれに修正する。

tens.splice(1,1,50,40);

最初の1:0,1より90が対象
2番目の1:1つ削除
50,40は追加

 

 

6 スプレッド構文・・難しいが理解・暗記して!

const tten =[10,20];

const ten =[80,90,40,70,...tten];

...ttenをスプレッド構文という(ttenはもちろんなんでもいい)

console.log(ten);
ログ80,80,40,70,10,20

スプレッド構文は、いちいち10,20を書かなくても...定数名でいいので便利

 

{
const ten =[90,70,60,150];
function goukei(a,b,c,d){
console.log(a+b+c+d);
}
goukei(...ten);   ←このように...を入れないとundefinedが出る
}
ログには370

 

 

7 分割代入

const ten = [80,90,40,70];
{
const [a,b,c,d] = ten;
console.log(a);
console.log(b);
console.log(c);
console.log(d);
}

慣れるまで大変だがまずはこの形を覚えよう

1.さて、ここが問題の配列

const [a,b,...tten] = ten;
①console.log(a);
②console.log(b);
③console.log(tten);

ログは、①80,②90,③[40,70]

メモ

配列を決める:80,90,40,70

constで[a,b...○○] = ten;と再代入の感じで。

 

2.

let x = 30;
let y =70;
[x,y]=[y,x];
①console.log(x);
②console.log(y);

ログ:①70、②30

 

 

8 for each 初登場

const ten = [80,90,40,70];

for (let i = 0; i < ten.length; i++){
console.log(` ${ten[i]}`);
}

ログ:80,90,40,70

上記でもいいが、下記を使うとさらに短縮できる。

ten.forEach((ten)=>{  ←Eachは大文字で!そうしないとエラーが出る
console.log(`${ten}`);
});

これに加えて番号を振りたい場合

ten.forEach((ten, ban)=>{
console.log(` ${ban} ${ten}`);
});

ログ:1 80、2 90、3 40、4 70

 

 

9 mapで一気に

const price = [1000,2000,3000];

const upprice = price.map(price2 =>price2 + 500);
console.log(upprice);

ログ:1500、2500、3500

 

 

10 filter 下記コードを暗記・理解すること

const bangou = [1,4,7,8,10];
{


const gusubangou = bangou.filter(bangou2=>{ ←偶数番号
if(bangou2 % 2 ===0){
return true;  ←偶数番号の時返す

}else{
return false; ←偶数番号でない時
}
});
console.log(gusubangou);
}

①constでまず配列

②constとfilterで偶数番号を抽出

 

 

11 オブジェクト

これまでconst ten = [100,200]といった配列をしていたが、

より分かりやすくするために・・

const ten={
x:100,
y:200,
};

ログではx:100,y:200

 

 

12 オブジェクト変更追加削除

前回のものでxだけの数値を呼び出すには

console.log(ten.x);
または
console.log(ten['x']);

x100,y200をx300,y200に変更したい場合

ten.x=300またはten['x']=300

 

z500を追加し、y200を削除

ten.z=500;
delete ten.y;

 

 

13 オブジェクト分割代入・・がんばって!

1.前回のもの

const aaa ={
r:4,
color:'red',
};

 

2.追加

const bbb = {
x:100,
y:200,
...aaa,  ←ここの書き方がこの回のメイン!
}

↑こうすると、console.log(bbb);
ログはx:100,y:200,r:4,color:red

 

3.さらに定義

const {x,r,...ccc} =bbb;
このように定義すると・・

①consolo.log(x);
②consolo.log(r);
③consolo.log(bbb);

仮にconsole.log(y)とするとエラーが出る

ログ①100、②4、③{y:200, color:"red"}

 

 

14 オブジェクトキー 何のメリットがあるのか分かってない

これまでのところが理解できたら下記が分かるのかもしれない。

そうしたらsamuraiブログのオブジェクトページ確認してみて

const ten={
x:100,
y:200,
};

const keys = Object.keys(ten);
keys.forEach(aaa => {
console.log(`${aaa}  ${ten[aaa]}`);
});

ログにはx:100、y:200

ポイント

配列にはforEachが使える
aaaは番号を振ってくれる(以前の復習)

 

複数座標の管理

const aaa = {
x:300,
y:380,
};
const bbb = [
{x:30, y:20},//0
{x:10, y:50},//1
{x:40, y:40},//2
];
//50を取り出したい場合
//上から0,1なので・・
points[1].y;
console.log(bbb[1].y); ←ドット

 

 

15,16 変数代入と挙動

①そのまま

let x = 1;
let y = x;
x=5;
console.log(x);//5
console.log(y);//1

 

②配列の挙動1

let x = [1,2];
let y = x;
x[0]=5;  ←xを1から5
console.log(x);//5,2
console.log(y);//1,2のはずだが5,2になる

 

③配列の挙動2

yのとき1,2と表示させるには・・

let x = [1,2];
let y = [...x];
x[0]=5;  ←xを1から5
console.log(x);//5,2
console.log(y);//1,2

 

 

17 文字列操作

1.文字数

const aaa = "hello";
①consolo.log(aaa.length);
②consolo.log(aaa);

ログ:①5、②hello

 

2. 1文字

consolo.log(aaa[1]);

0,1よりログはe

 

3. 文字を抜き出す

④consolo.log(aaa.substring(2,4));

helloの0,1,2番目はl
substringの4は4-1=3と考える、よって3番目はl
→よってログはll

 

 

18 つなげるjoin、ある文字を消すsplit

1.つなげる

const d = [2019,11,14];

①console.log(d.join('/'));

②console.log(d.join(''));

ログ:①2019/11/14 ②20191114

 

2.ある文字を消す

const t = '17:08:24';
③console.log(t.split(':'));

ログ:"17","08","24"

 

3.部分的に抜き出す

const t ='08:12:50';
const [h,m,s] = t.split(':');
①console.log(h);
②console.log(m);
③console.log(s);

ログ:①08 ②12 ③50

 

 

19 数値を操作

1.

const ten = [10,3,9]; 点数として10,3,9の配列を格納します
let sum = 0; iでもいいが今回はsumという合計の変数が分かりやすいね。

ten.forEach(aaa =>{ ←constの配列10、3、9まで~
sum += aaa;  ←sum = sum+aaaの省略

console.log(sum);
→ログ 22

const av = sum / ten.length;
console.log(av);
→ログ 7.3333333

2. 少数・整数

console.log(Math.floor(av));
→切り捨て7
console.log(Math.ceil(av));
→切り上げ8
console.log(Math.round(av));
→四捨五入7

console.log(av.toFixed(3));
→指定桁数表示7.333

↑四捨五入関係は全てMath~
指定桁数は違う

 

 

20 ランダム整数値とサイコロ

1.

console.log(Math.random());
→ランダム0~0.9999

①この数値に3をかけると0~2.9999
②上記を切り捨てすると0~2

console.log(Math.floor(Math.random()*3));

 

2.サイコロ

0~6をランダムでだす→Math.floor(Math.random()*6)
↓0以上6未満が出るので、1を足して1以上7未満にする
console.log(Math.floor(Math.random()*6)+1);

11~16表示は
→console.log(Math.floor(Math.random()*6)+11);

 

 

21 年月日

const d = new Date();
console.log(d);
→ログ Sun Apr 19 2020 19:51:50 GMT+0900 (日本標準時)

console.log(`${d.getMonth()+1}月 ${d.getDate()}日`);
→ログ 4月19日

メモ

d.getFullYhea();←年
d.getMonth();←月だけど0は1月、1は2月、11は12月
d.getDate();←日で1-31
d.getDay();←曜日で0が日曜、6が土曜

d.getHours();←時0-23
d.getMinutes();←分0-59
d.getSeconds();←秒0-59
d.getMilliseconds();←ミリ秒0-999

 

 

22 指定日時

const d =new Date(2019,10); ←10は11月ね
→ログ 2019/11/01 00:00:00

setは指定、getは型なのかな

d.setHours(10,20,30);
→10時20分30秒

//日付に31と入れると11月は30までなので12/1と表示される
d.setDate(31);
→31日・・・30日しかないものは翌月に加算される

d.setDate(d.getDate()+3);
※d.getDate(); 1~31日

→指定+3日

console.log(d);
11/31日+3日より12/4
→2019年12月4日10時20分30秒

 

 

23 警告・確認

①警告

alert('〇〇');

②確認 okとキャンセル画面が出る

confirm('○○ですか?');

③ok、キャンセルクリックで

const ans = confirm('削除しますか?');
if (ans){
console.log('削除しました');
}else{
console.log('キャンセルしました');
}

 

 

24 2秒後に止める2つの方法

1.インターバルを使う

まずfunction外でlet i = 0;

function st(){  
//iを増やして2回でとめる
i++;
if (i > 2){
//クリアー関数を使う
clearInterval(intervalId);
}
console.log (new Date());
}

↑ここまでがfunctionで定義した関数

const intervalId = setInterval(st,1000);

ログは今の時間から2秒後の3つ表示される

 

2.セットタイムアウトを使う

let i=0;
function sht(){
console.log(new Date());
const to= setTimeout(sht,1000);
i++;
if (i>2){
clearTimeout(to);
}
}
sht();

 

インターバルとセットタイムアウトの違い

setinterval 1秒間隔
→functionで定義するものが1秒以内ならokだが
1200msといった1秒を超えるものだと
1秒間隔にならずダブって処理がされてしまう

1000ms 1000ms 1000ms
300→   300→  300

1000ms 1000ms 1000ms
①1200ms→②1200ms→③
①が終わらない間に②が処理されてしまう

settimeoutは
1000ms→300msの後に1000msが処理される
処理が重ならない

 

25 時間表示

1.時間

function st(){
console.log (new Date());
}

setInterval(st,1000);
※showtimeの後ろにかっこをつけないこと

ログ 年月日時分秒が1秒ごとに表示される

※実際は24回

 

2.連続表示

function st(){
console.log(new Date());
setTimeout(showTime,1000);
}
↑funciton関数stと作っておくと、下記記載で連続表示される
st();

 

 

26 インターバルとセットタイムアウトの違い 24で

 

27 大文字変換とエラー回避

1.大文字

const name = 'minami';

console.log(name.toUpperCase());

ログはMINAMI

 

2.エラー回避

const name2 = 46;
//例外が起きそうなところをtry~catchで囲む

try{
console.log(name2.toUpperCase());
}catch(eee){//通常eを使う(ここはe以外でもできるってことでeeeとしている
console.log(eee);
}

46は大文字とかないので通常だとエラーがでてしまう。
そこでtry構文でエラーが出た場合に回避を用意しておく。

 

 

28 オブジェクト複数(投稿といいね)・・ここからが肝

1.まずはconstで定義

const posts=[
{
text:'js勉強中',
likeCount:0,
},
{
text:'プログラミング楽しい',
likeCount:0,
},
];

{}で複数格納できることはおさえておくこと

 

2.function関数

function aaa(post){  ←ポストを受け取ったら~下記処理をする
console.log(`${post.text} - ${post.likeCount}いいね`);
}

①aaa(posts[0]);
②aaa(posts[1]);
③aaa(posts[1]);

ログ ①js、いいね0 ②pg、いいね0 ③pg、いいね0←いいねは増えない

ここの構成が分からないと次が分からない

 

 

29 thisを使って省略

const posts=[

 {
 text:'js勉強中',
 likeCount:0,
 show(){
  console.log(`${this.text} - ${this.likCount}いいね`);
  },
 },

赤文字は前回の28回で使ったfunctionを使わなくてもいい。
違うところはfuncitonではなくshow()とを使う、postという任意のものはthisを使う
※thisは絶対

 

 {
 text:'たのしい',
 likCount:0,
 //こっちもshowメソッドを
 show(){
 console.log(`${this.text} - ${this.likCount}いいね`);
  },
 },

];

 

30 クラス概念

前回[0][1]では重複箇所がある。

①classを使う
②初期化しておくほうがいいのでconstructor()を使う
③textはその都度変更
④いいねは同じなので使いまわす
5show(){...},を使う

class Posts{
 constructor(){
 this.text=??;
 this.likeCount=0;
 }
 show(){...},
}

 

 

31 クラスを作る・実装

前回の型を使うと・・

1.クラスを作る

class Posts{
 constructor(text){
 this.text= text;
 this.likeCount=0;
 }
 show(){
 console.log(`${this.text} -${this.likeCount}いいね`);
 }
}

ここでクラス(posts)を作っておく。
これによってあとはテキスト部分に応じてログが変わる

 

2.テキスト部分を作る

const posts =[
 new Pg('javascript'),
 new Pg('php'),
];
①posts[0].show();
②posts[1].show();
③posts[1].show();

①javascript
②php
③php

 

 

32 いいねのメソッドとカプセル化

1.いいねのメソッドを作る

31回のクラスを作るshow()のconsole.logのように

like(){
 this.likeCount++;
}

 

前回のテキスト部分と同じで・・0はjavascript、1はphpです。

①posts[0].like(); js+いいね1つ目
②posts[0].like(); js+いいね2つ目
③posts[0].show(); 
↑showにはjsのいいねが格納されてるからこれがないと上記いいねが表示されない
④posts[1].show();これを書くことでphpが表示
phpにはlikeがないのでいいねは0のまま
↓よって上記①~④のログは・・
js いいね2
php いいね0

 

 

33 静的メソッド

class Postとしてクラスを作る。

その中に

①コンストラクター ←使いまわせるようにする。

constructor(text){
this.text = text;
this.likeCount = 0;
}

②ショーメソッド

show(){

console.log(`${this.text} - ${this.likeCount}good`);
}

③ライクメソッド

like(){
this.likeCount++;
this.show();
}

④静的メソッド ←新たに追加

static info(){
console.log('Post class version 1.0');
//クラスから直接呼び出すのでthisを使わない static
}

⑤配列格納

const posts =[
new Post ('js勉強中'),
new Post('プログラミング勉強中'),
];

準備が整ったので下記でログ表示できる

posts[0].like(); ←js good1
posts[0].like(); ←js good2

Post.info();  ←staticのテキストをここで表示

あれ?
クラスの中に①~⑤を入れるのがイメージ出来てこれまでの投稿・いいねが少し分かってきたかも。

 

 

34 クラスの拡張

クラス

①コンストラクター
②ショーメソッド
③ライクメソッド
実際はこの4点ね。

そして今回は広告クラスを作る

つまり、この広告クラスに①②③のコードを作ることになる。

class Add{
 constructor(text,ad){
 this.text = text;
 this.likeCount=0;
 this.ad =ad;
 }
 show(){
 console.log(`${this.text} - ${this.likeCount}いいね`);
 console.log(`プログラミング動画 by ${this.ad}`);
 }
 like(){
 this.likeCount++;
 this.show();
 }
}

今度は配列を格納する。
ここで、作った2つのクラスを格納する点がポイント

const posts =[
 new Post('javascript楽しい'),//posts0
 new Post('プログラミング楽しい'),//posts1
 new Add('javascriptが分かる','ドットインストール'),
];

①posts[2].show();

2よりaddのテキスト

メモ

ログでは
showでテキスト、いいね
任意、adテキスト

javascriptが分かる いいね0
プログラミング動画 by'ドットインストール 

上と同じだが、likeなのでいいねが1カウントされる

②posts[2].like(); ←likeにするといいねがカウントされ1になる

 

 

35 クラスの継承

クラスでpostとaddを作ったけど、この2つは重複箇所が多い。
そこで今回はaddを作る際「クラスの継承」を使ってコードを短く書く。

class postは親クラス

class Add extends Post{ 子クラス
 // そしてあとは独自のクラスだけを書けばいいので下記を消す
 constructor(text,ad){
 //子クラスでthisを使うにはsuperを入れる
 super(text);
 this.ad =ad;
 }
 show(){
 super.show();
 console.log(`プログラミング動画 by ${this.ad}`);
 }
}

 

 

 

 

-オブジェクト

Copyright© プログラミング , 2020 All Rights Reserved.