zoukankan      html  css  js  c++  java
  • JavaScript中的遍历

    一、对象遍历

    ES6一共有5种方法可以遍历对象的属性。

    1、for-in

    在使用for-in循环时,返回的是所有能够通过对象访问的、可枚举的(enumerated)属性,其中既包括存在于实例中的属性,也包括存在于原型中的属性,不含Symbol属性。屏蔽了原型中不可枚举属性(即设置了[[DontEnum]]标记的属性)的实例属性也会在for-in循环中返回,因为规定,所有开发人员定义的属性都是可枚举的——只有IE除外。

    2、Object.keys(obj)

    Object.keys()方法取得对象上所有可枚举的实例属性。该方法接收一个对象为参数,返回一个包含所有可枚举属性的字符串数组,不含Symbol属性。

    3、Object.getOwnPropertyNames(obj)

    Object.getOwnPropertyNames()得到所有实例属性,无论是否可枚举,不含Symbol属性。

    4、Object.getOwnPropertySymbols(obj)

    Object.getOwnPropertySymbols(obj)返回一个数组,包含对象自身的所有 Symbol 类型的属性(不包括继承的属性)

    5、Reflect.ownKeys(obj)

    Reflect.ownKeys(obj)方法用于返回对象的所有实例属性,基本等同于Object.getOwnPropertyNames与Object.getOwnPropertySymbols之和,包含Symbol属性。

    以上的5种方法遍历对象的属性,都遵守同样的属性遍历的次序规则

    l  首先遍历所有属性名为数值的属性,按照数字排序

    l  其次遍历所有属性名为字符串的属性,按照生成时间排序

    l  最后遍历所有属性名为Symbol值的属性,按照生成时间排序

    二、数组遍历

    数组实际上也是一种对象,所以也可以使用上面对象遍历的任意一个方法(但要注意尺度),另外,数组还拥有其他遍历的方法。

    l  最基本的 for 循环、while 循环遍历(缺陷是多添加了一个计数变量)

    l  ES6 引入:for…of 

    1、数组内置的一些遍历方法:

    1.1、forEach()方法:对数组中的每一项运行给定函数。这个方法没有返回值。

    var numbers=[1,2,3,4,5];
    
        numbers.forEach(function(item,index,array){
    
        console.log("item:"+item+" index:"+index+" array:"+array);
    
    });

    结果:

     

    1.2、map()方法:对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组,原数组不变。

    var numbers=[1,2,3,4,5];
    
        var result=numbers.map(function(item,index,array){
    
        return item*2;
    
    });
    
    console.log(numbers);
    
    console.log(result);

    结果:

     

    2、一些有用的数组内置方法

      2.1、every()方法:对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。

      2.2、filter()方法:对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组。

      2.3、some()方法:对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true。

      2.4、find()方法:返回第一个通过测试的元素

      2.5、findIndex()方法: 返回第一个通过测试的元素的索引

      2.6、reduce()方法: 习惯性称之为累加器函数,对数组的每个元素执行回调函数,最后返回一个值(这个值是最后一次调用回调函数时返回的值)

        这个函数的回调函数有 4 个参数

          accumulator: 上一次调用回调函数返回的值

          currentValue: 当前在处理的值

          currentIndex: 当前在处理的值的索引

          array

          initialValue: 可选项,其值用于第一次调用 callback 的第一个参数

      例子:

    [1,10,5,3,8].reduce(function(accumulator,currentValue){
    
        return accumulator*currentValue;
    
    });  // 1200

      2.7reduceRight(): 用法和上面的函数一样,只不过遍历方向正好相反。

    三、Set遍历操作

    ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。

    Set 本身是一个构造函数,用来生成 Set 数据结构。

    Set结构的实例有四个遍历方法,可以用于遍历成员。

    l  keys():返回键名的遍历器

    l  values():返回键值的遍历器

    l  entries():返回键值对的遍历器

    l  forEach():使用回调函数遍历每个成员

    需要特别指出的是,set的遍历顺序就是插入顺序。

    1、keys方法、values方法、entries方法返回的都是遍历器对象。由于 Set 结构没有键名,只有键值(或者说键名和键值是同一个值),所以keys方法和values方法的行为完全一致。

    let set = new Set(['red', 'green', 'blue']);
    
    for (let item of set.keys()) {
      console.log(item);
    }
    // red
    // green
    // blue
    
    for (let item of set.values()) {
      console.log(item);
    }
    // red
    // green
    // blue
    
    for (let item of set.entries()) {
      console.log(item);
    }
    // ["red", "red"]
    // ["green", "green"]
    // ["blue", "blue"]

    2、forEach()

    Set结构的实例的forEach方法,用于对每个成员执行某种操作,没有返回值。

    let set = new Set([1, 2, 3]);
    set.forEach((value, key) => console.log(value * 2) )
    // 2
    // 4
    // 6

    四、Map遍历操作

    Map数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应,是一种更完善的Hash结构实现。如果你需要“键值对”的数据结构,Map比Object更合适。

    Map原生提供三个遍历器生成函数和一个遍历方法。

    l  keys():返回键名的遍历器。

    l  values():返回键值的遍历器。

    l  entries():返回所有成员的遍历器。

    l  forEach():遍历Map的所有成员。

    需要特别注意的是,Map的遍历顺序就是插入顺序。

    let map = new Map([
      ['F', 'no'],
      ['T',  'yes'],
    ]);
    
    for (let key of map.keys()) {
      console.log(key);
    }
    // "F"
    // "T"
    
    for (let value of map.values()) {
      console.log(value);
    }
    // "no"
    // "yes"
    
    for (let item of map.entries()) {
      console.log(item[0], item[1]);
    }
    // "F" "no"
    // "T" "yes"
    
    // 或者
    for (let [key, value] of map.entries()) {
      console.log(key, value);
    }
    
    // 等同于使用map.entries()
    for (let [key, value] of map) {
      console.log(key, value);
    }
  • 相关阅读:
    移动应用专项测试
    MAC连接安卓手机通过adb指令安装apk
    Git GUI可视化操作教程
    nestjs中typeorm进行事物操作
    vue-element-admin 实现动态路由(从后台查询出菜单列表绑定侧边栏)
    el-form 表单校验
    vscode设置VUE eslint开发环境
    .netcore signalR 实时消息推送
    psexec局域网执行远程命令
    Asp.Net跨平台 Jexus 5.8.1 独立版
  • 原文地址:https://www.cnblogs.com/sakura0203/p/6674624.html
Copyright © 2011-2022 走看看