【es】map方法

原创已于 2022-01-22 20:58:57 修改 · 791 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#es

于 2021-10-01 23:19:26 首次发布

es 专栏收录该内容

2 篇文章

订阅专栏

这篇博客探讨了Vue.js中`map`方法的两种基本用法。首先展示了如何在数组中简单地对每个元素进行操作，如将数字数组转换为每个元素加1的新数组。接着，详细解释了如何使用`map`处理对象数组，将其转换为键值对的新数组。示例代码分别演示了直接在`map`内创建新对象和通过额外的变量存储结果的两种方法。

1.map 初级用法

<template>
  <div class="home">
  1111111111111
  </div>
</template>
<script>
export default {
  created(){
    console.log(this.mapFun());
  },
  data(){
    return{
      word:[1,2,3,4]
    }
  },
  methods:{
    add(itme){ 
      return 1+itme
    },
    mapFun(){
      //处理word 每一项加了一个1
      return this.word.map(this.add)
    }
  }
}
</script>

<template>
  <div class="home">
  1111111111111
  </div>
</template>
<script>
export default {
  created(){
    console.log(this.mapFun());
  },
  data(){
    return{
      word:[{name:"1",age:"12"},{name:"2",age:"15"},{name:"3",age:"13"}]
    }
  },
  methods:{
    mapFun(){
      //处理成数组p[{1:12},{2:15},{3:13}]
    return  this.word.map((item)=>{
        let obj ={};
        obj[item.name]=item.age
        console.log(obj);
        return obj
      })
    },
    mapFun2(){
       //处理成数组p[{1:12},{2:15},{3:13}]
      let ob =[];
      this.word.map((item)=>{
        let obj ={};
        obj[item.name]=item.age
        ob.push(obj);
      })
      return ob 
    }
  }
}
</script>