你不知道的js数组的常用方法

关于js数组常用方法的剖析

数组也是对象数据类型的，也是由键值对组成的

   var ary = [12,23,34]; 一维数组
   /*
     * 结构
     * 0:12
     * 1:23
     * 2:34
     * length：3
   */
   1.以数字作为索引（属性名），索引从0开始递增
   2.有一个length属性，存储的是数组长度
   ary[0] 获取第一项
   ary[ary.length-1] 获取最后一项

数组中每一项的值可以是任何数据类型的

//多维数组
   var ary  = [
      {
       name:'xxx',
       age:20
  };
  {
       name:'xxx',
       age:20
  }
];

数组中的常用方法

按照四个维度记忆：

• 方法的作用
• 方法的参数

-方法的返回值

• 原有数组是否改变

push
作用: 向数组末尾增加新的内容
参数：追加的内容（可以是一个，也可以是多个）
返回值：新增数组的长度
原有数组改变

     var ary = [12,23,34];
     ary.push(100); =>4  ary：[12,23,34,100]
     ary.push(100,222,{name:'xx',age:200});
     => 10  ary: [12, 23, 34, 100, 100, 222, 0.1, 100, 222,{name: "xx", age: 200}]

pop
作用: 删除数组最后一项
参数：无
返回值：被删除的那一项
原有数组改变

     var ary = [12,23,34];
     ary.pop() =>34 //删除34
     ary:[12,23]

shift
作用: 删除数组第一项
参数：无
返回值：被删除的那一项
原有数组改变

     var ary = [12,23,34];
     ary.shift() =>12 //删除12
     ary:[23,34]

unshift
作用: 向数组开始位置增加新的内容
参数：要新增的内容
返回值：新增后数组的长度
原有数组改变

     var ary = [12,23,34];
     ary.unshift(2,null) =>5 //增加2项2，null
     ary:[2,null,12,23,34]

splice
基于splice可以对数组进行很多的操作：删除指定位置的内容，向数组指定位置增加内容，换可以修改指定位置的信息

`删除: ary.splice(n,m)`
n代表从索引n开始，删除m个内容，把删除的部分以一个新数组返回，原有数组改变。

     var ary=[12,23,34,45,56,67,78,89];
     ary.splice(2,3) =>删除 [34，45, 56]  //2代表从第2个数之后开始，3表示删除第2个之后的3个数字。
     => ary :[12,23,67,78,89]
     ary.splice(2) =>删除第2个之后的所有数 删除 [34，45, 56,67,78,89];
     //如果不知道
    `ary(n,m)` n代表从第n个数开始，m代表删除第n个数之后的m个数字。
    如果不指定m，或者删除的个数大于最大长度，都是删除到数组的末尾。

新增：ary.splice(n,0,x,...)
从索引n开始删除零项（没删除），把x或者更多的需要插入的内容存放在数组中索引N的“前面”

    var ary=[12,23,34,45,56,67,78,89];
    ary.splice(3,0,111,1111,222,222,null); =>0 //因为一项都没有删除，所以返回空数组
    ary => [12, 23, 34, 111, 1111, 222, 222, null, 45, 56, 67, 78, 89]

修改：ary.splice(n,m,x,...)
修改的原理就是把原有的内容删除掉，然后用新的内容替换这部分信息即可

    var ary=[12,23,34,45,56,67,78,89];
   ary.splice(2,3,8888) //从第二项开始，删除3项，然后替换为888
   ary => [12, 23, 8888, 67, 78, 89]

需求扩展

1. 删除数组最后一项，你有几种方法？

2.向数组末尾追加新内容，你有几种方法？

    //=>删除最后一项
    ary.pop()
    ary.splice(ary.length-1)
    ary.length--
   //=>向数组末尾追加新内容
   ary.push(100)
   ary.splice(ary.length,0,100)
   ary[ary.length]=100

delete ary[ary.length-1]不建议用delete删除数组中的某一项，虽然内容没有了，但是数组长度没有改变。 => ary：[12, 23, 34, 45, empty]

