以下例子皆以该数组为根底

const arr = [1, 2, 3]

1. for

一般版

for(let i = 0; i < arr.length;i++  ){    //代码}

优化版

// 应用长期变量，将长度缓存起来，防止反复获取数组长度，当数组较大时优化成果才会比拟显著。for(let i = 0, len=arr.length; i < len; i++) {   //代码}

for 循环和 for-in 能正确响应 break、continue 和 return语句，但 forEach 不行。

2. foreach

接管一个回调函数作为参数, 该回调接管3个参数。

  • tem：每个元素
  • index：元素数组下标
  • arr：数组自身

留神：

  • foreach() 不会对空数组进行检测。
arr.forEach((item,index,arr)=>{    //代码})

3. map

map的用法和forEach差不多，但 map 有返回值。

留神：

  • map() 不会对空数组进行检测。
  • map() 不会扭转原始数组。
const brr= arr.map((item,index,arr)=>{    //代码    return item * 2;})console.log(brr) // [2, 4, 6]

4. for-of

只有可迭代对象（iterator）能力应用（包含 Array，Map，Set，String，TypedArray，arguments 对象等等）。

一般对象不能应用。

for(let item of arr){    //代码}

5. filter

承受一个回调函数作为参数,返回值是一个新数组。

留神：

  • filter() 不会对空数组进行检测。
  • filter() 不会扭转原始数组。
const arr = [    {name:'tony',age:'20'},    {name:'jack',age:"30"}]const brr = arr.filter(item=>{    return item.age > 20;})console.log(brr) // [{name:'jack',age:"30"}]

6. every

every() 是对数组中的每一项运行给定函数。如果该函数对每一项返回 true ,则返回 true (全副符合条件)，否则返回 false。

留神：

  • every() 不会对空数组进行检测。
  • every() 不会扭转原始数组。
const arr= [50, 6, 70, 80];const flag = arr.every((item,index,arr)=>{    return item > 50; //每一项数据都要大于50})console.log(flag) // false

7. some

some()是对数组中每一项运行指定函数，如果该函数对任一项返回true，则返回true。(只有有一个合乎)，否则返回false

留神：

  • some() 不会对空数组进行检测。
  • some() 不会扭转原始数组。
const arr= [50, 6, 70, 80];const flag = arr.some((item,index,arr)=>{    return item > 50; //只有有一项数据都要大于50})console.log(flag) // true

8. reduce

reduce()办法接管一个函数作为累加器,数组中每个值(从左往右)开始缩减,最终计算为一个值。

reduce(fun, initialValue)

留神：

  • reduce() 对于空数组是不会执行回调函数的。
const arr = [1, 2, 3]arr.reduce((initialValue, currentValue, index, arr) => {    console.log(initialValue) // 第一次循环  initialValue = 1    return initialValue + currentValue; // 6   })arr.reduce((initialValue, currentValue, index, arr) => {    console.log(initialValue) // 第一次循环 initialValue = 10    return initialValue + currentValue; // 16  }, 10)

9. reduceRight

reduceRight() 办法的性能和 reduce() 性能是一样的，不同的是 reduceRight() 从数组的开端向前将数组中的数组项做累加。

  • reduceRight() 对于空数组是不会执行回调函数的。
const arr = [1, 2, 3]arr.reduceRight((initialValue, currentValue, index, arr) => {    console.log(initialValue) // 第一次循环  initialValue = 3    return initialValue + currentValue; // 6   })arr.reduceRight((initialValue, currentValue, index, arr) => {    console.log(initialValue) // 第一次循环 initialValue = 10    return initialValue + currentValue; // 16  }, 10)

10. find

返回数组中合乎测试函数条件的第一个元素。否则返回undefined

留神：

  • find() 对于空数组，函数是不会执行的。
  • find() 并没有扭转数组的原始值。
const arr = [    {name:'tony',age:'20'},    {name:'jack',age:"30"}]const result = arr.find(item=>{    return item.name === 'jack';})console.log(result) //  {name:'jack',age:"30"}

11. findIndex

返回传入一个测试函数条件的第一个元素的地位，没有则返回 -1。

留神：

  • findIndex() 对于空数组，函数是不会执行的。
  • findIndex() 并没有扭转数组的原始值。
const arr = [    {name:'tony1',age:'20'},    {name:'tony2',age:'20'},    {name:'tony3',age:'20'},    {name:'jack',age:"30"},]const result = arr.find(item=>{    return item.name === 'jack';})console.log(result) // 3

12. keys、values、entries

它们都返回一个遍历器对象，能够用 for...of 循环进行遍历。

  • keys() —— 返回元素索引
  • values() —— 返回元素自身
  • entries() —— 返回元素和索引
const arr = ['a', 'b', 'c']for (let index of arr.keys()) {    console.log(index);}// 0// 1// 2for (let elem of arr.values()) {    console.log(elem); // a  b  c}// a// b// cfor (let [index, elem] of arr.entries()) {    console.log(index, elem);}// 0 "a"// 1 "b"// 2 "c"

13. 比拟

jsperf

性能检测工具：jsperf

手动检测

也能够应用 console.time(ID); 计时器手动检测，不同机器不同浏览器版本有差别。

var arr = Object.keys(Array.apply(null, { length: 100000 })).map(function(    item ) {    return +item; });console.time("timer1");for(let i = 0, len = arr.length; i < len;i++  ){    //代码}console.timeEnd("timer2");// timer2: 1.718017578125msconsole.time("timer2");arr.forEach((item,index,arr)=>{    //代码});console.timeEnd("timer2");// timer3: 1.708984375ms