JavaScript備忘録

勉強しながらメモしたことをそのまま記述しています。

・文字列は""か''で囲む

・javascriptは末尾にセミコロンがいる

・コメント
//

・コメントアウトのショートカットキー
Ctrl+/

・出力時のコピペ用
console.log();
console.log('');
console.log("");
console.log(`${}`);

・変数の定義
let

・定数の定義(型が変えられないという意味)
const

・テンプレートリテラル
`${}`

・完全一致
===

・結果一致
==

・配列の作り方
const fruits = ["apple","banana","orange"]

・配列の長さを取得する
fruits.length

この場合のlengthの値は3

・オブジェクトの作り方
{name:"手裏剣,price:300}

・オブジェクト配列を作れる
const items= [
{name:"手裏剣",price:300},
{name:"忍者刀",price:1200}
];

・存在しないを表す値
undefined

・関数の形
const 定数名 = function(){
// 処理
};

呼び出し
関数名();

・アロー関数
const introduce=()=>{
};

・オブジェクトの中に関数

const hoge={
huga:()=>{
console.log("piyo");
}
};

hoge.huga();

const user={
name:"にんじゃわんこ",
greet:()=>{
console.log("こんにちは！");
}
};
user.greet();

・クラスの作り方

class User{
}

・インスタンスの生成
const user = new User();

・コンストラクタ
class Animal{
constructor(){
}
}

・引数つきコンストラクタ
class Animal{
constructor(){
}
}

・classの中にプロパティを追加するとき
わざわざプロパティ名を宣言しなくても、コンストラクタとかで作ると新しく作ってくれる
class Animal{
constructor(){
this.name="レオ";
this.age=3;
}
}

・クラスの中にメソッド
class Animal{
greet(){
console.log("処理");
}
}

・継承方法
class Dog extends Animal{
}

clss 子 extends 親{}

・オーバライドがある
」

・コンストラクタもオーバライドできる
その場合、親のコンストラクタを呼ぶ場合はsuper()が必要

・ほかのファイルでもクラスを使用できるようにする方法
①classの最後に、export default クラス名;とする
②使うファイルの先頭で、import クラス名 from "パス";とする。
ちなみにファイル名は.jsはあってもなくてもいい

癖でセミコロンつけ忘れがちだからちゃんとつける

・ちなみに上記方法で値も関数もオブジェクトもエクスポートできる

・デフォルトエクスポートでエクスポートできるのは1つのみなので実はデータ名が間違ってても問題なし。
・それを解決する場合は名前付きエクスポートを使用する
export{dog1};
import{dog1} from "./dogData";

export{dog1,dog2};
import{dog1,dog2} from "./dogData";

・相対パス
./hoge
書いたファイルから見たhoge.jsのパスを指定する必要あり
./の意味は、同じディレクトリですよという意味
../の意味は、一つ上のディレクトリですよという意味

・javascriptの配列操作

・push
配列に値を1つ末尾に追加する

characters.push("とりずきん");

・forEach
const numbers=[1,2,3];
numbers.forEach((number)=>{
console.log(number);
});

・find
条件式に合う1つ目の要素を配列やオブジェクトから取り出す
const foundNumber = numbers.find((number)=>{
return number > 3;
});

配列は値が取得できるし、オブジェクトはオブジェクトが取得できる
const foundCharacter = characters.find((character)=>{
return character.id===3;
});

・filter
findとは違って複数の要素を取得できる
const evenNumbers = numbers.filter((number)=>{
return number%2===0;
});

const underTwenty = characters.filter((character)=>{
return character.age<20;
});
// evenNumbersを出力してください
console.log(underTwenty);

・map
配列やオブジェクトから、新しい配列を作る→配列しか作れない点に注意！
const doubledNumbers = numbers.map((number)=>{
return number*2;
});

・コールバック関数

普通に引数に関数指定できますよーなやつ
そんな難しいことじゃない