【ES6系列】Function

一、ES5中如何处理函数参数的默认值？ES6是如何做的呢？

// 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

// ES6 参数默认值处理
function f(x, y = 7, z = 42) {
  // function f(x, y = 7, z = x + y) { //参数的默认值可以是含有其它参数的表达式

  return x + y + z
}
console.log(f(1)) //50
//console.log(f(1, 8, 43)) //52
//console.log(f(1, undefined, 43)) // 传入undefined跳过赋值，使用默认值

二、ES5中如何处理不确定参数的问题？ES6如何处理？

// ES5中用 arguments 获取函数执行时的参数方法
function sum() {
  let num = 0
  // ES5 伪数组转换方法
  // Array.prototype.forEach.call(arguments, function (item) {
  //   num += item * 1
  // })
  // ES6 伪数组转换方法
  Array.from(arguments).forEach(function (item) {
    num += item * 1
  })
  return num
}

// ES6 中获取函数执行时的参数方法
function sum(...nums) { // 剩余参数 Rest parameter
  let num = 0
  nums.forEach(function (item) {
    num += item * 1
  })
  return num
}
console.log(sum(1, 2, 3, 5)) // 10

// 业务延伸，第一个参数乘以2再加上剩余参数的累加
function sum(base, ...nums) { // 剩余参数 Rest parameter
  let num = 0
  nums.forEach(function (item) {
    num += item * 1
  })
  return base * 2 + num
}
console.log(sum(1, 2, 3)) // 7

 关于函数参数的实际应用业务场景延伸

//业务场景：求三角形边长
function sum(x = 1, y = 2, z = 3) {
  return x + y + z
}
let data = [4, 5, 6]
// console.log(sum.apply(this, data)) // ES5 允许把函数参数收敛到一个数组中调用，并一一对应
console.log(sum(...data)) // ES6 扩展/展开运算符 spread 

二、ES6中的箭头函数是什么？

箭头函数参数和代码块写法：

// 箭头函数无参数时 () 不能省略 有且只有一个参数时可以省略
//let hello = () => { //箭头函数无参数时 () 不能省略
let hello = name => { // 有且只有一个参数时可以省略
  // let hello = (name, city) => {
  console.log('hello world', name)
}
hello('zoe')

// 当代码块只有一个返回值且返回值为一个表达式时可省略{}和return
// let sum = (x, y, z) => x + y + z 
// 如果返回的是一个字面量对象,可省略 return但是对象要用()包裹
let sum = (x, y, z) => ({
  x: x,
  y: y,
  z: z
})
console.log(sum(1, 2, 3))

ES5 函数中的this 和ES6 箭头函数中的 this

// ES5 中的this
let test = {
  name: 'test',
  say: function () {
    console.log(this.name)
  }
}
test.say(); //test 因为say被test调用，所以this指向test

//ES6 中的this
let test = {
  name: 'test',
  say: () => {
    console.log(this.name) // 箭头函数的this是代码this所在位置的对象，而不是调用的对象，这里是window
  }
}
test.say(); 

思考：

1、如何用箭头函数来实现一个数组排序的问题？

2、箭头函数对 this 的处理还有什么妙用？