JS数组的操作

上一篇JS字符串的操作中,介绍了split方法可以将字符串转化为以某种形式分割的数组,然后可以对其采用数组的操作方法,那么这一篇就来看看数组的操作方法是怎么样的。

一、如何创建数组

创建数组有两种方式(①:构造数组、②:字面量创建数组)

  • 构造数组

    • 无参构造
      无参构造数组可以使用关键词new后接Array()方法创建一个数组,该数组是一个长度为0的空数组:

      无参构造数组

    • 单个参数构造数组
      该方法与无参构造类似,但是为Array()方法传入了一个参数(该参数不能为负数),该参数制定了数组初始的长度,这些长度的值都是undefined

      单个参数的构造数组

    • 多个参数构造数组
      这种方法可以为Array()传入多个参数,这些参数就是该数组的初始值,有几个参数,该数组的长度就是几:

      多个参数构造数组

  • 字面量创建数组
    字面量创建数组是最常用的创建数组的方式,该方法通过将一个数组赋值给一个变量创建,可以为创建的数组传入值作为它的的初始值:


    字面量创建数组

二、数组的长度及索引

  • 数组的长度

    • length:
      数组的长度可以通过arr.length的方式进行查询:

      length

    • 设置数组的length:
      数组的长度可以通过对arr.length进行赋值来改变,长度变化后该数组的值也会产生相应额变化,多出来的长度会用undefined进行填充,而少了的则从数组的尾部开始删除:

      通过length改变数组

  • 数组的索引

    • 数组的索引用来检索数组中处于某位的元素,用arr[idx]来表示,通常用于检索数组或者通过赋值改变数组中的某个值,若是用于检索时,输入的索引大于数组长度,则值为undefined,此外,也可以用length表示数组的索引方便检索未知位的数组:
      检索数组:

      检索数组

      修改数组对应索引的值:
      修改数组对应索引的值

    • 通过索引修改数组的长度
      我们还可以通过对数组中的某位索引进行赋值,进而对数组的长度进行修改:


      通过索引修改数组长度

三、数组中值的添加和删除

  • 我们可以使用数组对象中的内置方法对数组中的值进行添加和删除,常用的有如下四种方法:
    (pop、push、shift、unshift);

    • pop():
      pop()方法用于删除数组中的最后一位值,并返回这个值,使用方法如下:
      pop
    • push()方法用于添加一个值到数组的最后一位,参数填写需要添加进去的值,执行后返回添加后数组的长度:
      push
    • shift()方法用于删除数组中的第一位值,并返回这个值:
      shift
    • unshift()方法用于添加一个值到数组的第一位,然后返回添加后的数组长度,参数为需要被添加进去的值:
      unshift
  • 然而上面四种操作都不是很方便,比如需要对数组中间的值进行删除和添加它们就无能为力了,这时候我们可以使用数组对象内置的方法splice()
    splice功能非常强大,它可以接受两个、三个或多个参数,它的第一个参数代表需要操作的值的索引,第二个参数是需要删除的值的个数,第三个参数可以是多个参数,代表需要添加进去的值,下面来看一下使用例子:

    • 删除数组中的3:


      splice删除
    • 添加一个100到4的前面:


      splice添加
    • 添加很多个100到5的前面:


      splice添加多个值

PS:pop()、push()、shift()、unshift()、splice()这五个方法都是直接对原数组进行的操作

四、数组的排序

我们可以使用reverse()、sort()对数组进行排序

  • reverse:
    reverse()方法可以将数组反转,逆向排序,这个方法会对原数组产生影响,使用如下:
    反转数组
  • sort:
    sort()方法功能更加强大,它可以按照我们想要的方式对数组进行排序,无参数时按照ASCII码的大小进行排序,此外它可以接收一个回调函数作为参数,然后按照该函数返回的值对数组进行排序,这个方法也会对原数组产生影响:
    1.无参数时,按照值的第一位的ASCII码进行排序:
    无参排序

    2.传入回调函数,该函数返回的是正数的话,则按照从小到大的顺序排序:
    返回的如果是负数,则按照从大到小的顺序排序:
    有参排序

