js array deduplication and loop objects

Table of contents

1. Array object deduplication

1.1. Need to obtain duplicate data

1.2. Direct filter+findIndex

2. Loop object

3. Multi-layer array object filtering

1. Array object deduplication

1.1. Need to obtain duplicate data

 let persons = [
        {
            "name": "yzq",
            "age": 20,
            "gender": true,
            "height": 10
        },
        {
            "name": "yzq",
            "age": 20,
            "gender": false,
            "height": 20
        },
        {
            "name": "xeon",
            "age": 20,
            "gender": true,
            "height": 30
        },
        {
            "name": "xeon",
            "age": 20,
            "gender": true,
            "height": 180
        },
        {
            "name": "xeon",
            "age": 20,
            "gender": false,
            "height": 180
        },
        {
            "name": "yz1",
            "age": 30,
            "gender": true,
            "height": 180
        }
    ]

    let data = [];
    persons.forEach(item => {
        if (data.length == 0) {
            data.push(item);
        } else {
            let isDiff = true;//是否不同
            for (let i = 0; i < data.length; i++) {
                let dataItem = data[i];
                if (dataItem.name == item.name && dataItem.age == item.age) {
                    /*集合中已经存在相同数据*/
                    isDiff = false;
                    break;
                }
            }
            if (isDiff) {
                data.push(item);
            }
        }
    });
    // persons = data
    console.log(persons, '去重后的数据：', data)

The left side of the picture above is before deduplication, and the right side is after deduplication. 

1.2. Direct filter+findIndex

 persons = persons.filter(
      (obj, index) =>
        persons.findIndex(
          (item) =>
            item.name == obj.name &&
            item.age == obj.age
        ) === index
    );

var newArr = this.IsNull.filter((item, index) => {
                return this.IsNull.indexOf(item) === index;
});

The first type above changes itself, and the second type does not change itself.

2. Loop object

    let obj = {
        a: { "name": "xeon" },
        b: { "age": 20 },
        c: { "gender": false },
    }
    for (item in obj) {
        console.log("obj", item, obj[item]);
    }
    let key = Object.keys(obj)
    let key2 = Object.values(obj)
    let key3 = Object.entries(obj);
    for (let [key, value] of Object.entries(obj)) {
        console.log(key, value);
    }
    console.log(key, key2, key3);

Output result:

(1) Loop the object directly, use for...in... , you can get the keys and values ​​corresponding to obj

(2) With the help of Object.keys() , the keys of the object can be obtained in sequence and turned into an array. 

(3) With the help of Object.values() , the values ​​of the object can be obtained in sequence and turned into an array. 

(4) Use Object.entries() to return an array of key-value pairs for a given object’s own enumerable properties

(5) Use v-for to loop objects in the Vue view:

<div v-for="(val, key, index) in list">

<span>值：{ { val }}</span>

<span>键：{ { key }}</span>

<span>Index: { { index }}</span>

</div>

3. Multi-layer array object filtering

The left side is the original data, and the corresponding object and level are retrieved according to the given id.

<script>
    let arr = [{
        name: '001',
        list: [{
            id: '913072328433205248',
            val: '一组001'
        },
        {
            id: '913072328433101010',
            val: '一组002'
        }
        ]
    }, {
        name: '002',
        list: [{
            id: '1104405913202069504',
            val: '二组001'
        }, {
            id: '1104405913202076246',
            val: '二组002'
        }, {
            id: '1104406110581821440',
            val: '二组003'
        }]
    }, {
        name: '003',
        list: [{
            id: '6666',
            val: '三组001'
        }]
    }]
    let brr = ['1104405913202069504', '913072328433205248', '1104406110581821440']
    //   let brr = ['1104405913202069504', '1104406110581821440']
    // filter():条件是啥，留下的数据就是啥
    for (let i = 0; i < brr.length; i++) {
        arr.map((it) => {
            it.list = it.list.filter((sub, index) => brr.includes(sub.id))
        })
    }
    // 把数组中长度为0的元素删掉==把不为0的留下来
    let b = arr.filter((it) => {
        return it.list && it.list.length != 0
    })
    console.log('最终', b);
</script>