JS数组方法总结
JS 数组方法有很多,这里根据 MDN 文档 进行了一波总结,接下来,让我们一起来了解一下它们吧!
1. 基础常用方法
1.1) push
将一个或多个元素添加到数组的末尾,并且会返回数组添加元素后的新长度
const arr = [1, 2, 3];
const newLen = arr.push(5, 4)
console.log(arr);
console.log(newLen);
1.2) pop
从数组中取出最后一个元素
const arr = [1, 2, 3];
const lastNum = arr.pop();
console.log(lastNum);
1.3) shift
从数组中取出第一个元素
const arr = [1, 2, 3];
const firstNum = arr.shift();
console.log(firstNum);
1.4) unshift
将一个或多个元素添加到数组开头,并且会返回数组添加元素后的新长度
const arr = [1, 2, 3];
const newLen = arr.unshift(6, 7, 5);
console.log(arr);
console.log(newLen);
2. 改变原数组方法
2.1) splice
通过删除或替换现有元素或者原地添加新的元素来修改数组
它的语法:
start
: 指定修改的开始位置(从0计数)(如果超出了数组的长度,则从数组末尾开始添加内容)deleteCount
: 表示要移除的数组元素的个数(如果不指定,则从start
到数组末尾)item
: 要添加进数组的元素,从start
位置开始(如果不指定,则 splice() 将只删除数组元素)
array.splice(start, deleteCount, item);
通过一个例子来理解一下:
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 10];
// 从数组下标为 1 处,删除元素直到末尾
arr1.splice(1);
// 从数组下标为 0 处,删除 1 个元素
arr2.splice(0, 1);
// 从数组下标为 1 处,不删除元素(因为为 0), 在此处添加元素 9
arr3.splice(1, 0, 9);
console.log(arr1);
console.log(arr2);
console.log(arr3);
2.2) sort
⽤原地算法对数组的元素进⾏排序,并返回数组
它的语法:
-
compareFunction
: 用来指定按某种顺序进行排列的函数(如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序 — 即字典序进行排序) -
他有两个参数:第一个用于比较的元素和第二个用于比较的元素
如果 compareFuntion(a, b)
小于 0,则 a 在 b 前,等于 0,则相对位置保持不变,大于 0,则 b 在 a 前
arr.sort(compareFunction);
举个例子理解一下:
const arr = [8, 1, 2, 10, 9];
arr.sort((a, b) => a - b);
console.log(arr);
3. 返回新数组方法
3.1) slice
从原数组浅拷⻉索引 begin 到索引 end 的元素(左闭右开)
arr.slice(begin, end);
通过一个例子理解一下:
const arr = [1, 2, 3, 4];
const newArr = arr.slice(0, 2);
console.log(newArr);
3.2) concat
合并两个或多个数组(不会改变原有数组,返回一个新数组)
const arr1 = [1, 2, 3];
const arr2 = [6, 5, 4];
const arr3 = [7, 9, 8];
const arrTwo = arr1.concat(arr2);
const arrThree = arr1.concat(arr2, arr3);
console.log(arrTwo);
console.log(arrThree)
// 这里还可以使用 展开运算符来拼接数组
const newArr = [...arr2, ...arr3];
console.log(newArr);
3.3) map
创建一个新数组,其结果是该数组中的每个元素是调用一次给定的函数后的返回值
const arr = [1, 2, 3];
const newArr = arr.map(elem => elem *= 2);
console.log(newArr)
4. 数组中搜索方法
4.1) indexOf
找到⼀个给定元素的第⼀个索引,如果不存在,则返回 -1
const arr = [1, 2, 3, 2, 4, 5];
console.log(arr.indexOf(2));
console.log(arr.indexOf(0));
4.2) lastIndexOf
找到⼀个给定元素的最后⼀个索引,如果不存在,则返回 -1
const arr = [1, 2, 3, 2, 4, 5];
console.log(arr.lastIndexOf(2));
console.log(arr.lastIndexOf(0));
4.3) includes
判断一个数组是否包含指定的值(如果包含则返回 true
,否则返回 false
)
const arr = [1, 2, 3, 2, 4, 5];
console.log(arr.includes(2));
console.log(arr.includes(0));
4.4) find
返回数组中满⾜提供的测试函数的第⼀个元素的值(如果没有,则返回 undefined
)
const arr = [2, 4, 3, 1, 5, 6];
console.log(arr.find(elem => elem & 1));
console.log(arr.find(elem => elem > 10));
4.5) findIndex
返回数组中满⾜提供的测试函数的第⼀个元素的索引(若没有找到对应元素则返回 -1)
const arr = [2, 4, 3, 1, 5, 6];
console.log(arr.findIndex(elem => elem & 1));
console.log(arr.findIndex(elem => elem > 10));
4.6) filter
创建一个新数组, 其包含通过所提供函数实现的测试的所有元素(如果没有一个符合,则会是一个空数组)
const arr = [2, 4, 3, 1, 5, 6];
const newArr = arr.filter(elem => elem & 1);
const newArr2 = arr.filter(elem => elem > 10);
console.log(newArr);
console.log(newArr2);
5. 数组中的计算方法
reduce
对数组中的每个元素按序执行一个我们所提供的函数,会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值
reduce
可以传两个参数,第一个参数为回调函数,第二个参数为 initialValue
先来看看第二个参数:
intialValue
: 作为第一次调用回调函数时参数 previousValue 的值
(若指定了initialValue
,数组中迭代器将从第一个元素开始执行,否则,没有指定,将会从第二个元素开始执行)
再来看看它的第一个参数,回调函数:
它的回调函数的参数组成如下:
-
previousValue
:上一次调用函数时的返回值 -
currentValue
:数组正在处理的元素 -
currentIndex
:数组中正在处理的元素的索引 -
array
:用于遍历的数组
通过一个例子来理解一下:
const arr = [1, 2, 3, 4, 5];
const sumVal = arr.reduce((a, b) => a + b);
console.log(sumVal);
const one = 1;
const sumWithOne = arr.reduce((a, b) => a + b, one);
console.log(sumWithOne)
6. 数组与字符串的转换方法
join
将⼀个数组的所有元素连接成⼀个字符串并返回这个字符串
它有着一个参数:
separator
: 指定一个字符串来分隔数组的每个元素。如果需要,将分隔符转换为字符串。如果缺省该值,数组元素用逗号(,)分隔。如果separator
是空字符串(""),则所有元素之间都没有任何字符
通过一个例子,理解一下:
const arr = ['H', 'e', 'l', 'l', 'o'];
const str1 = arr.join();
const str2 = arr.join("");
const str3 = arr.join("---");
console.log(str1);
console.log(str2);
console.log(str3);