aaa.数组和对象遍历操作

数组遍历
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)
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 217,406评论 6赞 503
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,732评论 3赞 393
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 163,711评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,380评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,432评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,301评论 1赞 301
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,145评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,008评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,443评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,649评论 3赞 334
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,795评论 1赞 347
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,501评论 5赞 345
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,119评论 3赞 328
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,731评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,865评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,899评论 2赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,724评论 2赞 354