Javscript数组中最常用的方法（建议收藏）

淩亂°似流年 2022-09-16 11:22 318阅读 0赞

### 数组最常见的方法 ###

*  操作方法
 *  排序方法
 *  转换方法
 *  迭代方法

js中数组的方法不管是写原生还是用框架，我们都会经常运用到，以及也有一些面试官会问到甚至让我们手写一个数组的排序函数；  
所以我就通过查找一些好的文章做了一篇对数组方法的归纳包括：数组的基本操作方法、排序方法、转换方法以及es6中的迭代方法；

# 操作方法 #

数组的一些操作方法，也无非就是增、删、改、查：

**增**

**push()**  
push()方法接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度，对原数组有影响；

let people = []; // 创建一个数组
    let count = people.push("张三", "李四"); // 推入两项
    console.log(count) // 2

**unshift()**  
unshift()在数组开头添加任意多个值，然后返回新的数组长度，对原数组有影响；

let people = new Array(); // 创建一个数组
    let count = colors.unshift("张三", "李四"); // 从数组开头推入两项
    alert(count); // 2

**splice()**  
传入三个参数，分别是开始位置、0（要删除的元素数量）、插入的元素，返回空数组，对原数组有影响；

let people = ["张三", "李四", "王二"];
    let removed = colors.splice(1, 0, "麻子")
    console.log(colors) // 张三,麻子,李四,王二
    console.log(removed) // []

**concat()**  
首先会创建一个当前数组的副本，然后再把它的参数添加到副本末尾，最后返回这个新构建的数组，不会影响原始数组；

let people = ["张三", "李四", "王二"];
    let people2 = people .concat("麻子", ["王朝", "马汉"]);
    console.log(people ); //["张三", "李四", "王二"];
    console.log(people2); // ["张三", "李四", "王二", "麻子", "王朝", "马汉"]

**删**

**pop()**  
pop() 方法用于删除数组的最后一项，同时减少数组的length 值，返回被删除的项，对原数组有影响；

let people = ["张三", "李四"];
    let item = people.pop(); // 取得最后一项
    console.log(item) // 李四
    console.log(people.length) // 1

**shift()**  
shift()方法用于删除数组的第一项，同时减少数组的length 值，返回被删除的项，对原数组有影响；

let people = ["张三", "李四"];
    let item = people.shift(); // 取得第一项
    console.log(item) // 张三
    console.log(people.length) // 1

**splice()**  
传入两个参数，分别是开始位置，删除元素的数量，返回包含删除元素的数组，对原数组有影响；

let people = ["张三", "李四", "王二"];
    let removed = people.splice(0,1); // 删除第一项
    console.log(people ); // ["李四", "王二"]
    console.log(removed); // ["张三"]，只有一个元素的数组

**slice()**  
slice() 方法以新的数组对象，返回数组中被选中的元素，选择从给定的 start 参数开始的元素，并在给定的 end 参数处结束，但不包括。不会影响原始数组；

let people = ["张三", "李四", "王二", "麻子", "王朝"];
    let people2 = people.slice(1);
    let people3 = people.slice(1, 4);
    console.log(people)   // ["张三", "李四", "王二", "麻子", "王朝"]
    concole.log(people2); // ["李四", "王二", "麻子", "王朝"]
    concole.log(people3); // ["李四", "王二", "麻子"]

**改**

修改原来数组的内容，常用splice()

**splice()**  
splice()传入三个参数，分别是开始位置，要删除元素的数量，要插入的任意多个元素，返回删除元素的数组，对原数组产生影响

let people = ["张三", "李四", "王二"];
    let removed = people.splice(1, 1, "麻子", "王朝"); // 插入两个值，删除一个元素
    console.log(people ); // ["张三", "麻子", "王朝", "王二"];
    console.log(removed); //["李四"]，只有一个元素的数组

**查**

即查找元素，返回元素坐标或者元素值

*  indexOf()
 *  includes()
 *  find()

**indexOf()**  
返回要查找的元素在数组中的位置，如果没找到则返回-1

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
    numbers.indexOf(4) // 3

**includes()**  
返回要查找的元素在数组中的位置，找到返回true，否则false

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
    numbers.includes(4) // true

**find()**  
返回第一个匹配的元素

const people = [
        { 
            name: "Matt",
            age: 27
        },
        { 
            name: "Nicholas",
            age: 29
        }
    ];
    people.find((element, index, array) => element.age < 28) // // {name: "Matt", age: 27}

