案例代码仓库地址：

案例代码仓库地址 (opens new window)

分支为：javascript

函数默认值

• 带参数默认值的函数

  function add(a, b) {
      a = a || 10
      a = b || 20
      return a + b
  }
  
  console.log(add())
  
  // es5
  function minus(a = 10, b = 20) {
      return b - a
  }
  
  console.log(minus())
  
  function divide(a, b = 20) {
      return a + b
  }
  
  console.log(divide(30)) // a = 30
  

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

  function fb(a, b = getVal(5)) {
      return a + b
  }
  
  function getVal(val) {
      return val + 5
  }
  
  console.log(fb(10))
  
  let book = {
      title: 'es6的教程',
      author: 'wujie',
      year: 2021,
  }
  
  function pick(obj) {
      let result = Object.create(null) // 创造 一个空对象
      for (let i = 1; i < arguments.length; i++) {
          console.log(arguments)
          result[arguments[i]] = obj[arguments[i]]
      }
      return result
  }
  

• 最终使用es6的语法

• 剩余参数：由三个点：...和一个紧跟着的具名参数指定，案例：...keys

• 不过作为参数，必须放在最后面

  function pickes6(obj, ...keys) {
      // console.log(keys)
      let result = Object.create(null)
      for (let i = 0; i < keys.length; i++) {
          result[keys[i]] = obj[keys[i]]
      }
      return result
  }
  
  let bookData = pickes6(book, 'author', 'year', 'title')
  console.log(bookData)
  

扩展运算符

允许将一个数组分割，并将各项作为分离的参数传给函数

• 案例

  const maxNum = Math.max(20, 30)
  console.log(maxNum)
  

  处理数组中的最大值

  const arr = [10, 20, 30, 40, 50, 60, 100]
  console.log(Math.max.apply(null, arr)) // 100
  

• es6 使用扩展运算符

  console.log(Math.max(...arr))
  

es6 的箭头函数

使用=>来定义函数，取代了 function (){} ，等价于() => {}

案例

let add = (a, b) => {
    return a + b
}
let minus = (a, b) => a + b // 直接使用表达式
console.log(add(10, 20))

let getObj = id => {
    return {
        id: id,
        name: '无解',
    }
}

let obj = getObj(1)
console.log(obj)

// 简单写法
let getObject = id => ({ id: id, name: '无解' })
let obj2 = getObjectj(1)
console.log(obj2)

// 闭包函数
let fn = (function() {
    return function() {
        console.log('es6')
    }
})()

fn()

// 使用箭头函数改写
let fn1 = (() => {
    return () => {
        console.log('hello es6')
    }
})()

fn1()

this 指向的问题

提示

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

let PageHandler = {
    id: 123,
    init: function() {
        document.addEventListener('click', function(event) {
            // this.doSomeThings is not a function
            console.log(this) // #document 整个文档
            this.doSomeThings(event.type)
        })
    },
    doSomeThings: function(type) {
        // type 事件类型
        console.log(`事件类型: ${type}，当前id: ${this.id}`)
    },
}
PageHandler.init()

使用es6的方式来解决上述问题

let PageHandler = {
    id: 123,
    // init: function () {
    //     document.addEventListener(
    //         'click',
    //         function (event) {
    //             this.doSomeThings(event.type)
    //         }.bind(this), // 此时的this指向的是 PageHandler
    //         false
    //     )
    // },
    init: function() {
        // 如果这里使用了箭头函数，此时的里面的 this 为整个 window对象
        // 所以给对象每个方法的时候，不要使用箭头函数
        document.addEventListener(
            'click',
            event => {
                // 将函数转换成箭头函数
                // 箭头函数没有this指向
                // 只能通过它的查找作用域链来找
                // 谁调用的 init 函数 => 所以内部的this 就指向了当前的 PageHandler 对象
                this.doSomeThings(event.type)
            },
            false
        )
    },
    doSomeThings: function(type) {
        // type 事件类型
        console.log(`事件类型: ${type}，当前id: ${this.id}`)
    },
}
PageHandler.init()

使用箭头函数的注意事项

警告

使用箭头函数，函数内部没有arguments

let getVal = (a, b) => {
    console.log(arguments)
    return a + b
}
console.log(getVal(1, 3))

警告

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

下面的提示：Person is not a constructor

let Person = () => {}

let p = new Person()

提示

可以认为箭头函数不是一个对象它就是一个函数的语法糖，function函数可以认为是一个对象。