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)