1.for循环
优化:使用临时变量,将length缓存起来,避免重复获取length,在length较大时效果才比较明显.
var arr = [1, 2, 3, 4, 5, 6] var len = arr.length
for(var i = 0; i < len; i++) { console.log(arr[i]) } // 1 2 3 4 5 6
2.forEach((item,index,arry)=>{ })
效率较for高,默认没有返回值
循环基本数据类型时,不会改变原数据;
循环复杂数据类型时,会改变原数据的对象属性值;
var arr = [1, 2, 3, 4, 5, 6]
arr.forEach((item, idnex, array) => { console.log(item) // 1 2 3 4 5 6
console.log(array) // [1, 2, 3, 4, 5, 6] })
// 循环的数组元素是基本数据类型，不会改变原数据的数据
var arr1 = [1, 2, 3, 4, 5, 6]
arr1.forEach((item) => { item = 10 }) console.log(arr1) // [1, 2, 3, 4, 5, 6]
// 循环的数组元素为对象，会改变原数组的对象属性的值
var arr2 = [ { a:1, b:2 } , { a:11, b:12 } ]
arr2.forEach((item) => { item.a = 10 })
console.log(arr2) // [{a: 10, b: 2}, {a: 10, b: 2}]
// 使用try...catch...可以跳出循环
try {
let arr = [1, 2, 3, 4];
arr.forEach((item) => { // 跳出条件
if (item === 3) { throw new Error("LoopTerminates") ; } console.log(item) ; }); }
catch (e) { if (e.message !== "LoopTerminates") throw e ; } ; // 1 2
3.for key in array/object
不可以遍历空数组,效率最低
遍历数组时,key为数组的下标;
遍历对象时,key为对象的属性名;
var arr = ['我', '是', '谁', '我', '在', '哪']
for(let key in arr) { console.log(key) } // 0 1 2 3 4 5
let obj = { a: 11, b: 22 , c: 33 }
for(let key in obj) { console.log(key) } // a b c
4.for key of array/string
性能较for .. in .. 好,较for差.
注意:不能遍历循环对象,因为任何数据只要部署interator接口,就可以完成遍历操作,有些数据结构原生具备interator接口,如array/map/set/string等,而interator接口是部署在Symbol.interator属性上的,而对象object没有Symbol.interator属性,所以无法遍历.
var arr = ['我', '是', '谁', '我', '在', '哪']
for(var key of arr) { console.log(key) } // 我 是 谁 我 在 哪
for..in 和for..of的区别
for..in只能获取对象的键名,不能获得键值; for..of允许遍历获得键值;
5.map() 映射
性能较forEach差,不会改变原数组
遍历每一个元素并返回处理后的值,返回数组长度与原数组长度一致
注意:不能使用break/continue跳出数组,会报错,可以使用try..catch跳出数组
var array = arr.map((item,index)=>{ return })
// 一、会改变原数组
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]
// 二、会改变原数组元素中对象的属性值
var arr = [{a: 1, b: 2},{a: 11, b: 12}]
let newARR = arr.map((item)=>{ item.b = 111 ; return item })
console.log('arr数组',arr) // [{a: 1, b: 111},{a: 11, b: 111}]
console.log('newARR',newARR) // [{a: 1, b: 111},{a: 11, b: 111}]
// 三、不会改变原数组
var arr = [{a: 1, b: 2},{a: 11, b: 12}]
let newARR = arr.map((item)=>{ return { ...item , b:111 } })
console.log('arr数组',arr) // [{a: 1, b: 2},{a: 11, b: 12}]
console.log('newARR',newARR) // [{a: 1, b: 111},{a: 11, b: 111}]
// 四、使用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 ; } ; // 1 2
6.filter() 过滤
遍历数组,过滤筛选出符合条件的元素返回一个新的数组,没有符合条件时,返回空数组
var newarr = arr.filter((item,index)=>{ return 条件 })
var arr = [ { id: 1, name: '买笔', done: true } , { id: 2, name: '买笔记本', done: true },
{ id: 3, name: '练字', done: false } ]
var newArr = arr.filter(function (item, index) { return item.done }) console.log(newArr)
// [{ id: 1, name: '买笔', done: true },{ id: 2, name: '买笔记本', done: true }]
7.some((item,index,array)=>{})
遍历数组,只要有满足条件的元素就返回true,否则返回false;
检测到有一个满足条件就停止了,否则继续检测.
var arr = [ { id: 1, name: '买笔', done: true } , { id: 2, name: '买笔记本', done: true },
{ id: 3, name: '练字', done: false } ]
var bool = arr.some(function (item, index) { return item.done })
console.log(bool) // true
8.every((item,index,array)=>{})
遍历数组,所有元素都满足条件返回true,否则返回false
注意:空数组调用every返回true
var arr = [ { id: 1, name: '买笔', done: true } , { id: 2, name: '买笔记本', done: true },
{ id: 3, name: '练字', done: false } ]
var bool = arr.every(function (item, index) { return item.done }) console.log(bool) // false
8.reduce(callback,[initialValue]) 实现数据的累加
arr.reduce(function(prev, cur, index, array){ // array:原数组 prev:上一次调用回调时的返回值，或者初始值 initcur:当前正在处理的数组元素index:当前正在处理的数组元素的索引 init:初始值}, init)
array.reduce( ( accumulator,currentValue,currentIndex,array )=>{
accumulator：累加器 每次迭代的结果
currentValue：当前数组中的元素 会遍历数组 得到数组中的值
currentIndex：当前元素在数组中的下标
array：数组对象本身
initialValue：可选参数，会影响accumulator的初始值，分两种情况：
如果没给initialValue,那么accumulator取自数组中的第一个元素，此时currentValue会取自数组中的第二个元素，开始迭代
如果给定了initialValue，那么initialValue会作为accumulator的初始值，此时currentValue会取自数组中的第一个元素，开始迭代
} [initialValue：初始值])
//求和varsum = arr.reduce(function (prev, cur) { return prev + cur; } , 0 ) ;
//取最大值varmax = arr.reduce(function (prev, cur) { return Math.max(prev,cur ) ; });
9.find() 指定元素查找
遍历数组,原数组不改变返回符合条件的第一个元素,没有符合条件的元素时返回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
10.findIndex()指定元素查找下标
遍历数组,不会改变原数组,返回符合条件的第一个元素的下标,没有符合条件的元素时返回-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
