不改变原数组的遍历方法

1. `forEach()`

语法

arr.forEach(callback(currentValue , index , array) ，thisArg)

参数说明

currentValue : 数组当前项值
index : 数组当前项索引
arr : 数组对象本身
thisArg : 可选参数。当执行回调函数 callback 时，用作 this 的值。

注意

如果使用 箭头函数表达式来传入函数参数， thisArg 参数会被忽略，因为箭头函数在词法上绑定了 this 值。
forEach 不会直接改变调用它的对象，但是那个对象可能会被 callback 函数改变。
every 不会改变原数组。

const arr = [2,3,4,1,44] 
 arr.forEach(val =>{    console.log(`值为${val*2}`)     }) 
console.log(`原数组为${arr}`); 
// 值为4 
// 值为6 
// 值为8 
// 值为2 
// 值为88 
// 原数组为2,3,4,1,44

2.`reduce()`

语法

arr.reduce(callback(accumulator, currentValue, index, array), initialValue)

参数说明

accumulator : 累计器，默认为数组元素第一个值
currentValue : 当前值
index : 当前元素索引可选
array : 数组可选
initialValue : 初始值可选

两种种取值情况

1. 当提供了 initialValue 初始值时，那么accumulator 的值为 initialValue , currentValue 的值为 数组第一个值
1. 当没有提供 initialValue 初始值时，那么 accumulator 的值为数组第一个值， currentValue 为第二个值。

注意

如果数组为空，且没有提供initialValue 初始值时，会抛出 TypeError .
如果数组有一个元素，且没有提供initialValue 或者提供了initialValue ，数组为空，那么唯一值被返回不会执行 callback 回调函数。

求和

const arr = [1, 2, 3, 4]  
const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 10)  console.log(sum) //20 
// accumulator 累计器 
// currentValue 当前值 
// initialValue 累计 初始值 为10 
//10 + 1 + 2 + 3 + 4 
## 注意 
// 回调函数第一次执行时，accumulator 和currentValue的取值有两种情况： 
// 如果调用reduce()时提供了initialValue，accumulator取值为initialValue，currentValue取数组中的第一个值； 
// 如果没有提供 initialValue，那么accumulator取数组中的第一个值，currentValue取数组中的第二个值。

计算对象中的值

要累加对象数组中包含的值，必须提供初始值，以便各个item正确通过你的函数。

const data = [   
    {
     date: '2021-8-1',
     income: 200   
     },
     {
     date: '2021-8-2',
     income: 400 
     },   
     {        
     date: '2021-8-3',
     income: 300   
     }, ]
console.log(`总收入： ${data.reduce( (pre,currentValue) => pre + currentValue.income,0)}`); 
//总收入： 900

二维数组转一位数组

const array = [[1,2],[3,4]] 
console.log(array.reduce((a,b) => a.concat(b))); //[ 1, 2, 3, 4 ]

3.`find()`

语法

arr.find((element,index,array), thisArg)

参数说明

element ：当前元素
index : 当前元素索引可选
array : 数组本身可选
thisArg : 执行回调时用作this 的对象。可选

// 从数据中找出第一个满足特定条件的对象
const data = [   
    {        
    name:'张三',        
    article: 3   
    },   
    {        
    name:'老王',        
    article: 9   },   
    {        
    name:'老李',        
    article: 10   } 
    ] 
    console.log(data.find(item => item.article > 9 )); 
    // { name: '老李', article: 10 }

4.`findIndex()`

findIndex() 返回数组中符合条件的第一个元素的索引，没有，则返回 -1 。

语法

arr.findIndex((element,index,array), thisArg)

参数说明

element ：当前元素
index : 当前元素索引可选
array : 数组本身可选
thisArg : 执行回调时用作this 的对象。可选

const arr = [22,33,44,55] 
console.log(arr.findIndex(val => val > 33));    //2 
console.log(arr.findIndex(val => val > 99));    //-1

5.`key()`

