1、递归

export const foreachTree = (data, callback, childrenName = 'children') => {
  for (let i = 0; i < data.length; i++) {
    callback(data[i])
    if (data[i][childrenName] && data[i][childrenName].length > 0) {
      foreachTree(data[i][childrenName], callback, childrenName)
    }
  }
}

查找 id 为 9 的节点

const treeData = [{id: 1, label: '一级',children: [{id:4,label:'二级'}]}...]
let result
foreachTree(data, (item) => {
  if (item.id === 9) {
    result = item
  }
})
console.log('result', result)  // {id: 9,label: "三级 1-1-1"}

2、金额格式化展示

• {number} number：要格式化的数字
• {number} decimals：保留几位小数
• {string} dec_point：小数点符号
• {string} thousands_sep：千分位符号

export const moneyFormat = (number, decimals, dec_point, thousands_sep) => {
  number = (number + '').replace(/[^0-9+-Ee.]/g, '')
  const n = !isFinite(+number) ? 0 : +number
  const prec = !isFinite(+decimals) ? 2 : Math.abs(decimals)
  const sep = typeof thousands_sep === 'undefined' ? ',' : thousands_sep
  const dec = typeof dec_point === 'undefined' ? '.' : dec_point
  let s = ''
  const toFixedFix = function (n, prec) {
    const k = Math.pow(10, prec)
    return '' + Math.ceil(n * k) / k
  }
  s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.')
  const re = /(-?\d+)(\d{3})/
  while (re.test(s[0])) {
    s[0] = s[0].replace(re, '$1' + sep + '$2')
  }

  if ((s[1] || '').length < prec) {
    s[1] = s[1] || ''
    s[1] += newArray(prec - s[1].length + 1).join('0')
  }
  return s.join(dec)
}

// 示例
moneyFormat(10000000) // 10,000,000.00
moneyFormat(10000000, 3, '.', '-') // 10-000-000.000

3、搜索内容设置高亮

// datalist：待筛选内容    val：搜索输入框内容    return 对象数组
 getHighlight(datalist, val) {
     let  textList = datalist.split('')
     let  keyList = val.split('')
     let  list = []
     for (let  j = 0; j < textList.length; j++) {
         let  obj = {
             set:  false, // 是否高亮
             val:  textList[j]
          }
         list.push(obj)
    }
     for (let  k = 0; k < keyList.length; k++) {
         list.forEach((item) => {
             if (item.val === keyList[k]) {
                 item.set = true
            }
          })
    }
     return  list
  }

template for 循环显示内容

<text style="{{item.set  ?  'color:#FFBB2B;'  :  ''}}">{{item.val}}</text>

4、配置可选链

安装@babel/plugin-proposal-optional-chaining

babel.config.js 配置

plugins:  ["@babel/plugin-proposal-optional-chaining"]

可在 computed,methods 中正常使用?.

想在 template 中使用

export const chaining = {
  install(vue) {
    const optionalChaining = (obj, ...rest) => {
      let tmp = obj
      for (let key in rest) {
        let name = rest[key]
        tmp = tmp?.[name]
      }
      return tmp || ''
    }
    // 添加实例方法
    vue.prototype.$$ = optionalChaining
  }
}

main.js 全局引入

// template 直接使用 可选链
import { chaining } from '@/utils/common'
Vue.use(chaining)

具体使用

<template>
    <div>{{ $$(orderInfo,  'a',  'b')  ||  '无'  }}</div>
</template>

5、函数柯里化

• 柯里化（Currying）,维基百科上的解释是，把接受多个参数的函数转换成接受一个单一参数的函数

  • 最简单的demo

      // 柯里化
      const foo = function(x) {
          return (y) {
              return x + y
          }
      }
      foo(3)(4)       // 7
  
      // 普通方法
      var add = function(x, y) {
          return x + y;
      }
      add(3, 4)       // 7

• 使用场景：

  • 使用场景之一：减少重复传递不变的部分参数
  • 将柯里化后的callback参数传递给map, filter等函数，重复利用。