JavaScript之函数

函数

默认值

function f (x, y, z) {
  if (y === undefined) {
    y = 7
  }
  if (z === undefined) {
    z = 42
  }
  return x + y + z
}

console.log(f(3))

es6

function f6 (x, y = 7, z = 42) {
  return x + y + z
}
  
console.log(f6(1, undefined, 43))

function f6 (x, y = 7, z = x+y) {
  return x *10 + z
}
console.log(f6(1))

不确定参数

function sum (...nums) {
  // Rest paraameter
  let num = 0
  nums.forEach(function (item) {
    num += item * 1
  })
  return num
}

console.log(sum(1, 2, 3, 5))

function sum (base, ...nums) {
  // Rest paraameter
  let num = 0
  nums.forEach(function (item) {
    num += item * 1
  })
  return base * 2 + num
}

console.log(sum(1, 2, 3, 5))

数组参数（三点）

function sum (x, y, z) {
  return x + y + z
}

let data = [4, 5, 6]
console.log(sum.apply(this, data)) // es5
// spered
console.log(sum(...data)) // es

箭头函数

let hello = (name, city) => {
  console.log('hello world', name, city)
}

hello('immoc', '背景')

只有一个函数可以省略括号

let hello = name => {
  console.log('hello world', name)
}

返回表达式省略花括号

let sum = (x, y, z) => x + y + z
console.log(sum(1, 2, 4)) // 7

返回对象要加括号

let sum = (x,y,z) => ({
  x:x,
  y:y,
  z:z
})
console.log(sum(1, 2, 4)) // {x: 1, y: 2, z: 4}

this指向写代码时原来的this

let test = {
  name :'test',
  say : ()=>{
    console.log(this.name,this)
  }
}
test.say()

生成器函数function * (es6)

function * 生成器函数(generator function) 它返回一个 Generator 对象。使用yield打断点 next()方法继续进行

function * loop () {
  for (let i = 0; i < 5; i++) {
    yield console.log(i)
  }
}

const l = loop()

l.next()// 0
l.next()// 1
l.next()// 2

• 赋值

  function * gen () {
    let val
    val = yield 1 // 因为是个数不是输出所以没反应
    console.log(val)
  }
  
  const l = gen()
  l.next()// 找业务和函数结尾
  l.next()// 意思就是业务的返回值是undefined（不是next()）
  

• 数组

  function * gen () {
    let val
    val = yield [1, 2, 3] //{value: Array(3), done: false}
    console.log(val)
  }
  const l = gen()
  console.log(l.next())
  /*-------加星号后---------*/
  function * gen () {
    let val
    val = yield * [1, 2, 3] // {value: Array(3), done: false}
    console.log(val)
  }
  const l = gen()
  console.log(l.next()) // {value: 1, done: false}
  

• 赋值

  function * gen () {
    let val
    val = yield [1, 2, 3]
    console.log(val)
  }
  
  const l = gen()
  console.log(l.next(10)) // 到了yield停止
  // l.return() 业务提前结束
  // // console.log(l.return(100)) //返回value为100
  console.log(l.next(20)) // 业务的返回值为20 外部传到yield的点给val值
  

• 报错

  function * gen () {
    while (true) {
      try {
        yield 1
      } catch (e) {
        console.log(e.message)
      }
    }
  }
  const g = gen()
  console.log(g.next())
  console.log(g.next())
  g.throw(new Error('ss')) // 报错继续运行
  console.log(g.next())
  

• 实例

  抽奖问题

  不能将数据一次性输出希望主持人按一次出一个数字

  function * draw (first = 1, second = 3, third = 5) {
    let firstPrize = ['1A', '1B', '1C', '1D']
    let secondPrize = ['2A', '2B', '2C', '2D', '2E', '2F']
    let thirdPrize = ['3A', '3B', '3C', '3D', '3E', '3F', '3E', '3F']
    let count = 0
    let random
    while (1) {
      if (count < first) {
        random = Math.floor(Math.random() * firstPrize.length)
        yield firstPrize[random]
        count++
        firstPrize.splice(random, 1)
      } else if (count < first + second) {
        random = Math.floor(Math.random() * secondPrize.length)
        yield secondPrize[random]
        count++
        secondPrize.splice(random, 1)
      } else if (count < first + second + third) {
        random = Math.floor(Math.random() * thirdPrize.length)
        yield thirdPrize[random]
        count++
        thirdPrize.splice(random, 1)
      }
    }
  }
  
  let d = draw()
  
  console.log(d.next().value)
  console.log(d.next().value)
  console.log(d.next().value)
  console.log(d.next().value) 
  

• 文献

  What are JavaScript Generators and how to use them

  The Basics of ES6 Generators

  A Practical Introduction to ES6 Generator Functions

  Generator

  [迭代器和生成器](