js数组方法大全

js数组方法大全很早之前就想整明白 JS 到底有多少操作数组的方法 是怎么使用的 今天正好找到了个比较好的总结 分享给大家原文地址 https www cnblogs com obel p 7016414 htmlJavaScri 中创建数组有两种方式 一 使用 Array 构造函数 vararr1 newArray 创建一个空数组 vararr2 newArray 20

很早之前就想整明白JS到底有多少操作数组的方法,是怎么使用的,今天正好找到了个比较好的总结,分享给大家
原文地址:https://www.cnblogs.com/obel/p/7016414.html

JavaScript中创建数组有两种方式
(一)使用 Array 构造函数:
var arr1 = new Array(); //创建一个空数组
var arr2 = new Array(20); // 创建一个包含20项的数组
var arr3 = new Array(“lily”,“lucy”,“Tom”); // 创建一个包含3个字符串的数组
(二)使用数组字面量表示法:
var arr4 = []; //创建一个空数组
var arr5 = [20]; // 创建一个包含1项的数组
var arr6 = [“lily”,“lucy”,“Tom”]; // 创建一个包含3个字符串的数组
















数组的方法有数组原型方法,也有从object对象继承来的方法,这里我们只介绍数组的原型方法,数组原型方法主要有以下这些:
join()
push()和pop()
shift() 和 unshift()
sort()
reverse()
concat()
slice()
splice()
indexOf()和 lastIndexOf() (ES5新增)
forEach() (ES5新增)
map() (ES5新增)
filter() (ES5新增)
every() (ES5新增)
some() (ES5新增)
reduce()和 reduceRight() (ES5新增)






























下面详细介绍一下各个方法的基本功能。

var arr = [1,2,3]; console.log(arr.join()); // 1,2,3 console.log(arr.join("-")); // 1-2-3 console.log(arr); // [1, 2, 3](原数组不变) 

通过join()方法可以实现重复字符串,只需传入字符串以及重复的次数,就能返回重复后的字符串,函数如下:

function repeatString(str, n) { return new Array(n + 1).join(str); } console.log(repeatString("abc", 3)); // abcabcabc console.log(repeatString("Hi", 5)); // HiHiHiHiHi 

2、push()和pop()

var arr = ["Lily","lucy","Tom"]; var count = arr.push("Jack","Sean"); console.log(count); // 5 console.log(arr); // ["Lily", "lucy", "Tom", "Jack", "Sean"] var item = arr.pop(); console.log(item); // Sean console.log(arr); // ["Lily", "lucy", "Tom", "Jack"] 
var arr = ["Lily","lucy","Tom"]; var count = arr.unshift("Jack","Sean"); console.log(count); // 5 console.log(arr); //["Jack", "Sean", "Lily", "lucy", "Tom"] var item = arr.shift(); console.log(item); // Jack console.log(arr); // ["Sean", "Lily", "lucy", "Tom"] 
var arr1 = ["a", "d", "c", "b"]; console.log(arr1.sort()); // ["a", "b", "c", "d"] arr2 = [13, 24, 51, 3]; console.log(arr2.sort()); // [13, 24, 3, 51] console.log(arr2); // [13, 24, 3, 51](元数组被改变) 

为了解决上述问题,sort()方法可以接收一个比较函数作为参数,以便我们指定哪个值位于哪个值的前面。比较函数接收两个参数,如果第一个参数应该位于第二个之前则返回一个负数,如果两个参数相等则返回 0,如果第一个参数应该位于第二个之后则返回一个正数。以下就是一个简单的比较函数:

function compare(value1, value2) { if (value1 < value2) { return -1; } else if (value1 > value2) { return 1; } else { return 0; } } arr2 = [13, 24, 51, 3]; console.log(arr2.sort(compare)); // [3, 13, 24, 51] 

如果需要通过比较函数产生降序排序的结果,只要交换比较函数返回的值即可:

function compare(value1, value2) { if (value1 < value2) { return 1; } else if (value1 > value2) { return -1; } else { return 0; } } arr2 = [13, 24, 51, 3]; console.log(arr2.sort(compare)); // [51, 24, 13, 3] 
var arr = [13, 24, 51, 3]; console.log(arr.reverse()); //[3, 51, 24, 13] console.log(arr); //[3, 51, 24, 13](原数组改变) 
var arr = [1,3,5,7]; var arrCopy = arr.concat(9,[11,13]); console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13] console.log(arr); // [1, 3, 5, 7](原数组未被修改) 

从上面测试结果可以发现:传入的不是数组,则直接把参数添加到数组后面,如果传入的是数组,则将数组中的各个项添加到数组中。但是如果传入的是一个二维数组呢?

var arrCopy2 = arr.concat([9,[11,13]]); console.log(arrCopy2); //[1, 3, 5, 7, 9, Array[2]] console.log(arrCopy2[5]); //[11, 13] 

上述代码中,arrCopy2数组的第五项是一个包含两项的数组,也就是说concat方法只能将传入数组中的每一项添加到数组中,如果传入数组中有些项是数组,那么也会把这一数组项当作一项添加到arrCopy2中。

