javascript入門
Udemyで勉強↓
codesandboxでjavascriptの基本ルールを勉強
const, let 等の変数宣言
code:js
/**
* const, let等の変数宣言
*/
// var変数は上書き、再宣言可能
var val1 = "var変数";
val1 = "上書き";
var val1 = "var再宣言"; //エディタ上で警告が出る
console.log(val1);
// let変数は上書きだけ可能
let val2 = "let変数";
val2 = "let上書き";
// let val2 = "let再宣言" これはできない
console.log(val2);
// const変数は上書き、再宣言不可
const val3 = "const変数";
// val3 = "const上書き" 上書きすらできない
console.log(val3);
// ただしconstで定義したオブジェクト、配列はプロパティの変更が可能
const ob1 = {
name: "user1",
age: 24
};
ob1.age = 25;
console.log(ob1);
テンプレート文字列
code:js
/**
* テンプレート文字列
* 「`」バックコートで囲む
*/
const name = "usesr";
const age = 24;
console.log(${name}さんは${age}歳です。);
アロー関数
code:js
/**
* アロー関数
*/
// 従来の関数
function func1(str) {
return str;
}
console.log(func1("func1です。"));
const func2 = function (str) {
return str;
};
console.log(func2("func2の別の定義方法"));
// アロー関数
const func3 = (str) => {
return str;
};
console.log(func3("func3,アロー関数での定義方法"));
// 処理が一つの場合はブラケット,returnを省略して以下のように書ける
const func4 = (str) => str;
console.log(func4("func4,ブラケットの省略"));
分割代入
code:js
/**
* 分割代入
*/
const myProfile = {
name2: "user",
age2: 24
};
// プロパティ名は合わせる必要がある。順不同。
const { age2, name2 } = myProfile;
console.log(私の名前は${name2}です。${age2}歳です。);
// 配列から分割代入をする際は順番を合わせる必要がある。
console.log(name3, age3);
デフォルト値
code:js
/**
* デフォルト値、引数など
*/
const sayHello = (name = "guest") =>
console.log(デフォルト値:こんにちは${name}さん);
sayHello();
sayHello("usesr");
スプレッド構文
code:js
/**
* スプレッド構文 「...」
*/
// 配列の展開
console.log(arr1);
const sumFunc = (num1, num2, num3) =>
console.log("スプレッド構文:", num1 + num2 + num3);
sumFunc(...arr1);
// まとめる
console.log(num1, num2, others);
// 配列のコピー。中身だけコピーする方法。参照を引き継がない。
console.log(arr5);
console.log(arr6);
map, filter
code:js
/**
* map, filterを使った配列の処理
*/
// 従来のループ (for文)
for (let index = 0; index < nameArr.length; index++) {
console.log("for文での出力:" + nameArrindex); }
// map
nameArr.map((name) => console.log("mapで出力:" + name));
// filter
// return内の条件を満たす呼び出し元の配列の要素を返す。
// map, filter共に二つ目の引数に0から始まるインデックスを指定できる。
const newNameArr = nameArr.filter((_, index) => {
return (index + 1) % 2 === 0;
});
console.log("filter:" + newNameArr);
三項演算子
code:js
/**
* 三項演算子
*/
// 条件 ? True処理 : False処理
const numS = "1300";
const numN = 1300;
console.log(numN.toLocaleString());
const formattedNum = (num) => {
return typeof num === "number" ? num.toLocaleString() : "数値を指定しろ";
};
console.log("三項演算子：" + formattedNum(numN));
console.log(formattedNum(numS));
論理演算子の本当の意味
code:js
/**
* 論理演算子の本当の意味
*/
// ||は左側がfalseなら右側を返す、左側がtrueなら左側を返す。
const num = null;
const fee = num || "金額が未設定";
console.log(fee);
// &&は左側がfalseなら左側を返す、左側がtrueなら右側を返す。
const num4 = null;
const fee2 = num4 && "何か設定されました";
console.log(fee2);