行业资讯

JavaScript中有哪些操作数组的方法

发布时间：2021-06-20 08:25:36 作者：Leah
来源：亿速云 阅读：163

本篇文章给大家分享的是有关JavaScript中有哪些操作数组的方法，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

1. 与数据结构相关的方法

有数据结构基础的同学应该都知道 栈 和 队列 这两种数据结构(不知道的同学可以自行查阅一下，暂无文章推荐～)。而 JavaScript  的数组方法中，有一些方法就是契合用数组实现的栈和队列这两种数据结构的方法的。

1.1 Array.prototype.push

push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

是否改变原数组：是

参数：

这个方法 类似 于 栈 中的 推入 方法，它将一个元素入栈：

const stack = []; stack.push(1);  // 1 console.log(stack); // [1]  const stack1 = []; stack1.push(1, 2); // 2 console.log(stack1); // [1, 2]

1.2 Array.prototype.pop

pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。

这个方法 类似 于 栈 中的 弹出 方法，它将栈顶的元素弹出：

const stack = [1, 2, 3, 4, 5]; stack.pop(); // 5 console.log(stack); // [1, 2, 3, 4]  const stack1 = []; stack1.pop(); // undefined console.log(stack1); // []

1.3 Array.prototype.unshift

unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。

这个方法 有那么点 类似于 队列 的 入队 操作，它将一个或者多个元素入队：

const queue = [3, 4, 5]; queue.unshift(2); // 4 console.log(queue); // [2, 3, 4, 5]  const queue1 = [3, 4, 5]; queue1.unshift(1, 2); // 5 console.log(queue1); // [1, 2, 3, 4, 5]

1.4 Array.prototype.shift

shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

这个方法 有那么点 类似于 队列 的 出队 操作，也 有那么点 类似于 栈 的 弹出 操作：

const queue = [3, 4, 5]; queue.shift(); // 3 console.log(queue); // [4, 5]  const queue1 = []; queue1.shift(); // undefined console.log(queue1); // []

1.5 小结

其实之所以说 类似于 或者 有点类似于 ，还是因为 JavaScript  中本身并没有提供严谨的实现队列或者栈这种数据结构的方法，但是通过这4个API的灵活使用，其实是可以比较灵活的实现类似于队列或者栈的功能的。但是如果真的要在生产环境中用这个4个API来模拟栈或者队列的话，不妨稍稍封装一下。感兴趣的同学不妨在学习栈以及队列的知识后来试试哦。

1.6 自己实现一下试试?

我们接着不妨来实现一下上面的API是怎么做的。

1.6.1 仿写 push

先来个 push 看看：

Array.prototype.myPush = function(...args) {   let top = this.length;   for (let i = 0; i < args.length; i++) {     this[top] = args[i];     top++;   }   return this.length; };  const stack = []; stack.myPush(1); // 1 console.log(stack); // [1]  const stack1 = []; stack1.myPush(1, 2); // 2 console.log(stack1); // [1, 2]

注意：不要使用箭头函数，否则 this 的指向会出现一些问题，关于 this 指向的问题，因为不是本期的重点，所以暂时不聊。

1.6.2 仿写 pop

再试试 pop ?

Array.prototype.myPop = function() {   const topEle = this[this.length - 1];   this.length > 0 && this.length--;   return topEle; };  const stack = [1, 2, 3, 4, 5]; stack.myPop(); // 5 console.log(stack); // [1, 2, 3, 4]  const stack1 = []; stack1.myPop(); // undefined console.log(stack1); // []

1.7 小结

题外话，写一个方法，无论是仿写也好，还是自己发开也好。首先要确定的就是函数的入参和返回值，之后不再赘述。同时，我个人是倾向于都写纯函数的。至于  unshift 和 shift 的仿写，这里就不写了，会稍微麻烦一点，但是没有太复杂。

2. 和顺序有关的方法

2.1 Array.prototype.sort

sort()  方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的。

是否改变原数组：是

参数：

compareFunction

参数：

返回值：number

描述：

简而言之， sort 方法接受一个回调函数。这个回调函数的入参为数组中待比较的两个元素a 和 b，返回值是一个 number ， sort 根据  number 的值对数组进行如上描述的操作。

看个:chestnut:：

const numbers = [4, 2, 5, 1, 3]; numbers.sort(function(a, b) {   return a - b; }); // [1, 2, 3, 4, 5]

排序这个东西吧，要是展开说内容就太多了，这里就不展开了。

2.2 Array.prototype.reverse

reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

没啥好说的，就是反转数组，那么来看个:chestnut:：

const arr = [1, 2, 3, 4, 5];  arr.reverse(); // [5, 4, 3, 2, 1]

3. 和遍历相关的方法

3.1 Array.prototype.every

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

是否改变原数组：否

参数：

callback

参数：

const test = [1, 2, 3, 4, 5];  const isMoreThanThree = (num) => {   return num > 3; };  test.every(isMoreThanThree); // false

3.2 Array.prototype.some

some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

是否改变原数组：否

参数：

callback

参数：

const test = [1, 2, 3, 4, 5];  const isMoreThanThree = (num) => {   return num > 3; };  test.some(isMoreThanThree); // true

3.3 Array.prototype.find

