数组，对象遍历的用法总结

作为一个前端开发，我们在完成前端开发的过程中，经常会遇到很多数据处理的需求，开发者会根据不同的业务需求来实现对应的业务功能。
前端在渲染页面时，通常会涉及到要对拿到的数据进行处理。这里介绍几种数组，对象遍历的数据处理方法。

一、遍历数组

方法一：for循环

for 循环是使用最多，也是性能优化最好的一种遍历方式。

var arr = ["a", "b", "c"]
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i])
}
// Expected output:a b c

方法二：for-of 遍历

var arr = ["a", "b", "c"]
for (let item of arr) {
  console.log(item)
}
// Expected output:a b c

方法三：数组方法

1.forEach()方法，对原数组没有影响

var arr = ["a", "b", "c"]
arr.forEach((index, item) => {
  console.log(index, item)
})
//Expected output:
// a 0
// b 1
// c 2

2.map()方法

var arr = [1, 2, 3]
var newArr = arr.map(item => {
  return item * 2
});
console.log(newArr); 
// Expected output:[2, 4, 6]

3.filter()方法，不改变原始数组

var arr = [1, 2, 3]
var newArr = arr.filter(item => {
  return item > 1
});
console.log(newArr)
// Expected output:[2, 3]

4.reduce()方法

var arr = [1, 2, 3]
var sum = arr.reduce((pre, cur) => {
  return pre + cur
});
console.log(sum)
// Expected output:6

5.every()方法用于检测数组元素是否全部符合指定条件，只有全部满足条件时才会返回true。every()是对数组中的每一项运行给定函数，如果该函数对每一项返回true,则返回true;在执行的过程中，如果遇到了false的情况，就停止继续往下执行；直接返回false。

var arr = [1, 2, 3]
var bool = arr.every(item => {
  return item < 5
});
console.log(bool)
// Expected output:true

6.some()方法用于检测数组是否存在一个符合指定条件的元素，只有一个满足条件就返回true。some()是对数组中的每一项运行指定函数；该函数对其中任意一项返回true, 就返回true; 返回true就不再往下执行。

下面的例子是检测数组元素是否存在 Number 类型。

var arr = ["a", 1, "b"]
var bool = arr.some(item => {
  return typeof item === "number"
})
console.log(bool)
// Expected output:true

7.find() 返回数组中符合条件的第一个元素；没有就返回undefined,不改变原始数组,find对空数组不执行。

let arr = [1, 2, 3, 4, 5]
let find = arr.find((item) => {
  return item % 2 === 0
})
// Expected output:find =2

var arr = [1, 2, 3]
var ret = arr.find(ele => ele > 2)
console.log(ret)
// Expected output:3
console.log(arr)
// Expected output:[1, 2, 3]

8.findIndex() 返回符合条件的第一个元素的下标，没有符合条件的元素则返回-1，不改变原始数组,findIndex对空数组不执行。

let arr = [1, 2, 3, 4, 5]
let findIndex = arr.findIndex((item) => {
  return item % 2 === 0
}) 
// Expected output:findIndex = 1

var arr = [1, 2, 3, 4 ,5]
var ret = arr.findIndex(ele => ele > 2) 
console.log(ret)
// Expected output:2
 console.log(arr)
// Expected output:[1, 2, 3, 4, 5]

二、遍历对象

方法一：for-in 循环

var obj = { a: 2, b: 4, c: 6 }
for (let key in obj) {
  console.log(key)
}
// Expected output:a b c

方法二：Object.keys() 可理解为返回里面的key属性

1.处理对象时：返回可枚举的属性数组

var w_n = Object.keys({name: "wn", address: "中国"}) 
console.log(w_n)
// Expected output:['name', 'address']

2.处理数组时：返回索引值数组

var w_n = Object.keys([11,22,33,44]) 
console.log(w_n)
// Expected output:['0','1','2','3']

3.处理字符串数据时：返回索引值数组

var str='hello';
console.log(Object.keys(str))
// Expected output:['0','1','2','3','4']

方法三：Object.values()方法，可理解为返回里面的value值，Object.values只返回对象自身的可遍历属性。

1.处理对象数据时：返回可枚举的值组成的数组

var w_n = Object.values({name: "wn", address: "中国"}) 
console.log(w_n)
// Expected output:['wn', '中国']

2.处理数组数据时：返回原数组

var w_n = Object.values([11,22,33,44]) 
console.log(w_n)
// Expected output:[11,22,33,44]

属性名为数值的属性，是按照数值大小，从小到大遍历的。

const obj = {10 : "a", 6 : "b", 9 : "c"}
console.log(Object.values(obj))
// Expected output:['b', 'c', 'a']

3.处理字符串数据时：返回每个字符组成的数组

console.log(Object.values('hello'))
// Expected output:['h', 'e', 'l', 'l', 'o']

4.Object.values会过滤属性名为 Symbol 值的属性

Object.values({ [Symbol()]: 123, foo: 'abc' })
// Expected output:['abc']

方法四：Object.entries()方法

1.处理对象数据时：返回是一个二维数组。每一项是[key, value]形式。

var w_n = Object.entries({name: "wn", address: "中国"}) 
console.log(w_n)
// Expected output:[['name', 'wn'], ['address', '中国']]

2.处理数组数据时：返回也是一个二维数组，数组里面的每一项[index, value] 形式。

var w_n = Object.entries([11,22,33,44]) 
console.log(w_n)
// Expected output:[ ['0',11], ['1',22], ['2',33], ['3',44] ]

数组中包含对象：

var w_n = Object.entries([{a:11},22,33,44]) 
console.log(w_n)
// Expected output:[ ['0',{a:11}], ['1',22], ['2',33], ['3',44] ]

3.处理字符串数据时：返回也是一个二维数组。

var str='hello'
console.log(Object.entries(str)) 
// Expected output:[ ['0','h'], ['1','e'], ['2','l'], ['3','l'] ,['4','o'] ]

方法五：Object.assign()：Object.assign 方法的第一个参数是目标对象，后面的参数都是源对象。

注意，如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target);
// Expected output: Object { a: 1, b: 4, c: 5 }

方法六：Object.getOwnPropertyNames()

Object.getOwnPropertyNames() 返回一个数组，该数组对元素是 obj自身拥有的枚举或不可枚举属性名称字符串。数组中枚举属性的顺序与通过 for…in 循环（或 Object.keys）迭代该对象属性时一致。数组中不可枚举属性的顺序未定义。

var arr = ["a", "b", "c"]
console.log(Object.getOwnPropertyNames(arr).sort()) 
// ["0", "1", "2", "length"]

// 类数组对象

var obj = { 0: "a", 1: "b", 2: "c"}
console.log(Object.getOwnPropertyNames(obj).sort())
// Expected output:["0", "1", "2"]

// 使用 Array.forEach 输出属性名和属性值

Object.getOwnPropertyNames(obj).forEach(function(val, idx, array) {
  console.log(val + " -> " + obj[val])
})
// Expected output:
// 0 -> a
// 1 -> b
// 2 -> c

//不可枚举属性

var my_obj = Object.create({}, {
  getFoo: {
    value: function() { return this.foo; },
    enumerable: false
  }
})
my_obj.foo = 1
console.log(Object.getOwnPropertyNames(my_obj).sort())
// Expected output:["foo", "getFoo"]