【前端打怪升级日志之ES6篇】玩转函数

学习资料

阮一峰老师《ECMAScript 6 入门》— 函数的扩展文章来源地址https://uudwc.com/A/xGp5A

总结应用

1. 函数参数默认值与对象解构赋值默认值的结合使用

// 场景：方法调用时传参希望只传第二个参数
// 方案1：
function foo({x=1,y=2}){
  console.log(x,y);
}
foo({}) //1 2
foo({x:2}) //2 2
foo({y:3}) //1 3
//注意：只有当函数foo的参数是一个对象时，变量x和y才会通过解构赋值生成
// 方案2:
function foo({x, y=5} = {}){
    console.log(x,y);
}
foo() //undefined 5

//case
function fetch(url, { body = '', method = 'GET', headers = {} } = {}) {
  console.log(method);
}

fetch('http://example.com') // GET

2. 箭头函数

// 与rest参数结合
const nums = (...nums) => nums;
nums(1,2,3,4,5); //[1, 2, 3, 4, 5]

// 使用注意点
// ① 箭头函数没有自己的this对象，普通函数内部的this指向函数运行时所在的对象，箭头函数的this总是指向函数定义生效时所在的对象
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}
var id = 21;
foo.call({ id: 42 });// id: 42
// ② 不可以当作构造函数，也就是说，不可以对箭头函数使用new命令，否则会抛出一个错误
// ③ 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替
// ④ 不可以使用yield命令，因此箭头函数不能用作 Generator 函数。