js的循环遍历

目录

循环遍历的方法：

一.数组的循环遍历

1.while循环

2.do...while()

3.for循环

4.map()

5.forEach()

6.filter()过滤循环

7.some()，every()循环遍历查询

8.for...of

9.find() findIndex()

二.对象的循环遍历

1.Object.keys()   Object.values()   Object.entries()

三.可遍历对象也可遍历数组

1. for...in

---

循环遍历的方法：

let arr = [1,2,3,4,5,6,7,8,9,10];
let obj = {a: 1, b: "home", c: 3};

一.数组的循环遍历

1.while循环

var i = 0; 
while (i < 10) { 
    console.log('i当前为：' + i);
    i = i + 1; 
}

2.do...while()

var x = 5;
var i = 0; 
do { 
    console.log(i);
    i++;
} while(i < x);

3.for循环

let arr = [1,2,3,4,5,6,7,8,9,10];
for(var i = 0 ; i < arr.length ; i++){
    console.log(i,'第i个的值为'+arr[i]);
}

4.map()

let newarr = arr.map(function (n) { 
    return n + 1; 
}); 
console.log(arr);
console.log(newarr);

该函数调用时，回调函数：三个参数：当前成员、当前位置和数组本身。

let newarr1 = arr.map(function (elem, index, arr) {
    console.log(elem,index,arr);
}); 

传两个参数时：

let arr2 = ['a', 'b', 'c'];
let maparr =[1, 2].map(function (e) {
    return this[e];
}, arr2)
console.log(maparr);

5.forEach()

只能遍历数组，不能遍历对象。

只传一个参数（回调函数）：

arr.forEach((item,index,array) => {
    console.log(item,index,array);
})

传两个参数：

let arr1=[9, 8, 7, 6, 5,4,3,2,1,0]
arr.forEach(function(item, index, arr) {
    console.log(this[index]);
}, arr1)

​​​​​​​

6.filter()过滤循环

过滤出符合条件的元素。返回一个新数组，不会对空数组进行检测。

let newarr2 = arr.filter(function (elem) {
     return (elem > 3); 
})
console.log(newarr2);

filter方法的参数函数也可以接受三个参数：当前成员，当前位置和整个数组。

filter方法也可以接受第二个参数，用来绑定参数函数内部的this变量。

var obj1 = { MAX: 6 };
var myFilter = function (item) {
     if (item > this.MAX) return true; 
}; 
let newarr3 = arr.filter(myFilter, obj1);
console.log(newarr3);

可以使用filter()方法来移除数组中的undefined、null、NAN等值。

let arr4 = [1, undefined, 2, null, 3, false, '', 4, 0,'home',{a:'a'}];
let arr5 = arr4.filter(Boolean);
console.log(arr5);

7.some()，every()循环遍历查询

some() 方法会对数组中的每一项进行遍历，只要有一个元素符合条件，就返回true，且剩余的元素不会再进行检测，否则就返回false。

every() 方法会对数组中的每一项进行遍历，只有所有元素都符合条件时，才返回true，如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。

arr.some(item => item > 6)
// 输出结果： true
arr.every(item => item > 0)
// 输出结果： true

8.for...of

let arr3 = [    
	{id:1, value:'hello'},    
	{id:2, value:'world'},    
	{id:3, value:'JavaScript'}
]
for (let item of arr3) {  
	console.log(item);
}

9.find() findIndex()

console.log(arr.find(item => item > 2));   // 3
console.log(arr.findIndex(item => item > 2));   // 2

二.对象的循环遍历

1.Object.keys()   Object.values()   Object.entries()

对象本身可枚举属性。

console.log(Object.keys(obj));
console.log(Object.values(obj));
console.log(Object.entries(obj));

三.可遍历对象也可遍历数组

1. for...in

for (var i in obj) { 
    console.log('键名：', i); 
    console.log('键值：', obj[i]); 
}
console.log('');
for (var i in arr) { 
    console.log('键名：', i); 
    console.log('键值：', arr[i]); 
}