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

原创已于 2023-07-10 15:51:20 修改 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

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

知识点专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了JavaScript数组的find、findIndex和filter方法。find方法在遇到符合条件的元素时停止遍历并返回该元素，findIndex则返回符合条件的元素索引。filter方法则返回所有符合条件的元素集合，即使未找到符合条件的元素，find和findIndex也会返回undefined和-1。这三个方法都不会直接修改原数组。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

操作前

操作后

操作后
打印内容