美文网首页
aaa.数组和对象遍历操作

aaa.数组和对象遍历操作

作者: BabyMT | 来源:发表于2020-06-22 15:27 被阅读0次

    数组遍历
    for，foreach，map(返回新数组)，for...of(遍历element)，for...in(遍历index)，filter(返回新数组)，every(每一项都要满足，返回boolean)，some(任意一项满足，返回boolean)，reduce，reduceRight，find(寻找符合条件的第一个元素)，findIndex(类似find，返回索引)，keys，values，entries(for (let [index,ele] of array.entries()))
    对象遍历
    for...in，Object.keys()，Object.values()，Object.getOwnPropertyNames()，Reflect.ownKeys(symbol和symbol对应属性值也可以被遍历)
    对象遍历的本质还是遍历key，在拿到对应value

    1.数组遍历

    1.for循环
    var arr = ['aaa', 'bvv', '423', 32321]
function fn(arr) {
  for (i = 0; i < arr.length; i++) {
    console.log(arr[i])
  }
}
fn(arr)
//aaa
//bvv
//423
//32321
    2.foreach循环
    var arr = ['aaa', 'bvv', '423', 32321, { m: 'mm' }]
function fn(arr) {
  arr.forEach((element,index,array) => {
    console.log(element,index,array)
  });
}
fn(arr)

//aaa 0 [ 'aaa', 'bvv', '423', 32321 ]
//bvv 1 [ 'aaa', 'bvv', '423', 32321 ]
//423 2 [ 'aaa', 'bvv', '423', 32321 ]
//32321 3 [ 'aaa', 'bvv', '423', 32321 ]
//{ m: 'mm' } 4 [ 'aaa', 'bvv', '423', 32321, { m: 'mm' } ]
    3.map循环
    var arr = ['aaa', 'bvv', '423', 32321, { m: 'mm' }]
function fn(arr) {
  var res = arr.map(function (el, idx, arr) {
    console.log(el, idx, arr)
    return el + idx
  })
  console.log('res', res)
  console.log('arr', arr)
}
fn(arr)

    ps:会生成一个新数组，但是不会影响原来的数组

    4.for...of & for ...in

    for...of用于遍历value，for...in用于遍历index
    for...of不可以用于遍历object，但是for...in可以，但是只能遍历单层的key值，多层遍历不了

    var arr = ['aaa', 'bvv', '423', 32321]
function fn(arr) {
  for (var value of arr) {
    console.log(value);
    }
}
fn(arr)

    var arr = ['aaa', 'bvv', '423', 32321]
function fn(arr) {
  for (var value in arr) {
    console.log(value);
    }
}
fn(arr)
    5.filter遍历（遍历过滤）
    var arr = ['aaa', 'bvv', '423', 32321, {m:'mm'}]
function fn(arr) {
  var res = arr.filter((item, index) => {
    console.log(index, item)
    return index < 2
  })
  console.log(arr)
  console.log(res)
}
fn(arr)

    可以用index过滤，也可以用于过滤参数类型 
    var arr = ['aaa', 'bvv', '423', 32321, {m:'mm'}]
function fn(arr) {
  var res = arr.filter((item, index) => {
    console.log(index, item)
    return Object.prototype.toString.call(item) == '[object Object]'
  })
  console.log(arr)
  console.log(res)
}
fn(arr)

    还可以用于判断某元素某属性值是否存在或者为true的元素 
    var arr = ['aaa', 'bvv', '423', 32321, { m: 'mm' }]
function fn(arr) {
  var res = arr.filter((item)=>{
    return item.m
  })
  console.log(arr)
  console.log(res)
}
fn(arr)

///[ 'aaa', 'bvv', '423', 32321, { m: 'mm' } ]
///[ { m: 'mm' } ]
    6.every遍历

    every()是对数组中的每一项运行给定函数，如果该函数对每一项返回true,则返回true。

    var arr = ['aaa', 'bvv', '423', 32321]
function fn(arr) {
  var res =  arr.every( function( item, index, array ){ 
//every() return Boolean值
    return typeof(item) != 'object';   //每一项都要不是对象才可以返回true
}); 
  console.log(arr)
  console.log(res)
}
fn(arr)
///[ 'aaa', 'bvv', '423', 32321 ]
//true
    7.some遍历

    和every对应，有一个成立就是true

    var arr = ['aaa', 'bvv', '423', 32321]
