前端JS中map foreach reduce filter

1：JS中的map使用

<template>
  <div>
    <h1>JavaScript Array.map()</h1>
    <p>通过对每个数组元素执行函数来创建新数组。</p>
    <p>{{ result }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numbers: [5, 6, 9, 66, 250],
      result: []
    };
  },
  mounted() {
    this.result = this.numbers.map(this.double);
  },
  methods: {
    double(item) {
      return item + 2;
    },
  }
};
</script>

2：JS中filter的使用

<template>
  <div>
    <h1>JavaScript Array.filter()</h1>
    <p>通过对每个数组元素执行函数来创建新数组。</p>
    <p>{{ result }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numbers: [5, 6, 9, 66, 250],
      result: []
    };
  },
  mounted() {
    this.result = this.numbers.filter(this.filtration);
  },
  methods: {
    filtration(item) {
      return item  > 10;
    },
  }
};
</script>

3：JS中join的使用

<template>
  <div>
    <h1>JavaScript Array.join()</h1>
    <p>通过对每个数组元素执行函数来创建新数组。</p>
    <p>{{ result }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numbers: ['我是', '蔡徐坤', '练习两年半', '偶像练习生'],
      result: []
    };
  },
  mounted() {
    this.result = this.numbers.join('');
  },
  methods: {
    
  }
};
</script>

3：JS中push的使用

<template>
  <div>
    <h1>JavaScript Array.push()</h1>
    <p>通过对每个数组元素执行函数来创建新数组。</p>
    <p>{{ numbers }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numbers: ['我是', '蔡徐坤', '练习两年半', '偶像练习生'],
      result: []
    };
  },
  mounted() {
   this.numbers.push('你干嘛')
  },
  methods: {
    
  }
};
</script>

4：JS中reduce的使用

<template>
  <div>
    <h1>JavaScript Array.reduce()</h1>
    <p>通过对每个数组元素执行函数来创建新数组。</p>
    <p>{{ result }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numbers: [5,6,5,516,161,1551],
      result: null
    };
  },
  mounted() {
   this.result = this.numbers.reduce(this.total)
  },
  methods: {
    total(m,n){
       return m + n
    }
  }
};
</script>