前端函数式演进
上QQ阅读APP看书,第一时间看更新

2.4.2 数组方法和链式调用

我们在使用数组方法时,经常会使用链式调用。使用链式调用编写的代码能更直观地展示数据的处理过程,使用链式调用的原因是让数组方法能返回仍是数组形式的数据主体。

我们可以参考代码清单2-10中的代码实现来学习数组方法和链式调用。

代码清单2-10 数组方法和链式调用示例


// 数组方法和链式调用
// 1 实现“展示数字时添加千分位符”功能
// tools/untils.js
const addThousandSeparator = strOrNum => {
  return (parseFloat(strOrNum) + '')
          .split('.')
          .map((x, idx) => {
            if (!idx) {
              return x.split('')
                      .reverse()
                      .map((xx,idxx) => (idxx && !(idxx % 3)) ? (xx + ',') : xx)
                      .reverse()
                      .join('')
            } else {
              return x
            }
          })
          .join('.')
}

console.log(addThousandSeparator(123345678889))
console.log(addThousandSeparator(11.1234567))
console.log(addThousandSeparator(1))

// 2 答题时倒计时功能的简单实现
// pages/puzzle/PuzzlePage.js
const countToNumber = (number, times) => {
  setTimeout(() => {
    this.setState({
      count: number
    })
    if (number === 0) {
      this.setState({
        usable: Object.assign(this.state.usable, {
          start: false,
          retry: true,
          submit: false,
          input: false,
        })
      })
      this.counting = false
    }
  }, times * 1000)
}
Array
  .apply(null, { length: startCount })
  .map((x, idx) => idx + 1)
  .forEach(x => {
    countToNumber(startCount - x, x)
  })