Vue 学习随笔系列六 -- 数组操作

1、filter() 方法

通过传入的参数，判断拿到的参数与对象中的某个属性是否相等，拿到这个参数对应的对象

// 拿到的某一元素值
this.id
// 对象数组
this.dataList
// data 返回筛选后符合条件的数组
let data = this.dataList.filter(item => {
	return item.id === this.id
})

2、map 遍历

let data = [
{value: 1000, name: 'jack', key: 12}
{value: 2000, name: 'shirt', key: 13}
{value: 3000, name: 'skirt', key: 14}
]
let newArray = [] // 每次操作前，需将数组清空
data.map((item, index) => {
	newArray.push({
		value: item.value,
		name: item.name
	})	
)}
console.log(newArray()
item.map ( i=> {
	return {
	...i, // 获得所有的属性
	status: i.status === "0" ? "已完成" : "未完成" // 改变数据中莫一个属性的值
	}
})

3、查找元素

const user = [
{ name: "李四", id: 1 }, 
{ name: "张三", id: 2  }, 
{ name: "王五", id: 3  }
];
const id= user.find(user => (user.name = "李四")).id;

4、查找数据 – some 方法

<template>
  <div class="index">
    <h1 ref="myh1"> App 组件 </h1>
    <!-- <LeftModal ref="left"></LeftModal> -->
    <span>name:{{ name }}</span>
    <br>
    <el-button @click="handleFind">查找</el-button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      arr: ["小红", "小李", "小张", "小明"],
      name: '',
    }
  },  
  methods:{
    handleFind(){
      this.arr.some((item, index) => {
        if(item === "小明") {
          console.log("item==", item, index)
          this.name = item
          return item
        }
      })
    }
  }
}
  
</script>

5、是否每一项都满足条件-- every方法

<template>
  <div class="index">
    <h1 ref="myh1"> App 组件 </h1>
    <!-- <LeftModal ref="left"></LeftModal> -->
    <span>state:{{ state }}</span>
    <br>
    <el-button @click="handleFind">全选</el-button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      arr: [
        {id: 1, name: "西瓜", state: true},
        {id: 2, name: "榴莲", state: true},
        {id: 3, name: "草莓", state: true},
      ],
      state: '',
    }
  },  
  methods:{
    handleFind(){
      // 判断 每一项的 item.state 是否为 true
      this.state = this.arr.every( item => item.state)
      console.log("state==", this.state)
    }
  }
}
  
</script>

7、计算总价格 – reduce 方法

// 使用 forEach
<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).forEach(item => {
        this.total += item.price * item.count
        console.log("total==", this.total)
      })
    }
  }
}
  
</script>

// 使用 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>