vue findIndex()方法

前言: 最近正好写项目用到了这个方法,还是经同事提醒想到的为此找了相关的知识, 希望可以让看到此博客的人有帮助吧,本人也研究的不深非喜勿喷还希望有大神多多指教正文开始.....一、findIndex() 方法的定义和使用原理1.为数组中的每个元素都调用一次函数的执行①. 当数组中的元素在需求条件时返回 true②. 如果没有符合条件的元素返回 -1③. 对于空数组,函数不执行④. 并没有改变

星星超温柔i

16711人浏览 · 2022-03-23 10:32:19

星星超温柔i · 2022-03-23 10:32:19 发布

前言: 最近正好写项目用到了这个方法,还是经同事提醒想到的为此找了相关的知识, 希望可以让看到此博客的人有帮助吧,本人也研究的不深非喜勿喷还希望有大神多多指教

正文开始.....

一、findIndex() 方法的定义和使用原理

1. 为数组中的每个元素都调用一次函数的执行:

①. 当数组中的元素在需求条件时返回为 true,findIndex()会返回符合条件的元素的索引位置,之后的值不会再调用执行函数;

②. 如果没有符合条件的元素返回 -1

③. 对于空数组,函数不执行

④. 并没有改变数组的原始值

2. findIndex() 方法返回的是传入的一个需求条件（函数）符合条件的数组的第一个元素位置；

3. 使用语法:

list.findIndex(function (currentValue, index, arr), thisValue)

参数: currentValue: 每一次查找的数组元素

index: 每一次查找的数组元素的索引

arr: 被查找的数组

4. 使用实例

eg: 获取数组中数字大于4的第一个元素的索引位置

var list = [1, 2, 3, 4, 5, 6, 7, 8, 9];

function checkAdult(num) {

return num >= 18;

}

function myFunction() {

document.getElementById(“test”).innerHTML = list.findIndex(checkAdult);

}

二、findIndex() 方法具体使用

var list = [{id:},{id:2},{id:3},{id:4}]; //定义一个对象数组list

list.findIndex(function(value){ //value是数组中的数组元素

return 需求条件; //需求条件是根据实际需求来制定的，比如需要获取数组第一个元素

}); //如果条件满足，返回为true，就返回的是满足条件的第一个数组元素的下标

2. 使用原理

根据id得到下标, 默认去遍历list集合，将集合中的每个元素传入到function的item里

var index = this.list.findIndex(function(item){

//根据item中的id属性来判断这个item是否是上面id中对应的数据，如果是返回一个true ,否返回false,继续下面的一条数据的遍历，以此类推

return item.id ==id; //若返回true，那么findIndex方法会将这个item对应的id返回到外面接收

});

3. 通过findIndex()找下标索引的方法

var index = this,list.findIndex(item) {

if (item.id = id) {

return true;

}

}

4. 使用实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app {
            width: 600px;
            margin: 10 auto;
        }

        .tb {
            border-collapse: collapse;
            width: 100%;
        }

        .tb th {
            background-color: #0094ff;
            color: #fff;
        }

        .tb td,
        .tb th {
            padding: 5px;
            border: 1px solid #000000;
            text-align: center;
        }

        .add {
            padding: 5px;
            border: 1px solid #000000;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="add">
            编号: <input type="text" v-model="id">
            品牌名称: <input type="text" v-model="name">
            <button @click="add">添加</button>
        </div>
        <div class="add">
            品牌名称: <input type="text">
        </div>
        <div>
            <table class="tb">
                <tr>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>创立时间</th>
                    <th>操作</th>
                </tr>
                <tr v-if="list.length <=0">
                    <td colspan="4">没有品牌数据</td>
                </tr>
                <!-- 循环 -->
                <tr v-for="(item,index) in list" :key="index">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.ctime}}</td>
                    <!-- 使用vue来注册事件时,在dom元素中看不到 -->
                    <td>
                        <a href="javascript:void(0)" @click="del(item.id)">删除</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>
<script src="/js/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            id: 0,
            name: "",
            list: [{
                    "id": 1,
                    "name": "it",
                    "ctime": Date()
                },
                {
                    "id": 2,
                    "name": "白龙",
                    "ctime": Date()
                }
            ]
        },
        methods: {
            add: function () {
                //  将id和name push到list数组中
                this.list.push({
                    "id": this.id,
                    "name": this.name,
                    "ctime": Date()
                })
            },
            // 删除
            del: function(id) {
                // 根据id得到下标 默认去遍历list集合,将集合中的每个元素传入到function的item里
                var index = this.list.findIndex(function (item) {
                    // 根据item中的id属性来判断这个item是否是在上面的id中对应的数据，如果是返回true，否返回false，继续下面一条数据的遍历,以此类推
                    return item.id == id;
                    // 如果返回true,那么findIndex()会在这个item对应的id返回到外面接收
                });
                // 根据下标在list集合中将对应的数据删除
                this.list.splice(index,1);
            }
        }
    })
</script>

效果图: