关于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.