0
点赞
收藏
分享

微信扫一扫

JavaScript数组方法总结

code_balance 2022-03-30 阅读 46

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);

在这里插入图片描述

举报

相关推荐

0 条评论