ES6中的函数
2.函数
2.1 函数参数
2.1.1 默认值参数
注:此处的默认参数功能，与Python中的默认参数值相同，当有实参传入的时候使用实参的值，当没有实参传入的时候使用形参的默认值。
// 参数的默认值 不会影响arguments对象,它表示实参的个数、
function add(a, b = 20) {
console.log(arguments);
return a + b;
}
console.log(add(30)); // 50,使用20 作为默认参数值。
2.1.2 剩余参数（剩余运算符）
注：此方法与 Python 中的参数*args相同，会将其他的参数维护到一个元组中，此处的JS会维护到一个数组之中。
// ...keys 接收剩下的参数
function pick(object, ...keys) {
console.log(keys);// ['author', 'year']
let result = Object.create(null);
for (let i = 0; i < keys.length; i++) {
result[keys[i]] = object[keys[i]]
}
return result;
}
let book = {
title: "小猿圈wiki",
author: 'mjj',
year: 2019
}
let bookData = pick(book, "author", "year");
2.1.3 扩展运算符
将数组中的元素进行拆分为多个参数进行传入使用相关的内置函数。
// ES5 若想处理数组中的最大值,使用apply
var arr = [10, 30, 20, 56, 20, 11];
// console.log(Math.max.apply(Math,arr));
// es6 的扩展运算符更方便
console.log(Math.max(...arr));// 将数组中的元素进行拆分为多个参数进行传入使用相关的内置函数。
2.2 箭头函数
2.2.1 箭头函数的形式
箭头函数的定义：使用=>来定义函数的结构(参数,参数)=>{函数体}
// 箭头函数使用 => 来定义 function(){} 等价于 ()=>{}
let add = function(value,value2) {
return value + value2;
}
console.log(add(10,30));// 40
let add1 = (value,value2) => value+value2; //使用箭头函数可以将函数的结构进行简化。
console.log(add1(20,30)); //50
当箭头函数中只有不同参数和不同函数体的时候，可以简化写法。
// 无参数,函数体进返回值,参数的括号必须写。
let fn = () =>"Hello World";
console.log(fn()); // Hello World
// 一个参数,可以省略括号不写。
let fnb = val => val+5; // 可以省略 return 关键字。
console.log(fnb(10));// 15
// 两个参数参考前面的 add() 函数。
let func = (val1,cc) =>{
console.log("Hello 傻狗");
return val1 - cc;
}
console.log(func(50,30));//20
返回对象
// 箭头函数返回对象的时候必须为返回值加上对应的括号。
let getId = id => ({
id: id,
name: 'mjj'
})
var obj = getId(1);
console.log(obj);
箭头函数与闭包
关于闭包的知识：https://zh.javascript.info/closure
let fn2 = (() => {
return () => {
console.log('hello world');
}
})();
fn2();
2.2.2 箭头函数的this
箭头函数中没有 this 的绑定，箭头函数中的this代表上一级的this作用域中的值。
js犯错最多的就是函数中this的绑定，由于函数内部的this值能被改变，这取决于调用该函数的上下文对象
let PageHandler = {
id:123,
init:function(){
document.addEventListener('click', function(event) {
this.doSomeThings(event.type);
},false);
},
doSomeThings:function(type){
console.log(`事件类型:${type},当前id:${this.id}`);
}
}
PageHandler.init();
>>> 运行报错; 因为此时的 this 指向的是当前的作用域(click)中的值,而该对象用没有doSomeThings这个变量。
修改方法，将function(event){}改写为箭头函数的形式。
// 此功能需要在html界面上添加对应的按钮,点击之后才会发生打印。
let PageHandler = {
id:123,
init:function(){
document.addEventListener('click',(event)=> {
this.doSomeThings(event.type);
},false);
},
doSomeThings:function(type){
console.log(`事件类型:${type},当前id:${this.id}`); // 此处使用的是字符串模板，加上this关键字的使用。
}
}
PageHandler.init();
>>> 事件类型:click,当前id:123
2.2.3 箭头函数的注意事项
1.箭头函数中没有arguments对象。
var getVal = (a,b) => {
console.log(arguments);
return a + b;
}
console.log(getVal(1,2));
>>> 报错
2.箭头函数不能使用new关键字来实例化对象
let Person = ()=>{}
var p1 = new Person();
// 理解：箭头函数不是一个对象,可以把箭头函数理解位一个表达式，或者是理解为一个语法糖。
补充:关于箭头函数的this关键字和一些深入的知识请参考https://zh.javascript.info/arrow-functions
