js中几个高阶函数的使用

最新推荐文章于 2024-10-02 05:39:15 发布

Fatfish_tree

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量100

点赞数

文章标签： javascript html html5

本文链接：https://blog.csdn.net/Fatfish_tree/article/details/120064423

版权

该博客展示了如何在 Vue.js 中筛选特定年龄的数据、计算年龄总和以及进行数据对象重命名。通过 `dataList` 数组，作者使用过滤、映射和reduce方法来实现这些操作，并在模板中动态渲染结果。此外，还讨论了数据分组和按年龄进行归类的方法。

摘要由CSDN通过智能技术生成

<template>
  <div class="test">
    <p>--------原始数据-----------</p>
    <br><br>
    <div>{{ dataList }}</div>
    <br><br>

    <p>--------筛选年龄为30岁的数据-----------</p>
    <br><br>
    <div>{{ dataList.filter(item => item.Age === 30) }}</div>
    <br><br>

    <p>--------筛选年龄为30岁的总人数-----------</p>
    <br><br>
    <div>{{ dataList.filter(item => item.Age === 30).length }}</div>
    <br><br>

    <p>---------所有的年龄相加的和----------</p>
    <br><br>
    <div>{{ result }}</div>
    <br><br>
    <p>-----------改变名称------------</p>
    <br><br>
    <div>{{ changeName }}</div>

  </div>
</template>

<script>
export default {
  name: 'Test',
  data () {
    return {
      dataList: [
        {
          'ID': 1,
          'name': '张三1',
          'Age': 40
        },
        {
          'ID': 2,
          'name': '张三2',
          'Age': 20
        },
        {
          'ID': 3,
          'name': '张三3',
          'Age': 30
        },
        {
          'ID': 4,
          'name': '张三4',
          'Age': 20
        },
        {
          'ID': 5,
          'name': '张三5',
          'Age': 40
        },
        {
          'ID': 6,
          'name': '张三6',
          'Age': 20
        },
        {
          'ID': 7,
          'name': '张三7',
          'Age': 40
        },
        {
          'ID': 8,
          'name': '张三8',
          'Age': 20
        },
        {
          'ID': 9,
          'name': '张三9',
          'Age': 30
        }],
      result: 0,
      changeName: ''
    }
  },
  created () {
    this.addAge()
    this.getGroup(this.dataList, 'Age')
    this.rename()
  },
  methods: {
    //计算年龄总和
    addAge () {
      this.result = this.dataList.map(item => item.Age).reduce((pre, n) => pre + n)
    },
    //按照年龄进行分组
    getGroup () {
      //给年龄去重并排序
      const result = [...new Set(this.dataList.map(item => item.Age))].sort()//20,30,40
      //相当于给属性进行重命名
      //item=20,30,40
      let res = result.map(item => {
        return {
          age: item,
          list: this.dataList.filter(pra => pra.Age === item),
        }
      })
      console.log(JSON.stringify(res))
    },
    rename () {
      this.changeName = this.dataList.map(item => {
        return {
          reName: item.name,
          reId: item.ID,
          reAge: item.Age
        }
      })
      console.log(this.changeName)
    }
  }
}
</script>

<style scoped>
p {
  font-size: 20px;
  font-weight: bold;
}
</style>