javascript 数组方法

已于 2022-08-26 17:17:37 修改
阅读量216 收藏
点赞数
分类专栏： # JavaScript 文章标签： javascript 前端 开发语言
于 2019-07-31 17:52:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HH18700418030/article/details/97777541
版权

工作中经常会遇到数组，所以就总结了一下数组的相关知识~

Array对象

定义

Array 对象用于在单个的变量中存储多个值。

创建数组

（1）使用Array构造函数创建数组：

var arr1 = new Array();
var arr2 = new Array(5);
var arr3 = new Array("one","two","three","four");

上面例子中，第一行创建了一个空数组；

第二行创建了一个长度为5，包含5项的数组；

第三行创建了一个包含四个字符串的数组。

（2）使用数组字面量表示法创建数组：

var arr1 = [];
var arr2 = [5];
var arr3 = ["one","two","three","four"];

属性

constructor

（1）constructor：返回创建数组对象的原型函数

var arr = ["one","two","three","four"];
console.log(arr.constructor);
运行结果：
ƒ Array() { [native code] }

length

（2）length：设置或返回数组元素的个数

var arr = ["one","two","three","four"];
console.log(arr.length);
运行结果：
4

也可以使用 length 来设置数组的个数：

var arr = ["one","two","three","four"];
console.log(arr.length);
arr.length = 3;
console.log(arr);
console.log(arr.length);
运行结果：
4
["one", "two", "three"]
3

prototype

（3）prototype：允许向数组对象添加属性或方法

a）向对象添加属性

function stu(name,age,grade)
{
	this.name = name;
	this.age = age;
	this.grade = grade;
}

let obj = new stu("Jake",8,"three");

stu.prototype.sex = null;
obj.sex = "male";

console.log(obj.sex);
运行结果：
male

b）向对象添加方法：

Array.prototype.toUcase=function()
{
    for (i=0;i<this.length;i++)
    {
        this[i]=this[i].toUpperCase();
    }
}
var arr = ["one", "Two", "three", "four"];
arr.toUcase();
console.log(arr);
运行结果：
["ONE", "TWO", "THREE", "FOUR"]

数组方法

concat

（1）concat()：连接两个或多个数组，并返回结果

a）数组连接元素：

var arr = [45,1,59,26,47,2,12,45,9,71,23];
console.log(arr.concat(10,20));
console.log(arr);
运行结果：
VM1539:2 (13) [45, 1, 59, 26, 47, 2, 12, 45, 9, 71, 23, 10, 20]
VM1539:3 (11) [45, 1, 59, 26, 47, 2, 12, 45, 9, 71, 23]

b）连接两个数组：

var arr1 = [2,3,4];
var arr2 = [5,4,6];
console.log(arr1.concat(arr2));
console.log(arr1);
console.log(arr2);
运行结果：
VM1520:3 (6) [2, 3, 4, 5, 4, 6]
VM1520:4 (3) [2, 3, 4]
VM1520:5 (3) [5, 4, 6]

c）连接三个数组：

var arr1 = [2,3,4];
var arr2 = [5,4,6];
var arr3 = [7,8,9];
console.log(arr1.concat(arr2,arr3));
console.log(arr1);
console.log(arr2);
console.log(arr3);
运行结果：
VM1660:4 (9) [2, 3, 4, 5, 4, 6, 7, 8, 9]
VM1660:5 (3) [2, 3, 4]
VM1660:6 (3) [5, 4, 6]
VM1660:7 (3) [7, 8, 9]

上面的三个例子可以看到，连接数组之后，原来的数组没有改变，返回的是被连接数组的一个副本。

join

（2）join()：把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分隔。

a）将数组的元素放进一个字符串：

var arr = ["one", "Two", "three", "four"];
console.log(arr.join());
console.log(arr);
运行结果：
VM1951:2 one,Two,three,four
VM1951:3 (4) ["one", "Two", "three", "four"]

b）将数组的元素放进一个字符串，并且用“.”分开：

var arr = ["one", "Two", "three", "four"];
console.log(arr.join("."));
console.log(arr);
运行结果：
VM1977:2 one.Two.three.four
VM1977:3 (4) ["one", "Two", "three", "four"]