function fn(arr) {
  var res =  arr.some( function( item, index, array ){ 
    if(typeof(item) == 'number'){
      console.log('item',item)
    }
    return typeof(item) == 'number'; 
}); 
  console.log(arr)
  console.log(res)
}
fn(arr)

//item 32321
///[ 'aaa', 'bvv', '423', 32321 ]
//true
    8.reduce遍历

    reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。

    
var arr = ['aaa', 'bvv', '423', 32321, { m: 'mm' }]
function fn(arr) {
  var res = [0, 1, 2, 3, 4].reduce(function (previousValue, currentValue, index, array) {
    return previousValue + currentValue;
  });
  var res2 = arr.reduce(function (previousValue, currentValue, index, array) {
    return previousValue + currentValue;
  });
  console.log(arr)
  console.log(res)
  console.log(res2)
}
fn(arr)

///[ 'aaa', 'bvv', '423', 32321, { m: 'mm' } ]
//10
//aaabvv42332321[object Object]

    //加入第二个参数


var arr = ['aaa', 'bvv', '423', 32321, { m: 'mm' }]
function fn(arr) {
  var res = [0, 1, 2, 3, 4].reduce(function (previousValue, currentValue, index, array) {
    return previousValue + currentValue;
  }, 5);
  var res2 = arr.reduce(function (previousValue, currentValue, index, array) {
    return previousValue + currentValue;
  }, 5);
  console.log(arr)
  console.log(res)
  console.log(res2)
}
fn(arr)

//[ 'aaa', 'bvv', '423', 32321, { m: 'mm' } ]
//15
//5aaabvv42332321[object Object]

    9.reduceRight

    反方向的reduce()

    10.find

    **find()方法返回数组中符合测试函数条件的第一个元素。否则返回undefined **

    var arr = ['aaa', 'bvv', '423', 32321, { m: 'mm' }]
function fn(arr) {
  var res = arr.find((element) => {
    return typeof (element) == 'string'
  })
  console.log(res)
}
fn(arr)

//aaa  只返回第一个，后面的符合条件也不返回了
    11.findIndex
    var arr = ['aaa', 'bvv', '423', 32321, { m: 'mm' }]
function fn(arr) {
  var res = arr.findIndex((x)=> { return x == '423'; });
  // Returns an index value of 1.
  console.log(res)
}
fn(arr)

//2    返回的是符合条件的第一个元素的索引值
    12.keys，values，entries
    var arr = ['aaa', 'bvv', '423', 32321, { m: 'mm' }]
function fn(arr) {
  for (let index in arr) {
    console.log(index);
  }
  for (let index of arr.keys()) {
    console.log(index);
  }
  // 0
  // 1
  for (let elem of arr.values()) {
    console.log(elem);
  }
  // 'a'
  // 'b'
  for (let [index, elem] of arr.entries()) {
    console.log(index, elem);
  }
}
fn(arr)

    2.对象遍历

    1.for … in
    const PROP_NAME = Symbol()
var arr = ['aaa', 'bvv', '423', 32321, { m: 'mm' }]
var obj1 = { 1: 'aaa', 2: 'bbb', 3: 'ccc' }
var obj2 = {
  [PROP_NAME]: 'fdfdsa',
  id: 1,
  name: 'yeezy',
  child: [{ id: 11, name: 'air jorden' }, { id: 12, name: 'air force' }]
}

function fn(obj) {
  for (var el in obj) {
    console.log(el, ':', obj[el])
  }
}
fn(obj2)

    Symbol属性是不会被遍历的，然后el遍历的是key值，无法用for...of方法遍历
    2.使用Object.keys()遍历 (返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性).).
    const PROP_NAME = Symbol()
var arr = ['aaa', 'bvv', '423', 32321, { m: 'mm' }]
var obj1 = { 1: 'aaa', 2: 'bbb', 3: 'ccc' }
var obj2 = {
  [PROP_NAME]: 'fdfdsa',
  id: 1,
  name: 'yeezy',
  child: [{ id: 11, name: 'air jorden' }, { id: 12, name: 'air force' }]
}

