专栏首页闰土大叔闰土说JS进阶之「戏说数组」

闰土说JS进阶之「戏说数组」

前言

最近一段时间,我女票跟我诉苦说他们公司很多同事(包括老板),一到中午都痴迷于玩王者荣耀,不玩的会受到排挤,参与不进话题。“什么?你居然不知道梦奇,这可是王者荣耀里新出的英雄哎?”没错,王者荣耀就是这么火,今天我会在王者荣耀里自定义一个英雄,名叫Array(数组)。你想知道该英雄的玩法攻略吗?接下来正文开始。

英雄介绍

首先,玩游戏得先创建英雄Array。创建数组有两种基本方式,第一种是使用Array构造函数,如下所示:

第二种是使用数组字面量表示法,如下所示:

英雄创建完成之后,首先来介绍一下它的一个自带的技能属性,length。Tips:利用length属性可以方便的在数组末尾添加新项。举个例子:

由于数组最后一项的索引始终是length-1,因此下一个新项的位置就是length。

技能攻略1:栈方法

在ECMAScript制定的游戏规则中,提供了一种让Array的行为类似于栈的方法。栈是一种后进先出的数据结构,也就是最新添加的项最早被移除。ES专门为数组贴心的提供了push()和pop()两种技能方法。

push()技能可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。而pop()技能则从数组末尾移除最后一项,减少length的值,返回值是移除的项。请看下面的例子:

技能攻略2:队列方法

刚看完栈方法,接下来我们介绍下Array的队列方法。栈数据结构的访问规则是后进先出,而队列数据结构的访问规则是先进先出。强大的ECMAScript为英雄Array又提供了两种技能,分别是unshift()和shift()。

结合shift()和push()方法,可以像使用队列一样使用数组。举个例子:

以上代码中,首先使用push()方法创建了一个包含3种颜色名称的数组。然后使用shift()方法从数组种取得了第一项,即“red”。在移除第一项后,数组的length就变成了2。

ECMAScript还为Array提供了一个unshift()方法,它能在数组前端添加任意个项并返回新数组的长度。先来看看下面的例子:

这个例子中创建了一个数组并使用unshift()方法先后推入了3个值,数组中的顺序为:black、red、green。在调用pop()方法时,移除并返回的是最后一项,即“green”。

技能攻略3:重排序方法

Array英雄身上自带两个重排序的技能包,一个是基础版的reverse()方法,请看下面的例子:

这个方法直观明了,但不够灵活,万一碰上更强大的对手,就显得束手无策了。于是,才有了升级版的sort()方法。该方法可以接收一个比较函数作为参数,下面来看例子:

在sort()方法里接收compare函数,该比较函数接收两个参数,如果val1小于val2返回-1,如果两数相等,返回0,如果val1大于val2,那么返回1。这是升序,当然也可以通过比较函数产生降序排序的结果,只要交换返回的值就可以。

还有,对于数值类型的对象类型,还有一个更简便的比较函数,请看下图:

技能攻略4:操作方法

ECMAScript为Array提供了很多操作的方法,其中concat()方法可以基于当前数组中的所有项创建一个新数组,但并不会影响当前数组。请看下面的例子:

第二个方法是slice()方法,它能够基于当前数组中的一或多个项创建一个新数组。slice()方法可以接收一或两个参数,即要返回项的起始和结束位置。在只有一个参数的情况下,slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数,该方法返回起始和结束位置之间的项,但不包括结束位置的项。注意,slice()方法不会影响原始数组。请看下面的例子:

接下来我要说的这个splice()方法可以说是技能最强大的数组方法。splice()的主要用途是向数组的中部插入项。如果要使用splice()这个强大的技能包,需要遵循它的三个操作规则:

  1. 删除:可以删除任意数量的项,只需指定2个参数:要删除的第一项的位置和要删除的项个数。例如,splice(0, 2)会删除数组中的前两项。
  2. 插入:可以向指定位置插入任意数量的项,只需提供3个参数:起始位置,0(要删除的个数)和要插入的项。例如,splice(2, 0 ,'red','green')会从当前数组的位置2开始插入字符串“red”和“green”。
  3. 替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定3个参数:起始位置,要删除的项个数和要插入的任意数量的项。插入的项不必与删除的项个数相等。

