你能想到的前端遍历都在这里了!

前端遍历的存在，极大地简化了我们处理业务数据的繁琐程度。所以熟悉并灵活运用他们可大大地提高我们的效率。下面就一一熟悉他们吧！

你能想到的前端遍历都在这里了!

遍历方法目录

for循环 - 稍许繁琐，可中断（break），可跳过（conttinue）
for-of - 简化for循环，更加灵活，无需索引
for-in - 对象遍历，一般不用于数组遍历
while - 当循环次数不限制、不确定一时使用
forEach - 适合对每个元素执行操作；没有返回值，会改变原数组
some - 返回值为true或者false；只要一个元素满足条件，则返回true
every - 返回值为true或者false；所有元素都满足条件，返回true
filter - 根据指定的条件筛选出数组中满足条件的元素，返回数组或[]
find - 查找满足指定条件的第一个元素，返回元素或undefined
findLast - 查找满足指定条件的最后一个元素，返回元素或undefined
findIndex - 查找满足指定条件的第一个元素索引，返回索引或者-1
findLastIndex - 查找满足指定条件的最后一个元素索引，返回索引或者-1
map - 每个元素的映射，可以为每个元素根据展示要求进行处理
reduce - 求和，求平均数，字符串返转，数组扁平化
reduceRight - 跟上面方法区别就是从后往前遍历
sort - 降序排序，升序排序列；会改变原数组

一一拆解

1.for循环

for循环是最早也是最常见的一种遍历。因其写起来稍显繁琐，逐渐被其它遍历方法所取代。但其有一个地位是不可撼动的-可中断循环，这是其它遍历所不不能实现的。所以某些情境五，我们不得不乖乖地来启用这个古老的语法。

示例：

let arr = [2,3,5,9,1,7]
for(let i = 0; i < arr.length - 1; i++) {
  if(arr[i] > 5) {
    console.log('大于5不显示')
    break; 
  }
  console.log(arr[i]) //2,3,5
}
console.log('这里显示吗？') //这里是否显示取决于前面是break,continue

最后一个console是否显示，取决环境前一个{}里的关键记是break还是continue：

break: 跳出循环，可以执行循环体外的代码；输出：2,3,5,大于5不显示,这里显示吗？

continue: 跳出本次循环，继续循环。如此例return换做continue，则输出：2,3,5,大于5不显示,1,这里显示吗？

2.for-of

for-of语句，略过索引，写起来更加简便。使用它可以将每一项元素依次循环出来，还可以将迭代对象循环出来。

迭代对象包括：Array、Set、Map、Arguments、String、Typed Array、Generators这7类。而Object类型不是可迭代对象。

示例：

let arr = [2,3,5,9,1,7]
for(let item of arr) {
   console.log(item) //2,3,5,9,1,7
}

3.for-in

for in 循环是一种特殊类型的循环，主要用来遍历对象也可以遍历数组（但是不推荐），使用它可以将对象中的属性依次循环出来。

示例：

let obj = {
   a: null,
   b: 1,
   c: 'adf'
}
for(let key in obj) {
     console.log(obj[key])
}
Object.prototype.sayHello = function(){
    console.log('hello');
}
Object.prototype.str = 'world'
var myObject = {name:'dd',age:12}
for (const key in myObject) {
   console.log(key);
}

4.while

在while和do/while里，记得一定要自加或自减，否则会无限循环下去...

while只有当循环条件成立时，才会执行{}里的代码。

语法如下：

while (condition) {
    // 要执行的代码块
}

示例：

var i = 0;
while (i < 10) {
    console.log(i)
    i++;
}

do/while是while的变体。它与 while 循环的不同在于，在检查条件是否为真之前，该循环将会执行一次代码块，然后只要条件为真，它就将重复该循环。

语法如下：

do {
    // 要执行的代码块
} while(condition);

示例：

var i = 0;
do {
   console.log(i)
   i++
} while(i < 10);

5.forEach

返回值：undefined;

是否改变原数组：改变原数组。

