javascript 基础之 - 迭代

按顺序访问集合中的第一层次的每一项.
遍历迭代循环不必分的太细, 能完成业务需求就好.

常规迭代

• 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);
})