[JavaScript知识库]JS数组遍历的方法

for

var arr = [1,2,3,4,5]
for(var i = 1;i < arr.length;i++){
	console.log(arr[i])
}

优化for (效率最高)

使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果比较明显

var arr = [1,2,3,4,5]
for(i = 0,len = arr.length;i < len;i++){
	console.log(arr[i])
}

forEach(增强for循环)

• forEach循环的次数由数组元素的个数控制，元素是几个就会遍历几次
• 第一个参数表示数组元素，第二个参数表示元素的索引，第三个参数表示数组本身。
• forEach循环中不支持修改索引，回调中使用return不会报错,但是return无效
• forEach不能使用break跳出循环，但是可以结合try…catch实现跳出循环

//1、基本遍历
var arr = [1,2,3,4,5]
arr.forEach((item,index,arr)=>{
	console.log(item)
	console.log(arr)
})
//2、使用第三个参数来实现数组去重
let arr = [1,2,3,2,2,4,5,6]
let arr2 = []
arr.forEach((item,index,arr)=>{
	//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置
	arr.indexOf(item) === index ? arr2.push(item) : null;
});
console.log(arr2);
//3、循环数组元素是基本数据类型，不会改变原数组的数据
var arr = [1,2,3,4,5]
arr.forEach((item) => {
	item = 10
})
console.log(arr)
//[1,2,3,4,5]
//4、循环数组元素是对象，会改变原数组对象属性的值
var arr = [
	{a:1,b:1},
	{c:2,d:2}
]
arr.forEach((item) => {
	item.a = 100
})
//如果数组中的对象没有该属性就会自动添加上属性
console.log(arr) //[{a: 100, b: 1},{c: 2, d: 2, a: 100}]
//如果对象的属性还是一个对象，这个时候要注意只有数组中所有元素（对象）都有这个属性才可以更改属性对象的属性
var arr = [
	{c:3,d:{name:"wy"}},
    {a:1,b:2}
]
arr.forEach((item) => {
	item.d.name = "ddd"
})
console.log(arr) //Uncaught TypeError: Cannot set properties of undefined (setting 'name') 出错
//可以修改的格式
var arr = [
	{c:2,d:{name:'hhh'}},
	{c:3,d:{}}
]
arr.forEach((item) => {
	item.d.name = "wy"
})
console.log(arr) // [{c:2,d:{name:'wy'}},{c:3,d:{name:'wy'}}]
//5、循环数组元素依旧是数组，可以对数组中的元素进行改变
var arr = [[1,2],[3,4]];
arr.forEach((item)=>{
    item[0] = 100;
})
console.log(arr);//[[100, 2],[100,4]]
//6、使用try...catch...跳出循环
try{
	let arr = [1,2,3,5,6,7];
	arr.forEach((item)=>{
		//跳出条件
		if(item === 3){
			throw new Error("LoopTerminates")
		}
		console.log(item);	
	})
}catch(e){
	if(e.message !== "LoopTerminates") throw e;
}

for…in… (效率最低)

for…in…循环效率最低，输出的key是数组索引，如果遍历的是对象，输出的则是对象的属性名

var arr = ['开','开','心','心'];
for(let key in arr){
	console.log(key)
}
//0 1 2 3

var objArr = {
	a:11,
	b:22,
	c:33
}
for(let key in objArr){
	console.log(key)
}
//a b c

for…of…(ES6)

for of 遍历的是value ,for of 不能循环对象，
虽然性能要好于 for…in…，但仍然比不上普通的 for 循环

var arr = ['开','开','心','心'];
for(let valuein arr){
	console.log(value)
}

map(ES6)

• 遍历每一个元素并且返回对应的元素（可以返回处理后的元素）
• 返回创建的新数组和原来旧数组的长度是一样的，使用比较广泛，但性能还不如 forEach
• 不能使用break和continue跳出整个循环或当前循环的，会报错，但是结合try…catch可以实现跳出循环

//1、
var arr = [1, 2, 3, 4, 5, 6]
var newArr = arr.map(function (item, idnex) {
    return item * item
})
console.log(arr)      // [1, 2, 3, 4, 5, 6]
console.log(newArr)   // [1, 4, 9, 16, 25, 36]
//2、会改变原数组中对象的属性值
var arr = [{a: 1, b: 2},{a: 3, b: 4}]
let newArr = arr.map((item)=>{
    item.b = 100
    return item
})
console.log('arr',arr) // [{a: 1, b: 100},{a: 11, b: 100}]
console.log('newArr ',newArr ) // [{a: 1, b: 100},{a: 3, b: 100}]
//3、使用try...catch
try {
    var arr = [1, 2, 3, 4];
    arr.map((item) => {
        //跳出条件
        if (item === 3) {
            throw new Error("LoopTerminates");
        }
        console.log(item);
        return item
    });
} catch (e) {
    if (e.message !== "LoopTerminates") throw e;
};

filter(ES6)

遍历数组，过滤出符合条件的元素并返回一个新数组，没有符合条件的元素则返回空数组

var arr = [
	{id:1,sex:false,user:'A'},
	{id:2,sex:true,user:'B'},
	{id:3,sex:true,user:'C'},
]
var newArr = arr.filter((item,index) => {
	return item.sex;
})
console.log(newArr)
//[{id: 2, sex: true, user: 'B'},{id: 3, sex: true, user: 'C'}]

some(ES6)

遍历数组，只要有一个元素满足条件 就返回 true，否则返回 false

var arr = [
	{id:1,sex:false,user:'A'},
	{id:2,sex:true,user:'B'},
	{id:3,sex:true,user:'C'},
]
var flag = arr.some((item)=>{
	return item.sex;
})
console.log(flag) //true

erevy (ES6)

遍历数组，每一个元素都满足条件 则返回 true，否则返回 false

var arr = [
	{id:1,sex:false,user:'A'},
	{id:2,sex:true,user:'B'},
	{id:3,sex:true,user:'C'},
]
var flag = arr.every((item)=>{
	return item.sex;
})
console.log(flag) //false

find(ES6)

遍历数组，返回符合条件的第一个元素，如果没有符合条件的元素则返回undefined

var arr = [1, 1, 2, 2, 3, 3, 4, 5, 6]
    
var num = arr.find(function (item, index) {
	return item === 3
})
console.log(num)   //  3

findIndex（ES6）

遍历数组，返回符合条件的第一个元素的索引，如果没有符合条件的元素则返回 -1

var arr = [1, 1, 2, 2, 3, 3, 4, 5, 6]
    
var num = arr.findIndex(function (item) {
	return item === 3
})
console.log(num)   //  4