function fn(obj) {
  var res = Object.keys(obj)
  console.log(res)
}
fn(obj2)     ///[ 'id', 'name', 'child' ]  遍历key值成为数组，然后考研使用forEach遍历
    3.使用Object.values()遍历 (与Object.keys类似，也不会遍历symbol）
    const PROP_NAME = Symbol()
var arr = ['aaa', 'bvv', '423', 32321, { m: 'mm' }]
var obj1 = { 1: 'aaa', 2: 'bbb', 3: 'ccc' }
var obj2 = {
  [PROP_NAME]: 'fdfdsa',
  id: 1,
  name: 'yeezy',
  child: [{ id: 11, name: 'air jorden' }, { id: 12, name: 'air force' }]
}

function fn(obj) {
  var res = Object.values(obj)
  console.log(res)
}
fn(obj2)
///[ 1, 'yeezy', [ { id: 11, name: 'air jorden' }, { id: 12, name: 'air force' } ] ]
    4.Object.getOwnPropertyNames(obj)
    const PROP_NAME = Symbol()
var arr = ['aaa', 'bvv', '423', 32321, { m: 'mm' }]
var obj1 = { 1: 'aaa', 2: 'bbb', 3: 'ccc' }
var obj2 = {
  [PROP_NAME]: 'fdfdsa',
  id: 1,
  name: 'yeezy',
  child: [{ id: 11, name: 'air jorden' }, { id: 12, name: 'air force' }]
}

function fn(obj) {
  var res = Object.getOwnPropertyNames(obj)
  console.log(res)
}
fn(obj2)    //[ 'id', 'name', 'child' ]
    5.使用Reflect.ownKeys(obj)遍历
    const PROP_NAME = Symbol()
var arr = ['aaa', 'bvv', '423', 32321, { m: 'mm' }]
var obj1 = { 1: 'aaa', 2: 'bbb', 3: 'ccc' }
var obj2 = {
  [PROP_NAME]: 'fdfdsa',
  id: 1,
  name: 'yeezy',
  child: [{ id: 11, name: 'air jorden' }, { id: 12, name: 'air force' }]
}

function fn(obj) {
  var res = Reflect.ownKeys(obj)
  console.log(res)
}
fn(obj2)   //[ 'id', 'name', 'child', Symbol() ]

    const PROP_NAME = Symbol()
var arr = ['aaa', 'bvv', '423', 32321, { m: 'mm' }]
var obj1 = { 1: 'aaa', 2: 'bbb', 3: 'ccc' }
var obj2 = {
  [PROP_NAME]: 'fdfdsa',
  id: 1,
  name: 'yeezy',
  child: [{ id: 11, name: 'air jorden' }, { id: 12, name: 'air force' }]
}

function fn(obj) {
  var res = Reflect.ownKeys(obj)
  res.forEach((el)=>{
    console.log(el,':',obj[el])
  })
  // console.log(res)
}
fn(obj2)

    3.树的遍历

    const PROP_NAME = Symbol()
var arr = ['aaa', 'bvv', '423', 32321, { m: 'mm' }]
var obj1 = { length: 2, 0: 'aaa', 1: 'bbb', 2: 'ccc' }
var obj2 = [{
  [PROP_NAME]: 'fdfdsa',
  id: 1,
  name: 'nike',
  child: [
    {
      id: 11,
      name: 'air jorden',
      child: [
        { id: 111, name: 'aj1' },
        { id: 112, name: 'aj max' }
      ]
    },
    {
      id: 12,
      name: 'air force',
      child: [
        { id: 121, name: 'air force1' },
        { id: 122, name: 'air force2' }
      ]
    }
  ]
}]

function fn(par) {
  for (var i in par) {
    console.log(par[i].name)
    if(par[i].child){
      fn(par[i].child)
    }
  }
}
fn(obj2)

    相关文章

      网友评论

          本文标题：aaa.数组和对象遍历操作

          本文链接：https://www.haomeiwen.com/subject/fpvbxktx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|aaa.数组和对象遍历操作|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！