JS数组的操作

作者: 大春春 | 来源:发表于2017-01-17 13:19 被阅读580次

上一篇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()

相关文章

  • js笔记

    js数组 删除某个元素 js数组是否含有某个元素 判断value为undefined cookie操作

  • JS jsonArray操作

    JS jsonArray操作 js对数组对象的操作以及方法的使用 如何声明创建一个数组对象:var arr = n...

  • JS对象 & JSON & JS数组操作

    JS对象 & JSON & JS数组操作 JSON 格式(JavaScript Object Notation 的...

  • js基础了解

    js数组常用遍历方法使用: js数组常用操作方法使用: 基本逻辑运算: 基本字符串操作方法:

  • JS文集的目录

    js基础心法 深浅拷贝(递归)深浅拷贝(首层浅拷贝) js 数据处理 数组对象查找的常见操作数组对象去重的常见操作...

  • js对象数组操作 数组操作

    var numbers = [1, 2, 3];var newNumbers1 = numbers.map(fun...

  • JS数组操作

    splice 用于一次性解决数组添加、删除(这两种方法一结合就可以达到替换效果),方法有三个参数 开始索引 删除元...

  • JS数组操作

    1.栈方法 push()和pop() 后入先出 push():末尾追加 pop():末尾弹出 2.队列方法 先入先...

  • js 数组操作

    遍历删除元素: 遍历数组:for循环遍历: forEach遍历:

  • js数组操作

    一、改变原数组的方法 a.reverse() 将数组逆序,会修改原数组 a.sort 对数组进行排序, 需要传入自...

网友评论

  • efa30b83acf0:forEach可以改变原数组,用数组加索引的方式

本文标题:JS数组的操作

本文链接:https://www.haomeiwen.com/subject/lxmpbttx.html