对象数组循环的方法总结(js)

  • map()

map()方法返回的是一个新数组,它不会改变原数组的值,值得注意的是,map()函数不会对空数组进行检测。

示例:
对原数组元素进行平方后再赋值给新的数组

let array = [1, 2, 3, 4, 5];let newArray = array.map((item) => {return item * item;
})console.log(newArray)  // [1, 4, 9, 16, 25]
  • filter()

filter()函数会对数组进行过滤处理,返回一个新数组,不会改变原数组的值。

语法:

Array.filter(function(currentValue, indedx, arr), thisValue)

其中,函数 function 为必须,数组中的每个元素都会执行这个函数。如果返回值为 true,则该元素被保留。
函数function的第一个参数 currentValue ,必填,代表当前元素的值。

示例
返回数组nums中所有大于5的元素

let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];let res = nums.filter((num) => {return num > 5;
});console.log(res);  // [6, 7, 8, 9, 10]
  • forEach()

forEach()既可以遍历数组,也可以循环对象,因为forEach() 循环无法中途跳出,break 命令或return 命令都不能奏效。
p.s.由于是直接在原数组上进行操作,因此不推荐使用。

示例:

  • for循环

由于本人对于for循环的格式已经很熟悉了,因此主要针对breakcontinue进行总结。

break:终止循环让循环停止。

示例:

我们让它如果i等于4的时候停止循环

i打印到4的时候就停止了,并且不再执行下边的循环。

p.s.注意语句顺序,若先执行break,则不会打印4:

continue:跳过本次循环,并不是停止循环。

示例:

如果i等于4时写上continue,意思就是我们跳过i=4时的循环语句,这时页面上就会打印除了4以外循环的i的值。


p.s.注意语句顺序,若最后执行continue,则会先执行打印,并不会跳过:

  • for in 和 for of

for in是ES5标准,遍历key
for of是ES6标准,遍历value

for (var key in arr){console.log(arr[key]);
}for (var value of arr){console.log(value);
}
  • do…while

循环至少执行一次,即便条件为 false,因为代码块是在条件语句判断前执行:

示例:

  • every()

every遍历数组, 每一项都是true, 则返回true,
只要有一个是false, 就返回false

应用:上传文件的数组,当再次上传时判断上传的文件是否已经存在

示例:

l

let array = [{name:'张三', age:12},{name:'李四', age:22},{name:'王五', age:32},{name:'赵六', age:42}];
let temp = array.every(item => {return item.age>30;
});
console.log(temp);
// false
console.log(array);
// 0: {name: "张三", age: 12}
// 1: {name: "李四", age: 22}
// 2: {name: "王五", age: 32}
// 3: {name: "赵六", age: 42}
  • some()

遍历数组的每一项, 只要有一个返回true,就停止循环(即判断是否存在)

示例:

let array = [{name:'张三', age:12},{name:'李四', age:22},{name:'王五', age:32},{name:'赵六', age:42}];
let temp = array.some(item => {return item.age>30;
});
console.log(temp);
// true
console.log(array);
// 0: {name: "张三", age: 12}
// 1: {name: "李四", age: 22}
// 2: {name: "王五", age: 32}
// 3: {name: "赵六", age: 42}

本文链接:https://my.lmcjl.com/post/1511.html

展开阅读全文

4 评论

留下您的评论.