数组常用方法总结 (5) ：find / findIndex / filter

神膘护体小月半

已于 2023-07-10 15:51:20 修改

阅读量793

点赞数

分类专栏：知识点文章标签：前端 javascript vue.js

于 2023-01-13 14:00:00 首次发布

本文链接：https://blog.csdn.net/weixin_42154189/article/details/128613940

版权

知识点专栏收录该内容

17 篇文章 0 订阅

订阅专栏

文章详细介绍了JavaScript中的数组方法find、some和findIndex，它们用于检测数组元素是否满足特定条件。find返回符合条件的第一个元素，some返回布尔值表示是否存在符合条件的元素，findIndex返回符合条件的元素索引。在处理对象数组时，这些方法可能会影响原数据。文章通过Vue.js的示例代码展示了这些方法的用法和区别。

摘要由CSDN通过智能技术生成

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>