slice
作用: 在一个数组中，按照条件查找出其中的部分内容
参数：n , m, 从索引n开始，找到索引m处，但不包含m. ( 从n开始往后找m-n个数)
返回：以一个新数组存储查找的内容
原有数组不会变

var ary=[12,23,34,45,56,67,78,89,90];
ary.slice(2,7)
(5) [34, 45, 56, 67, 78]
ary [12, 23, 34, 45, 56, 67, 78, 89]
ary()和ary(0) //都是取整个数据，类似浅拷贝 - 实现数组的克隆，和原有数组内容一样，但不是相同的堆内存空间，两个数组是不相等独立的
ary(-3,-1) //从末尾倒数第三项开始从后取-3+（-1）项
ary(2) //如果不写m，则查找到数组末尾

concat
作用：实现多个数组（或者值）的拼接
参数：数组或者值
返回：拼接后的新数组
原有数组不变

   var ary1=[12,23];
   var ary2=[100,200];
   var ary3=[1000,2000];
   ary1.concat(ary1,'前端',ary3)
   =>ary1.concat(ary1,'前端',ary3)
  (7) [12, 23, 12, 23, "前端", 1000, 2000]
  => [].concat(ary2,ary1,'前端',ary3) //可以基于空数组作为拼接的开始，在小括号中排列拼接的顺序，空数组不会占据内容的位置
  (7) [100, 200, 12, 23, "前端", 1000, 2000] 

toString
作用：把数组转换为字符串
参数：无
返回：数组中的每一项用逗号分隔的字符串
原有数组不变

   var ary=[12,23];
   ary.toString =>"12,23"

join
作用：和toString类似，也是把数组转换为字符串，但是我们可以设置变为字符串后，每一项之间
参数：无
返回：数组中的每一项用逗号分隔的字符串
原有数组不变

   var ary=[12,23,34,45];
   ary.join =>"12,23,34,45"
   ary.join('+') => "12,23,34,45"
   eval(ary.join('+')) =>114
   基于join可以实现数组中每一项求和功能。
   1.基于join，使用+作为分隔符，先把数组变为每一项相加的字符串
   2.基于eval，把字符串变成js表达式执行，得到的结果就是数组中的每一项累加的和

reverse
作用：把数组倒过来排序
参数：无
返回：排列后新数组
原数组改变

   var ary=[12,23,45];
   ary.reverse()
   [45,23,12]

sort
作用：数组排序
参数：无/函数
返回：排列后新数组
原数组改变

   var ary=[12,23,67,78,45];
   ary.sort() => [12,23,45,67,78]
   //=>sort在不传参的情况下，只能处理10以内的数来排序

   var ary=[18,1,2,34,5,56]
   ary.sort => [1, 18, 2, 34, 5, 56] //没有按照我们想象的排序
   //=>真实项目中，基于sort排序，我们需要传递参数
   var ary=[18,1,2,34,5,56];
   ary.sort(function (a,b){
    return a-b; //=>升序
    return b-a; //=>降序
})

例如：var ary=[18,1,2,34,5,56]
undefined
//传参
ary.sort(function(a,b){
return a-b; //升序
})
(6) [1, 2, 5, 18, 34, 56]
ary.sort(function(a,b){
return b-a;  //降序
})
(6) [56, 34, 18, 5, 2, 1]

indexOf/lastIndexOf
这两个方法不兼容ie低版本浏览器（ie6~8）
作用：检测当前值在数组中的第一次或者最后一次出现未知的索引
参数：要检测的值
返回：索引
原数组不变

   var ary=[18,1,2,34,5,56]
   ary.indexOf(34)  //有34，且索引为3
   3
   ary.indexOf(100)  //无100，所以索引为-1
   -1
//基于indexOf检测，如果数组中有这一项，返回一个大于0的索引，如果没有这一项返回的结果为-1

//=>检测数组中是否包含某一项
if(ary.indexOf(100)>-1){
   //=>ARY中包含100这一项
}

除了以上方法，数组中还包含很多常用的方法：
（Array.prototype）

• every
• filter
• find
• forEach
• includes
• keys
• map
• reduce/reduceRight
• some

...