JS数组遍历

for循环

let arr = [1,2,3]
for(let i = 0; i < arr.length; i++){  // √ 遍历数组
	console.log(arr[i])
}

let str = '1312'
for(let i = 0; i < str.length; i++){  // √ 遍历字符串
    console.log(str[i])
}

let num = 123123
for(let i = 0; i < num.length; i++){ // × 不能遍历数字
    console.log(num[i])
}

let obj = {
    a:1,
    b:2
}
for(let i = 0; i < obj.length; i++){ // × 不能遍历对象
    console.log(obj[i])
}

for in

//for  in 可以遍历数组,字符串和对象
//用法：
for(let 变量 in 对象){}

// for  in 遍历数组和字符串时，变量是下标
let arr = [1,2,3,4]
for(let key in arr){
    console.log(key)  // 0 1 2 3
    console.log(arr[key]) // 1 2 3 4
}

//for  in 遍历对象时，变量是对象的键
var obj = {
    a:1,b:2,c:3
}
for(let key in obj){
    console.log(key) // a b c
    console.log(obj[key]) // 1 2 3
}

//for  in 有一个问题,他会把原型上的东西也遍历下来。慎用!!
Array.prototype.a = function(){
    e = 3
}
var arr = [1,2,3]
for(let key in arr){
    console.log(arr[key]) // 1 2 3 function(){e = 3}
}


Object.prototype.aa = function(){
    aaa = 1
}
var obj = {
    a:1,b:2,c:3
}
for(let key in obj){
    console.log(obj[key]) // 1 2 3 function(){aaa = 1}
}

for of

//for  of 可以遍历数组,字符串 不可以遍历对象
//  Array，Map，Set，String，TypedArray，arguments 对象等等
//用法：
for(let 变量 of 对象){}

// for  of 遍历出来的变量是每一项的值
var arr = [1,2,3]
for(let val of arr){
	console.log(val) // 1 2 3
}

let str = '4321'
for(let val of str){
    console.log(val) // 4 3 2 1
}

forEach

// forEach是数组的遍历方法
//用法：
let arr = [1,2,3,4]
arr.forEach((item,index,array) => { 
    console.log(item,index,array)
})
// forEach回调函数接收三个参数: 第一个是目前处理的这一项 第二个是目前处理的这一项的下标 第三个是整个被遍历的数组本身
// forEach没有返回值

map

// map是数组遍历的方法，用法和forEach差不多，但是会返回一个新数组
// map回调函数接收三个参数: 第一个是目前处理的这一项 第二个是目前处理的这一项的下标 第三个是整个被遍历的数组本身
let arr = [1,2,3,4,5]
var num = arr.map((item) => {
    return item + 10
})
console.log(num) // [11,12,13,14,15]


//如果不return 则返回undefined
let arr = [1,2,3,4,5]
var num = arr.map((item) => {
   
})
console.log(num) // [undefined,undefined,undefined,undefined,undefined]

filter

// filter是数组遍历的方法，有返回值，返回值生成一个新数组
// 当 return 为 true 的时候返回这一项的值，return 为false的时候不返回
// filter回调函数接收三个参数: 第一个是目前处理的这一项 第二个是目前处理的这一项的下标 第三个是整个被遍历的数组本身
let arr = [1,2,3,4,5]
var num = arr.filter((item,index,array) => {
    return item > 2 // 可以写判断条件
})
console.log(num) // [3,4,5]


// 返回数组中所有的偶数
let arr = [56, 15, 48, 3, 7]
let num = arr.filter(function (item,index,array) {
    return item % 2 === 0;
})
console.log(num) // [56,48]

// 如果没有return，返回空数组[]。会全部遍历
let arr = [1,2,3,4,5]
var num = arr.filter((item,index,array) => {
    console.log(item) // 1 2 3 4 5
})
console.log(num) // []

some

// some是数组遍历的方法，有返回值，只返回true或false
// 只要判断条件中有一个达成，那么就返回true，否则返回false
// some回调函数接收三个参数: 第一个是目前处理的这一项 第二个是目前处理的这一项的下标 第三个是整个被遍历的数组本身
let arr = [1,2,3,4,5]
var num = arr.some((item,index,array) => {
	return item == 2
})
console.log(num) // true

let arr = [1,2,3,4,5]
var num = arr.some((item,index,array) => {
	return item == 20
})
console.log(num) // false

// some不会每一项都遍历，只要达成了true它就会结束遍历
let arr = [1,2,3,4,5]
var num = arr.some((item,index,array) => {
    console.log(item) // 1 2
	return item == 2
})

// 如果没有return，返回false。会全部遍历
let arr = [1,2,3,4,5]
var num = arr.some((item,index,array) => {
    console.log(item) // 1 2 3 4 5
})
console.log(num) // false

every

// every是数组遍历的方法，有返回值，只返回true或false
// 只要判断条件中有一个未达成，那么就返回false，全部达成返回true
// every回调函数接收三个参数: 第一个是目前处理的这一项 第二个是目前处理的这一项的下标 第三个是整个被遍历的数组本身
let arr = [1,2,3,4,5]
var num = arr.every((item,index,array) => {
    return item < 10
})
console.log(num) // true 

let arr = [1,2,3,4,5]
var num = arr.every((item,index,array) => {
    return item < 2
})
console.log(num) // false

//every不会每一项都遍历，只要有一项为false它就结束遍历
let arr = [1,2,3,4,5]
var num = arr.every((item,index,array) => {
    console.log(item) // 1 2
    return item < 2
})

// 如果没有return,会返回false。只遍历一次
let arr = [1,2,3,4,5]
var num = arr.every((item,index,array) => {
    console.log(item) // 1
})
console.log(num) // false

find

