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"]

總結完畢，歡迎大家來留言。