splice()方法始终都会返回一个数组,该数组中包含从原始数组中删除的项(如果没有删除任何的项,则返回一个空数组)。请看以下的代码实例:

技能攻略5:迭代方法

ECMAScript为Array定义了5个迭代方法,分别是every()、filter()、forEach()、map()、some()。传入这些方法的函数都会接收三个参数:数组项的值、该项在数组中的索引和数组对象本身。下面我们直接来看例子:

以上代码中,我简单的说下,every()方法类似于运算符与&,只有所有项满足条件才会返回true,否则返回false。some()方法类似于运算符或||,只要有一项满足条件就会返回true。filter()方法筛选数组中符合条件的项,然后以数组的形式返回。forEach()方法本质上和for循环迭代数组一样,没有返回值。

技能攻略6:归并方法

英雄Array的最后两个杀手锏方法是reduce()和reduceRight()。这两个方法都会迭代数组中的所有项,然后构建一个最终返回的值。其中,reduce()方法从数组的第一项开始,逐个遍历到最后。而reduceRight()正好相反,它从数组的最后一项开始,向前遍历到第一项。

传给reduce()和reduceRight()的函数接收4个参数:前一个值、当前值、项的索引和数组对象。使用reduce()方法可以对数组中的所有值进行求和,比如:

简单说下,使用reduce()还是reduceRight(),主要取决于要从哪头开始遍历数组。除此之外,它们完全相同。

以上,是英雄Array的所有技能属性。

敌军还有5秒到达战场......(终)

本文分享自微信公众号 - 闰土大叔(running_hacker)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-10-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何跟老板开口要加薪?

    在当下的大环境下,谁都希望收入多一点,有安全感,人之常情。如果你打算要求加薪,尤其是女生,要提加薪,一定要大大方方的,不要扭捏。

    闰土大叔
  • 现在前端都会Vue,你凭什么张口就要18K

    这几年前端圈面试流行一个段子,说能不能拿到高薪,就看能不能唬住面试官,唬住就要50K,唬不住就要5K。

    闰土大叔
  • 在没有DOM操作的日子里,我是怎么熬过来的(终结篇)

    前言 在我写终结篇的日子里,Vue版本稳定在2.9.1。当我摸清Vue的脉络之后,以一个爬坑无数的亲历者的身份,谈谈我在MVVM时代里遇到的那些事儿。 接下来,...

    闰土大叔
  • 【面试】我是如何面试别人List相关知识的,深度有点长文

    前几年易中天可谓非常的火,接受过很多采访。他的情况比较特殊,在武汉读高中时期,恰逢“知识青年上山下乡”活动,就到新疆去了。

    帅地
  • 第一阶段-Java基础知识:【第三章 方法和数组】

    如果我们想要在一个类中实现很多功能,但是如果我们想要,多次使用,某一个功能,显然我们需要重复书写这个功能的代码多次,显然,这是不明智的。所以方法就来拯救我们了。

    BWH_Steven
  • 我是如何面试别人List相关知识的

    ?先来点鸡汤 前几年易中天可谓非常的火,接受过很多采访。他的情况比较特殊,在武汉读高中时期,恰逢“知识青年上山下乡”活动,就到新疆去了。 在新疆生产建设兵团...

    Java团长
  • 数组

    数组是一种线性表的数据结构,它使用一组连续的内存空间,来存储一组具有相同类型的数据。

    幺鹿
  • Yii2框架踩坑记录-数组数据渲染到后台页面带分页

    不得不说Yii框架还是一个非常高效的框架,Gii扩展能生成简单的CRUD操作,问题也就出在这里,我的数据不是直接从单独的表出来的,需要连查,需要递归操作

    沈唁
  • js数组push方法使用注意

    js 数组的push方法,想必大家都知道是向数组末尾添加元素,但是有一个很关键的点需注意: 引自 MDN 返回值 当调用该方法时,新的 length 属性值将被...

    蓓蕾心晴
  • 一篇文章完全掌握 JavaScript 数组操作[每日前端夜话0x87]

    可以用被称为方法的多个操作来操作数组。这些方法允许我们对数组进行添加、删除、修改挤执行更多操作。

    疯狂的技术宅

扫码关注云+社区

领取腾讯云代金券