【笔记】再学JavaScript ES(6-10)全版本语法——参数、箭头函数

---

一、参数默认值

1.ES5

/*
* ES5参数默认值
*/
function f (x, y, z) {
  if (y === undefined) {
    y = 7
  }
  if (z === undefined) {
    z = 42
  }
  return x + y + z
}

console.log(f(1)) // 50
console.log(f(1, 8)) // 51
console.log(f(1, 8, 43)) // 52

2.ES6

/*
* ES6参数默认值
*/
function f (x, y = 10, z = x + y) {
  console.log(f.length) // 1, 没有默认值的参数个数
  return x * y + z
}

console.log(f(1)) // 21
console.log(f(1, 8)) // 17
console.log(f(1, 8, 43)) // 51
console.log(f(1, undefined, 43)) // 53, 跳过某个参数时要赋值undefined

二、处理不定参数

1.ES5

/*
* ES5处理不定参数
*/
function sum () {
  let num = 0
  Array.prototype.forEach.call(arguments, function (item) {
    num += item * 1
  })
  return num
}
console.log(sum(1, 2, 3))

2.ES6

/*
* ES6处理不定参数
*/
function sum (base, ...nums) {
  let num = 0
  // Rest parameter
  nums.forEach(function (item) {
    num += item * 1
  })
  return base * 2 + num
}
console.log(sum(1, 2, 3)) // 7

三、rest参数的逆运算

1.ES5

/*
* ES5参数的逆运算
*/
function sum (x = 1, y = 2, z = 3) {
  return x + y + z
}
let data = [4, 5, 6]
console.log(sum(data[0], data[1], data[2])) // 15
console.log(sum.apply(this, data)) // 15

apply() 方法调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数。

注意：call()方法的作用和 apply() 方法类似，区别就是call()方法接受的是参数列表，而apply()方法接受的是一个参数数组。

2.ES6

/*
* ES6参数的逆运算
*/
function sum (x = 1, y = 2, z = 3) {
  return x + y + z
}
let data = [4, 5, 6]
// spread 数据打散传入
console.log(sum(...data)) // 15

四、ES6的箭头函数

/*
* ES6的箭头函数
*/

// 之前的函数声明方式
function f1 () {}
f1()
let f2 = function () {}
f2()

// 箭头函数
let f3 = () => {}
f3()

// 有且只有一个参数时，参数括号可省略
let f4 = name => {
  console.log(name)
}
f4('oliver')

// 函数只有返回值没有函数体，且返回值是表达式，大括号可省略
let f5 = (x, y, z) => x + y + z
console.log(f5(1, 2, 3)) // 6

// 函数的返回值是对象字面量（object literal）需要将对象体用小括号包裹起来
let f6 = (x, y, z) => ({
  x: x,
  y: y,
  z: z
})
console.log(f6(1, 2, 3)) // {x: 1, y: 2, z: 3}

/*
* this指向问题
*/
// 普通函数：谁调用函数，this就指向谁
let obj1 = {
  name: 'obj',
  say: function () {
    console.log(this.name)
  }
}
obj1.say() // obj

// 箭头函数：在定义时this指向谁，调用时就指向谁
let obj2 = {
  name: 'obj',
  say: () => {
    console.log(this.name)
  }
}
obj2.say() // 不经webpack处理是Window，否则是undefined

// 箭头函数优化数组排序
let arr = [10, 20, 1, 2]
arr.sort((x, y) => x - y)
console.log(arr) // [1, 2, 10, 20]

拓展：

• this 指向详细解析（箭头函数）