zoukankan      html  css  js  c++  java
  • 遍历方法

    一、数组遍历

      1. forEach方法

     forEach是最简单、最常用的数组遍历方法,它提供一个回调函数,可用于处理数组的每一个元素,默认没有返回值。

     let arr=[1,2,3,4,5];//创建数组

       let res=0;

     arr.forEach(item=>{

      item>=3?res++:res

    });

    console.log(res)//3

    以上是个简单的例子,计算出数组中大于等于3的元素的个数

    回调函数的参数,第一个是处于当前循环的元素,第二个是该元素的下标,第三个元素是数组本身,三个参数均可选

      

      2.map方法

     map从字面上理解,是映射,即数组元素的映射。它提供一个回调函数,参数依次为当前循环的元素,该元素的下标,数组本身,三个参数均可选。

     默认返回一个数组,这个数组的每一个元素都是原数组元素执行了回调函数之后的返回值。

       map方法不改变原数组

     let arr=[1,2,3,4,5];

       let  res=arr.map((item,index)=>{

      return item*(index+1)

    })

    console.log(arr)//[1,2,3,4,5]

    console.log(res)//[1,4,9,16,25]

     3.filter方法

    filter过滤,即对数组元素的一个条件筛选。它提供一个回调函数,参数依次为处于当前循环的元素,该元素的下标,数组本身,三者均可选。默认返回一个数组,原数组的元素

    执行了回调函数之后返回值若为true,则会将这个元素放入返回的数组中。

    filter方法不改变原数组

    let arr=[1,2,3,4,5];

    let res=arr.filter((item,index)=>{

      return item*index>=3

    })

    console.log(arr);//[1,2,3,4,5]

    console.log(res)//[3,4,5]

    以上是一个简单的例子,筛选出原数组中,自身乘以下标大于等于3的元素。

      4.some. every方法

    some方法和every方法,用法非常相似,提供一个回调函数,参数依次为处于当前循环的元素,该元素的下标,数组本身,三者均可选。

    数组的每一个元素都会执行回调函数。

    some方法:只要有一个为true,返回值为true;当全部为false ,返回值为false。

    every方法:只要有一个为false,返回值为false;当全部为true,返回值为true。

    some、every方法不改变原数组

    let arr=[1,2,3,4,5];

    let resSome=arr.some((item,index)=>{

      return item * index >=100

    });

    let resEvery=arr.every((item,index)=>{

      return iitem * index>=10

    })

    console.log(resSome);//false

    console.log(resEvery);//false

      5.reduce方法

    reduce方法有两个参数,第一个参数是一个回调函数(必须),第二个参数是初始值(可选),回调函数有四个参数,依次为本轮循环的累计值,当前循环的元素(必须),该元素的下标(可选),数组本身(可选)。

    reduce方法,会让数组的每一个元素都执行一次回调函数,并将上一次循环时回调函数的返回值作为下一次循环的初始值,最后将这个结果返回。

    如果没有初始值,则reduce会将数组的第一个元素作为循环开始的初始值,第二个元素开始执行回调函数。

    最简单,最常用的场景,是数组元素的累加,累乘。

    reduce方法不改变原数组

    let arr=[1,2,3,4,5];

    let res=arr.reduce((val,item,index)=>{

      return val+item*index;

    },10)

    console.log(res);//50

    6.for of方法

    es6新增了interator接口的概念,目的是对于所有数据结构提供一种统一的访问机制,这种访问机制就是 for of

    即:所有有interator接口的数据,都能用for of 遍历。常见的包括数组,类数组,Set,Map等都有interator接口。

    let arr =[1,2,3,4,5];

    for(let value of arr){

    console.log(value);//1 2 3 4 5 

    }

    二、对象遍历

      1.for in

    主要用于遍历对象的可枚举属性,包括自有属性、继承自原型的属性

    var obj = {"name":"tom","sex":"male"};

    Object.defineProperty(obj, "age", {value:"18", enumerable:false});//增加不可枚举的属性age

    Object.prototype.protoPer1 = function(){console.log("name is tom");};//通过原型链增加属性,为一个函数

    Object.prototype.protoPer2 = 2;通过原型链增加属性,为一个整型值2

    console.log("For In : ");

    for(var a in obj)

    console.log(a);

    枚举:是指对象中的属性可以遍历出来,再简单点就是属性可以列举出来。
    可枚举性决定了这个属性能否被for…in查找遍历到。

    js中基本包装类型的原型属性是不可枚举的,如Object, Array, Number等

    通过Object.defineProperty()方法加的可枚举属性
    enumerable: true 可枚举

    let o = {a: 1, b: 2}
    Object.defineProperty(o, 'c', { 
        value: 3,
        enumerable: true
    })
    for (let key in o) {
        console.log(o[key])
    }
    /*输出*/
    // 1
    // 2
    // 3
    
    console.log(Object.keys(o))
    // ["a", "b", "c"]
    
    console.log(JSON.stringify(o))
    // {"a":1,"b":2,"c":3}

    enumerable: false 不可枚举

    let o = {a: 1, b: 2}
    Object.defineProperty(o, 'c', {
        value: 3,
        enumerable: false
    })
    for (let key in o) {
        console.log(o[key])
    }
    /*输出*/
    // 1
    // 2
    
    console.log(Object.keys(o))
    // ["a", "b"]
    
    console.log(JSON.stringify(o))
    // {"a":1,"b":2}

    2、或者通过原型对象绑定的可以枚举属性(这种枚举类型只有for…in方法可以访问到)

    function Person () {
        this.name = 'Lily'
        this.gender = '女'
    }
    Person.prototype.age = 24
    let people = new Person()
    for (let key in people) {
        console.log(people[key])
    }
    /*输出*/
    // Lily
    // 女
    // 4
    console.log(Object.keys(o))             // ["Lily", "女"]
    console.log(JSON.stringify(people))     // {"name":"Lily","gender":"女"}

    2、Object.keys

    此方法返回一个数组,元素均为对象自有可枚举的属性

    var obj = {"name":"tom","sex":"male"};

    Object.defineProperty(obj, "age", {value:"18", enumerable:false});//增加不可枚举的属性age

    Object.prototype.protoPer1 = function(){console.log("name is tom");};//通过原型链增加属性,为一个函数

    Object.prototype.protoPer2 = 2;通过原型链增加属性,为一个整型值2

    console.log("Object.keys:")

    console.log(Object.keys(obj));

    输出的截图为:

    总结:Object.keys主要用于遍历对象自有的可枚举属性,不包括继承自原型的属性和不可枚举的属性。

    3、Object.getOwnProperty

    此方法用于返回对象的自有属性,包括可枚举和不可枚举的属性

    Object.defineProperty(obj, "age", {value:"18", enumerable:false});//增加不可枚举的属性age

    Object.prototype.protoPer1 = function(){console.log("name is tom");};//通过原型链增加属性,为一个函数

    Object.prototype.protoPer2 = 2;通过原型链增加属性,为一个整型值2

    console.log("Object.getOwnPropertyNames: ");

    console.log(Object.getOwnPropertyNames(obj));

    输出的截图为:

    总结:Object.getOwnProperty主要用于返回对象的自有属性,包括可枚举和不可枚举的属性,不包括继承自原型的属性。

    二、对Array对象类型的遍历

    1、for in

    var arr = [1,2,3,4,5,6];

    for(var a in arr) console.log(a);

    输出的截图为:

    总结:输出为数组对象的index 值。

    2、Object.keys

    var arr = [1,2,3,4,5,6];

    console.log(Object.keys(arr));

    输出的截图为:

    总结:输出为数组对象的index 值。

    3、Object.getOwnProperty

    var arr = [1,2,3,4,5,6];

    console.log(Object.getOwnPropertyNames(arr));

    输出的截图为:

     
  • 相关阅读:
    HTML5 jQuery图片上传前预览
    html5中form表单新增属性以及改良的input标签元素的种类
    PHP邮箱的正则表达式
    PHP手机号码正则表达式
    CSS中设置div垂直居中
    Linux服务器查看内存占用命令
    linux压缩解压文件
    网页是静态还是伪静态?
    帝国cms内容批量替换
    帝国CMS【操作类型】说明详解
  • 原文地址:https://www.cnblogs.com/JSWBK/p/13754911.html
Copyright © 2011-2022 走看看