五、数组的分割和组合

除了上面的对数组中的值进行添加和删除的五种操作方法外,数组对象还内置了对数组进行分割和组合的方法

  • concat:
    concat()方法用于将两个数组结合成一个数组,参数为需要结合的数组,该方法不会对原数组产生影响,返回的是一个新的数组,生成的新数组一般通过赋值进行使用,用法如下:
    concat
  • slice:
    slice()方法用于分割数组,它接受两个参数,第一个是分割的起始索引(包括该值),第二个是结束索引(分割不包括该值),参数允许负数,该方法不会影响原数组,而是返回一个新的数组:
    slice

六、数组转化为字符串(join()方法)

数组可以通过join()方法将数组转化为字符串:
join()方法可以传入一个参数,用作分隔转化后的字符串的参照物,该参数可以是空字符串,没有参数则默认使用逗号进行分隔,这个方法不会对原数组产生影响:
1.无参转化:

无参转化

2.有参转化:
有参转化

七、总结

  1. 长度:length
    可通过该属性查询数组的长度;

  2. 删除数组内的元素:pop、shift(对原数组产生影响)
    pop:删除数组中的最后一位元素;
    shift:删除数组中的第一位元素;

  3. 添加元素到数组里面:push、unshift(对原数组产生影响)
    push:添加一首元素到数组的最后一位;
    unshift:添加一个元素到数组的第一位;

  4. 添加和删除都可以的方法:splice(对原数组产生影响)
    splice:可接收参数,第一个参数是索引位置,第二个是删除元素的个数,后面的参数都是添加的元素;

  5. 数组分割和组合:slice、concat
    slice:分割数组,不会影响原数组,返回新的数组,有两个参数,第一个是删除的起始位置,第二个是结束位置(不包含该位元素);
    concat:组合数组,可以将两个数组组合为一个新数组,然后返回这个新数组,对原数组无影响,接受一个参数,该参数为需要组合的数组;

  6. 数组排序:reverse、sort(对原数组会产生影响)
    reverse:反转数组,将数组内元素原本的顺序进行逆转排列;
    sort:可对数组进行想要的方式排序,接收一个回调函数作为参数,并按照该函数进行排序,如果没有参数,则按照ASCII码的顺序进行排序;

  7. 数组转化字符串:join
    join:可以将数组转化为字符串,不会对原数组产生影响,接收一个参数,该参数是分隔新生成的字符串的参照物,如果没有添加参数则默认用逗号进行分隔;

八、ES5对数组扩展的新方法

  • Array.isArray()
    Array.isArray()用于判断一个数据是否是数组,参数为需要判断的数据,返回一个布尔值:

    Array.isArray()

  • indexOf()和lastIndexOf()
    indexOf()和lastIndexOf()这两个方法分别是正向查找元素和反向查找元素,接收一个被查找的元素作为参数,返回该元素在数组中的位置,其中indexOf()返回该元素第一次出现的索引,lastIndexOf()返回该元素最后一次出现的索引,没有找到则返回-1:

    indexOf()和lastIndexOf()

  • forEach
    forEach()方法可以用来遍历数组,并且对数组的每个元素做出一些操作,它接收一个回调函数做参数,该回调函数接收三个参数,第一个代表属组内的元素,第二个代表索引,第三个是数组,这个方法不会对原数组产生影响:

    forEach

  • every()和some()
    every()some()都可以判断数组内的元素是否符合要求,返回的都是布尔值,区别是every判断是所有元素都符合规则才返回true,而some是判断只要有一个元素符合规则就返回true,它们都接受一个回调函数作为参数,该回调函数是判断的标准:

    every()和some()

  • map
    map()forEach()方法类似,也是传入回调函数作为参数,该回调函数接收三个参数,不同的是forEach()只为每个数组中的元素执行一次回调函数,而map()在执行完回调函数后会返回一个新的数组:

    map()与forEach()的区别

  • filter
    filter()方法用来过滤一个数组,将符合要求的元素组成一个新的数组,原数组不变,接收一个回调函数作为参数:

    filter()

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容