1.参数默认值

在书写形参时，直接给形参赋值，赋的值即为默认值，这样一来，当调用函数时，如果没有给对应的参数赋值，则会自动使用默认值。

// 原始
function sum(a, b, c) {
    b = b === undefined && 1;
    c = c === undefined && 2;
    return a + b + c;
}
// console.log(sum(10));
// ES6
function sum1(a, b=1, c=2) {
    return a + b + c
}
console.log(sum1(10,undefined,undefined));

2.参数默认值对arguments的影响

只要给函数加上参数默认值，该函数会自动变成严格模式下的规则，arguments和形参脱离

3.暂时性死区

ES6中，形参和let或const声明一样，具有作用域，并且根据参数的声明顺序，存在暂时性死区。

4.传递不定长参数

function sum(args){
  let sum = 0;
  for (let i = 0;i<args.length;i++){
    sum += args[i];
  }
return sum;
}
console.log(sum([5,6,9]));

function sum(){
    let sum = 0;
    for (let i = 0;i<arguments.length;i++){
        sum += arguments[i];
    }
    return sum;
}
console.log(sum(5,6,9));

但是通过arguments获取参数，会有以下缺陷：
1.如果和形参配合使用，容易导致混乱
2.从语义上，使用arguments获取参数，由于形参缺失，无法从函数定义上理解函数的真实意图
ES6中的剩余参数可以用于收集末尾的所有参数，将其放置到一个形参数组中。

function sum(...args){
    let sum = 0;
    for (let i = 0;i<args.length;i++){
        sum += args[i];
    }
    return sum;
}
console.log(sum(5,6,9,9));

注意：一个函数只能出现一个剩余参数；若一个函数有剩余参数，那么这个剩余参数必须是最后一个参数

5.展开运算符

const arr1 = [3, 67, 8, 5];
//克隆arr1数组到arr2
const arr2 = [0, ...arr1, 1];
console.log(arr2, arr1 === arr2)

const obj1 = {
    name: "萌新",
    age: 18,
    loves: ["编程", "游戏","电影"],
    address: {
        country: "中国",
        province: "江苏",
        city: "昆山"
    }
}
// 浅克隆到obj2
const obj2 = {
    ...obj1,
    name: "小白",
    address: {
        ...obj1.address
    },
    loves: [...obj1.loves, "电影"]
};
console.log(obj2)

6.明确函数

function Person(firstName, lastName) {
    if(!(this instanceof Person)){
        throw new Error("该函数不是通过new的方式调用函数")
    }
    this.firstName = firstName;
    this.lastName = lastName;
    this.fullName = `${firstName} ${lastName}`;
}
const p2 = Person("萌", "新");
console.log(p2);

ES6提供了一个特殊的API，可以使用该API在函数内部，判断该函数是否使用了new来调用 new.target 该表达式得到的是：如果没有使用new来调用函数，则返回undefined 如果使用new调用函数，则得到的是new关键字后面的函数本身

function Person(firstName, lastName) {
    if (new.target === undefined) {
        throw new Error("该函数没有使用new来调用")
    }
    this.firstName = firstName;
    this.lastName = lastName;
    this.fullName = `${firstName} ${lastName}`;
}
const p3 = Person.call(new Person(), "萌", "新")
console.log(p3);S

7.箭头函数

this指向：通过对象调用函数，this指向对象直接调用函数，this指向全局对象通过new调用函数，this指向新创建的对象通过apply，call，bind调用函数，this指向指定的数据 DOM事件函数，this指向事件源

const obj = {
    count:0,
    start:function (){
        setInterval(function (){
            console.log(this);
            this.count++
            console.log(this.count++);
        },1000)
    },
    regEvent:function (){
        window.onclick = function (){
            console.log(this.count);
        }
    }
}
console.log(obj.start());
console.log(obj.regEvent());

箭头函数是一个函数表达式，理论上任何使用函数表达式的场景，都可以使用箭头函数

// 完整语法
(参数1, 参数2, ...)=>{
    //函数体
}
// 如果参数只有一个，可以省略小括号
参数 => {
}
// 如果箭头函数只有一条返回语句，可以省略大括号，和return关键字
参数 => 返回值

const obj = {
    count: 0,
    start: function () {
        setInterval(() => {
            this.count++;
            console.log(this.count);
        }, 1000)
    },
    regEvent: function () {
        window.onclick = () => {
            console.log(this.count);
        }
    },
}
console.log(obj.start());
console.log(obj.regEvent());

说明：箭头函数中，不存在this、arguments、new.target，如果使用了，则使用的是函数外层的对应的this、arguments、new.target 箭头函数没有原型箭头函数不能作用构造函数使用

应用场景： 1.临时性使用的函数，并不会刻意调用它，比如： 1.事件处理函数 2.异步处理函数 3.其他临时性的函数 2.为了绑定外层this的函数 3.在不影响其他代码的情况下，保持代码的简洁，最常见的，数组方法中的回调函数

02 编程笔记

04 函数