欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

17个常用 JS 数组方法

程序员文章站 2022-07-07 19:30:05
数组是什么?一个有序的集合本质上也是变量的一种,可以存储一连串的变量/值数组集合的长度可以动态的调整,理论上是无限大的数组中可以存储任意类型的数据添加/删除push(…args):在数组的末尾添加一个或多个元素返回值:添加元素后的数组长度var names = ["孙悟空","猪八戒","沙悟净"];var len = names.**push("lhm")**;console.log(names,len);运行结果:pop():删除数组的最后一个元素返回值:被删除的...

数组是什么?

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

添加/删除

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

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

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

运行结果:
17个常用 JS 数组方法

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

返回值:被删除的元素

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

运行结果
17个常用 JS 数组方法

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

返回值:被删除的元素

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

运行结果
17个常用 JS 数组方法

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

返回值:被删除的元素

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

运行结果
17个常用 JS 数组方法

排序/反转

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);

运行结果
17个常用 JS 数组方法

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

返回值:反转后的数组

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

运行结果
17个常用 JS 数组方法

拼接

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

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

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

运行结果
17个常用 JS 数组方法

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);

运行结果
17个常用 JS 数组方法

选取/截取

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

返回值:新数组

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

运行结果
17个常用 JS 数组方法

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);

运行结果
17个常用 JS 数组方法

查找

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);

运行结果
17个常用 JS 数组方法

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));

运行结果
17个常用 JS 数组方法

ES5

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

返回值:undefined

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

运行结果
17个常用 JS 数组方法

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

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

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

运行结果
17个常用 JS 数组方法

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);

运行结果
17个常用 JS 数组方法

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);

运行结果
17个常用 JS 数组方法

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);

运行结果
17个常用 JS 数组方法
利用周末时间把这些常用的数组方法整理出来跟大家分享
希望对你有所帮助
如果发现有错误的地方,还请多多指教!

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