letrel：数组对象的常用方法

数组方法表

方法名做用效果方法返回值是否改变了原数组版本

push()	在数组尾部添加一个或者多个元素	返回数组长度	yes	ES5
unshift()	在数组首部添加一个或者多个元素	返回数组长度	yes	ES5
pop()	删除数组的最后一位元素	返回被删除的元素	yes	ES5
shift()	删除数组的第一位元素	返回被删除的元素	yes	ES5
reverse()	颠倒数组的排列顺序	返回被反转的数组	yes	ES5
sort()	以字母顺序(字符串Unicode码点)对数组进行排序	返回新数组	yes	ES5
splice()	可以删除指定位置删除指定个数的元素在添加任意个数的元素（实现数组任意位置的增删改，也可以双重for循环配合它实现数组去重）	返回删除的数据所组成的数组	yes	ES5
concat()	可以合并数组来创造新数组	返回合并后的数组	NO	ES5
join()	将元素按照指定的字符拼接成字符串 (默认",")	返回拼接后的新数组	NO	ES5
slice()	裁切指定位置的数组	返回被裁切的元素形成的新数组	NO	ES5
toString()	将数组转换为字符串	新数组	NO	ES5
valueOf()	查询数组原始值	数组的原始值	NO	ES5
indexOf()	查询某个元素在数组中第一次出现的位置	存在该元素,返回下标,不存在 返回 -1	NO	ES5
lastIdexOf()	反向查询数组某个元素在数组中第一次出现的位置	存在该元素,返回下标,不存在 返回 -1	NO	ES5
forEach()	(迭代) 遍历数组,每次循环中执行传入的回调函数	无/(undefined)	NO	ES5
map()	(迭代) 遍历数组, 每次循环时执行传入的回调函数,根据回调函数的返回值,生成一个新的数组	有/自定义	NO	ES5
filter()	(迭代) 遍历数组, 每次循环时执行传入的回调函数,回调函数返回一个条件,把满足条件的元素筛选出来放到新数组中	满足条件的元素组成的新数组	NO	ES5
every()	(迭代) 判断数组中所有的元素是否满足某个条件	全都满足返回true 只要有一个不满足 返回false	NO	ES5
some()	(迭代) 判断数组中是否存在,满足某个条件的元素	只要有一个元素满足条件就返回true,都不满足返回false	NO	ES5
reduce()	(递归)遍历数组, 每次循环时执行传入的回调函数,回调函数会返回一个值,将该值作为初始值prev,传入到下一次函数中	最终超做结果	NO	ES5
reduceRight()	(递归)从右向左遍历数组, 每次循环时执行传入的回调函数,回调函数会返回一个值,将该值作为初始值prev,传入到下一次函数中	最终超做结果	NO	ES5
includes()	判断一个数组是否包含一个指定的值	是返回 true，否则false	NO	ES6
Array.from()	将萎数组转换成真数组	真数组	NO	ES6
find()	遍历数组,执行回调函数,回调函数执行一个条件,返回满足条件的第一个元素,不存在返回undefined	满足条件第一个元素/否则返回undefined	NO	ES6
findIndex()	遍历数组,执行回调函数,回调函数接受一个条件,返回满足条件的第一个元素下标,不存在返回-1	满足条件第一个元素下标,不存在返回-1	NO	ES6
fill()	用给定值填充一个数组	返回新数组	NO	ES6
flat()	用于将嵌套的数组“拉平”，变成一维的数组	返回一个新数组	NO	ES6
flatMap()	flat()和map()的组合版 , 先通过map()返回一个新数组,再将数组拉平( 只能拉平一次 )	返回新数组	NO	ES6

每一种方法的使用详解

1.push()

介绍：在数组最后一位添加一个或多个元素,并返回新数组的长度,改变原数组.(添加多个元素用逗号隔开)

let arr = [1, 2, "c"]; let rel = arr.push("a", "b"); console.log(arr); // [1, 2, "c", "a", "b"] console.log(rel); // 5 (数组的长度)

2.unshift()