c）将数组的元素放进一个字符串，并且用“-”分开：

var arr = ["one", "Two", "three", "four"];
console.log(arr.join("-"));
console.log(arr);
运行结果：
VM1984:2 one-Two-three-four
VM1984:3 (4) ["one", "Two", "three", "four"]

d）join() 方法可以用来实现字符串重复：

function changeStr(str,n){
    return new Array(n+1).join(str);
}
console.log(changeStr("one",5));
运行结果：
VM3927:4 oneoneoneoneone

pop

（3）pop()：删除并返回数组的最后一个元素

var arr = ["one", "Two", "three", "four"];
console.log(arr.pop());
console.log(arr);
运行结果：
VM2063:2 four
VM2063:3 (3) ["one", "Two", "three"]

上面的例子可以看出，对数组使用pop()方法后，返回了数组的最后一个元素，且数组的最后一个元素被删除了。

push

（4）push()： 向数组的末尾添加元素，并返回新的长度。

var arr = ["one", "Two", "three", "four"];
console.log(arr.push("five"));
console.log(arr);
运行结果：
VM2106:2 5
VM2106:3 (5) ["one", "Two", "three", "four", "five"]

可以看到，对数组使用push()方法，在数组的末尾添加了元素，原数组改变。

reverse

（5）reverse()：颠倒数组中元素的顺序

var arr = ["one", "Two", "three", "four"];
console.log(arr.reverse());
console.log(arr);
运行结果：
VM2313:2 (4) ["four", "three", "Two", "one"]
VM2313:3 (4) ["four", "three", "Two", "one"]

可以看到，原数组发生了反转。

shift

（6）shift()：删除并返回数组的第一个元素

var arr = ["one", "Two", "three", "four"];
console.log(arr.shift());
console.log(arr);
运行结果：
VM2180:2 one
VM2180:3 (3) ["Two", "three", "four"]

可以看到，对数组使用shift()返回的是数组的第一个元素，且原数组发生了变化，数组的第一个元素被删除了。

slice

（7）slice()：从已有的数组返回选定的元素

slice() 函数的语法为：slice(start,end)，表示从数组中选取从 start 到 end （不包含end位置的元素）的元素，并且返回一个新的数组，原数组不会被修改；也可以截取字符串中指定的部分，并返回一个新的字符串。

a）end 为空，返回从 start 到数组的结尾的元素：

var arr = ["one", "Two", "three", "four"];
console.log(arr.slice(1));
console.log(arr);
运行结果：
VM2356:2 (3) ["Two", "three", "four"]
VM2356:3 (4) ["one", "Two", "three", "four"]

上面的例子返回了一个从 start 开始到数组结尾的新的数组。

b）返回从 start 到 end（不包含end）的元素：

var arr = ["one", "Two", "three", "four"];
console.log(arr.slice(1,3));
console.log(arr);
运行结果：
VM2389:2 (2) ["Two", "three"]
VM2389:3 (4) ["one", "Two", "three", "four"]

上面的例子返回了一个从 start 开始到 end 的新的数组，而且，要注意的一点是：这里面不包含 end。

c）截取字符串中的元素

var str = "abcdefghijklmnopq";
console.log(str.slice(4,8));
console.log(str);
运行结果：
VM2597:2 efgh
VM2597:3 abcdefghijklmnopq

上面例子截取了字符串中指定 start 到 end（不包含end）的元素，并返回了一个新的字符串，原来的字符串并没有被改变。

d）start、end 为负数，规定规定从数组尾部开始算起的位置。例如：-1 指倒数第一个元素，-3 指倒数第三个元素。

var arr = ["one", "Two", "three", "four"];
console.log(arr.slice(-3,-1));
console.log(arr);
运行结果：
VM2652:2 (2) ["Two", "three"]
VM2652:3 (4) ["one", "Two", "three", "four"]

sort

（8）sort()：对数组的元素进行排序，默认是按照字母升序的顺序排列

