js 基础——遍历数据的常用方式

1、for

使用场景：常用于条件循环，满足条件继续循环

let arr = [1,2,3,4];
// 遍历数组，优化点：缓存长度，避免每次获取
for(let i = 0, let len = arr.length; i < len; i++ ){
    console.log(arr[i])
}

// 遍历字符串中的每一项
let str = 'myTest';
for(let i = 0, let len = str.length; i < len; i++ ){
    console.log(str[i])
}

以上用法可以使用while, do ...while等方法替代,区别 do...while 需要先执行一次语句在判断循环

let arr = [1,2,3]
let i = 0;
while(i < arr.length){
  console.log(arr[i]);
  i++;
}


do{
    console.log(arr[i]);
    i++;
}while(i < arr.length)

2、for ... in

使用场景： 常用于遍历对象的可枚举属性，也可用作数组遍历

let obj = {
   a(){

   },
   b: 1,
   c: '123'
 }

for(let k in obj){
  console.log(obj[k], k)
}
//使用Symbol对象 作为键的时候，该属性不可被枚举

数组遍历

let arr = [1,2,3]
for(let k in arr){
  console.log(k, arr[k])
}
// k 为 字符串类型

3、 for...of

使用场景：主要用于遍历数组、某些类似数组的对象（arguments）、Set和Map结构,不能用于遍历普通对象

var arr = [1,2,3];
for(var k of arr){
    // k为数组中的每一项
    console.log(k)
}

与for...in 的差别

for...in遍历的为对象的k值或下表，for...of 遍历的结果为数组的值

4、 forEach 与 map

共同点：

1.都是循环遍历数组中的每一项。
2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数：数组中的当前项item,当前项的索引index,原始数组input。
3.匿名函数中的this都是指Window。
4.只能遍历数组

不同点：

forEach()没有返回值,可以自己通过数组的索引来修改原来的数组

[].forEach(function(value,index,array){
    //do something

})

参数：value数组中的当前项, index当前项的索引, array原始数组；
数组中有几项，那么传递进去的匿名回调函数就需要执行几次；
理论上这个方法是没有返回值的，仅仅是遍历数组中的每一项，不对原来数组进行修改；但是可以自己通过数组的索引来修改原来的数组；

var ary = [12,23,24,42,1];  
var res = ary.forEach(function (item,index,input) {  
       input[index] = item*10;  
})  
console.log(res);//--> undefined;  
console.log(ary);//--> 通过数组索引改变了原数组；

map有返回值，可以return 出来,并不影响原来的数组，只是相当于把原数组克隆一份，把克隆的这一份的数组中的对应项改变了

arr[].map(function(value,index,array){
    do something
    return XXX

})

参数：value数组中的当前项,index当前项的索引,array原始数组；
区别：map的回调函数中支持return返回值；return的是啥，相当于把数组中的这一项变为啥（并不影响原来的数组，只是相当于把原数组克隆一份，把克隆的这一份的数组中的对应项改变了）；

var ary = [12,23,24,42,1];  
var res = ary.map(function (item,index,input) {  
    return item*10;  
})  
console.log(res);//-->[120,230,240,420,10];  原数组拷贝了一份，并进行了修改
console.log(ary);//-->[12,23,24,42,1]；  原数组并未发生变化

Jquery 中.map 的差异

共同点：

即可遍历数组，又可遍历对象。

不同点：

1、仅支持两个参数
each(item, index)
// 第一个参数是当前值，第二个为下标或k值,没有返回值

map(index, item) 
// 参数和each 相反，有返回值

数组遍历的其他方法

filter 返回一个满足过滤条件的新数组

some 只要有一个符合条件，返回true

every 每一项符合条件返回true,有一项不满足就返回false

reduce 方法有两个参数，第一个参数是一个回调函数（必须），第二个参数是初始值（可选）。回调函数有四个参数，依次为本轮循环的累计值、当前循环的元素（必须），该元素的下标（可选），数组本身（可选）。

// 没有初始值，从第二项开始遍历，第一项作为初始值
var arr = [1,2,3]
var num = arr.reduce((val, item, index, arr)=>{
  console.log(val, item, index, arr)
  return val + item
},


// 有初始值，从第一项开始执行
var num = arr.reduce((val, item, index, arr)=>{
  console.log(val, item, index, arr)
  return val + item
}, 5)