--------------------

# 排序方法 #

数组本身有两个方法可以用来对元素重新排序：

*  reverse()
 *  sort()

定义排序函数：

*  冒泡排序
 *  插入排序
 *  递并排序
 *  计数排序

**reverse()**  
顾名思义，将数组元素方向排列

let values = [1, 2, 3, 4, 5];
    values.reverse();
    alert(values); // 5,4,3,2,1

**sort()**  
sort()方法接受一个比较函数，用于判断哪个值应该排在前面

> 如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

> 如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：  
> 1.若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。  
> 2.若 a 等于 b，则返回 0。  
> 3.若 a 大于 b，则返回一个大于 0 的值。

**冒泡排序**  
排序规则：比较相邻元素，符合比较条件，交换位置较大的往后排，反复比较交换，直到所有数据都符合排序条件，得出排序效果，结束排序。  
排序动态示意：  
![在这里插入图片描述][f4425b452ac8423c8cda5eb7a539f9b6.gif_pic_center]

**插入排序**  
排序规则：插入排序得比喻成斗地主，手里摸牌之后都是按照从小到大的顺序。每摸到一张牌就把他们插入到合适的位置，使得他们比后面小，比前面大或者相等。  
排序动态示意：  
![在这里插入图片描述][c56e216f90a14633a10d03875270cf8a.gif_pic_center]

**递并排序**  
排序规则：将长的数组分解为短的数组，一直分到最后，单个单个数组比较，我们就认为，只有一个元素的数组是有序的。然后再逐个的合并。  
排序动态示意：  
![在这里插入图片描述][5fc1143939be4f11909b8ea4dbc1639d.gif_pic_center]

**计数排序**  
排序规则：

*  找出待排序的数组中最大和最小的元素，然后建立一个数组C用于统计待排数组中最小元素到最大元素区间中每个元素出现次数；
 *  统计数组中每个值为i的元素出现的次数，存入数组C的第i项；
 *  对所有的计数累加（从C中的第一个元素开始，每一项和前一项相加）；
 *  反向填充目标数组：将每个元素i放在新数组的第C(i)项，每放一个元素就将C(i)减去1

排序动态示意：  
![在这里插入图片描述][1dbc32550c954fb69ac95e970fbba4f1.gif_pic_center]

--------------------

# 转换方法 #

常见的转换方法有：

*  join()

**join()**  
join() 方法接收一个参数，即字符串分隔符，返回包含所有项的字符串

let colors = ["red", "green", "blue"];
    alert(colors.join(",")); // red,green,blue
    alert(colors.join("||")); // red||green||blue

--------------------

# 迭代方法 #

常用来迭代数组的方法（都不改变原数组）有如下：

*  some()
 *  every()
 *  forEach()
 *  filter()
 *  map()

**some()**  
对数组每一项都运行传入的函数，如果有一项函数返回 true ，则这个方法返回 true

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
    let someResult = numbers.some((item, index, array) => item > 2);
    console.log(someResult) // true

**every()**  
对数组每一项都运行传入的函数，如果对每一项函数都返回 true ，则这个方法返回 true

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
    let everyResult = numbers.every((item, index, array) => item > 2);
    console.log(everyResult) // false

**forEach()**  
对数组每一项都运行传入的函数，没有返回值

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
    numbers.forEach((item, index) => { 
        // 执行某些操作
    });

**filter()**  
对数组每一项都运行传入的函数，函数返回 true 的项会组成数组之后返回

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
    let filterResult = numbers.filter((item, index, array) => item > 2);
    console.log(filterResult); // 3,4,5,4,3

**map()**  
对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
    let mapResult = numbers.map((item, index, array) => item * 2);
    console.log(mapResult) // 2,4,6,8,10,8,6,4,2

[f4425b452ac8423c8cda5eb7a539f9b6.gif_pic_center]: /images/20220828/181c35cea77040b281413fd63fb397f1.png
[c56e216f90a14633a10d03875270cf8a.gif_pic_center]: /images/20220828/e35bda3f5fcd44cfb98c790ceb2725a0.png
[5fc1143939be4f11909b8ea4dbc1639d.gif_pic_center]: /images/20220828/15a800354daf4bb98bae6016a42b2cdf.png
[1dbc32550c954fb69ac95e970fbba4f1.gif_pic_center]: /images/20220828/f5802ecb54d34fd4ae31c208377c1757.png