var arr = [1,3,5,7,9,11]; var arrCopy = arr.slice(1); var arrCopy2 = arr.slice(1,4); var arrCopy3 = arr.slice(1,-2); var arrCopy4 = arr.slice(-4,-1); console.log(arr); //[1, 3, 5, 7, 9, 11](原数组没变) console.log(arrCopy); //[3, 5, 7, 9, 11] console.log(arrCopy2); //[3, 5, 7] console.log(arrCopy3); //[3, 5, 7] console.log(arrCopy4); //[5, 7, 9] 
var arr = [1,3,5,7,9,11]; var arrRemoved = arr.splice(0,2); console.log(arr); //[5, 7, 9, 11] console.log(arrRemoved); //[1, 3] var arrRemoved2 = arr.splice(2,0,4,6); console.log(arr); // [5, 7, 4, 6, 9, 11] console.log(arrRemoved2); // [] var arrRemoved3 = arr.splice(1,1,2,4); console.log(arr); // [5, 2, 4, 4, 6, 9, 11] console.log(arrRemoved3); //[7] 
var arr = [1,3,5,7,7,5,3,1]; console.log(arr.indexOf(5)); //2 console.log(arr.lastIndexOf(5)); //5 console.log(arr.indexOf(5,2)); //2 console.log(arr.lastIndexOf(5,4)); //2 console.log(arr.indexOf("5")); //-1 
var arr = [1, 2, 3, 4, 5]; arr.forEach(function(x, index, a){ console.log(x + '|' + index + '|' + (a === arr)); }); // 输出为: // 1|0|true // 2|1|true // 3|2|true // 4|3|true // 5|4|true 
var arr = [1, 2, 3, 4, 5]; var arr2 = arr.map(function(item){ return item*item; }); console.log(arr2); //[1, 4, 9, 16, 25] 
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; var arr2 = arr.filter(function(x, index) { return index % 3 === 0 || x >= 8; }); console.log(arr2); //[1, 4, 7, 8, 9, 10] 
var arr = [1, 2, 3, 4, 5]; var arr2 = arr.every(function(x) { return x < 10; }); console.log(arr2); //true var arr3 = arr.every(function(x) { return x < 3; }); console.log(arr3); // false 
var arr = [1, 2, 3, 4, 5]; var arr2 = arr.some(function(x) { return x < 3; }); console.log(arr2); //true var arr3 = arr.some(function(x) { return x < 1; }); console.log(arr3); // false 
var values = [1,2,3,4,5]; var sum = values.reduceRight(function(prev, cur, index, array){ return prev + cur; },10); console.log(sum); //25 
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/217687.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月18日 上午9:00
下一篇 2026年3月18日 上午9:00


相关推荐

  • 怎么选择靠谱Java培训机构?[通俗易懂]

    怎么选择靠谱Java培训机构?[通俗易懂]不论是从2018年TIOBE每个月的编程语言排行榜上看,还是从各知名招聘网站年底分析的招聘报告中了解,我们都不难看出,在IT行业里Java依然是技术圈中最热门、最抢手、需求量最大的编程语言!所以,我们常常能够在知乎、百度上搜索到大量类似于“如何选择一家好的Java培训机构?选择Java培训机构应该注意哪些问题?有哪些Java培训机构值得推荐?”这些换汤不换药的提问。各类问题下的答案也是参差不…

    2026年4月16日
    5
  • 表单样式模板_商品表格模板

    表单样式模板_商品表格模板特殊项:用户中心左侧导航:frontend.base.php(增删导航可以在这里改  DW中大约561-760行)apply.index.html                                  申请开店页article.index.html                                 文章分类列表页(包括商城公告、商城公告及其他自建分

    2025年6月10日
    4
  • phpstorm激活码2022.01(注册激活)

    (phpstorm激活码2022.01)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年4月1日
    177
  • 后端开发者必读:Java解析XML文件的完整教程,从零基础到掌握DOM、SAX、STAX三种解析方式

    后端开发者必读:Java解析XML文件的完整教程,从零基础到掌握DOM、SAX、STAX三种解析方式

    2026年3月12日
    2
  • java基本数据类型&java变量类型

    java基本数据类型&java变量类型声明 本文部分转载 部分为本人 summary PARTONE Java 基本数据类型变量就是申请内存来存储值 也就是说 当创建变量的时候 需要在内存中申请空间 内存管理系统根据变量的类型为变量分配存储空间 分配的空间只能用来储存该类型数据 因此 通过定义不同类型的变量 可以在内存中储存整数 小数或者字符 Java 的两大数据类型 内置数据类型

    2025年10月20日
    6
  • python3.0菜鸟教程100例_python入门到精通教程完整版

    python3.0菜鸟教程100例_python入门到精通教程完整版Python3100例原题地址:http://www.runoob.com/python/python-100-examples.htmlgit地址:https://github.com/RichardFu123/Python100Cases原例为Python2.7版本重写过程中有不少是随意发挥的重写运行版本:Python3.7总…

    2026年1月29日
    6

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号