javascript - js中一个数组取其中的几项?

Question

通过v-for遍历数据
比如目前返回了长度为10的数据
arr = [0,1,2,3,4,5,6,7,8,9]
如果取前3项
通过 index > 3就能搞定
现在我想取其中的 1 4 7
怎么处理呢？

看了大家的回答 直接是取 1 4 7
那如果数组长度为20或者更长不是很不灵活
我的想法是如何实现类似3n-2的等差数列算法来取值

Answer 1

建议用computed来获取想要的数据：

<template>
    <div v-for="item in data" :key="item">
        {{ item }}
    </div> 
</template>

<script setup>
    import { ref, computed } from "vue";
    const arr = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
    const data = computed(() => {
        return arr.value.reduce((acc, it) => {
            const i = acc.length + 1;
            if (3 * i - 2 === it) acc.push(it);
            return acc;
        }, []);
    });
</script>

Answer 2

这类问题一般filter解决

Answer 3

很简单啊，通过 filter 搭配 includes 来实现。

var arr = [0,1,2,3,4,5,6,7,8,9]
var result = arr.filter((val, ind) => [1,4,7].includes(ind))
console.log(result)
// log => Array(3) [ 1, 4, 7 ]

---

Edit

哦，原来在 v-for 中使用啊，一样的。

<div v-for="(val, ind) in arr.filter((val, ind) => [1,4,7].includes(ind))" :key="val">
  {{ ind }} - {{ val }}
</div> 

当然用1楼的使用 v-if 来判断也可以，但是并不提倡 v-for 嵌套 v-if。
其实可以写一个函数或者使用 computed 来处理：

<template>
  <div v-for="(val, ind) in filterArr" :key="val">
    {{ ind }} - {{ val }}
  </div> 
  <!-- 或者 -->
  <div v-for="(val, ind) in filterArrFn(arr, [1,4,7])" :key="val">
    {{ ind }} - {{ val }}
  </div> 
</template>
<script>
export default {
  data() {
    return {
      arr: [0,1,2,3,4,5,6,7,8,9]
    }
  },
  computed: {
    filterArr() {
       return this.arr.filter((val, ind) => [1,4,7].includes(ind))
    }
  },
  methods: {
    filterArrFn(list, rules) {
      // 也可以和 computed 一样直接使用 this.arr 来过滤，就看你具体需求了。
      return list.filter((val, ind) => rules.includes(ind))
    }
  }
}
</script>

Answer 4

<div v-for="(item, index) in arr" :key="index">
  <template v-if="index === 1 || index === 4 || index === 7">
    {{ item }}
  </template>
</div>