按顺序访问集合中的第一层次的每一项.
遍历迭代循环不必分的太细, 能完成业务需求就好.
常规迭代
- for 循环
// 什么是第一层次, 也就是深层遍历的反面
var arr = [1,2,[3,4]];
// 迭代的结果
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}
// 打印结果: 1 2 [3,4]
// 深层遍历
function deepTraverse(arr){
for(var i=0;i<arr.length;i++){
var item = arr[i]
if(Array.isArray(item)){
deepTraverse(item)
}
else{
console.log(item);
}
}
}
// 打印结果: 1 2 3 4
- for in 迭代
通常针对 {} 进行
// 1.针对 object
var obj = {
name:'xx',
age:18
}
// attr 为 obj 的 key 属性名
for(var attr in obj){
console.log(attr); // 'name' 'age'
console.log(obj[attr]); // 'xx' 18
}
// 2. 也可以用于数组
var arr = ['x','xx','xxx']
// index 为 数组的索引值
for(var index in arr){
console.log(index) ; // 0 1 2
console.log(arr[index]); // 'x' 'xx' 'xxx'
}
// 3. for in 不能访问到的情景
// 3-1. 已强制不可枚举
Object.defineProperty(obj,'sex',{
value:'boy',
enumerable: false,
})
for (var attr in obj) {
console.log(attr); // 'name' 'age'
}
// 3-2. Symbol 类型
var symbolKey = Symbol('version');
obj[symbolKey] = '1.0.0';
for (var attr in obj) {
console.log(attr); // 'name' 'age'
}
Array 其他迭代方式
forEach , map, filter 没有办法中途退出返回
every , some 在碰到一次返回非值
(false,undefined,”,0,null , NaN) 即终止
都必须有一个处理函数
- forEach, 按顺序访问每一项, 无返回值
参数说明: arr.forEach((val,index,data)=>{})
val : 当前项的值
index: 当前项的索引下标
data: 当前迭代的数组
var arr =[1,2,3,4]
arr.forEach((val,index,data)=>{
console.log(val)
})
- map, 遍历每一项 => Array
返回数组的长度永远等于初始数组的长度. map 每一项默认返回 undefined ,
参数表: (val, index , data) , 和 forEach 相同
val : 当前项的值
index: 当前项的索引下标
data: 当前迭代的数组
var arr = [1,2,3,4,5];
var newList = arr.map(item=>{
item *= 2
});
console.log(newList) // [2,4,6,8,10]
- filter ; 筛选出列表中符合条件的项 => Array
返回的数组的长度等于或小于原数组的长度, 筛选出回调函数中返回值为 true 的项.
参数表: (val, index , data) , 和 forEach 相同
val : 当前项的值
index: 当前项的索引下标
data: 当前迭代的数组
var arr = [1,2,3,4,5]
var filterList = arr.filter(item=>item>3);
console.log(filterList); // [4,5]
- every ; 判断每一项对条件比较的结果, 返回一个最终的判断结果, 遇到 非值 立即返回. => Boolean
参数表: (val, index , data) , 和 forEach 相同
val : 当前项的值
index: 当前项的索引下标
data: 当前迭代的数组
var arr = [1,2,3,4,5]
var isAllMinThanFour = arr.every((val,index,data)=>{
console.log(val); // 1,2,3,4
return val <4;
})
console.log(isAllMinThanFour); // false
- some ; 顺序访问每一项, 在有一项满足条件, 即返回 true => Boolean
参数表: (val, index , data) , 和 forEach 相同
val : 当前项的值
index: 当前项的索引下标
data: 当前迭代的数组
var arr = [1,2,3,4,5]
var isSomeMaxThanFour = arr.some((val,index,data)=>{
console.log(val); // 1,2,3,4,5
return val >4;
})
console.log(isSomeMaxThanFour); // true
- reduce
参数表和以上几种都不同 ( prev, now, index , data)
prev 初值 或者 数组第一项 或 上一次迭代的返回值
now 当前项的值
index 当前项的索引
data 当前迭代的数组
var arr = [1,2,3,4,5]
// 1. 无初值, 则以数组 第一个元素为初值, 遍历从第二个元素开始
// 接着以 回调函数的返回值, 作为 prev 项
var count = 0
var sum = arr.reduce((prev,now,index,data)=>{
console.log(prev,now,index,data);
count ++;
return prev + now;
})
console.log(count); // 4
console.log(sum); // 15
// 2. 有初值; 相当于在原数组 unshift 了一个初值, 但是却并没有影响到原来的数组的长度.
var count2 = 0;
var sum2 = arr.reduce((prev,now,index,data)=>{
console.log(prev,now,index,data);
count2 ++;
return prev + now;
},5);
console.log(count2); // 5
console.log(sum2); // 20
reduce 的简单模拟 , reduce 两大特点:
1. 无初始值时, 数组第一个值做为基准,从数组第二项开始遍历;
2. 每一次遍历, 回调函数的返回值作为下一轮遍历的初值.
function reduce(arr,callback,basicValue){
var hasBasicVal = !(basicValue === null || basicValue === undefined);
var copyArr = hasBasicVal ? [basicValue].concat(arr): arr ;
var startIndex = hasBasicVal ? 1 : 0;
var prevValue = copyArr[0];
for(var i=1,len = copyArr.length;i<len;i++){
prevValue = callback(prevValue,copyArr[i],i-startIndex,arr);
}
return prevValue;
}
var arr = [1,2,3,4,5]
var sum = reduce(arr,(prev,now,index,data)=>{
console.log(prev,now,index,data);
return prev + now
},0)
console.log(sum)
- reduceRight; 类似 reduce , 从右边遍历起
Object 其他迭代方式
- Object.keys => 对象所有的一级属性名
var obj = {
name:'xx',
age:18,
data:{
page:1
}
}
Object.keys(obj); // ["name", "age", "data"]
// 迭代
Object.keys(obj).forEach(key=>{
console.log(key,obj[key]);
})
- Object.values => 对象所有的一级属性值
var obj = {
name:'xx',
age:18,
data:{
page:1
}
}
Object.values(obj).forEach(val=>{
console.log(val);
})
- Object.entries => [ Object.keys , Object.values ]
番外 Set 迭代
var set1 = new Set(['x','xx','xxx']);
// 1. keys 迭代
// 1-1 常规 for of
for(var item of set1.keys()){
console.log(item)
}
// 1-2 转为 array 再 forEach 迭代
Array.from(set1.keys()).forEach((val,index,data)=>{
console.log(val,index,data);
})
// 或
[...set1].forEach((val,index,data)=>{
console.log(val,index,data);
})