var arr = ["one", "Two", "three", "four","five"];
console.log(arr.sort());
console.log(arr);
运行结果：
VM2717:2 (5) ["Two", "five", "four", "one", "three"]
VM2717:3 (5) ["Two", "five", "four", "one", "three"]

上面这个例子，是对数组中的元素进行了排序。

如果想要按照字母降序排列，可以使用 reverse() 方法，如下所示：

var arr = ["one", "Two", "three", "four","five"];
console.log(arr.sort().reverse());
console.log(arr);
运行结果：
VM2776:2 (5) ["three", "one", "four", "five", "Two"]
VM2776:3 (5) ["three", "one", "four", "five", "Two"]

哈哈，这种方法实现起来很方便呢~

sort() 方法是对数组元素按照字母升序进行排列，如果数组中是数字，会发生什么情况呢？

var arr = [45,1,59,26,47,2,12,45,9,71,23];
console.log(arr.sort());
console.log(arr);
运行结果：
VM2740:2 (11) [1, 12, 2, 23, 26, 45, 45, 47, 59, 71, 9]
VM2740:3 (11) [1, 12, 2, 23, 26, 45, 45, 47, 59, 71, 9]

可以看到，数组中是数组时，sort() 方法对数组进行排序，是按照字符编码进行排序的，并没有达到想要的按照数字大小排序的效果。这时候，如果要实现按照数字大小排序，则应该提供比较函数对数组进行排序。如下所示：

a）对数组中中的数字元素按照从小到大的顺序进行排序：

function sortNum(a, b)
{
	return a - b;
}
var arr = [45,1,59,26,47,2,12,45,9,71,23];
arr.sort(sortNum);
console.log(arr);
运行结果：
[1, 2, 9, 12, 23, 26, 45, 45, 47, 59, 71]

b）对数组中中的数字元素按照从大到小的顺序进行排序：

function sortNum(a,b){
	return b-a;
}
var arr = [45,1,59,26,47,2,12,45,9,71,23];
console.log(arr.sort(sortNum));
console.log(arr);
运行结果：
VM3097:5 (11) [71, 59, 47, 45, 45, 26, 23, 12, 9, 2, 1]
VM3097:6 (11) [71, 59, 47, 45, 45, 26, 23, 12, 9, 2, 1]

当然，也可以使用 reverse() 方法：

function sortNum(a,b){
	return a-b;
}
var arr = [45,1,59,26,47,2,12,45,9,71,23];
console.log(arr.sort(sortNum).reverse());
console.log(arr);
运行结果：
VM3134:5 (11) [71, 59, 47, 45, 45, 26, 23, 12, 9, 2, 1]
VM3134:6 (11) [71, 59, 47, 45, 45, 26, 23, 12, 9, 2, 1]

splice

（9）splice()：删除元素，并向数组添加新元素

语法：splice(index,howmany,item1,…,itemX)

其中，index 表示开始删除元素的位置；

howmany 表示删除元素的个数；

item1,…,itemX 表示向数组中插入的元素。

a）从数组中删除元素：

var arr = ["one", "Two", "three", "four","five","six"];
console.log(arr.splice(3,2));
console.log(arr);
运行结果：
VM3362:2 (2) ["four", "five"]
VM3362:3 (4) ["one", "Two", "three", "six"]

上面例子删除了数组从index 3 开始的 2 个元素（注意，数组 index 是从 0 开始的）可以看出，对数组应用 splice() 方法之后，返回删除的元素，原数组也发生了变化。

b）数组添加元素：

var arr = ["one", "Two", "three", "four","five","six"];
console.log(arr.splice(3,0,"apple","pear","banala"));
console.log(arr);
运行结果：
VM3425:2 []
VM3425:3 (9) ["one", "Two", "three", "apple", "pear", "banala", "four", "five", "six"]

上面例子删除了从 index 3 开始的 0 个元素，并且在该位置插入了三个元素，原数组被改变。

c）数组删除元素并添加元素：

var arr = ["one", "Two", "three", "four","five","six"];
console.log(arr.splice(3,2,"apple","pear","banala"));
console.log(arr);
运行结果：
VM3450:2 (2) ["four", "five"]
VM3450:3 (7) ["one", "Two", "three", "apple", "pear", "banala", "six"]