key() 返回一个新的Array Iterator对象，该对象包含数组中每个索引的键。

语法

keys()

注意

如果数组中有空原元素，在获取key 时，也会加入遍历的队列中

const inputModal = [   
    {name:''},   
    {age:''},   
    { hobby:''} 
    ] 
for(const key of inputModal.keys()){
console.log(key) 
}
// 0 
// 1 
// 2  
const arr = [1,2,,3] 
for(const key of arr.keys()){    
console.log(key); 
} 
// 0 
// 1 
// 2 
// 3
//Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组 
// 所以 Object.keys(arr) = [ '0', '1', '3' ] 
for(const key of Object.keys(arr)){    
    console.log(key); 
} 
// 0 
// 1
// 3

6.`values()`

values()方法返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值。

语法

arr.values()

const Color = ['red','yelloe','orange']
for(val of Color.values()){    
    console.log(val); 
   } 
// red 
// yelloe 
// orange

返回布尔值

1.`every()`

语法

arr.every(callback(currentValue , index , array) ，thisArg)

参数说明

currentValue : 数组当前项值必须
index : 数组当前项索引可选
arr : 数组对象本身可选
thisArg : 可选参数。当执行回调函数 callback 时，用作 this 的值可选注意
当所有的元素都符合条件才会返回true
every 不会改变原数组。
若传入一个空数组，无论如何都会返回 true。

const arr = [2,3,4,1,44]
console.log(arr.every(val =>  val > 0 )); //true
console.log(arr.every(val => { val > 2 })) //false

2.`some()`

语法

arr.some(callback(currentValue , index , array) ，thisArg)

参数说明

currentValue : 数组当前项值必须
index : 数组当前项索引可选
arr : 数组对象本身可选
thisArg : 可选参数。当执行回调函数 callback 时，用作 this 的值。可选注意
some() 被调用时不会改变数组。
如果用一个空数组进行测试，在任何情况下它返回的都是false。
some() 在遍历时，元素范围已经确定，在遍历过程中添加的元素，不会加入到遍历的序列中。

const arr = [2,3,4,1,44]
console.log(arr.some(val => val > 2))  //true 
console.log([].some(val => val > 2 )); //false 
const newList = [11,22,33,44] 
console.log(newList.some(val => {    
    newList.push(55)    
    newList.push(66)    
    val > 55 
}));   //false

不改变原有数组，形成新的数组`有返回值`

1.`filter()`

filter() 用来遍历原数组，过滤拿到符合条件的数组元素，形成新的数组元素。语法

arr.some(callback(currentValue , index , array) ，thisArg)

参数说明

currentValue : 数组当前项值必须
index : 数组当前项索引可选
arr : 数组对象本身可选
thisArg : 可选参数。当执行回调函数 callback 时，用作 this 的值。可选注意
filter 不会改变原数组，它返回过滤后的新数组。
filter() 在遍历时，元素范围已经确定，在遍历过程中添加的元素，不会加入到遍历的序列中。

const arr = [11,22,33,44,55,66] 
console.log(arr.filter(val => val > 44 )) 
console.log(`原数组为${arr}`);  
// [ 55, 66 ] 
// 原数组为11,22,33,44,55,66

2.`map()`

map() 创建一个新的数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。语法

arr.map(callback(currentValue , index , array) ，thisArg)

参数说明

currentValue : 数组当前项值必须
index : 数组当前项索引可选
arr : 数组对象本身可选
thisArg : 可选参数。当执行回调函数 callback 时，用作 this 的值。可选注意
map不修改调用它的原数组本身
map() 在遍历时，元素范围已经确定，在遍历过程中添加的元素，不会加入到遍历的序列中。

const arr = [1,2,3,4]
console.log(arr.map(val => val*3 ))  // [ 3, 6, 9, 12 ] 
console.log(arr)  // [ 1, 2, 3, 4 ]

改变原数组方法

1.`reverse()`

reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。 map(callback(currentValue , index , array) ，thisArg)

