JS中数组与对象的遍历方法实例小结

JS中数组与对象的遍历方法实例小结

这篇文章主要介绍了JS中数组与对象的遍历方法。包括for、forEach、map、filter、some、every、find、for…in、entris、keys。

首先定义一个数组

arr=['snow','bran','king','nightking'];

1、for循环，需要知道数组的长度;

2、foreach，没有返回值，可以不知道数组长度；

返回值：无

arr.forEach(function(ele,index){
console.log(index);
console.log(ele)
})

3、map函数，遍历数组每个元素，并回调操作，需要返回值，返回值组成新数组，原数组不变；

返回值：新数组

var newarr=arr.map(function(i){
  return "hello "+i
});
console.log(newarr)

4、filter函数：过滤通过条件的元素组成一个新数组，原数组不变；

返回值：新数组

var ages = [32, 33, 16, 40];
var newArr = ages.filter((age) => {
    return age > 18;
});
console.log(newArr); //[32,33,40]

5、some函数，遍历数组中是否有符合条件的函数，返回布尔值；

返回值：布尔值

var yy=arr.some(function(i){
  return i.length>4
});
console.log(yy)       //true

6、every函数，遍历数组是否每个元素都符合条件，返回布尔值；

返回值：布尔值

var xx=arr.every(function(i){
  return i.length>4
});
console.log(xx)       //false

7、reduce函数，为数组中的每一个元素依次执行回调函数，不改变当前数组。

返回值：值

arr.reduce(callback, initialValue)
[0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){
 return previousValue + currentValue;
});

callback:执行数组中每个值的函数，包括四个参数；

• previousValue：上一次调用回调返回的值，或者是提供的初始值(initialValue)；
• currentValue:当前被处理的值；
• index：当前元素在数组中的索引；
• array：调用reduce的数组；
• initialValue：作为第一次调用callback的第一个参数，索引位置，不指定从1开始；

例如：

var total = [0, 1, 2, 3].reduce(function(a, b) {
  return a + b;
});
// total == 6
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
  return a.concat(b);
});
// flattened is [0, 1, 2, 3, 4, 5]

要提供initialValue的话：

var total = [0, 1, 2, 3].reduce(function(a, b) {
   return a + b;
},4);
console.log(total); //10

8、find函数，返回通过测试的数组的第一个元素的值

返回值：原数组中的一个值

var arr = [1,2,3,4,5,6,7];
 var ar = arr.find(function(elem){
     return elem>5;
 });
 console.log(ar);//6

var stu = [{name: '王小毛',gender: '男',age: 20},{name: '李四',gender: '男',age: 20}];
stu.find((element) => (element.name == '李四'));
//name: "李四", gender: "男", age: 20}

二、对象的遍历

1、原始方法 for···in

var obj={snow:1,bran:2,king:3,nightking:4};
for(let i in obj){
  console.log(i+','+obj[i])
}
//snow,1
//bran,2
//king,3
//nightking,4

in也可以用来遍历数组，不过i对应于数组的key值：

for(let i in arr){
  console.log(i+','+arr[i])
}

2、entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。

迭代对象中数组的索引值作为 key， 数组元素作为 value。

返回值：键值对二维数组

数组例子 array.entries()

var fruits = ["Banana", "Orange", "Apple"];
fruits.entries();
//[0, "Banana"]
//[1, "Orange"]
//[2, "Apple"]

对象例子 Object.entries(obj)

const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

3、keys方法，遍历自身可枚举的属性

返回值：新数组

/**Array 对象**/
var arr = ['a','b','c'];
console.log(Object.keys(arr));  
// ['0','1','2']

/**Object对象**/
var obj = {foo:'bar',baz:42};
console.log(Object.keys(obj));
// ["foo","baz"]

总结完毕，欢迎大家来留言。