上面例子删除了从 index 3 开始的 2 个元素并返回，且在原数组 index 3 开始添加了三个元素，原数组发生了改变。

indexOf

（10）indexOf() ：返回数组中某个指定元素的位置

var arr = ["one", "Two", "three", "four","five","six"];
console.log(arr.indexOf("three"));
运行结果：
VM3607:2 2

上面例子返回了指定元素的位置。

如果数组中没有找到该元素，则会返回 -1。

var arr = ["one", "Two", "three", "four","five","six"];
console.log(arr.indexOf("apple"));
运行结果：
VM3618:2 -1

toString

（11）toString()：把数组转换为字符串，并返回结果

var arr = ["one", "Two", "three", "four"];
console.log(arr.toString());
console.log(arr);
运行结果：
VM3286:2 one,Two,three,four
VM3286:3 (4) ["one", "Two", "three", "four"]

上面例子可以看出，数组使用 toString() 方法后，返回了一个字符串，但是原数组没有被改变。

isArray

（12）isArray()：判断一个对象是否为数组

var arr = [2,3,4];
var obj = {};
console.log(Array.isArray(arr));
console.log(Array.isArray(obj));
运行结果：
VM1851:3 true
VM1851:4 false

unshift

（13）unshift()：向数组的开头添加元素，并返回新的长度

var arr = ["one", "Two", "three", "four"];
console.log(arr.unshift("eone"));
console.log(arr);
运行结果：
VM2218:2 5
VM2218:3 (5) ["eone", "one", "Two", "three", "four"]

上面这个例子，给数组开头添加了一个元素，原数组发生了改变。

valueOf

（14）valueOf()：返回数组对象的原始值

var arr = ["one", "Two", "three", "four"];
console.log(arr.valueOf());
运行结果：
VM2031:2 (4) ["one", "Two", "three", "four"]

lastIndexOf

（15）lastIndexOf()：返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找。

