デフォルト値を持つ関数への引数
デフォルト値は数値
//es5 引数のデフォルト値
function add(a, b) {
a = a || 10;
b = b || 20;
return a + b;
}
console.log(add()); //20
//es6
function add1(a = 10, b = 20) {
return a + b;
}
console.log(add1()); //30
function add2(a = 10, b = 20) {
return a + b;
}
console.log(add2(1)); //21 引数に順番に値を割り当てる
デフォルト値は関数
function add3(a, b = getVal(5)) {
return a + b;
}
function getVal(val) {
return 5 + val;
}
console.log(add3()); //a することはできない。=10 =NaN
console.log(add3(2)); //12 -->2+(5+5)
残りの引数...keys
複数の独立した値を1つの配列に結合
es6 ....keysの代わりにarguments ....keysは残りのすべての引数に、argumentsはすべての引数に対応します。
function pick(obj) {
let result = Object.create(null);
for (let i = 1; i < arguments.length; i++) { //arguments 前のパラメータを除外する必要がある
result[arguments[i]] = obj[arguments[i]];
}
return result;
}
//...keys残りの引数
function pick1(obj, ...keys) {
let result = Object.create(null);
for (let i = 0; i < keys.length; i++) { // ...keys直接残りの引数をたどることはできない
result[keys[i]] = obj[keys[i]];
}
return result;
}
const book = {
title: "es6",
author: "hattie",
year: 2020
}
let bookData = pick(book, "author", "year");
let bookData1 = pick1(book, "author", "year");
console.log(bookData);
console.log(bookData1);
...キーは実配列 引数は擬似配列
function checkArgs(...args) {
console.log(args); //(3) ["a", "b", "c"] 実際の配列
console.log(arguments); //Arguments(3) ["a", "b", "c", callee: (...), Symbol(Symbol.iterator): ]
}
checkArgs('a', 'b', 'c');
let fn3 = (...res) => (res);
console.log(fn3(1, 2, 3)); //[1, 2, 3]
拡張演算子...
配列を分割し、個々の項目を引数として関数に渡します。
const arr = [2, 3, 1, 7];
//es5applyを使ってarr配列の値を分割し、Mathに渡す。.max()
console.log(Math.max.apply(null, arr)); //7
//es6 ...拡張演算子は配列内の値を分割する
console.log(Math.max(...arr)); //7
アロー関数=>
1.function(){}イコール =>
一般的には{}が使用され、returnキーワードを省略し、行で記述できる式は()として使用できます。
// let fn0 = (id, name) => {
// return {
// id,
// name
// }
// }
let fn0 = (id, name) => ({id,name}); //オブジェクトを返す
console.log(fn0(1, "hattie"));
2.関数とクロージャの即時実行
//関数の即時実行
let fn = (function() {
console.log("hello");
})();
// クロージャ
let fn1 = (function() {
return function() {
console.log("world");
}
})();
console.log(fn1);
// 即時関数は関数を返す
// ƒ (){
// console.log("world");
// }
//クロージャ・アロー関数
let fn2 = (() => {
// return () => {
// console.log("hello");
// }
return () => (console.log("hello2"))
})();
fn2(); //hello2
3.=>{戻り値} {}の中身は、関数本体にreturnキーワードがあるかどうかに関わらず、戻り値です。
通常の関数 function(){} がログ付きで呼び出された場合、戻り値がないと undefined と表示されます。
let fn4 = function() {
2 + 3;
}
console.log(fn4());//undefined
let fn5 = () => (3);
console.log(fn5()); //3
アロー関数はスコープを持たず、thisのポイントを変えません。
1.arrow関数を使用せず、bindを使用して thisを呼び出しオブジェクトにバインドします。
let pageHandle = {
id: 123,
// init: function() {
// document.addEventListener('click', function(event) {
// console.log("ここで thisは以下を指す。+ this); //ページをクリックすると、ここにある thisは以下を指している：[object HTMLDocument] pageHandleオブジェクトではない
// })
// }
init: function() {
document.addEventListener('click', function(event) {
console.log("ここで thisは以下を指す。+ this); //ページをクリックすると、ここでの thisは以下を指す：[object Object] pageHandle
}.bind(this)) //bind関数呼び出し元の thisを指すように thisを変更し、内部の thisが関数呼び出し元を指すようにする。
}
};
pageHandle.init();
- 矢印関数は、矢印関数はスコープを持っていません//1。 オブジェクト内のメソッドは、矢印関数で定義されていません//2。矢印関数を持つオブジェクト内のメソッド内の関数は、スコープを生成しない、thisポインティングを変更しません。
let page = {
id: 123,
init: () => {
document.addEventListener('click', (event) => {
console.log(this); //Window {}
this.do(event.type); //this.do is not a function.
//doメソッドはウィンドウではなくページに属しており、ウィンドウを指す thisで呼び出すとエラーになる。
}, false)
},
do: function(type) {
console.log(`イベントタイプに置き換えることはできない：${type},現在のID${this.id}`);
}
}
page.init();
アローファンクション・ノート
1.arrow関数の内部には引数がありません。
let fn8 = (a, b) => {
console.log(this); //Window {}
console.log(arguments); //arguments is not defined
return a + b;
}
fn8();
2.コンストラクタをアロー関数で置き換えることはできません。
通常の関数はオブジェクト
しかし、アロー関数は単なる式であり、構文糖であってオブジェクトではありません。
let Person = function(id, name) { //ここでPersonのP構文は大文字でも小文字でも構わないが、セマンティクス上、大文字にする必要がある。
this.id = id;
this.name = name
};
let p = new Person(1, "hattie");
console.log(p);
let Person1 = () => {
}
let p1 = new Person1(); //Person1 is not a constructor
