zoukankan      html  css  js  c++  java
  • js遍历数据的方法总结:js中遍历对象(5种)和遍历数组(6种)

    
    一、遍历对象方法
     
    1.for...in
    遍历输出的是对象自身的属性以及原型链上可枚举的属性(不含Symbol属性),原型链上的属性最后输出说明先遍历的是自身的可枚举属性,后遍历原型链上的
     
     
    eg:
     
    var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
     
    Object.prototype.pro1 = function() {};//在原型链上添加属性
     
    Object.defineProperty(obj, 'country', {
     
      Enumerable: true //可枚举
     
    });
     
    Object.defineProperty(obj, 'nation', {
     
      Enumerable: false //不可枚举
     
    })
     
    obj.contry = 'china';
     
    for (var index in obj) {
     
      console.log('key=', index, 'value=', obj[index])
     
    }
     
    输出结果:
     
    key = name  value = yayaya
    key = age  value = 12 
    key = sex  value = female
    key = contry  value = china 
    key = pro1  value = function(){}
     
     
     
    2.Object.keys()
    遍历对象返回的是一个包含对象自身可枚举属性的数组(不含Symbol属性).
     
    eg:
     
    var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
     
    Object.prototype.pro1 = function() {}
     
    Object.defineProperty(obj, 'country', {
     
      Enumerable: true,
     
      value: 'ccc'
     
    });
     
    Object.defineProperty(obj, 'nation', {
     
      Enumerable: false //不可枚举
     
    })
     
    obj.contry = 'china';
     
    Object.keys(obj).forEach(function(index) {
     
      console.log(index, obj[index])
     
    });
     
    输出结果:
     
    name yayaya
    age 12 
    sex female
    contry china 
     
    3.Objcet.getOwnPropertyNames()
    输出对象自身的可枚举和不可枚举属性的数组,不输出原型链上的属性
     
    eg:
     
    var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
     
    Object.prototype.pro1 = function() {}
     
    Object.defineProperty(obj, 'country', {
     
      Enumerable: true,
     
      value: 'ccc'
     
    });
     
    Object.defineProperty(obj, 'nation', {
     
      Enumerable: false //不可枚举
     
    })
     
    obj.contry = 'china';
     
    Object.getOwnPropertyNames(obj).forEach(function(index) {
     
      console.log(index, obj[index])
     
    });
     
    输出结果:
     
    name yayaya
    age 12 
    sex female
    country ccc
    nation undefined
    contry china 
     
    4.Reflect.ownKeys()
    返回对象自身的所有属性,不管属性名是Symbol或字符串,也不管是否可枚举.
     
    eg:
     
    var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
     
    Object.prototype.pro1 = function() {}
     
    Object.defineProperty(obj, 'country', {
     
      Enumerable: true,
     
      value: 'ccc'
     
    });
     
    Object.defineProperty(obj, 'nation', {
     
      Enumerable: false //不可枚举
     
    })
     
    obj.contry = 'china';
     
    Reflect.ownKeys(obj).forEach(function(index) {
     
      console.log(index, obj[index])
     
    });
     
    返回结果:
     
    name yayaya
    age 12 
    sex female
    country ccc
    nation undefined
    contry china 
     
    5. _.keys
    用underscore插件的遍历方法只可以遍历出对象自身的可枚举属性
     
    eg:
     
    var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
     
    Object.prototype.pro1 = function() {}
     
    Object.defineProperty(obj, 'country', {
     
      Enumerable: true,
     
      value: 'ccc'
     
    });
     
    Object.defineProperty(obj, 'nation', {
     
      Enumerable: false //不可枚举
     
    })
     
    obj.contry = 'china';
     
    console.log(_.keys(obj));
     
    输出结果:
     
    name age sex country
     
    二.遍历数组方法
    1.forEach
     
     
    eg:
     
    var arr = ['a', 'b', 'c', 'd'];
     
    arr.forEach(function(value, index) {
     
      console.log('value=', value, 'index=', index);
     
    })
     
    输出结果:
     
    value=a index=0
    value=b index=1
    value=c index=2
    value=d index=3
     
    2.map
    可以对遍历的每一项做相应的处理,返回每次函数调用的结果组成的数组
     
    eg:
     
    var arr = ['a', 'b', 'c', 'd'];
     
    arr.map(function(item, index, array) {
     
      console.log(item, index);
     
    })
     
    输出结果:
     
    a 0
    b 1
    c 2 
    d 3
     
    3.for循环遍历
     
     
    eg:
     
    var arr = ['a', 'b', 'c', 'd'];
     
    for (var i = 0; i < arr.length; i++) {
     
      console.log(i, arr[i])
     
    }
     
    输出结果:
     
    0 a
    1 b
    2 c
    3 d
     
    4.for...in
     
     
    eg:
     
    var arr = ['a', 'b', 'c', 'd'];
     
    for (var i in arr) {
     
      console.log('index:', i, 'value:', arr[i])
     
    }
     
    输出结果:
     
    index:0 value:a
    index:1 value:b
    index:2 value:c
    index:3 value:d
     
    5.for...of(es6)
    只遍历出value,不能遍历出下标,可遍历出Symbol数据类型的属性,此方法作为遍历所有数据结构的统一的方法
     
     
    eg:
     
    var arr = ['a', 'b', 'c', 'd'];
     
    for (var value of arr) {
     
      console.log('value', value)
     
    }
     
    输出结果:
     
    value a
    value b
    value c
    value d
     
    6.利用underscore插件
     
     
    eg:
     
    var arr = ['a', 'b', 'c', 'd'];
     
    var _ = require('underscore');
     
    _.each(arr, function(value, index, arr) {
     
      console.log(value, index, arr)
     
     
     
    })
     
    输出结果:
     
    a 0 ['a','b','c',''d]
    b 1 ['a','b','c',''d]
    c 2 ['a','b','c',''d]
    d 3 ['a','b','c',''d]
    
  • 相关阅读:
    SQL Server Management Studio
    uiimage拉伸
    时间空间复杂度
    冒泡选择排序

    插入排序
    快速构建APP
    TTTAtibutedlabel
    Git命令
    适配
  • 原文地址:https://www.cnblogs.com/cn-oldboy/p/13377289.html
Copyright © 2011-2022 走看看