JS数组方法总结练习（持续更新）
基本功要扎实，且适时的使用方法能极大提升代码简洁度与效率
如何根据不同情况选择更合适的方法？(对方法有自己的分类)
创建：
let a = new Array
let b = new Array(20)
let c = new Array(1,2,3)
let d = []
let f = [1,2,3]
ES6部分
简略
自己的分类整理：
增删改（头2尾3全局3）
查找2排序2判断3遍历3定位1映射1 转换1
ES6:替换分隔符1 组内复制1 对象转数组1
find、sort、every、some 等函数的传参是带参与逻辑最终返回布尔值的函数参数 作为条件给函数本身
foreach 参数相同但函数不需要返回值，直接写逻辑
reduce 多了一个累加计算的初始值total，也就是第一个元素，函数从第二个元素开始遍历
map 同上但返回值变为映射出的数组项
需遍历数组的函数参数大都是 val、index、arr三个
-
增删改替换：
-
数组头尾增删：
-
push
arr1.push();数组末尾添加一或多项 -
concat
arr1.concat([7,[8,9]])将参数拆解一项项添加到数组中并返回★新数组（只能拆解一层数组） -
pop
arr1.pop();数组末尾删除最后一项 -
unshift
arr1.unshift(0);数组头添加一或多项 -
shift
arr1.shift();数组头删除第一项
-
-
数组全局增删改：
-
slice
arr1.slice(-4,-1); 返回起始和结束位置之间的项组成的★新数组 -
splice
arr1.splice(2,0,4,6)从哪里开始，删除几项，插入项，操作这几个参数达到删插替换
并返回★新数组 -
fill
arr.fill(value, start, end)用Value当作一项，替换掉数组内的元素，可以指定替换下标范围。
-
-
-
-查找：
- find
arr1.find((it)=> {return it.class===1})遍历数组，返回符合参数函数条件（即参数函数返回给find函数true）的数组的第一个元素的值。
find(val,ind,arr)查找函数有三个参数。value：每一次迭代查找的数组元素。index：每一次迭代查找的数组元素索引。arr：被查找的数组。 - findIndex()： 返回通过测试（函数内判断）的数组的第一个元素的下标
- find
-
排序：
- sort
arr1.sort(compare);根据参数函数逻辑对数组项排序 - reverse
arr1.reverse();反转数组项的顺序
- sort
-
判断数组：
- includes()
arr1.includes(3)要查的项，替代查找NaN会判断错误的indexof - every
arr1.every((x) => {return x>0})依次判断数组项，全部满足条件返回T，否则返回F - some
arr1.some((x) => {return x>0})依次判断数组项，任一个满足条件返回T，否则返回F
- includes()
-
遍历迭代：
- forEach
arr1.forEach((x, index, a) => {});遍历的数组项；当前索引，数组本身，无返回 - reduce()
arr1.reduce() (function( total, cur, index, array){ });遍历的数组项 total代表第一个元素，cur从左2开始，构建一个最终返回的值 - reduceRight() 遍历的数组项 从右往左 前一个值、当前值、项的索引和数组对象，然后构建一个最终返回的值
- forEach
-
定位：
-
indexOf()
arr1.indexOf()要查的项，查找起始索引 从前往后 -
lastIndexOf()
arr1.lastIndexOf()要查的项，查找起始索引 从后往前
-
-
映射：
- map
arr.map((it) => {return {name:it.name}}) arr1.map((item) =>{return item*item})
根据函数映射数组每一项，对每一项计算、对象抽取等
参数：当前值，索引，数组
- map
-
数组字符串转换
- join
let a = [1,2,3];a.join('');//'123'在数组项中间插入参数值并返回★新数组 - toString
let a = [1,2,3];a.toString();//''1,2,3''返回字符串
- join
详细
join()
理解：将参数添加到调用数组的每个元素中且返回字符串。
当数组为空返回参数插入空数组后的字符串。
join():将数组的元素组起一个字符串，以separator为分隔符，
省略的话则用默认用逗号为分隔符，该方法只接收一个参数：即分隔符。
let arr1 = [1,2,3,4,5]
arr1.join("-")
new Array(3).join("实现重复字符串")
3为重复次数 join参数为重复的字符串
push()和pop() shift() 和 unshift()
理解：
-
增加一或多项：unshift()在数组头 push()在数组末尾
-
删除一项：shift()在数组头 pop()在数组末尾，可指定删除项
let arr1 = [1,2,3,4,5];
arr1.push(6);
arr1.pop();
arr1.unshift(0);
arr1.shift();
sort()
理解：
- 按升序排列数组项。
- 排序时，会调用每个数组项的 toString()方法，比较得到的字符串，以确定如何排序。
- 即：sort()方法比较的是字符串
- sort()方法可以接收一个比较函数作为参数，据此可改为降序排序
- 注意：sort()用的是快速排序算法
let arr1 = [5,1,9,7,3,6,4,2];
arr1.sort();
function compare(value1, value2) {
if (value1 < value2) {
return 1;
} else if (value1 > value2) {
return -1;
} else {
return 0;
}
}
arr1.sort(compare);
reverse()
理解：反转数组项的顺序。
let arr1 = [1,2,3,4,5];
arr1.reverse();
concat()
理解：
- 将参数添加到原数组中。
- 会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。
- concat方法只能将传入数组中的每一项添加到数组中，如果传入数组中有些项是数组，那么也会把这一数组项当作一项添加到arrCopy2中。
let arr1 = [1,2,3,4,5];
arr1.concat(6);// [1, 2, 3, 4, 5, 6]
- 传入的不是数组，则直接把参数添加到数组后面，如果传入的是数组，则将数组中的各个项添加到数组中
arr1.concat(7,[8,9])//[1, 2, 3, 4, 5, 7, 8, 9]
注意：原数组arr1未被修改
- 传入的是一个二维数组
arr1.concat([7,[8,9]])
slice()
理解：
- 返回从原数组中指定开始下标到结束下标之间的项组成的新数组
- 一个参数返回从该参数指定位置开始到当前数组末尾的所有项
- 两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。
- 当出现负数时，将负数加上数组长度的值来替换该位置的数
let arr = [1,3,5,7,9,11];
let arrCopy = arr.slice(1);
let arrCopy2 = arr.slice(1,4);
let arrCopy3 = arr.slice(1,-2);
let arrCopy4 = arr.slice(-4,-1);
console.log(arr); //[1, 3, 5, 7, 9, 11](原数组没变)
console.log(arrCopy); //[3, 5, 7, 9, 11]
console.log(arrCopy2); //[3, 5, 7]
console.log(arrCopy3); //[3, 5, 7]
console.log(arrCopy4); //[5, 7, 9]
splice()
理解：
用参数理解：从哪里开始，删除几项，插入项
操作这几个参数达到删插替换
- 有很多种用法，可以实现删除、插入和替换。
- splice()方法始终都会返回一个数组，该数组中包含从原始数组中删除的项，如果没有删除任何项，则返回一个空数组。
- 删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。例如， splice(0,2)会删除数组中的前两项。
var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);
console.log(arr); //[5, 7, 9, 11]
console.log(arrRemoved); //[1, 3]
- 插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。例如，splice(2,0,4,6)会从当前数组的位置 2 开始插入4和6。
var arr = [1,3,5,7,9,11];
var arrRemoved2 = arr.splice(2,0,4,6);
console.log(arr); // [5, 7, 4, 6, 9, 11]
console.log(arrRemoved2); // []
- 替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice (2,1,4,6)会删除当前数组位置 2 的项，然后再从位置 2 开始插入4和6。
var arr = [1,3,5,7,9,11];
var arrRemoved3 = arr.splice(1,1,2,4);
console.log(arr); // [5, 2, 4, 4, 6, 9, 11]
console.log(arrRemoved3); //[7]
indexOf()和 lastIndexOf() （ES5新增）
理解：
- 接收两个参数：要查找的项和（可选的）表示查找起点位置的索引
- indexOf()向后查找，lastIndexOf()向前查找
forEach() （ES5新增）
理解：
- f对数组进行遍历循环，对数组中的每一项运行给定函数。
- 参数都是function类型，默认有传参，参数分别为：遍历的数组内容；当前索引，数组本身。
- 这个方法没有返回值。
var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a){
console.log(x + '|' + index + '|' + (a === arr));
});
// 输出为：
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true
map() （ES5新增）
理解：根据函数映射数组每一项，对每一项计算抽取等
- 指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]
- 也可用于对对象数组进行抽取，抽取对象数组中不同对象某一项的值为新的数组（工作实用
- 且不能用 map 生成一个不同长度的新数组。（map 的原数组是多少长度，返回的数组就有多少长度）
let arr1 = [{class:1,name:"jack",sex:0},{class:2,name:"uzi",sex:0},{class:3,name:'loser',sex:0},{class:1,name:'Ruth',sex:1}]
arr1.map((it) => {return {name:it.name}})
arr1.map((it) => {if(it.class===1){return it.name}})
//这里的按条件返回数组用过滤更合适
- 函数参数也可以改变
var numbers = [1, 2, 3, 4];
var filteredNumbers = numbers.map(function(num, index) {
if(index < 3) {
return num;
}
});
// filteredNumbers is [1, 2, 3, undefined]
find()
理解：
- find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。
- 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
let arr1 = [{class:1,name:"jack",sex:0},{class:2,name:"uzi",sex:0},{class:3,name:'loser',sex:0},{class:1,name:'Ruth',sex:1}]
arr1.find((it)=> {return it.class===1})
// {class: 1, name: "jack", sex: 0}
参数：
filter() （ES5新增）
理解：
- filter()：“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {
return index % 3 === 0 || x >= 8;
});
console.log(arr2); //[1, 4, 7, 8, 9, 10]
- 也可对对象数组进行过滤
let arr1 = [{class:1,name:"jack",sex:0},{class:2,name:"uzi",sex:0},{class:3,name:'loser',sex:0},{class:1,name:'Ruth',sex:1}]
arr1.filter((x,index) => {return x.class===1})
every() （ES5新增）
理解：
- every()：判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。
let arr = [1, 2, 3, 4, 5];
arr.every((x) => {return x>0})//t
arr.every((x) => {return x>5})//f
arr.every((x) => {return x>1})//f
some() （ES5新增）
理解：
- some()：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。
let arr = [1, 2, 3, 4, 5];
arr.some((x) => {return x>5})//f
arr.some((x) => {return x>4})//t
reduce()和 reduceRight() （ES5新增）
理解：
- 迭代数组的所有项，然后构建一个最终返回的值。reduce()方法从数组的第一项开始，逐个遍历到最后。而 reduceRight()则从数组的最后一项开始，向前遍历到第一项。
- 接收 4 个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。
var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
return prev + cur;
},10);
console.log(sum); //25
自记方案：
增删改（头2尾3全局3）
查找2排序2判断3遍历3定位1映射1
