数组常用的方法

343 阅读3分钟

数组常用的方法

基本结构

  • 对象数据类型数组也有属性名,只不过属性名是索引;
  • 索引代表该项在数组中的位置,起始索引为0
  • length代表数组的长度

基本结构.png

类数组

  • 通过getElementsByTagName获取的元素集合是类数组
  • 函数中的实参集合arguments也是类数组 类数组不能使用数组的方法

遍历数组的每一项

var ary = [1,6,9,3];
for (var i = 0;i<ary.length;i++) {
	console.log(ary[i]);
}

改变原来数组的常用方法

用console.dir(Array.prototype)查看所有方法

在这几个方面去记忆方法

  1. 方法的意义和作用
  2. 方法的形参
  3. 方法的返回值
  4. 通过此方法原来的数组是否发生了变化

dir.png

dir1.png

增加

增加.png

push : 向末尾追加

  • 参数:任何数据类型,一个到多个,多个用逗号隔开
  • 返回值:新增后数组的长度
  • 原有数组改变了

unshift :向开头追加

  • 参数:任何数据类型,一个到多个,多个用逗号隔开
  • 返回值:新增后数组的长度
  • 原有数组改变了

把数组当做一个普通对象,使用键值对的操作

  • ary[ary.length]=xxx; //向末尾追加

删除

删除.png

pop:删除数组最后一项

  • 参数:无
  • 返回值:被删除的那一项内容
  • 原有数值改变了

shift:删除数组第一项

  • 参数:无
  • 返回值:被删除的那一项内容
  • 原有数值改变了 删除第一项,后面的每一项索引改变

把数组当做一个普通对象,使用键值对的操作删除

  • delete删除:delete ary[索引]删除指定项,其他索引不变,length不变
  • ary.length--;删除数组最后一项

删除1.png

删除4.png

splice增删改都可以

增删改.png

删除

  • splice(n,m):从索引n开始删除m个
  • 返回值:被删除的内容(以一个新数组保存)
    • splice(0) 清空数组
    • splice() 一项都不删除
    • splice(ary.length-1)删除最后一项

修改

  • splice(n,m,x):在原有删除的基础上,用x代替删除的内容

增加

  • splice(n,0,x):在修改的基础上,一项都不删除,把x插入到索引n的前面
    • ary.splice(0,0,x) 在开头追加
    • ary.splice(ary.length,0,x) 在末尾追加

splice.png

splice.1.png

不改变原有数组的方法

不改变数组.png

forEach:遍历数组中的每项

  • 参数:函数,两个形参(item,index)item是每一项,index是索引
  • 返回值:undefined
var ary=[1,2,3];
ary.forEach(
    function(item,index)
    {console.log(item+"----"+index)
})
ary//==>undefined

数组克隆:slice

  • 参数:slice(n,m) 从索引n开始复制索引m处(不包括m)
  • 返回值:把找到的部分以一个新数组返回
    • slice(n)从索引n开始复制末尾
    • slice()或slice(0) 数组克隆,和原来一样

slice.png

  • 支持负数 按照总长度+负数索引来计算

slice2.png

将两个数组进行拼接:concat

  • 参数:要拼接的内容(放在数组后面),可以任何数据类型
  • 返回值:拼接后的新数组
    • concat( ) 什么都没有拼接,相当于克隆
    • 如果拼接的是数组,就会将里面的数组展开拼接
    • 再加一层括号就会按数组拼接

concat.png

indexOf/lastIndexOf

indexOf(lastIndexOf):获取当前项在数组中第一次出现(最后一次)出现的索引 如果没有这一项,返回值是-1,以此验证数组中是否包含这一项

if(ary.indexOf(12)>-1){
    //数组中包含12
}
Arry.prototype.myIndexOf=function myIndexOf(value){
          var reselt=-1;
          for(var i=0;i<this.length;i++){
             if(value===this[i]){
             result=i;
             break;
             }
          }
        return result;
}

includes

  • 一个参数:要查找的对象
  • 返回值:有返回true;没有返回false
[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true
  • 该方法的第二个参数表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置,如果这时它大于数组长度(比如第二个参数为-4,但数组长度为3),则会重置为从0开始
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

数组中的排序和排列

排列和排序.png

reverse:把数组中的每一项倒过来排列

  • 参数:无
  • 返回值:排列后的顺序

sort:实现数组排序

  • 参数:无或者回调函数
  • 返回值:排序后的数组 (与原数组是一个地址)
    • 在无参数的情况下:只根据第一位排序

sort.png

排列两位的方法

sort2.png

ary.sort(function(a,b){
       return a-b;//升序
       return b-a;//降序
              })

//举例
var ary1 = [{age:14},{age:21},{age:1},{age:13},{age:11}]
ary1.sort(function(a,b){
      return a.age-b.age;//按照age的属性值升序排列
})

将数组转换为字符串

toString

  • 参数:无
  • 返回值:以逗号隔开的方式转为字符串

join

  • 参数:'' (空字符串)
  • 返回值:没有逗号的字符串
  • 参数:无
  • 返回值:有逗号的字符串
  • 参数:'+'
  • 返回值:以+ 分隔的字符串 想以什么作为分隔符,就把分隔符传入空字符串中 join.png

eval(不常用)

  • 参数:字符串类型,把参数当做js代码来运行

eval.png