JavaScript
をテンプレートにして作成
開始行:
[[FrontPage]]
*概要 [#w819b14f]
-ガッツリ書く機会が少なかったので復習
-雰囲気で書いていた部分もあるので理解を深める
*目次 [#vb12ef64]
#contents
*変数の宣言 [#o7639a7b]
-変数を宣言するときに利用するキーワードはvar/const/letの3...
-それぞれ再代入の可否とスコープが異なる
-基本的には'const'を利用する
|キーワード|再代入|スコープ|h
|var|OK|関数|
|let|OK|ブロック|
|const|NG|ブロック|
*関数 [#ae206f3d]
-ES6から引数のデフォルト値が指定可能となった
#region(例)
#highlightjs(javascript)
function multiplication(a, b = 2) {
return a * b;
}
console.log(multiplication(3)); // = 3 * 2
console.log(multiplication(3, 3)); // = 3 * 3
console.log(multiplication(a = 1, b = 4)); // = 1 * 4
console.log(multiplication(4, b = 4)); // = 4 * 4
// undefinedの場合はデフォルト引数が使用される
console.log(multiplication(4, undefined)); // = 4 * 2
// nullの場合はnullが引数として渡される
console.log(multiplication(4, null));
#endregion
*分割代入 [#ta14a306]
-配列やオブジェクトの要素から個別の変数に代入する
-配列の場合は'[変数, ...] = 配列'の形で代入を行う
-オブジェクトの場合は'{変数, ...} = オブジェクト'で代入を...
#region(配列の例)
#highlightjs(javascript)
const array = [10, 20, 30];
// 分割代入の変数 < 配列の要素数 であれば問題ない
const [a1, b1] = array;
// a=10, b=20
console.log(a1, b1);
const [a2, ,c2] = array;
// a2=10, c=30
console.log(a2, c2);
#endregion
#region(オブジェクトの例)
#highlightjs(javascript)
const object = {
a: "a",
b: "b",
c: "c",
d: function() {
console.log("d");
},
e: "e",
// f: "f"
g: "g",
z: "h",
};
// object.a, object.bが入る
const {a, b} = object;
console.log(a, b);
// 順番はどのような順番でもOK
// object.d, object.cが入る
const {d, c} = object;
// console.log("d")が呼ばれる
d();
// デフォルト値を指定しておくと，プロパティが存在しない...
const {e, f = "f"} = object;
// "e", "f"
console.log(e, f);
// 'プロパティ名: 変数名'とすると別の変数名でも取り出せる
const {g, z: h} = object;
// "g", "h"
console.log(g, h);
#endregion
*map/filter/reduce [#je0dfeea]
-最近の言語で取り入れられている関数プログラミングスタイル...
**map [#jeb8e7b4]
#highlightjs(javascript)
const array = [1, 2, 3, 4, 5];
// 各要素の値を2倍する
array.map((elem) => elem * 2);
// 要素と対応するインデックスを乗ずる
array.map((elem, idx) => elem * idx);
**filter [#s411c66c]
#highlightjs(javascript)
const array = [
{name: "Bob", age: 10},
{name: "Kevin", age: 20},
{name: "Tim", age: 30},
];
array.filter((elem) => elem.age < 20);
// ブロックを使用する場合は'return'で返す必要がある
array.filter((elem) => {
return elem.age >= 30
});
**reduce [#g1b98f26]
-第一引数に指定するコールバックの引数は(accumulator, curr...
--accumulator: 前回の値．初期値が与えられた場合の初回は与...
--currentValue: 現在の要素，初期値指定時の初回は0番目，未...
--currentIndex: インデックス．初期値指定=0, 初期値未指定=1
--array: reduceが呼ばれた配列
#highlightjs(javascript)
const array = [0, 1, 2, 3];
array.reduce((acc, cur) => acc + cur, 0);
// 初期値は省略できる
array.reduce((acc, cur) => acc + cur);
終了行:
[[FrontPage]]
*概要 [#w819b14f]
-ガッツリ書く機会が少なかったので復習
-雰囲気で書いていた部分もあるので理解を深める
*目次 [#vb12ef64]
#contents
*変数の宣言 [#o7639a7b]
-変数を宣言するときに利用するキーワードはvar/const/letの3...
-それぞれ再代入の可否とスコープが異なる
-基本的には'const'を利用する
|キーワード|再代入|スコープ|h
|var|OK|関数|
|let|OK|ブロック|
|const|NG|ブロック|
*関数 [#ae206f3d]
-ES6から引数のデフォルト値が指定可能となった
#region(例)
#highlightjs(javascript)
function multiplication(a, b = 2) {
return a * b;
}
console.log(multiplication(3)); // = 3 * 2
console.log(multiplication(3, 3)); // = 3 * 3
console.log(multiplication(a = 1, b = 4)); // = 1 * 4
console.log(multiplication(4, b = 4)); // = 4 * 4
// undefinedの場合はデフォルト引数が使用される
console.log(multiplication(4, undefined)); // = 4 * 2
// nullの場合はnullが引数として渡される
console.log(multiplication(4, null));
#endregion
*分割代入 [#ta14a306]
-配列やオブジェクトの要素から個別の変数に代入する
-配列の場合は'[変数, ...] = 配列'の形で代入を行う
-オブジェクトの場合は'{変数, ...} = オブジェクト'で代入を...
#region(配列の例)
#highlightjs(javascript)
const array = [10, 20, 30];
// 分割代入の変数 < 配列の要素数 であれば問題ない
const [a1, b1] = array;
// a=10, b=20
console.log(a1, b1);
const [a2, ,c2] = array;
// a2=10, c=30
console.log(a2, c2);
#endregion
#region(オブジェクトの例)
#highlightjs(javascript)
const object = {
a: "a",
b: "b",
c: "c",
d: function() {
console.log("d");
},
e: "e",
// f: "f"
g: "g",
z: "h",
};
// object.a, object.bが入る
const {a, b} = object;
console.log(a, b);
// 順番はどのような順番でもOK
// object.d, object.cが入る
const {d, c} = object;
// console.log("d")が呼ばれる
d();
// デフォルト値を指定しておくと，プロパティが存在しない...
const {e, f = "f"} = object;
// "e", "f"
console.log(e, f);
// 'プロパティ名: 変数名'とすると別の変数名でも取り出せる
const {g, z: h} = object;
// "g", "h"
console.log(g, h);
#endregion
*map/filter/reduce [#je0dfeea]
-最近の言語で取り入れられている関数プログラミングスタイル...
**map [#jeb8e7b4]
#highlightjs(javascript)
const array = [1, 2, 3, 4, 5];
// 各要素の値を2倍する
array.map((elem) => elem * 2);
// 要素と対応するインデックスを乗ずる
array.map((elem, idx) => elem * idx);
**filter [#s411c66c]
#highlightjs(javascript)
const array = [
{name: "Bob", age: 10},
{name: "Kevin", age: 20},
{name: "Tim", age: 30},
];
array.filter((elem) => elem.age < 20);
// ブロックを使用する場合は'return'で返す必要がある
array.filter((elem) => {
return elem.age >= 30
});
**reduce [#g1b98f26]
-第一引数に指定するコールバックの引数は(accumulator, curr...
--accumulator: 前回の値．初期値が与えられた場合の初回は与...
--currentValue: 現在の要素，初期値指定時の初回は0番目，未...
--currentIndex: インデックス．初期値指定=0, 初期値未指定=1
--array: reduceが呼ばれた配列
#highlightjs(javascript)
const array = [0, 1, 2, 3];
array.reduce((acc, cur) => acc + cur, 0);
// 初期値は省略できる
array.reduce((acc, cur) => acc + cur);
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