语法：

数组名.forEach((item, index, array) => { /* … */ }, thisValue)

item：指数组中的每一个元素；

index：指各个元素相对应的索引；

array：指数组本身，一般可以不写。

thisValue : 可选, 对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined";

示例：

let arr = [2,3,5,9,1,7]
arr.forEach((item, index) => {
  console.log('第'+index+'个数：'+ item)
})

6.some

数组中只要有一个元素符合条件就返回true，否则就返回false。

返回值：true | false;

是否改变原数组：不改变原数组。

语法：

数组名.some( (item, index, array) => { /* … */ }, thisValue)

同上...

示例：

let arr = [2,3,5,9,1,7]
let result1 = arr.some((item, index) => {
return item > 10
})
console.log(result1) //false
let result2 = arr.some((item, index) => {
return item > 5
})
console.log(result2) //true

7.every

数组中所有元素都符合条件才返回true，否则就返回false。

返回值：true | false;

是否改变原数组：不改变原数组。

语法：

数组名.every( (item, index, array) => { /* … */ }, thisValue)

同上...

示例：

let arr = [2,3,5,9,1,7]
let result1 = arr.every((item, index) => {
  return item > 0
})
console.log(result1) //true
let result2 = arr.every((item, index) => {
  return item > 5
})
console.log(result2) //false

8.filter

查找数组中符合条件的所有元素。

返回值：[] | 符合条件的数组;

是否改变原数组：不改变原数组。

语法：

数组名.filter( (item, index, array) => { /* … */ }, thisValue)

同上...

示例：

let arr = [2,3,5,9,1,7]
let arr1 = [
  {
    id: 1,
    name: '张三',
    age: 20
  },
  {
    id: 2,
    name: '李四',
    age: 30
  },
  {
    id: 3,
    name: '前端晨话',
    age: 60
  },
  {
    id: 4,
    name: '小明',
    age: 35
  },
  {
    id: 5,
    name: '小红',
    age: 18
  }
]
// filter
let filter1 = arr.filter( item => item > 5) //[9, 7]
let filter2 = arr1.filter( item => item.age > 40) //[{id: 3, name: "前端晨话", age: 60}]
let filter3 = arr1.filter( item => item.age > 60) //[]

9.find

返回符合条件的第一个元素。

返回值：undefined | 符合条件的元素;

是否改变原数组：不改变原数组。

语法：

数组名.find( (item, index, array) => { /* … */ }, thisValue)

同上...

示例：

let arr = [2,3,5,9,1,7]
let arr1 = [
  {
    id: 1,
    name: '张三',
    age: 20
  },
  {
    id: 2,
    name: '李四',
    age: 30
  },
  {
    id: 3,
    name: '前端晨话',
    age: 60
  },
  {
    id: 4,
    name: '小明',
    age: 35
  },
  {
    id: 5,
    name: '小红',
    age: 18
  }
]
let find1 = arr.find(item => item > 5) // 9
let find2 = arr1.find( item => item.age > 40) //{id: 3, name: "前端晨话", age: 60}
let find3 = arr1.find( item => item.age > 60) // undefined

filter：返回[]或者数组;
find：返回undefined或者查找到的第一个元素

10.findLast

findLast与find类似，惟一区别就是查找顺序-findLast是从右侧往左侧查找，找到最后一个（从前往后数是最后一个，从后往前数是第一个）符合条件的元素。

返回值：undefined | 符合条件的元素;

示例：

let arr = [2,3,5,9,1,7]
let arr1 = [
  {
    id: 1,
    name: '张三',
    age: 20
  },
  {
    id: 2,
    name: '李四',
    age: 30
  },
  {
    id: 3,
    name: '前端晨话',
    age: 60
  },
  {
    id: 4,
    name: '小明',
    age: 35
  },
  {
    id: 5,
    name: '小红',
    age: 18
  }
]
let findLast1 = arr.findLast(item => item > 5) // 7
let findLast2 = arr1.findLast( item => item.age > 40) // {id: 3, name: "前端晨话", age: 60}
let findLast3 = arr1.findLast( item => item.age > 60) // undefined

