js数组方法实例讲解

时间:2018-11-07
本文章向大家介绍js数组方法实例讲解,主要包括concat、slice、join、reverse、sort、splice、push、pop、shift、unshift、 indexOf、lastIndexOf等等,需要的朋友可以参考一下

一、连接两个数组或多个数组-concat  

不改变原始数组,需要用新的变量保存返回的新数组

var arr1=[1,2];
var arr2=[2,3];
arr1.concat(arr2);
console.log(arr1,arr2);
var arr3=arr1.concat(arr2);
console.log(arr3);

// [1, 2] (2) [2, 3]
// [1, 2, 2, 3]

二、截取数组一部分-slice

arr.slice(startIndex,endIndex);截取的项包括数组开始的索引的项,不包括数组结束的索引的项

也不改变原始数组,需要用新的变量保存返回的新数组

var arr=[1,2,3];
arr.slice(0,1);
console.log(arr);
var sub=arr.slice(0,1);
console.log(sub);
// [1, 2, 3]
// [1]

三、用不同的分隔符构建字符串-join

默认以','拼接,

var arr=[1,2,3];
var str1=arr.join();
var str2=arr.join("-");
console.log(str1,str2);
//1,2,3
//1-2-3

// 根据数组拼接成html字符串
var arr=["HTML","CSS","JS"];
var html='<li>'+arr.join('</li><li>')+'</li>';
console.log(html);
// HTML</li><li>CSS</li><li>JS</li>

四、数组的反转-reverse

var arr=[1,2,3,4,5];
arr.reverse();
// [5, 4, 3, 2, 1]

五、数组的排序-sort方法

这里只是通过出入比较函数给sort方法来保持正确的排序,对象也可以根据某一属性来进行正确的排序,这里暂不赘述。

var arr=[1,2,11,5,50];
arr.sort();
// [1, 11, 2, 5, 50] 按照uicode编码排序不是我们想要的结果
通过传入比较函数保证正确的排序
arr.sort(function(a,b){
  if(a<b){
    return -1;
  }else if(a>b){
    return 1;
  }else{
    return 0;
  }
})
// [1, 2, 5, 11, 50]

六、数组的删除,替换,插入-splice方法

array.splice(index,howmany,item1,.....,itemX);

// 删除开始索引后的第几个元素
var arr=[1,2,3,4,5];
arr.splice(1,1); //[1, 3, 4, 5]

// 删除开始索引后的第几个元素然后插入新的值
var arr1=[1,2,3,4,5];
arr1.splice(1,2,11,22); // [1, 11, 22, 4, 5]

七、栈方法 

数组提供了一种让数组类似于其他数据结构的方法,栈是一种LIFO(Last-In-First-Out)后进先出的数据结构,也就是最新添加的最早被移除。

栈中的推入-push,接收任意变量的参数,把他们添加到数组的末尾,并返回修改后数组的长度

栈中的弹出-pop,从数组末尾移除最后一项,减少length值,然后返回移除的项都发生在同一位置-栈的顶部。

var arr=[1,2,3];
arr.push('a'); //4 返回数组的长度
arr // [1, 2, 3, "a"]

var arr=[1,2,3];
arr.pop(); //3  返回数组最后一项的弹出值
arr

(3) [1, 2]

八、队列方法

队列的数据结构是FIFO(First-In-First-Out),队列在数组的末端添加项,在列表的前端移除项。

末端添加项-push,

前端移除项-shift,移除数组中的第一项,并返回该项,同时将数组长度减1,

前端新增项-unshift,在数组前端新增一项并返回数组的新长度。

通过数组的unshift和pop方法可以从相反方向的来模拟队列

var arr=[1,2,3];
arr.push(4) //4
arr.shift();  //1
arr; //[2,3,4]
arr.unshift("a"); //4
arr; //["a",1,2,3]

九、数组的位置方法-indexOf,lastIndexOf

indexOf() 方法可返回数组中某个指定的元素位置。

该方法将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时)。如果找到一个 item,则返回 item 的第一次出现的位置。开始位置的索引为 0。如果在数组中没找到指定元素则返回 -1。

lastIndexOf() 方法可返回数组中从尾到头方向上的位置,找到返回第一次出现的位置,否则返回-1。

var arr=[1,2,3,1,4];
arr.indexOf(1); //0
arr.lastIndexOf(1); //3

十、数组的平铺(有些低版本浏览器不兼容)

方法会递归到指定深度将所有子数组连接,并返回一个新数组。arr.flat(depth);默认深度为1

var arr=[1,2,3,[4,5],[7,8]];
var arr2=arr.flat(); //等价于arr.flat(1)
console.log(arr2);
// [1, 2, 3, 4, 5, 7, 8]