js的数组操作方法大全

2022-09-06 10:04:38 阅读：261 来源： 互联网

js中数组的操作方法大全

常见的一些数组操作
push，pop，unshift，shift

push

语法array.push(item1,item2,...,itemX)
push()方法：可以将一个或者更多的参数添加在数组的尾部
代码示例如下：

var arr = [1,2,3,4];
var a = arr.push(9,8,7);
console.log(a,arr);   //1,2,3,4,9,8,7;

unshift

语法：array.unshift(item1,item2,...,itemX)
unshift()方法：可以将一个或者更多的参数添加在数组的头部；返回添加后的数组的长度，原数组发生改变。
代码示例如下：

var arr = [1,2,3,4];
var a = arr.unshift(9,8,7);
console.log(a,arr);  //9,8,7,1,2,3,4;

pop

语法：array.pop()
pop()方法：从数组尾部删除一个元素，返回这个被删除的元素，原数组发生改变。
代码示例如下：

var arr = [1,2,3,4];
var a = arr.pop();
console.log(a,arr)    //4:  1,2,3

shift

语法：array.shift()
shift()方法：从数组头部删除一个元素，返回这个被删除的元素，原数组发生改变。
代码示例如下

var arr = [1,2,3,4];
var a = arr.shift();
console.log(a,arr)    //1: 2,3,4,

slice

语法：array.slice(start,end)
slice()方法：如果不传参，会返回原数组；如果一个参数，从该参数表示的索引开始截取，直至数组结束，返回这个截取数组，原数组不变；两个参数，从第一个参数对应的索引开始截取，到第二个参数对应的索引结束，但包括第二个参数对应的索引上的值，原数组不改变&最多接受两个参数
代码示例如下

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

splice

语法：array.splice(index,howmany,item1,...,itemX)
splice()方法：没有参数，返回空数组，原数组不变；一个参数，从该参数表示索引位开始截取，直至数组结束，返回截取的数组，原数组改变；两个参数，第一个参数表示开始截取的索引为，第二个参数表示截取的长度，返回截取的数组，原数组改变，三个或者更多参数，第三个及以后的参数表示要从截取位插入的值。
代码示例如下：

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

reverse

语法：array.reverse()
reverse()方法：用于颠倒数组中元素的顺序。
代码示例如下：


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

sort

语法：array.sort(sortfunction)
sort()方法：用于对数组的元素进行排序。
代码示例如下：

var Array = [1,2,3,4,5];
var fruits = Array.sort(function(a,b) {
	//return a - b;    //从小到大
	return b - a;      //从大到小
}

join

语法：arrat.join(separator)
join()方法：把数组中的所有元素转化一个字符串，元素是通过指定的分隔符进行分割的。
代码示例如下：

var arr = [1,2,3,4]
var bbc = arr.join()
console.log(bbc)     //1,2,3,4

concat

语法：string.concat(string1,string2,...,stringX)
concat()方法：属于字符串的方法，数组也可以用，接受一个或多个参数，将参数中值放到操作的数组后边，返回拼接的数组，原数组不变。如果参数是一个数组，则先把值提取出来再操作。
代码示例如下：

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

indexOf()

语法：string.indexOf(searchvalue,start)
indexOf()方法:字符串的方法，数组也可适用，此方法可返回某个指定的字符串值在字符串中首次出现的位置；若一个参数，返回这个参数在数组里面的索引值，如果参数不在操作的数组中，则返回-1.
代码示例如下：

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

forEach()

语法：array.forEach(function(currentValue,index,arr),thisValue)
forEach()方法：数组遍历，且只能遍历数组，不接受返回值或返回值为undefined。
如果数组只有长度没有初始化是不会进行迭代元素的
代码示例如下：

var arr = [1,2,3,4,5];
arr.forEach((item,index,arr) =>{
	//item  为当前数组元素
	//index 为当前索引
	//arr 为数组名称
})

map()

语法：array.map(function(currentValue,index,arr),thisValue)
map()方法：数组的遍历，用来接收一个返回值，创建一个新数组，不改变原数组。
代码示例如下：


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)
filter()方法：过滤出一些符合条件的元素，返回一个新数组
代码示例如下：

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

Array.from()

用于类似数组的对象（即有length属性的对象）和课遍历对象转为真正的数组

let json = {
	'0':'hello',
	'1':'123',
	'2':'panda',
	length:3
}
let arr = Array.from(json);
console.log(arr);
//打印：{"hello","123","panda"}

Array.of()

将一组值转变为数组

let arr1 = Array.of('你好','hello');
console.log(arr1);
//{'你好','hello'}

includes()

表示某个数组是否包含给定的值，如果包含则返回ture，否则返回false。可以接收两个参数；要搜索的值和搜索的开始索引。当第二个参数被传入时，该方法会从索引处开始往后搜索（默认索引值为0）.若搜索值在数组中存在则返回true，否则返回false。

['a','b','c','d'].includes('b')
//true
['a','b','c','d'].includes('b',1)
//true
['a','b','c','d'].includes('b',2)
//fasle

tips:includes与indexOf的区别是：前者返回布尔值（利于if条件判断），后者返回数值

参考资料：
https://www.cnblogs.com/cauliflower/p/11267809.html

标签：返回,arr,示例,操作方法,js,参数,数组,var,大全
来源： https://www.cnblogs.com/HuangJiaZ/p/16655443.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9