JS 数组特殊用法总结

喜欢ヅ旅行 2022-09-16 04:47 296阅读 0赞

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

实战:

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

效果显示:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16][]

对应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.

实战：

效果截图:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

对应Vue 实例代码:

> 功能说明:请求后台接口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)

效果截图:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

对应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\}属性值。

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/6706f89823c9418385e151616603f1e7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/cd8c9c6948e1433097210c7cfe3fe291.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/06a34678295f4ce9b1d820bd4b5664c6.png