const arr = [1,2,3]
console.log(arr.reverse(11,22,33))  //[ 3, 2, 1 ]

2.`sort()`

sort() 方法采用 原地算法进行排序并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列 map(callback(currentValue , index , array) ，thisArg)

原地算法是一个使用辅助的数据结构对输入进行转换的算法。但是，它允许有少量额外的存储空间来储存辅助变量。当算法运行时，输入通常会被输出覆盖。原地算法仅通过替换或交换元素来更新输入序列。

const arr = [23,11,33,44,1]
console.log(arr.sort())  //[ 1, 11, 23, 33, 44 ] 
const arr = [23,11,33,44,1000000000]
console.log(arr.sort())   // [ 1000000000, 11, 23, 33, 44 ]

删除元素

1.`shift()`

shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

注意

从数组中删除的元素; 如果数组为空则返回undefined

const data = [   
    {        
    id:1,        
    name:'前端'   
    },  
    {        
    id:2,       
    name:'后端'   
    }] 
const deleObj = data.shift()  
console.log(deleObj) // {id:1,name:'前端'}

2.`pop()`

pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。

用法和 shift 类似。注意

从数组中删除的元素; 如果数组为空则返回undefined

3.`splice()`

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

用法和 shift 类似。 参数说明

start : 开始的索引
deleteCount : 删除的个数可选
[item1，item2 .....] ；从开始的索引进行添加的增加和替换的元素，可选注意
由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。
如果只传递了开始的索引位置，则会删除索引后的所有元素对象

增加元素

1.`splice()`

上面已经有介绍

2.`push()`

push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

3.`unshift()`

unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度。

const arr = [1,2,3]
console.log(arr.unshift(11,22,33))  //6 
console.log(arr)  //[ 11, 22, 33, 1, 2, 3 ]

不改变原数组方法

1.`indexOf()`

indexOf()方法返回可以在数组中找到给定元素的第一个索引，如果不存在，则返回 -1。

2.`lastIndexOf()`

lastIndexOf() 查找数组中元素最后一次出现的索引，如未找到返回-1。

3.`inCludes()`

includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。

4.`concat()`

concat() 方法用于合并两个或多个数组。

5.`toString()`

toString() 返回一个字符串，表示指定的数组及其元素。 当一个数组被作为文本值或者进行字符串连接操作时，将会自动调用其 toString 方法。

6.`join()`

join()方法通过连接数组元素用逗号或指定的分隔符字符串分隔，返回一个字符串。

7.`slice()`

slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

数组遍历方法集合

不改变原数组的遍历方法

1. forEach()

语法

参数说明

注意

2.reduce()

语法

参数说明

两种种取值情况

注意

求和

计算对象中的值

二维数组转一位数组

3.find()

语法

参数说明

4.findIndex()

语法

参数说明

5.key()

语法

注意

6.values()

语法

返回 布尔值

1.every()

语法

参数说明

2.some()

语法

参数说明

不改变原有数组，形成新的数组有返回值

1.filter()

2.map()

改变原数组方法

1.reverse()

2.sort()

删除元素

1.shift()

2.pop()

3.splice()

增加元素

1.splice()

2.push()

3.unshift()

不改变原数组方法

1.indexOf()

2.lastIndexOf()

3.inCludes()

4.concat()

5.toString()

6.join()

7.slice()

1. `forEach()`

2.`reduce()`

3.`find()`

4.`findIndex()`

5.`key()`

6.`values()`

返回布尔值

1.`every()`

2.`some()`

不改变原有数组，形成新的数组`有返回值`

1.`filter()`

2.`map()`

1.`reverse()`

2.`sort()`

1.`shift()`

2.`pop()`

3.`splice()`

1.`splice()`

2.`push()`

3.`unshift()`

1.`indexOf()`

2.`lastIndexOf()`

3.`inCludes()`

4.`concat()`

5.`toString()`

6.`join()`

7.`slice()`