最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • JS中数组和对象的几种遍历方法

    正文概述 掘金(473616916_qq)   2020-11-28   653

    回调函数的参数依次为处于当前循环的元素(item)、该元素的索引(index)、数组本身(arr),三者均可选。

    1. forEach方法:遍历数组的每一个元素,默认没有返回值。
    <script>
        let arr = ['a', 'b', 'c', 'd']
        arr.forEach((item, index) => {
            console.log(item + '-----' + index);
        })
    </script>
    

    JS中数组和对象的几种遍历方法

    1. filter方法:对数组元素进行条件筛选。返回一个数组,将原数组符合条件的元素放入数组中。(filter方法不改变原数组)
    <script>
        let arr = [{
            id: 1,
            name: 'zhangsan'
        }, {
            id: 2,
            name: 'lisi'
        }, {
            id: 3,
            name: 'wangwu'
        }]
        const newArr = arr.filter(item => {
            return item.id === 2
        })
        console.log(newArr);
    </script>
    

    JS中数组和对象的几种遍历方法

    1. map方法:返回一个数组,这个新数组的每一个元素都是原数组元素执行了回调函数之后的返回值。(map方法不改变原数组。)
    <script>
        let arr = [1, 2, 3, 4, 5]
        const newArr = arr.map(item => {
            return value + 10;
        })
        console.log(newArr);
    </script>
    

    JS中数组和对象的几种遍历方法

    1. some、every方法(返回布尔值):some和every的用法类似,数组的每一个元素都会执行回调函数。当返回值全为true时,every方法返回true,否则返回false。当返回值全为false时,some方法返回false,否则返回true。(some、every方法不改变原数组)
    <script>
        let arr = [1, 2, 3, 4, 5]
        const flag1 = arr.some((value, index) => {
            return value > 3;
        })
        console.log(flag1);
        console.log('---------');
        const flag2 = arr.every((value, index) => {
            return value > 3;
        })
        console.log(flag2);
    </script>
    

    JS中数组和对象的几种遍历方法

    1. reduce方法:reduce(callback(total,item,index,arr),initial)方法有两个参数,第一个参数是一个回调函数(必须),第二个参数是初始值(可选)。数组将上一次的返回值作为下一次循环的初始值,最后将这个结果返回。如果没有初始值,则reduce会将数组的第一个元素作为循环开始的初始值。

    total: 累计值;   item: 当前循环的元素(必须);  inedx: 该元素的索引(可选);  arr:数组本身(可选)
    常用于数组元素的累加、累乘。(reduce方法不改变原数组)

    <script>
        let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
        const sum = arr.reduce((total, value, index) => {
            console.log(total);
            return total + value
        }, 100)
        console.log('sum=' + sum);
        
        let arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
    	const sum_2 = arr2.reduce((total_2, value, index) => {
        	console.log(total_2);
        	return total_2 + value
    	})
    	console.log('sum_2=' + sum_2);
    </script>
    

    JS中数组和对象的几种遍历方法    JS中数组和对象的几种遍历方法

    6.reduceRight: reduceRight() 方法的功能和 reduce() 功能是一样的,不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。

    1. for of方法:具有interator接口的数据,都可以使用 for of 进行遍历。常见的有数组、类数组、Set、Map等(不包含对象)。如果想用for of的方法遍历数组并使用索引 Index,可以用 for of 遍历arr.entries()方法
    <script>
        let arr = ['a', 'b', 'c', 'd']
        for (let [index, value] of arr.entries()) {
            console.log(index + '------' + value);
        }
    </script>
    

    JS中数组和对象的几种遍历方法

    1. for...in:循环遍历对象自身的和继承的可枚举的属性(不含 Symbol 属性)。
    <script>
        let pStr = Symbol('pStr');
        let subStr = Symbol('subStr');
        let pObj = {
            pId: 1,
            [pStr]: '父级的Symbol类型',
            pName: 'zhangsan',
        }
        let obj = {
            subId: 100,
            [subStr]: '子级的Symbol类型',
            subName: '',
            subAge: 20,
            addr: '北京市朝阳区'
        }
        Object.setPrototypeOf(obj, pObj)
        for (const key in obj) {
            console.log(key + ' --- ' + obj[key]);
        }
    </script>
    

    JS中数组和对象的几种遍历方法

    1. Object.keys(obj):返回一个数组,包括对象自身的所有可枚举属性(不含继承的和Symbol 属性)。
    <script>
        let pStr = Symbol('pStr');
        let subStr = Symbol('subStr');
        let pObj = {
            pId: 1,
            [pStr]: '父级的Symbol类型',
            pName: 'zhangsan',
        }
        let obj = {
            subId: 100,
            [subStr]: '子级的Symbol类型',
            subName: 'xiaoliu',
            subAge: 20,
            addr: '北京市朝阳区'
        }
        Object.setPrototypeOf(obj, pObj)
        for (const key of Object.keys(obj)) {
            console.log(key + ' --- ' + obj[key]);
        }
    </script>
    

    JS中数组和对象的几种遍历方法

    1. Object.getOwnPropertyNames(obj):返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)。
    <script>
        let pStr = Symbol('pStr');
        let subStr = Symbol('subStr');
        let pObj = {
            pId: 1,
            [pStr]: '父级的Symbol类型',
            pName: 'zhangsan',
        }
        let obj = {
            subId: 100,
            [subStr]: '子级的Symbol类型',
            subName: 'xiaoliu',
            subAge: 20,
            addr: '北京市朝阳区'
        }
        Object.setPrototypeOf(obj, pObj)
        for (const key of Object.getOwnPropertyNames(obj)) {
            console.log(key + ' --- ' + obj[key]);
        }
    </script>
    

    JS中数组和对象的几种遍历方法

    1. Object.getOwnPropertySymbols(obj):返回一个数组,包含对象自身的所有 Symbol 属。
    <script>
        let pStr = Symbol('pStr');
        let subStr = Symbol('subStr');
        let pObj = {
            pId: 1,
            [pStr]: '父级的Symbol类型',
            pName: 'zhangsan',
        }
        let obj = {
            subId: 100,
            [subStr]: '子级的Symbol类型',
            subName: 'xiaoliu',
            subAge: 20,
            addr: '北京市朝阳区'
        }
        Object.setPrototypeOf(obj, pObj)
        console.log(Object.getOwnPropertySymbols(obj));
    </script>
    

    JS中数组和对象的几种遍历方法 5. Reflect.ownKeys(obj):返回一个数组,包含对象自身的所有属性(不含继承的)。

    Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
    // ['2', '10', 'b', 'a', Symbol()]
    
    1. Reflect.enumerate(obj):返回一个 Iterateor 对象,遍历对象自身的和继承的所有可枚举属性(不含Symol属性),与 for...in 循环相同。

    这几种方法遍历对象的键名,都遵守以下次序规则。
    首先遍历所有数值键,按照数值升序排列。 其次遍历所有字符串键,按照加入时间升序排列。 最后遍历所有 Symbol 键,按照加入时间升序排列。


    起源地下载网 » JS中数组和对象的几种遍历方法

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元