11.findIndex

返回符合条件的索引，没有查到则返回-1。

返回值：-1 | 符合条件的元素索引;

示例：

let arr = [2,3,5,9,1,7]
let arr1 = [
  {
    id: 1,
    name: '张三',
    age: 20
  },
  {
    id: 2,
    name: '李四',
    age: 30
  },
  {
    id: 3,
    name: '前端晨话',
    age: 60
  },
  {
    id: 4,
    name: '小明',
    age: 35
  },
  {
    id: 5,
    name: '小红',
    age: 18
  }
]
let findIndex1 = arr.findIndex(item => item > 5) // 2
let findIndex2 = arr1.findIndex( item => item.age > 40) // 2
let findIndex3 = arr1.findIndex( item => item.age > 60) // -1

12.findLastIndex

findLastIndex与findIndex类似，唯一区别是筛查顺序。查到到最后一个符合条件的元素的索引。这个索引可是从前往后数的噢！

返回值：-1 | 符合条件的元素索引;

示例：

let findLastIndex1 = arr.findLastIndex(item => item > 5) // 4
let findLastIndex2 = arr1.findLastIndex( item => item.age > 40) // 2
let findLastIndex3 = arr1.findLastIndex( item => item.age > 60) // -1

findLast 和 findLastIndex
是最新提案，目前在微信小程序中不支持，会报错。不知道把小程序升级到最高版是否还会报错。

13.map

map是一种映射。在需要为每一项元素按照指定规则变化时使用。返回新数组。

返回值：undefined | 符合条件的元素;

是否改变原数组：不改变原数组。

语法：

数组名.map( (item, index, array) => { /* … */ }, thisValue)

同上...

示例：

let arr = [2,3,5,9,1,7]
let arr1 = [
  {
    id: 1,
    name: '张三',
    age: 20
  },
  {
    id: 2,
    name: '李四',
    age: 30
  },
  {
    id: 3,
    name: '前端晨话',
    age: 60
  },
  {
    id: 4,
    name: '小明',
    age: 35
  },
  {
    id: 5,
    name: '小红',
    age: 18
  }
]
let map1 = arr.map(item => {
	return item * 2
}) 
let map2 = arr1.map( item => {
	item.age = item.age * 2
	return item
})
console.log(map1) //[4, 6, 10, 18, 2, 14]
console.log(map2) //(5) [{…}, {…}, {…}, {…}, {…}]

14.reduce

返回值: 最终累积结果：reduce方法返回最终的累积结果，可以是任意数据类型，如数字、字符串、对象或数组。

是否改变原数组: 不改变原数组

语法：

数组名.reduce((prev, cur, index, arr) => { /* … */ }, init)

prev：表示上一次调用回调时的返回值，或者初始值 init;

cur：表示当前正在处理的数组元素；

index：表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；

arr : 表示原数组，可不写;

init：初始值，可选项。

当没有传入初始值时，prev是从数组中第一个元素开始的，cur 是数组第二个元素。
但是当传入初始值（init）后,第一个 prev 将是初始值 init，cur 将是数组中的第一个元素。

reduce有多种应用：

应用1-求和：

示例：

let arr = [2,3,5,9,1,7]
let arr1 = [
  {
    id: 1,
    name: '张三',
    age: 20
  },
  {
    id: 2,
    name: '李四',
    age: 30
  },
  {
    id: 3,
    name: '前端晨话',
    age: 60
  },
  {
    id: 4,
    name: '小明',
    age: 35
  },
  {
    id: 5,
    name: '小红',
    age: 18
  }
]
let reduce1 = arr.reduce((pre, cur, curIndex, arr) => {
  return pre + cur
}) // 24
let reduce2 = arr1.reduce( (pre, cur, curIndex, arr) => {
  return pre.age + cur.age
}) // NaN-不适合对象数组