find() 方法返回数组中满足提供的测试函数的 第一个元素的值 。否则返回 undefined。

是否改变原数组：否

参数：

callback

参数：

const test = [1, 2, 3, 4, 5];  const isThree = (num) => {   return num === 3; };  const isSeven = (num) => {   return num === 7; };  test.find(isThree); // 3 test.find(isSeven); // undefined

3.4 Array.prototype.findIndex

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

和上面的非常类似，略。

3.5 Array.prototype.forEach

forEach() 方法对数组的每个元素执行一次给定的函数。

是否改变原数组： 否

参数：

callback

参数：

想想自己在刚接触前端的时候，总是用错这个方法。无外乎是指令式的for循环用习惯了，并且编码习惯不好。其实新同学们可以这么记：  两个no&mdash;&mdash;不改变原数组、没有返回值(返回值是undefined) 。好了，举个:chestnut:：

const test = [1, 2, 3, 4, 5];  const log = (val) => {   console.log(val); };  test.forEach(log);  // 依次打印 1 2 3 4 5

3.6 Array.prototype.map

map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

是否改变原数组： 否

参数：

callback

参数：

曾经总是把这个方法与forEach傻傻分不清，其实现在来看，还是英文没学好。map 有映射的意思，简直是明示啊。所以说，map  它会生成一个与原数组有映射关系的数组嘛。那么举个:chestnut:：

const test = [1, 2, 3, 4, 5];  const double = (num) => {   return num * 2; };  const doubleList = test.map(double);  console.log(doubleList); // [2, 4, 6, 8, 10]

3.7 Array.prototype.filter

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

是否改变原数组： 否

参数：

callback

参数：

这个方法的命名也是一看就懂了，举个:chestnut:：

const test = [1, 2, 3, 4, 5];  const isMoreThanThree = (num) => {   return num > 3; };  const moreThanThreeList = test.filter(isMoreThanThree);  console.log(moreThanThreeList); // [4, 5]

3.8 Array.prototype.reduce

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

是否改变原数组： 否

参数：

callback

参数：

这个方法，非常、非常强大，可以说几乎在任何 迭代数组，并得到一个返回值 的场景下，都可以适用。

比如：

这里我们举一个实现pipe的:chestnut:：

const pipe = (...fns) => {   return (arg) => {     return fns.reduce((res, fn) => {       return fn(res);     }, arg);   }; };

3.9 小结

不难发现，与数组迭代这类的方法，API都太相似了，而其实这些API语义化都是非常好的，多用用，自然就熟了。接着，不妨自己实现一个?

3.10 仿写 reduce

Array.prototype.myReduce = function (fn, initialValue) {   let ret = initialValue || this[0];   let idx = initialValue ? 0 : 1;   while (idx < this.length) {     ret = fn(ret, this[idx], idx, this);     idx++;   }   return ret; };  const test = [1, 2, 3, 4, 5];  const add = (num1, num2) => {   return num1 + num2; };  test.myReduce(add); // 15 test.myReduce(add, 10); // 25

写的相对粗糙，其他的方法思路也是类似，有兴趣的同学可以自己写来看看，写完之后多少也能加深下理解。

4 其他方法

4.1 Array.prototype.flat

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

曾经我一直认为扁平化这个方法在实际生产中用处不大。直到后来我维护的业务复杂起来后，需要用到 map  分类管理数据最后再取出来合并的时候，发现这方法还挺香的。举个:chestnut:：

const test = [1, [2, 3], [4, [5, 6]]];  test.flat(1); // [1, 2, 3, 4, [5, 6]]  test.flat(2); // [1, 2, 3, 4, 5, 6]

自己实现个看看?其实我非常喜欢用栈来实现扁平化的思路，MDN上就有这个版本，但是我看相关文章提到这种方法的很少。

const test = [1, [2, 3], [4, [5, 6]]];  const flatten = (list) => {   const stack = [...list];   const ret = [];   while (stack.length) {     const topElem = stack.pop();     if (Array.isArray(topElem)) {       stack.push(...topElem);     } else {       ret.push(topElem);     }   }   return ret.reverse(); };  flatten(test); // [1, 2, 3, 4, 5, 6]

其实思路也是比较容易想到的：扁平化数组很明显是一个需要深度搜索的过程，而深度搜索需要用到栈，那么之后套栈的模版就行了。可能稍微需要转一下的就是最后反转数组这块。当然，如果按照完全符合常识来写，那么每一步入栈的是一个反转的元素就行了。

5. 结语

其实还是有不少方法也挺常用的，但是介于篇幅原因，这里就暂时先不展开了，比如：

以上就是JavaScript中有哪些操作数组的方法，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。

推荐阅读：
  1. JavaScript数组及操作方法
  2. JavaScript数组的操作方法有哪些

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

javascript

上一篇：CSS属性选择器有哪些用法

下一篇：php如何实现用户登陆功能

相关阅读

您好，登录后才能下订单哦！

密码登录
登录注册
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
产品服务
地区划分
帮助支持
关于我们
行业资讯-文章归档 问答-问答归档
广州亿速云计算有限公司

7*24小时在线电话：400-100-2938

7*24小时在线QQ：800811969

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有
粤ICP备17096448号-1 粤公网安备 44010402001142号