js中常用的操作数组方法

85 阅读4分钟

鹏北海,凤朝阳。又携书剑路茫茫。
大佬如果发现写的有问题一定要提出来,搬砖路漫漫请多多指教~

新增数组

1. unshift()

可以将一个或者更多的参数添加在数组的头部

  • 语法 array.unshift(item1,item2,...,itemX)
  • 代码示例:
var arr = [1,2,3,4]; 
var a = arr.unshift(9,8,7); 
console.log(a,arr); //9,8,7,1,2,3,4;

2. push()

可以将一个或者更多的参数 添加在数组的尾部

  • 语法 array.push(item1,item2,...,itemX)
  • 代码示例:
var arr = [1,2,3,4];
var a = arr.push(9,8,7); 
console.log(a,arr); //1,2,3,4,9,8,7;

删除数组

1. shift()

数组头部删除一个元素,返回这个被删除的元素,原数组发生改变

  • 语法 array.shift()
  • 代码示例:
var arr = [1,2,3,4]; 
var a = arr.shift(); 
console.log(a,arr) //1: 2,3,4,

2. pop()

数组尾部删除一个元素,返回这个被删除的元素,原数组发生改变

  • 语法 array.pop()
  • 代码示例:
var arr = [1,2,3,4];'
var a = arr.pop(); 
console.log(a,arr) //4: 1,2,3

删除或者替换 splice()

数组中删除或者替换现有元素,原数组发生改变

  • 语法 array.splice(start,deleteCount,item1,...,itemN)

一个参数,表示从该索引值开始直至数组结束,返回截取的数组

var fruits = ["Banana","Orange","Apple","Mango"]; 
fruits.splice(1);
console.log(fruits); //Banana

两个参数,第一个参数为开始截取索引值,第二个参数为截取的长度,返回截取的数组,原数组改变

var fruits = ["Banana","Orange","Apple","Mango"]; 
fruits.splice(1,2);
console.log(fruits); //Banana,Orange

三个参数,第一个参数为插入的位置,第二个参数为删除的项,第三个参数为插入的项,原数组改变

var fruits = ["Banana","Orange","Apple","Mango"]; 
fruits.splice(1,1,Insert);
console.log(fruits); //Banana,Insert,Apple,Mango

截取数组 slice()

数组中截取元素,原数组不发生改变

  • 语法 array.slice(start,end)

不传参,返回原数组

var fruits = ["Banana","Orange","Apple","Mango"];
var citrus = fruits.slice(); 
console.log(citrus) //Banana,Orange,Apple,Mango

一个参数,从该参数的索引开始截取直至数组结束,返回截取的数组,原数组不变

// 默认省略end
var fruits = ["Banana","Orange","Apple","Mango"];
var citrus = fruits.slice(1); 
console.log(citrus) //Orange,Apple,Mango

//大于索引范围,返回空数组
var fruits = ["Banana","Orange","Apple","Mango"];
var citrus = fruits.slice(6); 
console.log(citrus) //[]

//传负数,返回后2个值
var fruits = ["Banana","Orange","Apple","Mango"];
var citrus = fruits.slice(-2); 
console.log(citrus) //Apple,Mango

两个参数,从该参数的索引值开始截取直至第二个索引值结束,原数组不变(最多接受两个参数)

var fruits = ["Banana","Orange","Apple","Mango"];
var citrus = fruits.slice(1,3); 
console.log(citrus) //Orange,Apple

//第二个参数大于索引范围,它将提取fruits.length
var fruits = ["Banana","Orange","Apple","Mango"];
var citrus = fruits.slice(1,8); 
console.log(citrus) //Orange,Apple,Mango

数组中颠倒元素顺序 reverse()

用于颠倒数组中元素的顺序

  • 语法 array.reverse()
  • 代码示例:
var fruits = ["Banana","Orange","Apple","Mango"]; 
fruits.reverse();
console.log(fruits); //Mango,Apple,Orange,Banana

数组中对元素排序 sort()

  • 语法 array.sort(sortfunction)
  • 代码示例:
var Array = [1,2,3,4,5];
var fruits = Array.sort(function(a,b) {
    //return a - b; 
    //从小到大 return b - a; 
    //从大到小 
}

数组转化字符串 join()

数组中的所有元素转化一个字符串,元素是通过指定的分隔符进行分割的

  • 语法 array.join(separator)
  • 代码示例:
var arr = [1,2,3,4];
var bbc = arr.join();
console.log(bbc) //1,2,3,4

合并数组 concat()

属于字符串的方法,数组也可以用,接受一个或多个参数,将参数中值放到操作的数组后边,返回拼接的数组,原数组不变。如果参数是一个数组,则先把值提取出来再操作

  • 语法 string.concat(string1,string2,...,stringX)
  • 代码示例:
var arr = [1,2,3,4];
arr.concat([5,6,7]) //[1,2,3,4,5,6,7]

数组中查找元素 indexOf()

字符串的方法,数组也可适用,此方法可返回某个指定的字符串值在字符串中首次出现的位置;若一个参数,返回这个参数在数组里面的索引值,如果参数不在操作的数组中,则返回-1

  • 语法 string.indexOf(searchvalue,start)
  • 代码示例:
var arr = [1,2,3,4];
arr.indexOf(1) //0 arr.indexOf(5) //-1

数组遍历

1. forEach()

不接受返回值或返回值为undefined。如果数组只有长度没有初始化是不会进行迭代元素的

  • 语法 array.forEach(function(currentValue,index,arr),thisValue)
  • 代码示例:
var arr = [1,2,3,4,5];
arr.forEach((item,index,arr) =>{ 
    //item 为当前数组元素 
    //index 为当前索引 
    //arr 为数组名称 
})

2. map()

用来接收一个返回值,创建一个新数组,不改变原数组

  • 语法 array.map(function(currentValue,index,arr),thisValue)
  • 代码示例:
var arr = [1,2,3,4,5,6]; 
arr.map(function(item,index,arr){ 
    return item * 2 
}) //输出[2,4,6,8,10,12]

过滤数组 filter()

过滤出一些符合条件的元素,返回一个新数组

  • 语法 array.filter(function(currentValue,index,arr),thisValue)
  • 代码示例:
var ages = [32,33,16,40]; 
function checkAdult(age) {
    return age >= 18; //返回数组ages中所有元素大于18的元素 
} 
function myFunction(){ 
    document.getElementById("demo").innerHTML = ages.filter(checkAdult); 
} //输出结果为:32,33,40

参考原文