for 循环 (ES5)
最简单的一种循环遍历方法,也是使用频率最高的一种,可优化
针对for循环,循环条件总比循环体要多执行一次
const arr = [1, 2, 3]
for(let i = 0; i < arr.length; i++) {
console.log(arr[i]) // 1 2 3
}
for…in (ES5)
for…in循环非常不建议用在数组上,for…in是为遍历对象属性而构建的,当然数组也可以用
for...in循环
在使用过程中要小心一点,可能会出现问题
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
for(let index in arr) {
console.log(index);
}
// 0 1 2 3 4 5 6 7 8
forEach() (ES5)
语法:array.forEach(callbackFn(currentValue, index, arr), thisValue)
其他语法:
// 箭头函数
forEach((element) => { /* … */ })
forEach((element, index) => { /* … */ })
forEach((element, index, array) => { /* … */ })
// 回调函数
forEach(callbackFn)
forEach(callbackFn, thisArg)
// 内联回调函数
forEach(function(element) { /* … */ })
forEach(function(element, index) { /* … */ })
forEach(function(element, index, array){ /* … */ })
forEach(function(element, index, array) { /* … */ }, thisArg)
forEach循环没有返回值,数组里的元素个数有几个,该方法里的回调就会执行几次
forEach 循环本身不支持 continue 和 break语句的
continue可以用 return false 或 return true 代替
break可以用 try catch/every/some 代替
const arr = [1, 2, 3, 4, 5, 6];
arr.forEach((item, index, arr) => {
console.log(item) // 当前元素 1 2 3 4 5 6
console.log(index) // 数组里当前元素的索引值 0 1 2 3 4 5
});
map() (ES5)
map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值
map 循环必须 return
map 循环不会改变原数组
语法:array.map(function(currentValue, index, arr), thisValue)
let arr = [1, 2, 3, 4, 5]
let newArr = arr.map(item => {
return item + 1
})
console.log(arr,newArr)
// 1 2 3 4 5
// 2 3 4 5 6
filter() (ES5)
filter() 循环会返回一个符合条件的新数组,新数组中的元素是通过检查指定数组中符合条件的所有元素
filter 循环不会改变原数组
语法:array.filter(function(currentValue,index,arr), thisValue)
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const res = arr.filter((item,index,arr)=>{
return item > 3;
});
console.log(arr,res)
// 1, 2, 3, 4, 5, 6, 7, 8, 9
// 4, 5, 6, 7, 8, 9
some() (ES5)
some 循环查找数组中任意符合条件的元素并返回boolean值, 遍历数组,只要有一个以上的元素满足条件就返回 true,否则返回 false ,退出循环
some 循环不会改变原数组
const arr = [1, 2, 3, 4, 5];
const res = arr.some((item,index,arr) =>{
return item > 3
})
console.log(res) // true
every() (ES5)
every 循环查找数组中所有符合条件的元素并返回boolean值,只有当数组中有所有元素都符合条件才返回 true 否则返回 fasle
every 循环不会改变原数组
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const res = arr.every((item,index,arr)=>{
return item > 3
})
console.log(res); // false
reduce() (ES5)
reduce 循环接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
语法:array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
reduce的简单用法
const arr = [1, 2, 3, 4];
const mul = arr.reduce((x,y)=>x*y)
console.log( mul ); // 求乘积 24
const arr = [1,2,3,4]
const sum = arr.reduce((pre,cur)=>{
return pre +cur
})
console.log(sum) // 求和 10
reduce的高级用法
计算数组中每个元素出现的次数
let person = ['张三','李四','王五','张三','赵六','王五']
let nameObj = person.reduce((pre,cur) =>{
if( cur in pre){
pre[cur]++
}
else{
pre[cur] = 1
}
return pre
}, {})
console.log(nameObj) // {张三: 2, 李四: 1, 王五: 2, 赵六: 1}
数组去重
indexOf() 可返回某个指定的字符串值在字符串中首次出现的位置
如果没有找到匹配的字符串则返回 -1
let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
if(!pre.includes(cur)){
return pre.concat(cur)
}else{
return pre
}
},[])
console.log(newArr);// [1, 2, 3, 4]
let arr = [1,2,3,4,4,1]
let res = arr.reduce((pre,cur){
pre.indexOf(cur) == -1 && pre.push(cur)
return pre
},[])
console.log(pre);// [1, 2, 3, 4]
将二维数组转化为一维
concat() 用于连接两个或多个数组。
concat() 不会更改现有数组,而是返回一个新数组,其中包含已连接数组的值
let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]
将多维数组转化为一维
let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]
find() (ES6)
find()遍历数组,返回符合条件的第一个元素,如果没有符合条件的元素则返回 undefined
let arr = [1, 1, 2, 2, 3, 3, 4, 5, 6]
let num = arr.find(function (item, index) {
return item === 3
})
console.log(num) // 3
let arr = [1,2,2,3,3,3,3,4,4,5,6]
let num = arr.find((item:any) => {
return item === 10
})
console.log(num) // undefined
findIndex() (ES6)
findIndex()遍历数组,返回符合条件的第一个元素的索引,如果没有符合条件的元素则返回 -1
let arr = [1, 3, 7, 2, 3, 3, 4, 5, 6]
let num = arr.findIndex(function (item) {
return item === 7
})
console.log(num) // 2
let arr = [1,2,2,3,3,3,3,4,4,5,6]
let num = arr.findIndex((item:any) => {
return item === 10
})
console.log(num) // -1
for…of…(ES6)
不能循环对象,因为任何数据结构只要部署 Iterator接口,就可以完成遍历操作,有些数据结构原生具备 Iterator 接口,比如Array、Map、Set、String等,而 Iterator 接口是部署在数据结构的Symbol.iterator属性上的,而对象Object恰恰是没有Symbol.iterator属性的,所以无法被for..of遍历
for…of… 返回对应的内容
const arr = ['我', '是', '谁', '我', '在', '哪'];
for(let item of arr) {
console.log(item);
}
// 我 是 谁 我 在 哪
values()
values方法 返回对应的内容
const arr = ['我', '是', '谁', '我', '在', '哪'];
for(let item of arr.values()) {
console.log(item);
}
// 我 是 谁 我 在 哪
entries()
entries方法 返回对应的值和下标值
const arr = ['我', '是', '谁', '我', '在', '哪'];
for(let [index,item] of arr.entries()) {
console.log(index,item);
}
// 0 我
// 1 是
// 2 谁
// 3 我
// 4 在
// 5 哪