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

学习资料

阮一峰老师《ECMAScript 6 入门》— 函数的扩展

总结应用

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 函数。

你可能感兴趣的:(前端打怪升级之ES6篇,前端,es6,ecmascript)