var arr = ["one", "Two", "three", "four","Two","five","six","Two"];
console.log(arr.lastIndexOf("Two"));
运行结果：
VM4072:2 7
＊且听风吟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Array对象属性和方法参考
沉迷学习 日渐消瘦
11-02 1593
js中Array对象常用属性和方法，作为参考文档使用，当忘记时可以查询
Javascript 数组方法汇总整理
07-25
Javascript 数组方法汇总整理
JS-Array类小总结
Rebecca
11-17 106
 Array类：       首先 ^^ 数组定义习惯上都用 [], 下面分别使用 new Array() 与 [] ，验证时间效率代码如下，看看谁用的时间少： var a = new Date ; var arr, direct, b = []; for(var i=0;...
JavaScript对象及继承教程 1
tof
01-26 489
JavaScript对象及继承教程 一、 类与对象 在 JavaScript 世界里，关于面向对象第一个要澄清的概念就是类。对象都是有类来定义的，通过类来创建对象就是我们所熟悉的实例化。然而，在 JavaScript 中别没有真正的类，对象的定义就是对象自身。而 ECMA-262 干脆把这种妥协的方式称作为对象的调和剂。为了方便理解，我通常把这个发挥类的作用的调和剂称为类。 二、 内置对象 1、 Array类 数组在 js 中是是否常用的一种数据结构，由于其灵活性和易用性，合理的使用数组可以帮助我们更好的实
JavaScript基础——使用数组
weixin_30673611的博客
12-09 71
　　Array对象提供存储和处理一组其他对象的一种手段。数组可以存储数值、字符串或其他JavaScript对象。创建JavaScript数组有几种不同的方法。例如，下面的语句穿件同样的驻足的3个相同的版本： 　　var arr = ["one","two","three"]; 　　var arr2 = new Array(); 　　arr2[0] = "one"; 　　arr2[1]...
JavaScript数组方法（最全）
weixin_46734347的博客
04-02 3万+
JavaScript数组常用方法(最全) 今天我们对JavaScript的数组以及对象的方法做一个总结，方便与以后的开发与查询，多多收藏哦！ 1. push() push方法可以向数组的末尾添加一个或者多个元素，并返回新的长度. 2. pop() pop() 方法用于删除并返回数组的最后一个元素。 3. unshift() unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。 4. shift() shift() 方法用于把数组的第一个元素从其中删除，并返回第一
JavaScript中的数组方法总结+详解
热门推荐
qq_43223007的博客
11-28 4万+
在JS中,数组方法是非常重要且常用的的方法.在此整理总结一番. JavaScript 数组的力量隐藏在数组方法中。 1. js常用数组方法 方法名 功能 返回值 是否改变原数组 版本 push() 在数组最后一位添加一或多个元素 返回长度 Y ES5- unshift() 在数组前添加一或多个元素 返回长度 Y ES5- 2.方法详解 1.push .........
JavaScript 数组方法find()
weixin_46585382的博客
06-17 1万+
JavaScript 数组方法find()
JavaScript数组方法大全
元仙僧的博客
01-18 3664
数组在笔试中经常会出现的面试题，javascript中的数组与其他语言中的数组有些不同，为了方便之后数组的方法学习，下面小编给大家整理了关于数组的操作方法，一起看看吧。 数组创建 JavaScript中创建数组有两种方式，第一种是使用 Array 构造函数： var arr1 = new Array(); //创建一个空数组 var arr2 = new Array(20); // 创建一个...
JavaScript数组every方法
Qiemo_的博客
04-30 1万+
1.every数组方法的作用 判断数组中是否所有元素都满足条件 2.语法:array.every( function ( item, index,arr) {} ) 第一个参数: item,必须,当前元素的值 第二个参数 : index,可选,当前元素在数组中的索引值 第三个参数 : arr,当前元素所处的数组对象 3.every方法特点 (1)循环次数 !== 数组长度 (2)函数内部的return return true : 循环继续 当前元素满足条件,继续判断,如果循环执行完毕还是t
JavaScript数组方法总结
小瑾沐晚风的博客
09-25 3万+
一.JavaScript中创建数组的方式 1.使用Array构造函数 var color=new Array();     注意：括号里面参数可以有参数，若为一个数字，表示该数组的长度，如果为多个数字或者一个（多个）非数字表示的是传递数组中应该包含的值。 2.使用数组字面量 var color=[]; 二. 数组的长度 三.数组的方法有数组原型方法，也有从object对象继承来的...
javaScript数组方法
07-23
javaScript数组方法
JavaScript数组方法总结分析
10-22
下面小编就为大家带来一篇JavaScript数组方法总结分析。小编觉得挺不错的，现在分享给大家，也给大家做个参考
深入探密Javascript数组方法
10-24
主要详细介绍了Javascript数组方法，十分的全面详尽，有需要的小伙伴可以来研究下，希望对大家能有所帮助
JavaScript数组方法大全(推荐)
01-21
数组在笔试中经常会出现的面试题，javascript中的数组与其他语言中的数组有些不同，为了方便之后数组的方法学习，下面小编给大家整理了关于数组的操作方法，一起看看吧。 数组创建 JavaScript中创建数组有两种方式，...
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 467
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
05_ Electron 自定义菜单、主进程与渲染进程通信
所学所思
08-09 620
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
Electron学习与总结
最新发布
song854601134的博客
08-12 122
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 317
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
JavaScript数组方法
09-13
JavaScript的数组方法包括push()、slice()和find()等。 1. push()方法用于向数组的末尾添加一个或多个元素，并返回新数组的长度。 2. slice()方法用于从原数组中提取出指定位置的元素，然后返回一个新数组。它可以接受一个或两个参数，第一个参数表示开始提取的位置索引，第二个参数表示结束提取的位置索引（不包含该位置元素）。 3. find()方法用于在数组中查找符合条件的第一个元素。它接受一个函数作为参数，该函数会对数组中的每个元素进行调用，并返回true或false来判断是否符合条件。如果找到符合条件的元素，find()方法会立即返回该元素，否则返回undefined。 以上是JavaScript数组常用的几个方法，可以帮助你在开发和查询中更方便地操作数组。希望对你有帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值