JS 数组特殊用法总结

Posted 2021-11-03 在奋斗的大道

1、通过'...'解构数组，构建新对象添加至数组中。

实战:

var ages = []
ages.push(
...[1, 2].map(item =>({
    name: 'zzg',
    age: item
})) )
console.log(ages)

效果显示:

 对应vue 实例代码:

{
          key: 'status',
          label: '状态',
          type: 'select',
          labelWidth: 70,
          value: '1',
          options: [
            { text: '请选择', value: '' },
            ...['1', '2'].map(m => ({
              text: formatPhotoVideoStatus(m),
              value: m
            }))
          ]
        }

功能说明:status 是一个下来框选择项，下来框数据源为数组对象，格式[{text:'',value:''}...]

通过options 属性配置:通过... 解构数组[1,2],请求后台接口/功能函数封装(formatPhotoVideoStatus)查询遍历数组对象m 对应的text 值。

2、JS实现查找数组中对象的属性值是否存在 

功能详细说明:判断数组对象指定属性是否存在，如果存在返回对应下标，如果不存在返回-1.

实战：

var ages = []
ages.push(
...[1, 2].map(item =>({
    name: 'zzg',
    age: item
})) )
console.log(ages)

function findIndexByKeyValue(arr, key, valuetosearch) {
  for (var i = 0; i < arr.length; i++) {
      if (arr[i][key] === valuetosearch) {
          return i;
      }
  }
  return -1;
}

if(findIndexByKeyValue(ages, 'age', 3) === -1){
    console.log('age:3 不存在')
}
if(findIndexByKeyValue(ages, 'age', 2) === -1){
    console.log('age:2 不存在')
}

效果截图:

对应Vue 实例代码:

 const locationCode = await getDictsTableByCode('LOCATION_CODE')
  if(findIndexByKeyValue(locationCode, 'text', '请选择') === -1){
    locationCode.push({text:'请选择', value:''})
  }


function findIndexByKeyValue(arr, key, valuetosearch) {
  for (var i = 0; i < arr.length; i++) {
      if (arr[i][key] === valuetosearch) {
          return i;
      }
  }
  return -1;
}

功能说明:请求后台接口getDictsTableByCode('LOCATION_CODE') 获取地理区位数组对象，判断返回的数组中是否包含默认对象={text:'请选择'，value:''},如果包含不执行执行数组添加默认对象操作，否则不执行。

2、JS修改数组对象中对象的属性值

实战:

ar ages = []
ages.push(
...[1, 2].map(item =>({
    name: 'zzg',
    age: item
})) )
console.log(ages)

var name ='zcx'
ages.map(m =>m.name=`${name}`)
console.log('修改名称后的数组',ages)

效果截图:

 对应Vue 实例代码:

async getPage () {
      this.loading = true
      try {
        const query = {
          busSid: this.item.sid,
          busType: this.businessType
        }
        const { data: { efiles } } = await ApiAttachmentAttachdownloadPost(query)
        this.data = efiles || []
        this.data.map(m => m.preview = `${window.config.fileUrl}${m.filePath}`)
      } catch (e) {
        console.error(e)
      }
      this.loading = false
    },

功能说明:根据query 参数对象请求接口:ApiAttachmentAttachdownloadPost(query）。提取返回结果efiles 属性值(后台默认返回对象数组)，判断efiles 对象数组是否存在，如果存在将它赋值个当前Vue 实例对象的data 属性值否则填充[]. 遍历this.data数组对象，将preview 属性重新修改为系统全局变量{window.config.fileUrl} +${m.filePath}属性值。