// find是数组的遍历方法，有返回值，返回条件达成的第一个元素。如果都没达成，返回undefined
// find回调函数接收三个参数: 第一个是目前处理的这一项 第二个是目前处理的这一项的下标 第三个是整个被遍历的数组本身
// find不会全部遍历，条件达成时就结束遍历
let arr = [1,2,3,4,5]
var num = arr.find((item,index,array) => {
    console.log(item) // 1
    return item < 5  
})
console.log(num) // 1

//如果都没达成，返回undefined
let arr = [1,2,3,4,5]
var num = arr.find((item,index,array) => {
    return item > 5
})
console.log(num) // undefined

// 如果没有return,返回undefined。会遍历完整
let arr = [1,2,3,4,5]
var num = arr.find((item,index,array) => {
})
console.log(num) // undefined

findIndex

// findIndex是数组的遍历方法，和find差不多，有返回值。返回条件达成的第一个元素的下标。如果都没达成，返回-1
// findIndex回调函数接收三个参数: 第一个是目前处理的这一项，必填 第二个是目前处理的这一项的下标 第三个是整个被遍历的数组本身
// findIndex不会全部遍历，条件达成时就结束遍历
let arr = [1,2,3,4,5]
var num = arr.findIndex((item,index,array) => {
    console.log(item) // 1
    return item < 5
})
console.log(num) // 0

// 如果都没达成，返回-1
let arr = [1,2,3,4,5]
var num = arr.find((item,index,array) => {
    return item > 5
})
console.log(num) // -1

// 如果没有return,返回-1。会遍历完整
let arr = [1,2,3,4,5]
var num = arr.findIndex((item,index,array) => {
})
console.log(num) // -1

reduce

// reduce 是数组的遍历方法。
// reduce 接收两个参数：第一个是回调函数 第二个是累计器第一次运行的参数（可选，不写时reduce从下标1开始遍历，第一次遍历的累计器值是下标0的值。写时按照正常遍历，第一次遍历累计器的值就是这个参数）
// reduce 回调函数接收四个参数：第一个是累计器，必填（第一次遍历的值时默认值，之后每次一的值时前一次遍历的return值） 第二个是当前值，必填 第三个是当前下标，可选 第四个是遍历的数组本身，可选
// reduce 有返回值，是最后一次遍历的 return 值

let arr = [5,6,7,8,9]
let num = arr.reduce((prev,item,index,array) => { 
    console.log(prev) // 5 6 7 8
    console.log(item) // 6 7 8 9
    return prev+item
}) // 这里reduce没写第二个参数，所以方法执行4次
console.log(num) // 35

let arr = [5,6,7,8,9]
let num = arr.reduce((prev,item,index,array) => {
    console.log(prev) // 0 5 6 7 8
    console.log(item) // 5 6 7 8 9
    return prev+item
},0) // 这里写了第二个参数，所以方法执行5次
console.log(num) // 35

// 如果没有 return 则返回 undefined
let arr = [5,6,7,8,9]
let num = arr.reduce((prev,item,index,array) => {
    console.log(prev) // 0 undefined undefined undefined undefined
    console.log(item) // 5 6 7 8 9
},0)
console.log(num) // undefined

// 如果数组只有一个元素且方法没有第二个参数，则返回数组第一个元素，回调函数不执行
let arr = [5]
let num = arr.reduce((prev,item,index,array) => {
    console.log(prev) // 没有，因为没执行这个函数
    return prev+item
})
console.log(num) // 5

// 如果数组只有一个元素且方法有第二个参数，回调函数会正常执行
let arr = [5]
let num = arr.reduce((prev,item,index,array) => {
    console.log(prev) // 0 
    return item+123
},0)
console.log(num) // 128

// reduce 一些用法
// 数组去重
let arr = [2,3,4,5,6,7,8,7,6,5,3,2,3,4,5,0,9,8,7,5,4,3]
let arr1 = arr.reduce((pr,item,index,array) => {
    if(pr.indexOf(item) === -1){
        pr.push(item)
    }
    return pr
},[])
console.log(arr1) // [2, 3, 4, 5, 6, 7, 8, 0, 9]

// 二维数组转一维数组
let arr = [[1,2],[3,4],[5,6],[7,8]]
let arr1 = arr.reduce((pr,item,index,array) => {
    return pr.concat(item)
},[])
console.log(arr1) // [1, 2, 3, 4, 5, 6, 7, 8]

forEach,map,filter,some,every,find,findIndex,reduce的一些共性

// 都是数组Array的方法

// 都不会改变原数组

// 在方法被调用时调用的范围就已经确定了。以下是人为改变原数组，不是方法改变
let arr = [1,2,3,4,5]
arr.forEach((item) =>{ // 从这里开始确定遍历范围 0-4 ，共5次
    arr.unshift(1) // 这里是给数组最前面添加一项，1
    console.log(item) // 1 1 1 1 1
})
console.log(arr) // [1,1,1,1,1,1,2,3,4,5]

let arr = [1,2,3,4,5]
arr.forEach((item) =>{
    arr.push(1) // 这是在数组后面添加一项，1
    console.log(item) // 1 2 3 4 5
})
console.log(arr) // [1,2,3,4,5,1,1,1,1,1]

let arr = [1,2,3,4,5]
arr.forEach((item) =>{
    arr[0] = 100 // 由于第一次运行的时候item就是arr[0] 所以打印item就是 1 
    arr[1] = 200
    console.log(item) // 1 200 3 4 5
})
console.log(arr) // [100,200,3,4,5]

let arr = [1,2,3,4,5]
arr.forEach((item) =>{ // 由于数组长度不足5,所以没办法遍历5次
    arr.pop() // 每次运行删除数组最后一项
    console.log(item)  // 1 2 3
})
console.log(arr) // [1,2]