应用2-求平均：

求和与求平均类似，求和之后天的返回值再求平均就OK。

示例：

let arr = [2,3,5,9,1,7]
let reduce3 = arr.reduce((pre, cur, curIndex, arr) => pre + cur) / arr.length //4.8

应用3-数组无素最大值和最小值：

求数组中的最大值和最小值，简直不要太简单。直接使用只适合于一维数组。

示例：

let arr = [2,3,5,9,1,7]
let reduce6 = arr.reduce((pre, cur, curIndex, arr) => Math.max(pre, cur)) // 9
let reduce7 = arr.reduce((pre, cur, curIndex, arr) => Math.min(pre, cur)) // 1

应用4-数组扁平化：

只适合一维或二维数组，多维不适合

示例：

let arr2 = [[3,3,4], [2,6], [1,0]]
let arr3 = [
[
{id: 1},
{id: 2}
],
[
{id: 4}
],
[
{id: 5},
{id: 6}
]
]
let reduce4 = arr2.reduce((pre, cur, curIndex, arr) => pre.concat(cur)) // [3, 3, 4, 2, 6, 1, 0]
let reduce5 = arr3.reduce((pre, cur, curIndex, arr) => pre.concat(cur))

15.reduceRight

reduceRight与reduce惟一区别就是迭代方向是从右侧往前。

主要有以下两种应用：

应用1-字符串返转：

首先需要先将字符串转化成数组-reduceRight是对数组的操作。

示例：

let str="您好，世界！"
let reduceRight1 = [...str].reduceRight((total, cur) => total + cur) //！界世，好您

应用1-扁平化树结构：

这个应用是某大老发出的，不是很懂。留个记号，以备后用。

const tree = {
  name: 'A',
  children: [
    { 
      name: 'B',
      children: [
        { name: 'D', children: [] },
        { name: 'E', children: [] }
      ]
    },
    { name: 'C', children: [] }
  ] 
};
function flattenTree(tree) {
  return [tree, ...tree.children.reduceRight((acc, curr) => {
    return [...acc, ...flattenTree(curr)];
  }, [])];
}

const flattenedTree = flattenTree(tree);

console.log(flattenedTree);

16.sort

sort的功能是排序。

返回值: 返回排序后的新数组；

是否改变原数组: 改变原数组

语法：

数组名.sort( (a, b) => { /* … */ })

a, b为前后两个连续的元素。

如果返回值结果小于0，则a和b的顺序不变;
如果返回值结果等于0，则a和b的顺序不变;
如果返回值的结果大于0，a和b会交换位置。

就是根据以上规则进行升序或者是降序排序的。

a - b：升序；

b - a：降序。

示例：

var arr1 = [{
    name: 'zhangsan',
    age: 20
}, {
    name: 'lisi',
    age: 15
}, {
    name: 'wangwu',
    age: 17
}, {
    name: 'zhaoliu',
    age: 23
}, {
    name: 'fengqi',
    age: 31
}, {
    name: 'xiaoming',
    age: 11
}];
var arr2 = [{
    name: 'zhangsan',
    age: 20
}, {
    name: 'lisi',
    age: 15
}, {
    name: 'wangwu',
    age: 17
}, {
    name: 'zhaoliu',
    age: 23
}, {
    name: 'fengqi',
    age: 31
}, {
    name: 'xiaoming',
    age: 11
}];
let arr3 = [3, 4, 1, 0, 9]
let arr4 = [3, 4, 1, 0, 9]
arr1.sort((a, b) => a.age - b.age) // 升序
arr2.sort((a, b) => b.age - a.age) // 降序
arr3.sort((a, b) => a - b) // 升序
arr4.sort((a, b) => b - a) // 降序
console.log(arr1)
console.log(arr2)
console.log(arr3)
console.log(arr4)

网站首页 > 基础教程正文

猜你喜欢

网站首页 > 基础教程 正文

你能想到的前端遍历都在这里了!

猜你喜欢

网站首页 > 基础教程正文