zoukankan      html  css  js  c++  java
  • map函数的使用

    map的使用

    注意: map() 不会对空数组进行检测。

    注意: map() 不会改变原始数组。

    语法:

    array.map(function(currentValue,index,arr), thisValue)
    其中function是必须的。
    currentValue:必须。当前元素的值,就是当前角标的数组数据
    index:可选。当前元素的索引值
    arr: 可选。当前元素属于的数组对象
    <div id="demo"></div> 
    
    window.onload= function(){
         var numbers=[11,22,33,44]
         document.getElementById('demo').innerHTML=numbers.map(function(value){return value*2})
    }
    //显示为 22,44,66,88

    高级一些的用法

    let r = res.map(item => {
        return {//这里也可以把return省略
            title: item.name,
            sex: item.sex === 1? '男':item.sex === 0?'女':'保密',
            age: item.age,
            avatar: item.img
        }
    })

    在vue的项目中有空的数组赋值使用

     export default {
        //import引入的组件需要注入到对象中才能使用
        components: {},
        data() {
          return {
            firstView: true,
            loading: false,
            users: [],
            errorMsg: ''
          }
        },
        mounted() {
          // 订阅消息(search)
          PubSub.subscribe('search', (message, searchName) => {
            const url = `https://api.github.com/search/users?q=${searchName}`
            // 更新数据(请求中)
            this.firstView = false
            this.loading = true
            this.users = []
            this.errorMsg = ''
            axios.get(url).then(response => {
              // 成功了, 更新数据(成功)
              this.loading = false
              this.users = response.data.items.map(item => ({
                url: item.html,
                avatarUrl: item.avatar_url,
                username: item.login
    
              }))
            }).catch(error => {
              // 失败了, 更新数据(失败)
              this.errorMsg = '请求失败',
              this.loading = false
            })
          })
        }
      }

    其中map的用法是给users为空的数组赋值为对应字段的数组。

     this.users = response.data.items.map(item => ({
                url: item.html,
                avatarUrl: item.avatar_url,
                username: item.login
    
              }))
    

      

  • 相关阅读:
    蚂蚁
    N的阶乘
    最小公倍数LCM
    最大公约数GCD
    Truck History(卡车历史)
    亲戚
    [SDOI2011]打地鼠
    连续自然数和
    P4250 [SCOI2015]小凸想跑步
    P4048 【[JSOI2010]冷冻波】
  • 原文地址:https://www.cnblogs.com/fengyangcai/p/13646845.html
Copyright © 2011-2022 走看看