find
- 与前边讲过的 some 类似，用于检测数组的每一项是否符合限定条件。
- 只要遇到一个符合条件的，就会停止循环。
- 在循环中，如果是简单数组，数据不会被改变，如果是对象数组，数据会改变。
- 如果停止了循环，后续对数据的改变也会停止。
- 与 some 不同的是，find 如果遇到了符合条件的元素，返回值为当前元素，而 some 返回的是布尔值 true。如果遍历完数组都没有检测到符合条件的元素，那么 find 返回的是 undefined，some 返回的是 false。
<template>
<div class="myBlock">
<div class="tableBlock">
<div class="title">原始数组</div>
<el-table :data="tableData" :key="num" stripe border>
<el-table-column prop="num" label="序号"> </el-table-column>
<el-table-column prop="value" label="值"> </el-table-column>
</el-table>
</div>
<div class="operate">
<el-button type="success" plain @click="operate"> find </el-button>
</div>
<div class="title" v-if="newObject">操作后的返回值</div>
<div class="newObject">
{{ newObject }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ num: "0", value: "12" },
{ num: "1", value: "18" },
{ num: "2", value: "53" },
{ num: "3", value: "100" },
],
num: 0,
newObject: null,
};
},
watch: {},
mounted() {},
methods: {
operate() {
this.newObject = this.tableData.find((item, index, arr) => {
item.value = Number(item.value) + 1;
console.log("index:" + index + ",item:" + item.value);
return item.value < 50;
});
this.num += 1;
},
},
};
</script>
操作前
操作后
findIndex
- 与 find 类似，用于检测数组的每一项是否符合限定条件。
- 只要遇到一个符合条件的，就会停止循环。
- 在循环中，如果是简单数组，数据不会被改变，如果是对象数组，数据会改变。
- 如果停止了循环，后续对数据的改变也会停止。
- 与 find 不同的是，findIndex 返回的内容为符合条件的元素的索引值。
<template>
<div class="myBlock">
<div class="tableBlock">
<div class="title">原始数组</div>
<el-table :data="tableData" :key="num" stripe border>
<el-table-column prop="num" label="序号"> </el-table-column>
<el-table-column prop="value" label="值"> </el-table-column>
</el-table>
</div>
<div class="operate">
<el-button type="success" plain @click="operate"> findIndex </el-button>
</div>
<div class="title" v-if="newObject">操作后的返回值</div>
<div class="newObject">
{{ newObject }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ num: "0", value: "12" },
{ num: "1", value: "18" },
{ num: "2", value: "53" },
{ num: "3", value: "100" },
],
num: 0,
newObject: null,
};
},
watch: {},
mounted() {},
methods: {
operate() {
this.newObject = this.tableData.findIndex((item, index, arr) => {
item.value = Number(item.value) + 1;
console.log("index:" + index + ",item:" + item.value);
return item.value < 50;
});
this.num += 1;
},
},
};
</script>
操作前
操作后
filter
- 使用限定条件，对数组进行过滤操作。
- 返回值为符合条件的元素的集合，循环不会停止（不管是遇到符合条件的还是不符合条件的）。
- 在循环中，如果是简单数组，数据不会被改变，如果是对象数组，数据会改变。
<template>
<div class="myBlock">
<div class="tableBlock">
<div class="title">原始数组</div>
<el-table :data="tableData" :key="num" stripe border>
<el-table-column prop="num" label="序号"> </el-table-column>
<el-table-column prop="value" label="值"> </el-table-column>
</el-table>
</div>
<div class="operate">
<el-button type="success" plain @click="operate"> filter </el-button>
</div>
<div class="title" v-if="newObject">操作后的返回值</div>
<div class="newObject">
{{ newObject }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ num: "0", value: "12" },
{ num: "1", value: "18" },
{ num: "2", value: "53" },
{ num: "3", value: "100" },
],
num: 0,
newObject: null,
};
},
watch: {},
mounted() {},
methods: {
operate() {
this.newObject = this.tableData.filter((item, index, arr) => {
item.value = Number(item.value) + 1;
console.log("index:" + index + ",item:" + item.value);
return item.value < 50;
});
this.num += 1;
},
},
};
</script>
操作前
操作后
