当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 荐 17个常用 JS 数组方法

荐 17个常用 JS 数组方法

2020年07月07日  | 移动技术网IT编程  | 我要评论

数组是什么？

  • 一个有序的集合
  • 本质上也是变量的一种，可以存储一连串的变量/值
  • 数组集合的长度可以动态的调整，理论上是无限大的
  • 数组中可以存储任意类型的数据

添加/删除

push(…args):在数组的末尾添加一个或多个元素(改变原数组)

返回值：添加元素后的数组长度

var names = ["孙悟空","猪八戒","沙悟净"];
var len = names.**push("lhm")**;
console.log(names,len);

运行结果：
在这里插入图片描述

pop():删除数组的最后一个元素(改变原数组)

返回值：被删除的元素

	var names = ["孙悟空","猪八戒","沙悟净"];
    var ele = names.pop();
    console.log(names,ele);

运行结果：
在这里插入图片描述

shift():删除数组的第一个元素(改变原数组)

返回值：被删除的元素

	var names = ["孙悟空","猪八戒","沙悟净"];
    var ele2 = names.shift();
    console.log(names,ele2);

运行结果：
在这里插入图片描述

unshift():在数组的开头添加一个或多个元素(改变原数组)

返回值：被删除的元素

	var names = ["孙悟空","猪八戒","沙悟净"];
    var len2 = names.unshift("unshift1","unshift2");
    console.log(names,len2);

运行结果：
在这里插入图片描述

排序/反转

sort():用“原地算法”对数组的元素进行排序(改变原数组)

返回值：排序后的数组

	var arr = ["a","bc","abc","db"];
    var nums = [2,34,12,43,4,8];
    console.log(arr.sort());
    console.log(nums.sort());
    nums.sort(function(a,b){  //对数组中的数字进行升序排列
        return a-b;
    });
    console.log(nums);

运行结果：
在这里插入图片描述

reverse():对数组进行反转操作(改变原数组)

返回值：反转后的数组

	var nums = [2,34,12,43,4,8];
    nums.reverse();
    console.log(nums);

运行结果：
在这里插入图片描述

拼接

join(char):以指定字符作为拼接符将数组拼接为字符串

返回值：返回值：拼接后的字符串

	var arr = ["a","bc","abc","db"];
    var str = arr.join("+");
    console.log(arr);
    console.log(str);

运行结果：
在这里插入图片描述

concat(arrList):将多个数组拼接，合并为一个新的数组

返回值：返回值：合并后的新数组

	var arr = ["a","bc","abc","db"];
    var arr2 = [1,21,34,66];
    var arr3 = ["张","李","王"];
    var newArr = arr2.concat(arr,arr3);
    console.log(newArr);

运行结果：
在这里插入图片描述

选取/截取

slice(start,end):在数组中从指定的开始位置到指定的结束位置(包括 start,不包括 end),复制为新的数组

返回值：新数组

	var names = ["孙悟空","猪八戒","沙悟净","白龙马","唐僧"];
    var newArry = names.slice(2,4);
    console.log(newArry);

运行结果：
在这里插入图片描述

splice(index,howmany,ele,ele…):任意位置删除/添加/替换元素(改变原数组)

返回值：被删除的元素组成的数组

	var names = ["孙悟空","猪八戒","沙悟净","白龙马","唐僧"];
    var dele = names.splice(1,2);
    console.log(names);
    console.log(dele);
    names.splice(0,2,"李","会");
    console.log(names);

运行结果：
在这里插入图片描述

查找

index(element, fromIndex):从数组的指定位置开始，查找给定元素。参数2可省略不写（默认为0）

返回值：给定元素的第一个索引，找不到则返回-1

	var numbers = [3,2,9,6,9];
    var i = numbers.indexOf(0);
    console.log(i);
    console.log(numbers.indexOf(9));
    var j = numbers.indexOf(9,3);
    console.log(j);

运行结果：
在这里插入图片描述

includes(value, fromIndex):判断一个数组是否包含一个指定的值.第二个参数可省略（默认为0）

返回值：Boolean类型 是：true 否：false

	var numbers = [3,2,9,6,8];
    console.log(numbers.includes(5));
    console.log(numbers.includes(9));
    console.log(numbers.includes(9,3));

运行结果：
在这里插入图片描述

ES5

forEach( function(element,index,array){ } ):遍历数组，对数组中的每个元素执行一次给定的回调函数

返回值：undefined

	var names = ["孙悟空","猪八戒","沙悟净"];
    names.forEach(function(ele,index,array){
        console.log(ele,index,array);
    })

运行结果：
在这里插入图片描述

map( function(element,index,array){ } ):遍历数组，对数组中的每个元素执行一次给定的回调函数

返回值：存放执行结果的新数组

	var numbers = [3,2,6,9];
    var newNum = numbers.map(function(e){
        return e*2;
    });
    console.log(newNum);

运行结果：
在这里插入图片描述

filter(function(element,index,array){ }):过滤，遍历数组并将数组中满足条件的元素过滤到一个新的数组中

返回值：满足过滤条件的元素组成的新数组

	var arr = ["孙悟空","猪八戒",1,5,"沙悟净","白龙马",65,"唐僧"];
    var newArry = arr.filter(function(e,i,arr){
        return typeof(e) === "number";
    });
    console.log(newArry);

运行结果：
在这里插入图片描述

some(function(element,index,array){ }):判断数组中是否有满足条件的元素

返回值：Boolean类型，有返回 true, 没有返回 false

	var arr = ["孙悟空","猪八戒",1,5,"沙悟净","白龙马",65,"唐僧"];
    var flag = arr.some(function(e,i,arr){
        return typeof(e) === "boolean";
    });
    console.log(flag);

运行结果：
在这里插入图片描述

every(function(element,index,array){ }):判断数组中是否每个元素都满足条件

返回值：Boolean类型，都满足返回 true, 否则返回 false

	var names = ["孙悟空","猪八戒","沙悟净"];
    var flag1 = names.every(function(e,i,arr){
        return typeof(e) === "string";
    });
    console.log(flag1);

运行结果：
在这里插入图片描述
利用周末时间把这些常用的数组方法整理出来跟大家分享
希望对你有所帮助
如果发现有错误的地方，还请多多指教！

本文地址：https://blog.csdn.net/weixin_42678796/article/details/107127262

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网