介绍：在数组第一位添加一个或多个元素，并返回新数组的长度，改变原数组。(添加多个元素用逗号隔开)

let arr = [1, 2, "c"]; let rel = arr.unshift("a", "b"); console.log(arr); // [ "a", "b",1, 2, "c"] console.log(rel); // 5 (数组的长度)

3.pop()

介绍：删除数组的最后一位，并且返回删除的数据，会改变原来的数组。(该方法不接受参数,且每次只能删除最后一个)

<script> let arr = [1,2,3,4] let rel = arr.pop() console.log(arr); // [1,2,3] console.log(rel); // 返回删除的元素 4 </script>

4.shift()

介绍：删除数组的第一位数据，并且返回被删除的数据，会改变原来的数组。(该方法同pop()；一样不接受参数,且每次只能删除数组第一个)

<script> let arr = [1,2,3,'你好'] let rel = arr.shift() console.log(arr); // [2,3,'你好'] console.log(rel); // 返回被删除的元素 1 </script>

5.reverse()

介绍：将数组的数据进行反转，并且返回反转后的数组，会改变原数组

<script> let arr = [1,2,3,'你好'] let rel = arr.reverse() console.log(arr); // ['你好',3,2,1] console.log(rel); // 返回被反转的数组 ['你好',3,2,1] </script>

6.sort()

介绍：sort() 方法是最强大的数组方法之一。方法用于对数组的元素进行排序,并返回数组。默认排序顺序是根据字符串Unicode码点。
原始使用sort()方法

<script> let arr = [10,2,1,11] let rel = arr.sort() console.log(rel); // 返回按照unicode编码排序的数组 [1, 10, 11, 2] </script>

但排列顺序并不是我们想要的那种，这也显示了其不稳定性。

方法2
语法： arr.sort(function(a,b))
参数： function可选。用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的诸个字符的Unicode位点进行排序。
具体用法：

• 如果 function(a, b) {return: a - b;} ，=> a - b > 0 那么 a 会被排列到 b 之前; (从小到大排序)
• 如果 function(a, b) {return: b - a;} ，=> b - a > 0 那么b会被排列到 a 之前； (从大到小排序)

<script> let arr = [10,2,1,11] arr.sort(function(a,b){ return a-b }) console.log(arr); // 从小到大的顺序排列 [1, 2, 10, 11] </script>

元素为对象时（可按其中某个属性来排序）：

