默认参数

ES5中使用参数默认值

function add(a, b) {
    a = a || 10;
    b = b || 20;
	return a + b;
}
add(); // 30

ES6中使用参数默认值

function add(a = 10, b = 20) {
    return a + b;
}
add(); // 30

function add1(a, b = 20) {
    return a + b;
}
add1(30); // 50

默认表达式也可以是一个函数

function add(a, b = getVal(5)) {
    return a + b;
}
function getVal(val) {
    return val + 5
}
add(10); // 20

剩余参数

ES5中参数的使用

function pick(obj) {
    let result = Object.create(null);
    for(let i = 1; i < arguments.length; i++) {
        result[arguments[i]] = obj[arguments[i]]
    }
    return result;
}
let book = {
    title: '11111',
    author: 'xx,
    year: 2020
}
let bookData = pick(book, 'title', 'author'); // {title: "对线技巧", author: "乌兹"}

ES6中的剩余参数

由三个点和一个紧跟的具名参数指定...keys，解决了arguments的问题

function pick(obj, ...keys) {
    console.log(keys); 	// ['title', 'author'], 将多个独立的参数合并到一个数组中
}
let bookData = pick(book, 'title', 'author');

扩展运算符

将一个数组分割，并将各个项作为分离的参数

const arr = [10, 20, 30, 50];
// ES5
console.log(Math.max.apply(null, arr)); // 50
// ES6
console.log(Math.max(...arr)); // 50

箭头函数

基本用法

let add = function(a,b) {
    return a + b;
}
// ==> 箭头函数
let add = (a, b) => {
    return a + b;
}
// -------------------------
let addOne = val => val + 1;
addOne(1); // 2
// ------------------------
let getObj = id => ({id: id, name: "小马哥"})
// ------------------------
let getFn = () => {
    return () => {
        console.log(111);
    }
}
let fn = getFn();
fn(); // 111

箭头函数的this指向

es5中this的指向取决于调用该函数的上下文对象。

箭头函数没有this指向，箭头函数内部this的指向只能通过查找作用域链确定，一旦使用箭头函数，当前就不存在作用域

let pageHandle = {
    id: 123,
    init: function() {
        document.addEventListener('click', function() {
            // this 指向document
            this.doSomeThings(event.type); // doSomeThings is not defined
        }, false)
    },
    // ES5 使用bind修改this指向
    init1: function() {
        document.addEventListener('click', function() {
            // this 指向pageHandle
            this.doSomeThings(event.type); 
        }.bind(this), false)
    },
    // ES6 箭头函数
    init2: function() {
        document.addEventListener('click', event => {
            // this 指向pageHandle
            this.doSomeThings(event.type); 
        }, false)
    },
    init3: () => { 
        document.addEventListener('click', event => {
            // this 将指向pageHandle外层作用域
            this.doSomeThings(event.type); 
        }, false)
    },
    doSomeThings: function(type) {
        console.log(`事件类型：${type}, 当前id:${this.id}`);
    }
}

注意事项

• 箭头函数内部没有arguments

  let getVal = (a, b) => {
      console.log(arguments); // not defined
      return a+b;
  }

• 箭头函数不能使用new关键字实例化对象

  let Person = () => {};
  // function函数 是一个对象，但箭头函数不是对象
  let p = new Person(); 	// Person is not a constructor