JS遍历数据(数组,对象)的几种方式each,forEach,filter,some,from,find,includes等的用法和区别

看到数组就想遍历哈哈,
首先是最传统的for循环进行遍历:

let arr = [1, 2, 3]
        for (let i = 0; i < arr.length; i++) {

        }

对数据几乎所有的操作都可以使用for循环进行遍历来完成,如去重,拼接,筛选,排序等等
最典型的冒泡排序就是使用for循环进行的,在这里:https://blog.csdn.net/weixin_44134588/article/details/107093344

紧接着是遍历对象,for key in 对象

 let obj = {
            uname: '张三',
            age: 18
        }
        for (let k in obj) {
            console.log(k);
            console.log(obj[k]);
        }

其中k为属性名,obj[k]为属性值
打印出来的数据是

在jquery中有each方法可以遍历数组:

// each方法
        let arr = ['第一', '第二', '第三']
        $.each(arr, function (index, ele) {
            console.log(index);
            console.log(ele);
            console.log('--------');
        })

其中第一个参数是遍历出来的内容,第二个参数表示序列号,第三个参数是数组本身,用不到可以不写
打印结果为:

原生js跟jquery中用法和功能相同的是forEach方法

// forEach 方法
        let arr = ['第一', '第二', '第三']
        arr.forEach(function (ele, index, arr) {
            console.log(ele);
            console.log(index);
            console.log(arr);
            console.log('--------');
        })

结果跟上面相同:

filter方法遍历(筛选数组):

 let arr = [1, 2, 3]
        let newArr = arr.filter(function (value) {
            return value > 1;//满足条件的值返回
        })
        console.log(newArr);

参数可以有三个,分别是就是数组元素,索引号,自身
打印结果为:

filter方法主要是用来筛选数组,返回值也是一个数组

some方法

 let arr = [1, 2, 3]
        let result = arr.some(function (value) {
            return value == 2
        })
        console.log(result);

some的参数也是数组元素值,返回值是布尔型的
存在满足条件为true,否则为false
返回true则终止遍历操作;
打印值为:

js from方法:
from主要作用是将伪数组转化为数组并对其数字类型的值进行操作;

 let arrLike1 = {
            '0': '1',
            '1': '2',
            '2': '3',
            '3': '4',
            'length': 4
        }
        let arr1 = Array.from(arrLike1, num => num * 2);
        console.log(arr1);

arrLike1是一个伪数组,以对象的形式存在;
使用Array.from进行操作,一共两个参数,前者为要操作的伪数组,后者为一个x2的函数,(只能对数字类型的值操作)
打印结果为:

将伪数组转化为了数组,并且原伪数组的值*2;

js find方法

//find方法
        let ary = [{
            id: 1,
            age: 15
        }, {
            id: 2,
            age: 22
        }, {
            id: 2,
            age: 18
        }]
        let target = ary.find(item => item.id == 2) //返回值是数组元素
        console.log(target); //找到就返回

find 方法只有一个参数,参数为数组元素,函数返回值也是数组元素,找到符合条件的元素即返回,因此target的值为{id:2,age:18}
打印值:

由此可知,查找到id为2的元素后,就不再往后查找了;

js includes方法

 //includes 方法

        let arr = [1, 2, 3]
        let result = arr.includes(2); //返回值为布尔类型
        console.log(result);

判断数组中是否存在某个值,
返回值为布尔类型,

Set数据结构
数组去重,add添加元素,delete删除元素,has判断是否存在,clear清空

 let arr = [1, 1, 2, 4, 21, 12, 4, 2];
        const s1 = new Set(arr); //set方法进行数组去重
        console.log(s1);
        s1.add('3').add('adas')
        console.log(s1);
        console.log(s1.size);

        //删除用delete  方法
        const r1 = s1.delete(4)
        console.log(s1);
        console.log(r1);
        //判断是否存在某个成员
        const r2 = s1.has('2'); //返回值为布尔类型
        const r3 = s1.has(2); //区分字符串和数字
        console.log(r2);
        console.log(r3);

        //清空数据结构中的值  使用clear方法
        //s1.clear();
        //console.log(s1);

打印值:

清空后为空

总结:
根据效率来说,some和find效率最高,因为找到值之后即终止,不再遍历剩余的

方法	返回值	参数个数	作用
forEach	无	三个(数组元素,索引号,数组本身)	迭代,遍历所有元素
–	–	–	–
each(jQuery)	无	三个(数组元素,索引号,数组本身)	迭代,遍历所有元素
–	–	–	–
some	布尔类型(true/false)	三个(数组元素,索引号,数组本身	判断是否存在某个元素
–	–
filter	新数组	1个(数组元素)	筛选数组
–	–
find	数组元素	数组元素	可以查找数组对象里面的属性值
–	–
includes	布尔类型	无	判断是否存在某个元素