数组中常用的方法

166 阅读4分钟

数组是对象数据类型的,它是特殊的对象

   let ary = [12,23,45];
   console.log(typeof ary); ==> "object"
   
   数字作为索引(key属性名)
   length 代表长度
   ary[0] 根据索引获取指定项的内容
   ary.length 获取数组的长度
   ary.length-1 最后一项的索引

1、实现数组增删改的方法(都会修改原有的数组):

push:向数组末尾增加内容(ary[ary.length] = "val");

参数:多个任意类型
返回值:新增后数组的长度

unshift:向数组开始位置增加内容

参数:多个任意类型
返回值:新增后数组的长度
--> 基于原生ES6展开运算符,把原有的ary克隆一份,在新的数组中创建第一项,其余的内容使用原始ary中的信息即可,也算实现了向开始追加的效果
   let ary = [10,20];
   ary = [100,...ary];
   console.log(ary); // [100, 10, 20]

shift:删除数组中的第一项

参数:无
返回值:删除的那一项
--> 基于原生JS中的delete,把数组当作普通的对象,确实可以删除掉某一项内容,但是不会影响数组本身的结构特点(length长度不会跟着修改),真实项目中杜绝这样的删除使用
   let ary = [10,20,30,40];
   delete ary[0];
   console.log(ary); // [empty, 20, 30, 40]

pop:删除数组中的最后一项

参数:无
返回值:删除的那一项
--> 基于原生JS让数组长度去掉一位,默认去掉的就是最后一项
   let ary = [10,20,30,40];
   ary.length--; //==> ary.length = ary.length-1;
   console.log(ary); // [10, 20, 30]

splice:实现数组的增加、删除、修改

splice(m,n)
splice(m,n)从索引M开始,删除N个
splice(m),从m开始,删除后面所有
splice(m,n,z)从m开始,删除n个,用z替代
splice(m,0,n)把n项添加到m的前面+
【删除】
参数:n,m 都是数字 从索引n开始删除m个元素(m不写,是删除到末尾)
返回值:把删除的部分用新数组存储起来返回
     let ary = [10,20,30,40,50,60];
     let res = ary.splice(2,4);
     console.log(res); // [30, 40, 50, 60]
     console.log(ary); // [10, 20]
     res = ary.splice(0);//基于这种方法可以清空一个数组,把原始数组中的内容以新数组存储起来(有点类似数组的克隆:把原来数组克隆一份一模一样的给新数组)
     console.log(res); // [10, 20]
     console.log(ary); // []
  --> 删除数组的最后一项:ary.splice(ary.length-1);
  --> 删除数组的第一项:ary.splice(0,1);
【增加、修改】
参数:n,m,x 从索引n开始删除m个元素,用x占用删除的部分
     n,0,x 从索引n开始,一个都不删,把x放到索引n的前面
返回值:把删除的部分用新数组存储起来返回
--> 向数组末尾追加:ary.splice(ary.length,0,'AAA');
--> 向数组开始追加:ary.splice(0,0,'BBB');

2、数组的查询和拼接:

slice:实现数组的查询

slice(m,n)从索引m开始,截取到索引n,不包括n。
slice(m)从索引m开始,截取到数组的末尾,m》n,空数组;
slice(m,n),如果n<0,则slice(m,length+n),如果m,n都为0(length+m,length+n)
参数:n,m 都是数字 从索引n开始,找到索引为m的地方(不包含m这一项)
返回值:把找到的内容以一个新数组的形式返回,不改变原数组
   let ary = [10,20,30,40,50];
   let res = ary.slice(1,3);
   console.log(res); // [20,30]
   //m不写是找到末尾
   res = ary.slice(1);
   console.log(res); // [20,30,40,50]
   //数组的克隆,参数为0或者不写也可以
   res = ary.slice(0);
   console.log(res); // [10,20,30,40,50]

concat:实现数组拼接

参数:多个任意类型值
返回值:拼接后的新数组(原来数组不变)

3、把数组转换为字符串(原有数组不变)

toString:把数组转换为字符串

参数:无
返回值:转换后的字符串,每一项用逗号分隔(原来数组不变)

join:把数组转换为字符串

参数:指定的分隔符(字符串格式)
返回值:转换后的字符串(原来数组不变)
     let ary = [10,20,30];
     let res = ary.join('');
     console.log(res); // “102030”

     res = ary.join(' ');
     console.log(res); // “10 20 30”

     res = ary.join();
     console.log(res); // "10,20,30"

     res = ary.join('|');
     console.log(res); // "10|20|30"

     res = ary.join('+');
     console.log(res); // "10+20+30"
     console.log(eval(res)); // 60(数字格式的) eval把字符串变为JS表达式执行

4、检测数组中的是否包含某一项

indexOf/lastIndexOf:检测当前项在数组中第一次或者最后一次出现位置的索引值(在IE6~8中不兼容)

参数:要检索的这一项的内容
返回值:这一项出现的位置索引值(数字),如果数组中没有这一项,返回的结果是-1(原来数组不变)

**includes()是否包含某一项 **

包含返回true,不包含返回false**

5、数组的排序或者排列

reverse:把数组倒过来排列(反转数组/数组的反转)

参数:无
返回值:排列后的新数组(原来数组改变)

sort:实现数组的排序

参数:可以没有,也可以是个函数(sort方法中如果不传递参数,是无法处理10以上数字排序的(它默认按照每一项第一个字符来排,不是我们想要的结果)
返回值:排序后的新数组(原来数组改变)
// 想要实现多位数正常排序,需要给sort传递一个函数,函数中返回a-b实现升序,返回b-a 实现降序
   let ary = [12,15,9,28,10,22];
    //普通函数的方式
    ary.sort(function(a,b){
        return a-b; 
    });
    console.log(ary);  //[9, 10, 12, 15, 22, 28]
    //箭头函数的方式
    ary.sort((a,b) => a-b); 
    console.log(ary); //[9, 10, 12, 15, 22, 28]

6、遍历数组中每一项的方法(forEach/map/filter/find/reduce/some/every/...)

forEach:遍历数组中的每一项内容

参数:回调函数
返回值:原来数组不变
     let ary = [1,5,17,23,9,55];
     ary.forEach((item,index) => {
      //数组中有多少项,函数就会被默认执行多少次
      //每一次执行函数,item是数组中当前要操作的这一项,index是当前项的索引
         console.log('索引:'+index+'内容:'+ item);
     })
     
     // forEach:遍历数组,没有返回值
     // let ary = [1,2,3,4,5];
     // ary.forEach(function(item,index){
     //     // 数组有多少项,次函数就会执行多少次
     //     // item是数组的每一项
     //     // index是数组每一项的做引
     //     console.log(item,index)
     // })

map:遍历数组,映射数组

let ary = [1,2,3,4,5];
console.log(ary.map(function(item,index){
    console.log(item,index)
    return item+1
}))

示例:向数组末尾追加一个数为100的值:

  • ary.push(100)
  • ary[ary.length] = 100 (普通对象键值对的操作)
  • ary.splice(ary.length,0,100)

总结:

push、unshift、pop、shift、splice、sort、reverse //会改变原数组

slice、concat、join、indexOf、lastIndexOf、includes、forEach、map