js中几个高阶函数的使用

最新推荐文章于 2025-11-24 02:17:16 发布

原创最新推荐文章于 2025-11-24 02:17:16 发布 · 149 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #html5

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

<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>