js中常见的循环遍历

1. for循环，可以break结束循环。

arr = [1,2,3,4,5,6]
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]) //1,2,3,4,5,6
}

2. for...in循环，用于对象循环遍历，可获取对象的对应键值

[注意]：for…in循环对象的所有枚举属性，需再使用hasOwnProperty()方法来忽略继承属性，即在循环内部判断一下，某个属性是否为对象自身的属性，避免出现遍历失真的情况。

let obj = { name: 'Tom', sex: 'male', age: '18' }
for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(obj[key])
  }
}
// Tom
// male
// 18

3. map方法将数组的所有成员依次传入参数函数，然后把每一次的执行结果组成一个新数组返回。循环中途无法停止，会将所有成员遍历完。

let arr = [1,2,3,4,5]
let arr2 = arr.map((n)=>{
  return n+1
})
console.log(arr2) // [2,3,4,5,6]
console.log(arr)  // [1,2,3,4,5]

此外，map方法接受一个函数作为参数。该函数调用时，map方法向它传入三个参数：当前成员item、当前位置index和数组本身arr。

let objArr = [
  { name: 'Tom', sex: 'male', age: '18' },
  { name: 'Jerry', sex: 'male', age: '16' },
  { name: 'Caty', sex: 'male', age: '20' },
]
objArr.map((item, index, arr)=>{
  console.log(item.name) //Tom Jerry Caty
  console.log(index) // 0 1 2
  console.log(objArr) //objArr
})

4. forEach的使用方法和map差不多,只是forEach方法 不返回值，只用来操作数据，且循环中途无法停止，会将所有成员遍历完。

传入三个参数：当前成员item、当前位置index和数组本身arr。

let objArr = [
  { name: 'Tom', sex: 'male', age: '18' },
  { name: 'Jerry', sex: 'male', age: '16' },
  { name: 'Caty', sex: 'male', age: '20' },
]
objArr.forEach((item, index, arr)=>{
  console.log(item.name) //Tom Jerry Caty
  console.log(index) // 0 1 2
  console.log(objArr) //objArr
})

5. filter过滤循环

filter方法用于过滤数组成员，满足条件的成员组成一个新数组返回。它的参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。

传入三个参数：当前成员item、当前位置index和数组本身arr。

let objArr = [
  { name: 'Tom', sex: 'male', age: '18' },
  { name: 'Jerry', sex: 'male', age: '16' }
]
let obj2 = objArr.filter((item, index, arr)=>{
  return (item.name === 'Tom')
})
console.log(obj2)  // [{ name: 'Tom', sex: 'male', age: '18' }]

ECMAScirpt5 中 Array 类中的 filter 方法使用目的是移除所有的 ”false“ 类型元素 (false, null, undefined, 0, NaN or an empty string)：

let arr = [3, 4, 5, 2, 3, undefined, null, 0, ""];
let arrNew = arr.filter(Boolean);
console.log(arrNew)  //  [3, 4, 5, 2, 3]

Boolean 是一个函数，它会对遍历数组中的元素，并根据元素的真假类型，对应返回 true 或 false.

6. Object.keys 遍历对象的属性

Object.keys方法的参数是一个对象，返回一个数组。该数组的成员都是该对象自身的（而不是继承的）所有属性名，且只返回可枚举的属性。

let obj = { name: 'Tom', sex: 'male', age: '18' };
console.log(Object.keys(obj)) // ["name", "sex", "age"]
console.log(Object.values(obj)) // ["Tom", "male", "18"]

判断一个对象是否是空对象，可以用Object.keys(obj).length>0

总结对比

方法	适用于	是否停止循环	用法
for	数组	break结束循环	for (let i = 0; i < arr.length; i++) { … }
for…in	数组	break结束循环	for(let key in obj){ … }
map	数组	无法停止	objArr.map((item, index, arr)=>{…}）
forEach	数组	无法停止	objArr.forEach((item, index, arr)=>{…})
filter	数组	------	let arr2 = arrObj.filter((item,index,arr)=>{ return ?})
Object.keys	数组	------	Object.keys(obj) ，返回的是数组

数组的增删改

在数组 arr 开头添加元素 item。结果返回新的数组。

//输入：[1, 2, 3, 4],  10
//输出：[10, 1, 2, 3, 4]
function prepend(arr, item) {
    let res = [...arr]
    res.unshift(item)
    return res
}

在数组 arr 末尾添加元素 item。结果返回新的数组。

//输入：[1, 2, 3, 4],  10
//输出：[1, 2, 3, 4, 10]
function append(arr, item) {
   return arr.concat(item)
}

删除第一个元素。结果返回新的数组。

//输入：[1, 2, 3, 4]
//输出：[2, 3, 4]
function curtail(arr) {
    let res = [...arr]
    res.shift() //删除第一个元素，并返回第一个元素的值。改变原数组长度
    return res
}
//或者
function curtail(arr) {
   return arr.slice(1)
}

删除最后一个元素

//输入：[1, 2, 3, 4]
//输出：[1, 2, 3]
function delete(arr, item) {
   return arr.slice(0,-1)
}

删除数组 arr 中的所有值与 item 相等的元素， 操作原数组，并返回结果

//输入：[1, 2, 2, 3, 4, 2, 2], 2
//输出：[1, 3, 4]
function removeWithoutCopy(arr, item) {
    for (let i = 0; i < arr.length; i++) {
        if(arr[i] == item){
            arr.splice(i, 1)
            i--
        }
     }
    return arr
}

移除数组 arr 中的所有值与 item 相等的元素。不要直接修改数组 arr，结果返回新的数组

//输入：[1, 2, 3, 4, 2], 2
//输出：[1, 3, 4]
function removeCopy(arr, item) {
    let res = arr.filter(el=>{
        return el != item
    })
    return res
}

在数组 arr 的 index 处添加元素 item。不要直接修改数组 arr，结果返回新的数组

//输入：[1, 2, 3, 4], 'aaa', 2
//输出：[1, 2, 'aaa', 3, 4]
function insert(arr, item, index) {
    let res = [...arr]
    res.splice(index, 0, item)
    return res
}

map和filter对比