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