本文章，通过数组方法与代码输出结果来进行JavaScript中数组的方法的使用。闲时不学习，项目空流泪呀。
一、数组中的主要方法
下面整理了一下数组的主要方法：
- join()
- push()和pop()
- shift() 和 unshift()
- sort()
- reverse()
- concat()
- slice()
- splice()
- indexOf()和 lastIndexOf() （ES5新增）
- forEach() （ES5新增）
- map() （ES5新增）
- filter() （ES5新增）
- every() （ES5新增）
- some() （ES5新增）
- reduce()和 reduceRight() （ES5新增)
- (...)数组扩展运算符（ES6新增）
二、数组主要方法的使用与详解
1.数组的join()方法
数组中的join()方法用于接收一个参数，通过这个参数将数据拼接成一个字符串
let arr = [2021,10,21]
console.log(arr.join('-'));//2021-10-21
console.log(arr);//[ 2021, 10, 21 ] 不影响原数组2.数组的push()与pop()方法
数组的push()方法用于在数组的尾部添加元素，返回数组的长度
数组的pop()方法用于在数组的尾部删除元素，返回被删除的元素，有无参数都只删除最后一项
let arr = [2021,10,21]
console.log(arr.push(13));//4 返回数组长度
console.log(arr);//[ 2021, 10, 21, 13 ] 改变原数组
let arr = [2021,10,21]
console.log(arr.pop());//21 返回被删除的元素
console.log(arr);//[ 2021, 10 ] 改变原数组3.数组的shift()与unshift()方法
数组的unshift()方法用于在数组的头部添加元素，返回数组的长度
数组的shift()方法用于在数组的头部删除元素，返回被删除的元素，有无参数都只删除第一项
let arr = [2021,10,21]
console.log(arr.unshift(15));//4 返回数组的长度
console.log(arr);//[ 15, 2021, 10, 21 ] 改变原数组
let arr = [2021,10,21]
console.log(arr.shift(15));//4 返回被删除的元素
console.log(arr);//[ 10, 21 ] 改变原数组4.数组的sort()方法
数组的sort()方法用于数组的排序，默认从小到大
在排序时，sort()方法会调用每个数组项的 toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值， sort()方法比较的也是字符串，因此会出现以下的这种情况：
let arr = [2021,10,21]
console.log(arr.sort());//[ 10, 2021, 21 ]
console.log(arr);//[ 10, 2021, 21 ]为了解决上述问题，sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回 0，如果第一个参数应该位于第二个之后则返回一个正数。以下就是一个简单的比较函数：
function aaa(a,b){
return b-a//[ 6, 5, 4, 3, 2, 1 ]
return a-b//[ 1, 2, 3, 4, 5, 6 ]
}
var arr=[1,2,3,4,5,6]
console.log(arr.sort(aaa));
console.log(arr);//[ 6, 5, 4, 3, 2, 1 ] 改变原数组5.数组的reverse()方法
数组的reverse()方法用于数组的反转
var arr=[1,23,4,5,6,7]
console.log(arr.reverse());//[ 7, 6, 5, 4, 23, 1 ] 输出反转后的数组
console.log(arr);//[ 7, 6, 5, 4, 23, 1 ] 改变原数组6.数组的concat()方法
数组的concat()方法用于向数组中添加元素，不会改变原数组
var arr=[1,23,4,5,6,7]
console.log(arr.concat([6,7,8],8));//[1, 23, 4, 5, 6,7, 6, 7, 8, 8] 添加值
console.log(arr.concat({name:"111"}));//[ 1, 23, 4, 5, 6, 7, { name: '111' } ] 添加对象
console.log(arr.concat([[1,2]]));//[ 1, 23, 4, 5, 6, 7, [ 1, 2 ] ] 添加数组
console.log(arr);//[ 1, 23, 4, 5, 6, 7 ] 不改变原数组7.数组的slice()方法
数组的slice()方法用于截取数组数据，返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下， slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。
var arr=[1,2,3,4,5,6,7,8,9]
console.log(arr.splice(0,1));//[1] 两个参数，数组的下标第一项为0，slice方法截取出的新数组不包含最后一项，可用来删除数组的某一项
console.log(arr.splice(1));//[2,3,4,5,6,7,8,9] 一个参数，从参数所代表的项开始截取一直到数组结束包含参数所指项
console.log(arr);//[1,2,3,4,5,6,7,8,9] 不改变原数组8.数组的splice()方法
数组的splice()方法用于数组的查询、删除、添加，可以接收三个参数，一个参数、两个参数与slice方法类似，第三个参数代表要插入的值 ：
删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。例如， splice(0,2)会删除数组中的前两项。
插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。例如，splice(2,0,4,6)会从当前数组的位置 2 开始插入4和6。
替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice (2,1,4,6)会删除当前数组位置 2 的项，然后再从位置 2 开始插入4和6。
splice()方法始终都会返回一个数组，该数组中包含从原始数组中删除的项，如果没有删除任何项，则返回一个空数组。
var arr=[1,2,3,4,5,6,7,8,9]
console.log(arr.splice(0,1));//[1] 返回数组中被删除的项 两个参数，数组的下标第一项为0，截取出的新数组不包含最后一项，可用来删除数组的某一项
console.log(arr);[2,3,4,5,6,7,8,9]
console.log(arr.splice(0,1,2,3))//[2] 返回数组中被删除的项，三个参数可插入替换
console.log(arr);//[2, 3, 3, 4, 5,6, 7, 8, 9] 改变原数组9.数组的indexOf()与lastIndexOf方法
数组的indexOf()方法用于查找数组中的某个元素，从前向后查找，第一个参数为要查找的值，第二个参数为查找开始的下标。找到返回该元素的下标，为找到则返回-1
数组的lastIndexOf方法用于查找数组中的某个元素，从后向前查找，第一个参数为要查找的值，第二个参数为查找开始的下标。找到返回该元素的下标，为找到则返回-1
var arr = [1,2,3,4,5,6,8,9,8,8,5,6,7]
console.log(arr.indexOf(5));//4 一个参数从第一项开始查找
console.log(arr.indexOf(5,5));//10 两个参数从第二个参数所表示的元素开始查找
console.log(arr.lastIndexOf(5));//10
console.log(arr.lastIndexOf(5,3));//-1 第二个参数表示从此项倒着查找第一个参数
console.log(arr.indexOf(5,15));//-1 找不到返回-1
console.log(arr);//不改变原数组10.数组的forEach()方法
数组的forEach()方法用于数组的迭代，接收三个参数（数组项的值，索引，数组本身），可以用于对整个数组的操作，不改变原数组，该方法没有返回值
var arr = [1,2,3,4,5,6,7,8]
arr.forEach((value,index,array)=>{
console.log(value+'-'+index+'-'+array);
})
// 1-0-1,2,3,4,5,6,7,8
// 2-1-1,2,3,4,5,6,7,8
// 3-2-1,2,3,4,5,6,7,8
// 4-3-1,2,3,4,5,6,7,8
// 5-4-1,2,3,4,5,6,7,8
// 6-5-1,2,3,4,5,6,7,8
// 7-6-1,2,3,4,5,6,7,8
// 8-7-1,2,3,4,5,6,7,8
console.log(arr);//[1,2,3,4,5,6,7,8]11.数组的filter()方法
数组的filter()方法用于过滤出数组中满足某一个标准的值，返回一个新的数组，接收三个参数（数组项的值，索引，数组本身）
var arr = [1,2,3,4,5,6,7,8]
var arrf= arr.filter((value,index,array)=>{
return index>5
})
console.log(arrf);//[ 6, 7, 8 ] 返回一个新数组
console.log(arr);//[1,2,3,4,5,6,7,8] 不改变原数组12.数组的map()方法
数组的map()方法用于给数组的每一项运行指定的函数，返回每次函数执行完返回的结果
var arr = [1,2,3,4,5,6,7,8]
var aaa=(a)=>{
return a+'1'
}
var arrf= arr.map((value)=>{
return aaa(value)
})
console.log(arrf);//['11', '21', '31','41', '51', '61','71', '81']
console.log(arr);//[1,2,3,4,5,6,7,8]
//返回新数组不改变原数组可以用来对数组的值进行特定的处理13.数组的reduce()与reduceRight()方法
数组的reduce()方法用于迭代数组的所有的项，然后构建一个最终值返回，接收四个参数（前一个值，当前值，索引，数组对象），这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数是数组的第二项。从前向后。
数组的reduceRight()方法用于迭代数组的所有的项，然后构建一个最终值返回，接收四个参数（前一个值，当前值，索引，数组对象），这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数是数组的第二项。从后向前。
var arr = [1,2,3,4,5]
var num = arr.reduce((pre,cur,index,array)=>{
return pre+'-'+cur
})
var add = arr.reduce((pre,cur,index,array)=>{
console.log(pre);//1 3 6 10
console.log(cur);//2 3 4 5
return pre+cur
})
console.log(num);//1-2-3-4-5
console.log(add);//15 第一次执行回调函数的时候，pre为1，cur为2，第二次，pre为3（1加2的结果），cur为3（数组的第三项），依次类推，直到将数组的每一项都访问一遍，最后返回结果。
console.log(arr);//[1,2,3,4,5] 不改变原数组14.数组的some()与every()方法
数组的some()与every()方法用于判断元素是否满足某个函数，不同的是some()方法只要有一个元素满足给定函数就返回true，every()函数要数组的全部元素都满足某个函数才会返回true，不改变原数组。
var arr = [1,2,3,4,5,6,7,8,9]
var some = arr.some((value)=>{
return value>5
})
var every = arr.every((value)=>{
return value>5
})
console.log(some);//true 有一项满足即可
console.log(every);//false 需要全部满足
console.log(arr);//[1,2,3,4,5,6,7,8,9] 不改变原数组15.（...）数组的扩展运算符
数组的扩展运算符可以用于数组的合并，添加，复制，解构赋值，字符串转数组等，相当于把数组的内部值进行展开放到一个新的数组中去。
var arr1 = [1,2]
var arr2 = [3,4]
var arr3 = [{name1:"小陈"},2,3]
console.log([...arr1,...arr2]);//[ 1, 2, 3, 4 ] 数组的合并
console.log([...arr1,arr2,{name:"小陈"}]);//[ 1, 2, [ 3, 4 ], { name: '小陈' } ] 数组的添加
console.log([...arr1]);//[ 1, 2 ] 数组的复制
console.log([...arr1,..."123"]);//[ 1, 2, '1', '2', '3' ] 数组的字符串转数组
const [name1,a,b] = [...arr3]
console.log(name1,a,b);//{ name1: '小陈' } 2 3 数组的结构复制16.数组的array.from()方法
数组的array.from()方法可以用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。
let arr1 = {
"0":"1",
"1":"2",
"2":"3",
"3":"4",
"4":"小陈",//结构必须这样
length:5//必须有
}
let arr2 = Array.from(arr1)
console.log(arr2);//[ '1', '2', '3', '4', '小陈' ]
console.log(Array.from(arr1,value=>value*value));//[ 1, 4, 9, 16, NaN ] 第二个参数情况17.数组的array.of（）方法
数组的array.of()方法可以用于将一组数据转化为数组。Array.of()基本上可以用来替代Array()或new Array()，并且不存在由于参数不同而导致的重载。它的行为非常统一。
console.log(Array.of(3));//[3]
console.log(Array.of(1,2));//[1,2]
console.log(Array.of(1,2,3));//[1,2,3]
//可以用来将一组数值，转变成数组18.数组的find()与findIndex()
数组的find()与findIndex()方法可以用来查找数组中符合条件的第一个值，find()方法用来返回第一个符合条件的值，findIndex()方法用来返回第一个符合条件的值的下标，可以接收三个参数（value,index,arr）(当前的值,当前的位置,当前的数组)。
function find(){
return [1,2,3,4,5,6].find((value,index,arr)=>{
return value>2
})
}
console.log(find());//3
findIndex()
function find(){
return [1,2,3,4,5,6].findIndex((value,index,arr)=>{
return value>2
})
}
console.log(find());//2写累了以后更新。。。。
三、数组的更新变异方法与非更新变异方法
更新变异方法：改变了原数组
非更新变异方法：不改变原数组，返回一个新数组
更新变异方法：push()和pop()，shift() 和 unshift()，sort()，splice()
非更新变异方法：join()，concat()，slice()，indexOf()和 lastIndexOf() （ES5新增），forEach() （ES5新增），some() （ES5新增）,fliter() (ES5新增)，map() （ES5新增），every() （ES5新增），reduce()和 reduceRight() （ES5新增）