文章目录
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 value of 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