关于javascript:es6项目使用

1.判断条件同时蕴含值

[1, 4].includes(this.settleDetail.settleBillType)

2.查找是否有蕴含条件的值
// 获取枚举公共函数

getCommissionType(data, type) {
  const current = data.find(item => item.type === type)
  return current ? current.values : []
}

3.数组遍历

Object.keys(typeLib).forEach(() => {
    if (incomeType) {
      typeLib[incomeType].forEach((item) => {
        if (item.billType === billType) {
          type = item.type
        }
      })
    }
})

4.判断对象中如果没有值，则删除key

Object.keys(params).forEach((key) => {
    if (!params[key]) {
      delete params[key]
    }
})

5.解构赋值

//解构赋值
const { searchParams = {} } = this.$refs.billSearchRef
this.searchParams = searchParams
//三点运算符应用
const { data = [] } = await this.$api[this.tableForm[this.type]]({
  ...this.searchParams,
  ...this.page
})

6.判断是否是数组

Array.isArray(item.value)

7.slot-scope应用

<el-table :data="relatedList" border>
    <el-table-column
      v-for="(item, index) in relatedTable.slice(2)"
      :key="index"
      :width="item.width || ''"
      :fixed="item.fixed"
      :prop="item.prop"
      align="center"
      :label="item.label"
    >
      <template slot-scope="scope">
        <template v-if="item.scoped && item.prop === 'operate'">
          <el-button type="primary" size="small" @click="bindViewDetail(scope.row)">查看明细</el-button>
          <el-button type="danger" size="small" @click="bindRemoveBtn">删除</el-button>
        </template>
        <span v-else>{{ scope.row[item.prop] }}</span>
      </template>
    </el-table-column>
  </el-table>
  

8.substr与substring区别

substr(start,length)
substring(start,end)
console.log('2021.08.04'.substr(2, 6))
21.08.
console.log('2021.08.04'.substring(2, 6))
21.0

9.动静增加class

:class="['pending', { 'hidden-bottom': showBottomArea}]"

10.promise用法

loadPlayer () {
  return new Promise((resolve, reject) => {
    if (!this.options.videoId && !this.options.videoSrc) {
      throw Error('短少videoId或者videoSrc')
    }

    if (window.tvp) {
      return resolve(window.tvp)
    }
    const path = 'https://imgcache.qq.com/tencentvideo_v1/tvp/js/tvp.player_v2.js'
    const oScript = document.createElement('script')
    const oHead = document.getElementsByTagName('head')[0]
    oScript.type = 'text/javascript'
    oScript.src = path
    oHead.appendChild(oScript)
    oScript.onload = () => {
      resolve(window.tvp)
    }
  })
}

promise.all
Promise.all([...filter, this.$refs.base.validate()]).then(() => {
  this.saveCommission()
}).catch(() => {})

11.async await用法

async searchShort(params) {
  this.loadingInstance(true)
  try {
    const [a, b] = await Promise.all([this.$api.queryAutoShortInsurance(params), this.$api.queryHandShortInsurance(params)])
    this.shortOption.data = [{
      ...a.data.detail,
      ...b.data.detail
    }]
  } catch (error) {
    this.$sentryLog(error)
    this.$message.error(error.msg || '零碎谬误')
  } finally {
    this.loadingInstance(false)
  }
},
async searchLong(params) {
  this.loadingInstance(true)
  try {
    const { data } = await this.$api.queryLongInsurance(params)
    this.longOption.data = [data.detail]
  } catch (error) {
    this.$sentryLog(error)
    this.$message.error(error.msg || '零碎谬误')
  } finally {
    this.loadingInstance(false)
  }
}

12.