<script> var arr1 = [{ name: "詹姆斯", age: "6" }, { name: "凯里欧文", age: "11" }, { name: "库里", age: "30" }, ]; arr1.sort(function (a, b) { console.log(a, b); return b.age - a.age; // 用对象里的元素排列 }); console.log(arr1); // 按age元素从大到小排列 {name: '库里', age: '30'}{name: '凯里欧文', age: '11'}{name: '詹姆斯', age: '6'} </script>

7.splice()

介绍：向数组中添加，或从数组删除，或替换数组中的元素，然后返回被删除/替换的元素所组成的数组。可以实现数组的增删改

语法： arrayObject.splice(index,howmany,item1,…,itemX)
参数：

• index：必需。整数，规定添加/删除项目的位置（元素下标），使用负数可从数组结尾处规定位置。
• howmany：必需。要删除的项目数量。如果设置为 0，则不会删除项目。
• item1, …, itemN：可选。向数组添加的新项目。

<script> let arr = [1,2,3,4] arr.splice(2,1,'你好','再见') console.log(arr); // 删除下标为2的元素，删除一个，在删除位置添加'你好','再见' </script>

8.concat()

介绍：数组的拼接(将多个数组或元素拼接形成一个新的数组),不改变原数组如果拼接的是数组 则将数组展开,之后将数组中的每一个元素放到新数组中.如果是其他类型, 直接放到新数组中，另外，如果不给该方法任何参数，将返回一个和原数组一样的数组（复制数组）

<script> let arr1 = [1, 2, 3]; let arr2 = ["a", "b", "c"]; let arr3 = ["A", "B", "C"]; let rel = arr1.concat(arr2, arr3); console.log(arr1); //原数组 [1, 2, 3] 该方法不会改变原数组 console.log(rel); //新数组 [1, 2, 3, 'a', 'b', 'c', 'A', 'B', 'C'] </script>

9.join()

介绍：用特定的字符,将数组拼接形成字符串 (默认",")

<script> let list = ["a", "b", "c", "d"]; // "a-b-c-d" let result1 = list.join("-"); //"a-b-c-d" let result2 = list.join("/"); //"a/b/c/d" let result3 = list.join(""); //"abcd" let result4 = list.join(); // a,b,c,d </script>

10.slice()

介绍：裁切指定位置的数组，返回值为被裁切的元素形成的新数组 ，不改变原数组，同concat() 方法 slice() 如果不传参数,会使用默认值,得到一个与原数组元素相同的新数组 (复制数组)
语法： arr[].slice(startIndex,endIndex)
参数：

• startIndex：起始下标 默认值 0（从哪个位置开始截取）
• endIndex：终止下标 默认值 length,可以接收负数,(倒着数)

<script> let list = ["a", "b", "c", "d"]; let result = list.slice(1, 3); console.log(result); // ["b", "c"] </script>

11.toString()

介绍：直接将数组转换为字符串,并且返回转换后的新数组,不改变原数组,与join();方法不添加任何参数 相同

<script> let list = ["a", "b", "c", "d"]; let result = list.toString(); console.log(list); // ["a", "b", "c", "d"] 不改变原数组 console.log(result); // a,b,c,d (字符串类型) </script>

12.valueOf()

介绍：返回数组的原始值（一般情况下其实就是数组自身）

<script> let list = [1,2,3,4,5]; let result = list.valueOf(); console.log(list); // [1,2,3,4,5] 不改变原数组 console.log(result); // [1,2,3,4,5] 原始值 </script>

13.indexOf()

介绍：查询某个元素在数组中第一次出现的位置 存在该元素,返回下标,不存在 返回 -1 (可以通过返回值 变相的判断是否存在该元素)

<script> let list = [1,2,3,4,5]; let result = list.indexOf(4); let result2 = list.indexOf(8); console.log(list); // [1,2,3,4,5] 不改变原数组 console.log(result); // 3 存在指定的元素返回该元素的下标 3 console.log(result2); // -1 不存在指定的元素返回-1 </script>

14.lastIndexOf()

介绍：查询某个元素在数组中最后一次出现的位置 (或者理解为反向查询第一次出现的位置) 存在该元素,返回下标,不存在 返回 -1 (可以通过返回值 变相的判断是否存在该元素)

<script> let list = [1,2,3,3,3,4,5]; let result = list.lastIndexOf(3); let result2 = list.lastIndexOf(8); console.log(list); // [1,2,3,3,3,4,5] 不改变原数组 console.log(result); // 4 存在指定的元素返回该元素的下标 4 console.log(result2); // -1 不存在指定的元素返回-1 </script>

15.forEach()

介绍：遍历数组,每次循环中执行传入的回调函数。(注意: forEach() 对于空数组是不会执行回调函数的。) 没有返回值,或理解为返回值为undefined,不改变原数组
语法：
arr[].forEach((item,index,array)=>{
//do something
})
参数：

• item:每次循环的当前元素
• index:当前项的索引
• array:原始数组

例子1：

<script> let list = [1,2,3,3,3,4,5]; let newlist = list.forEach((item,index,array)=>{ console.log(item,index,array); }) console.log(newlist); // 返回值为undefined </script>

例子2：数组中元素的和

<script> let list = [32, 93, 77, 53, 38, 87]; let sum = 0; list.forEach(function (item) { console.log(item); // 遍历数组的每一项 32, 93, 77, 53, 38, 87 sum += item; // 遍历累加求和 }); console.log(sum); // 所有元素的和 380 </script>

16.map()

介绍：遍历数组, 每次循环时执行传入的回调函数,根据回调函数的返回值,生成一个新的数组 ,同forEach() 方法,但是map()方法有返回值,可以return出来
语法：
arr[].map(function(item,index,array){
//do something
return XXX
})
参数：

• item:每次循环的当前元素
• index:当前项的索引
• array:原始数组

<script> let list = [32, 93, 77, 53, 38, 87]; let rel = list.map(function (item, index, array) { return item*2+4 // 将遍历的每一项计算后返回出去 }); console.log(list); // [32, 93, 77, 53, 38, 87] 原数组 console.log(rel); // [68, 190, 158, 110, 80, 178] 新数组 </script>

17.filter()

介绍：遍历数组, 每次循环时执行传入的回调函数,回调函数返回一个条件,把满足条件的元素筛选出来放到新数组中
语法：
arr[].filter(function(item,index,array){
//do something
return XXX //条件
})
产数：

• item:每次循环的当前元素
• index:当前项的索引
• array:原始数组

<script> let list = [32, 93, 77, 53, 38, 87]; let newlist = list.filter(function (item, index, array) { return item>50 // 将遍历的每一项符合要求的返回出去 }); console.log(list); // [32, 93, 77, 53, 38, 87] 原数组 console.log(newlist); // [93, 77, 53, 87] 新数组 </script>

18.every()

介绍：遍历数组, 每次循环时执行传入的回调函数,回调函数返回一个条件,全都满足返回true 只要有一个不满足 返回false => 判断数组中所有的元素是否满足某个条件

<script> let list = [32, 93, 77, 53, 38, 87]; let newlist = list.every(function (item, index, array) { console.log(item, index, array); return item>50 // 将遍历的每一项判断是否满足条件 }); console.log(list); // [32, 93, 77, 53, 38, 87] 原数组不变 console.log(newlist); // false 全部满足返回true,有一个不满足返回false </script>

19.some()

介绍：遍历数组, 每次循环时执行传入的回调函数,回调函数返回一个条件,只要有一个元素满足条件就返回true,都不满足返回false => 判断数组中是否存在,满足某个条件的元素

<script> let list = [32, 93, 77, 53, 38, 87]; let newlist = list.some(function (item, index, array) { return item>50 // 将遍历的每一项判断是否满足条件 }); console.log(list); // [32, 93, 77, 53, 38, 87] 原数组不变 console.log(newlist); // true 有一个满足返回true,全部不满足返回false </script>

20.reduce()

介绍：遍历数组, 每次循环时执行传入的回调函数,回调函数会返回一个值,将该值作为初始值prev,传入到下一次函数中, 返回最终操作的结果
语法： arr.reduce(function(prev,item,index,array){})
参数：

• prev 初始值 (类似求和是 sum=0) 可以设置初始值( 参数),如果不设置初始值默认是数组中的第一个元素,遍历时从第二个元素开始遍历
• item 每次循环的当前元素
• index 每次循环的当前下标
• array 原数组

例子1：不设置初始值的累加

<script> let arr = [2, 3, 4, 5]; let sum = arr.reduce(function (prev, item, index, array) { console.log(prev, item, index, array); return prev + item; }); console.log(arr, sum); </script>

解析：

• 第一次循环:prev = 2 ; item(当前循环元素) = 3 ; index(当前循环元素下标) = 1;原数组 =array;因为没有给prev设置初始值,所以prev 的值为数组中第一个元素,遍历从第二个元素开始
• 第二次循环:prev = 5; item(当前循环元素) = 4 ; index(当前循环元素下标) = 2;原数组 =array;prev = 2+3(上次循环的元素) = 5 ;
  …
  最终prev = 14 ; arr中有四个元素 共循环三次;(因为没设置初始值跳过第一次循环prev默认等于第一个值)
  实例2： 设置初始值的累加 0

<script> let arr = [2, 3, 4, 5]; let sum = arr.reduce(function (prev, item, index, array) { console.log(prev, item, index, array); return prev + item; },0); // 设置初始值 prev = 0 console.log(arr, sum); </script>

解析： 可以看到与上一次设置初始值相比,最终的结果相同,但是多循环的一次,因为设置了prev的初始值为0,所以循环遍历从第一个元素开始,而不设置初始值,循环从第一个元素开始

21.reduceRight()

介绍：用法和reduce相同，只是从右向左遍历

22.includes()

介绍：用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false

<script> let arr = [2, 3, 4, 5]; let arl = arr.includes(2) console.log(arl); // true 判断源数组有没有指定元素有返回 true let site = arr.includes(8) console.log(site); // false 判断源数组有没有指定元素没有返回 false </script>

23.Array.from()

介绍：将一个伪数组对象或者可遍历对象转换成一个真正的数组
注意： 将一个类数组对象转换为一个真正的数组，必须具备以下条件：

• 该伪数组 / 类数组 对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组。
• 该伪数组 / 类数组 对象的属性名必须为数值型或字符串型的数字

<script> let all = {0:'詹姆斯',1:'凯里欧文',2:'库里',3: ["耐克", "李宁", "安踏"],length: 4,} let list = Array.from(all) console.log(all); // 原伪数组 console.log(list,Array.isArray(list)); // 转换成真数组 Array.isArray判断为真数组 true </script>

24.find()

介绍：遍历数组 每次循环 执行回调函数,回调函数接受一个条件，返回满足条件的第一个元素,不存在则返回undefined
参数：

• item:必须 , 循环当前元素
• index:可选 , 循环当前下标
• array:可选 , 当前元素所属的数组对象

<script> let arr = ["耐克", "李宁", "安踏"] let item = arr.find((item,index,array)=>{ return item == '李宁' //循环遍历数组返回满足条件的第一个元素，没有则返回undefined }) console.log(item); // 李宁 </script>

当前返回结果为 “李宁”，当查询到满足条件的元素直接跳出循环，返回第一个满足条件的元素

例子2：该方法可快速查找对象数组满足条件的项

<script> let arr = [{ id: 1, name: '小明' }, { id: 2, name: '周sir' }] let res = arr.find(item => item.id == 1) // 循环遍历数组 查询id==1的项返回出去 console.log('res', res) //res {id: 1, name: "小明"} </script>

25.findIndex()

介绍：遍历数组,执行回调函数,回调函数接受一个条件,返回满足条件的第一个元素下标,不存在则返回-1
参数：

• item:必须 , 循环当前元素
• index:可选 , 循环当前下标
• array:可选 , 当前元素所属的数组对象

注意：

• findIndex();和indexOf();不同 (刚接触时乍一看和indexOf()怎么一模一样,仔细看了下才发现大有不同)
• indexOf是传入一个值.找到了也是返回索引,没有找到也是返回-1 ,属于ES5
• findIndex是传入一个测试条件,也就是函数,找到了返回当前项索引,没有找到返回-1. 属于ES6

<script> let arr = [1,2,3,4,5] let arl = arr.findIndex((item,index,array)=>{ return item == 2 // 循环遍历数组查询满足条件的元素的下标 }) console.log(arl); // 1 满足条件的下标为 1的元素 </script>

打印结果为1, 循环步骤和find()方法一样,但是它返回的是下标,find()返回的是满足条件的元素

例子2：

<script> let arr = [{ id: 1, name: '小明' }, { id: 2, name: '周sir' }] let res = arr.findIndex(item => item.id == 1) // 遍历查询id == 1的元素 返回第一个满足条件的元素下标 console.log('res', res) //res 0 </script>

26.fill()

介绍：用给定值填充一个数组
参数：

• value 必需是填充的值
• start 可选，开始填充位置
• end 可选，停止填充位置 (默认为 array.length)

<script> let arr = [1, 2, 3] let newarr = arr.fill('填充',1,2) console.log(newarr); </script>

28.flatMap()

介绍：flat()和map()的组合版 , 先通过map()返回一个新数组,再将数组拉平( 只能拉平一次 )

<script> let list = [1, 6, 7, 2, 1, 2]; let newArr = list.map(function (item, index) { return [item, index]; // 先map遍历将数组拆分成嵌套数组 }); console.log("Map方法:", newArr); let newArr2 = list.flatMap(function (item, index) { return [item, index]; // 将嵌套数组拉平成普通数组，只能拉平一次 }); console.log("flatMap方法:", newArr); </script>