一、map方法 （返回一个新的数组 新数组中的元素是经过map函数内部代码块处理过的数据）

testMap() {
		let array = [1, 2, 3, 4];
		let newArray = array.map(item=>{
		return item += 1;
		});
		console.log(newArray);
	}

注意点：map函数内部必须要有return 将数据返回 否则默认返回 undefined

---

---

二、filter方法 （返回 符合过滤条件的元素组成的新数组）

testFilter() {
		let array = [1, 2, 3, 4];
		let newArray = array.filter(item=>{
		return item > 2 ;
		});
		console.log(newArray);
}

---

---

三，forEach方法 （无返回值 遍历数组的每一个元素 适用于不处理数组下标或者不需要使用break的情况）

testForEach() {
		let array = [1, 2, 3, 4];
		let newArray = [];
		array.forEach(item => {
		newArray.push(item+1);
		});
		console.log(newArray );
}

注意 改变item值 并不会改变原数组中的元素值
例如：

testForEach() {
		let array = [1, 2, 3, 4];
		array.forEach(item => {
		item = item +1;
		});
		console.log(array);//1,2,3,4
}

并且forEach函数内 不支持 continue 和 break 操作 （普通for 循环支持这两个操作）
如果想在forEach中使用 continue 操作 可以 使用return 即可 （注意这里的return 功能和 continue一样 是结束本次循环开始下一次循环）
例如：

testForEach() {
		let array = [1, 2, 3, 4];
		let newArray = [];
		array.forEach(item => {
		if(item ===2 ){
		return;
		}
		newArray.push(item);
		});
		console.log(newArray);//1,3,4
}

---

---

四、find方法 （返回符合条件的第一个元素 如果没有符合条件的 返回undefined） findIndex方法（返回符合条件的第一个元素位置 如果没有符合条件的返回 -1）

 testFindAndFindIndex() {
	let array = [1, 2, 3, 4];
	
	let item1 = array.find(item=> item > 3);
	console.log(item1);
	
	let index1 = array.findIndex(item=> item > 3);
	console.log(index1);
	
	let item2 = array.find(item=> item > 4);
	console.log(item2);
	
	let index2 = array.findIndex(item=> item > 4);
	console.log(index2);
}

结果：

---

---

五、some方法 （如果有任何一个符合条件的元素 返回true 否则返回fasle） every方法（所有元素都符合条件才返回true 否则返回false）

testSomeAndEvery() {
	let array = [1, 2, 3, 4];
	
	let flagSome = array.some(item=> item > 3);
	console.log(flagSome);
	
	let indexEvery = array.every(item=> item > 3);
	console.log(indexEvery);

}

结果：

---

---

六、计算总价格 – reduce 方法

// 使用 reduce 
<template>
  <div class="index">
    <h1 ref="myh1"> App 组件 </h1>
    <!-- <LeftModal ref="left"></LeftModal> -->
    <span>总价:{{ total }}</span>
    <br>
    <el-button @click="handleFind">计算</el-button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      arr: [
        {id: 1, name: "西瓜", state: true, price: 10, count: 1},
        {id: 2, name: "榴莲", state: true, price: 80, count: 2},
        {id: 3, name: "草莓", state: true, price: 30, count: 3},
      ],
      state: '',
      total: 0,
    }
  },  
  methods:{
    handleFind(){
      // 计算 state = true 的总价格
      // this.arr.filter(item=>item.state)  // 过滤出 state 为 true 的数据
      // let xxx = this.arr.filter(item=>item.state).reduce((累加的结果, 当前循环项) => { ...., return 处理结果 }, 初始值)
      this.total = this.arr.filter(item=>item.state).reduce((total, item ) => { 
        return total += item.price * item.count
      }, 0)

    }
  }
}

</script>

• 本文标题： JSON常用属性，some,every,map,foreach,map，求和等
• 文章分类：【VueJS】
• 非特殊说明，本文版权归【胡同里的砖头】个人博客 所有，转载请注明出处.

留言评论

• 上一篇：vue el-table 合计指定列，某些列不需要合计的怎么处理
• 下一篇： sqlserver 分组查询 ID合并