JavaScript中的Array（数组）对象

已于 2024-07-02 20:45:42 修改
阅读量930 收藏 29
点赞数 16
文章标签： JavaScript Array对象
于 2024-07-02 20:45:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65029152/article/details/140011840
版权

目录

一、Array数组对象

1、介绍

2、创建数组对象并赋值

3、访问数组元素

二、Array对象属性

1、constructor属性

2、length属性

3、prototype属性

三、Array对象的常用方法

1、isArray()

2、concat()

3、pop()

4、shift()

5、push()

6、unshift()

7、reverse()

8、sort()

9、some()

10、every()

11、filter()

12、find()

13、findIndex()

14、slice()

15、splice()

16、includes

17、indexOf()

18、join()

19、toString()

20、fill()

21、forEach()

22、map()

一、Array数组对象

1、介绍

  • JavaScript中的数组对象（简称：数组），使用单独变量名存储一组值；
  • 数组是引用类型数据；
  • 数组的索引值从0开始，第一个元素在索引为0处；
  • JavaScript中频繁使用；

2、创建数组对象并赋值

// 1、使用Array()构造函数 创建数组对象 然后赋值
let arr1 = new Array();
arr1[0] = "元素1";
arr1[1] = "元素2";
arr1[2] = "元素3";
console.log("创建的第1个数组arr1：", arr1);

// 2、使用Array()构造函数 创建数组对象的同时赋值
let arr2 = new Array("A", "B", "C", "D");
console.log("创建的第2个数组arr2：", arr2);

// 3、使用数组字面量 创建数组对象并赋值
let arr3 = [1, 2, 3, 4, 5];
console.log("创建的第3个数组arr3：", arr3);

3、访问数组元素

通过指定数组名和索引值，来访问数组中的元素；

let arr = [1, 2, 3, 4, 5];
console.log("获取数组中的第1个元素：", arr[0]);
console.log("修改前的第4个元素：", arr[3]);
console.log("修改数组中的第4个元素：", arr[3] = 8);
console.log("修改后的第4个元素：", arr[3]);

二、Array对象属性

序号属性描述
1constructor返回创建数组对象的原型函数；
2length设置或返回数组元素的个数（数组长度）；
3prototype允许你向数组对象添加属性或方法；

1、constructor属性

let newArr = [1, 2, 3, 4, 5];
console.log("constructor属性：", newArr.constructor);

2、length属性

let newArr = [1, 2, 3, 4, 5];
console.log("length属性：", newArr.length);

3、prototype属性

Array.prototype.user = "zyl";
Array.prototype.getLastItem = ()=>{
    return newArr[newArr.length - 1];
}

let newArr = [1, 2, 3, 4, 5];
console.log("使用prototype定义的属性user：", newArr.user);
console.log("使用prototype定义的方法getLastItem()：", newArr.getLastItem());

三、Array对象的常用方法

序号方法描述返回值是否影响原数组
1isArray()判断对象是否为数组；Boolean值；否
2concat()拼接多个数组，并返回结果；拼接后的新数组；否
3pop()移除数组中的最后一个元素；被移除的元素；是
4shift()移除数组中的第一个元素；被移除的元素；是
5push()向数组末尾多个插入元素；数组长度；是
6unshift()向数组起始位置插入元素；数组长度；是
7reverse()反转数组；反转后的原数组；是
8sort()对数组进行排序；排序后的原数组；是
9some()判断数组中是否包含指定条件的元素；Boolean值；否
10every()判断数组中的每个元素是否均符合指定条件；Boolean值；否
11filter()筛选出所有符合条件的元素组成的数组；新数组；否
12find()筛选出第一个符合条件的数组元素；数组元素；否
13findIndex()查找第一个符合条件元素的索引值；数组元素索引值；否
14slice()用于截取数组；截取后的新数组；否
15splice()给数组中添加或删除元素；被删除元素组成的新数组；是
16includes()判断数组中是否包含指定元素；Boolean值；否
17indexOf()查找数组中指定元素的索引值；索引值；否
18join()用于将数组元素连接成一个字符串；字符串；否
19toString()用于将数组元素连接成一个字符串；字符串；否
20fill()使用固定值填充数组；数组；是
21forEach()使数组中的每个元素都执行一次回调函数；无；否
22map()通过指定方法，处理数组中的每个元素；处理后元素依次组成的新数组；否

1、isArray()

Array.isArray(obj)
  • 该方法用来判断传入的对象是否为数组；
  • obj，为必填参数，表示要判断的对象；
  • 如果是数组，返回true；否则返回false；
  • 不影响原数组；
let obj = {name:"zyl"};
let arr = [1, 2, 3, 4, 5];
console.log("判断是否为数组：", Array.isArray(obj));
console.log("判断是否为数组：", Array.isArray(arr));

2、concat()

array1.concat(array2, array3,..., arrayX)
  • 该方法用来连接多个数组；
  • array2, array3,..., arrayX 为必须参数（1-x个），表示要拼接的数组；
  • 返回连接后的新数组；
  • 原数组不变；
// 2、concat()方法
let arr1 = [1, 2, 3, 4, 5];
let arr2 = ["A", "B", "C", "D"]
console.log("拼接后的arr1和arr2：", arr1.concat(arr2, arr2));

 

3、pop()

array.pop();
  • 该方法用来删除数组的最后一个元素；
  • 无参数；
  • 返回被删除的元素；
  • 改变原数组；
let arr = [1, 2, 3, 4, 5];
console.log("返回值：", arr.pop());
console.log("原数组：", arr);

4、shift()

array.shift()
  • 该方法用来删除数组中的第一个元素；
  • 无参数；
  • 返回被删除的第一个数组元素；
  • 改变原数组；
let arr = [1, 2, 3, 4, 5];
console.log("返回值：", arr.shift());
console.log("原数组：", arr);

5、push()

array.push(item1, item2, ..., itemX)
  • 该方法用来在数组末尾插入元素；
  • item1, item2, ..., itemX为要插入的元素；
  • 返回插入元素后的数组长度；
  • 改变原数组；
let arr = [1, 2, 3, 4, 5];
console.log("返回值：", arr.push(6, 7, 8));
console.log("原数组：", arr);

6、unshift()

array.unshift(item1, item2, ..., itemX)
  • 该方法用来在数组起始位置插入元素；
  • item1, item2, ..., itemX为要插入的元素；
  • 返回插入元素后的数组长度；
  • 改变原数组；
let arr = [1, 2, 3, 4, 5];
console.log("返回值：", arr.unshift(6, 7, 8));
console.log("原数组：", arr);

7、reverse()

array.reverse()
  • 该方法用来反转数组元素；
  • 无参数；
  • 返回反转后的原数组；
  • 改变原数组；
let arr = [1, 2, 3, 4, 5];
console.log("返回值：", arr.reverse());
console.log("原数组：", arr);

8、sort()

array.sort(sortfunction)
  • 该方法用来对数组元素进行排序；
  • sortfunction为可选参数，规定排序顺序，必须是函数；
  • 返回排序后的原数组；
  • 改变原数组；
  • 注意：默认升序，需要倒序的话，可以传入排序函数，也可以结合reverse()方法实现；
let arr = [6, 2, 9, 4, 5];
console.log("返回值：", arr.sort());
console.log("原数组：", arr);

9、some()

array.some(function(currentValue,index,arr), thisValue)
  • 该方法用于检测数组中，是否包含有符合指定条件的元素；
  • 只要有一个符合条件的元素则返回true，都不满足则返回false；
  • 不影响原数组；
  • 不会对空数组进行检测，直接返回false；
let arr = [1, 2, 3, 4, 5];
console.log("返回值：", arr.some((item)=>{
    return item > 2 ;
}));
console.log("原数组：", arr);

console.log("空数组：", [].some((item)=>{
    return item > 2 ;
}));

10、every()

array.every(function(currentValue,index,arr), thisValue)
  • 该方法用于检测数组中的每个元素是否都符合指定条件；
  • 每个元素都符合条件则返回true，否则返回false；
  • 不影响原数组；
  • 不会对空数组进行检测，直接返回true；
let arr = [1, 2, 3, 4, 5];
console.log("返回值：", arr.every((item)=>{
    return item > 2 ;
}));
console.log("原数组：", arr);

console.log("空数组：", [].every((item)=>{
    return item > 2 ;
}));

11、filter()

array.filter(function(currentValue,index,arr), thisValue)
  • 该方法用于筛选数组中所有符合条件的元素；
  • 返回筛选出来的元素组成的新数组；
  • 不影响原数组；
  • 对于空数组，不会进行操作，直接返回[]；
let arr = [1, 2, 3, 4, 5];
console.log("返回值：", arr.filter((item)=>{
    return item > 2 ;
}));
console.log("原数组：", arr);

console.log("空数组：", [].filter((item)=>{
    return item > 2 ;
}));

12、find()

array.find(function(currentValue, index, arr), thisValue)
  • 该方法用于筛选数组中第一个符合条件的元素；
  • 返回筛选出来的数组元素；
  • 不影响原数组；
  • 对于空数组，不会执行回调函数，直接返回undefined；
let arr = [1, 2, 3, 4, 5];
console.log("返回值：", arr.find((item)=>{
    return item > 2 ;
}));
console.log("原数组：", arr);

console.log("空数组：", [].find((item)=>{
    return item > 2 ;
}));

13、findIndex()

array.findIndex(function(currentValue, index, arr), thisValue)
  • 该方法用于筛选数组中第一个符合条件元素的索引值（数组元素的索引值从0开始）；
  • 返回筛选出来的数组元素的索引值， 如果没有符合条件的元素返回 -1；
  • 不影响原数组；
  • 对于空数组，不会执行回调函数，返回-1；
let arr = [1, 2, 3, 4, 5];
console.log("返回值：", arr.findIndex((item)=>{
    return item > 2 ;
}));
console.log("原数组：", arr);

console.log("空数组：", [].findIndex((item)=>{
    return item > 2 ;
}));

14、slice()

array.slice(start, end)
  • 该方法用来截取数组，并返回截取后的新数组；
  • start为可选参数，为开始截取的位置（截取的时候包含）；可以为负数，表示在数组中从后往前的位置；
  • end为可选参数，为截取的结束位置（截取的时候不包含）；可以为负数，表示数组中从后往前的位置；end必须大于start；
  • 不影响原数组；
let arr = [1, 2, 3, 4, 5];
console.log("返回值：", arr.slice(1, 4));
console.log("返回值：", arr.slice(-2));
console.log("返回值：", arr.slice());
console.log("原数组：", arr);

15、splice()

array.splice(index,howmany,item1,.....,itemX)
  • 该方法用于给数组中添加元素或删除元素；
  • index 为必选参数，表示进行添加或删除的起始位置（操作时包含该位置）；
  • howmany 为可选参数，必须是数字，表示要删除的元素个数，可以为0；若未传入，则默认为所有元素；
  • item1,.....,itemX 为可选参数，表示要添加到数组的新元素；
  • 改变原数组；
let arr1 = [1, 2, 3, 4, 5];
console.log("arr1的返回值：", arr1.splice(1, 4));
console.log("arr1的原数组：", arr1);

let arr2 = [1, 2, 3, 4, 5];
console.log("arr1的返回值：", arr2.splice(2));
console.log("arr1的原数组：", arr2);

let arr3 = [1, 2, 3, 4, 5];
console.log("arr1的返回值：", arr3.splice(0, 2 , 7, 8));
console.log("arr1的原数组：", arr3);

16、includes

array.includes(searchElement, fromIndex)
  • 该方法用于查找数组中是否包含指定元素；
  • searchElement 为必选参数，表示要查找的元素；
  • fromIndex 为可选参数，表示查找的起始索引值（查找时包含该位置）；若该值大于数组长度，直接返回false；
  • 若包含，则返回true，否则返回false；
  • 不影响原数组；
let arr = [1, 2, 3, 4, 5];
console.log("arr的返回值：", arr.includes(4));
console.log("arr的返回值：", arr.includes(3, 2));
console.log("arr的返回值：", arr.includes(2, 3));
console.log("arr的原数组：", arr);

17、indexOf()

array.indexOf(item,start)
  • 该方法用来查找数组中指定元素的索引值；
  • item 为必选参数，表示要查找的指定元素；
  • start 为可选参数，表示查找的起始位置；
  • 若查到该元素，则返回元素索引值，否则，返回-1；
  • 不影响原数组； 
let arr = [1, 2, 3, 4, 5];
console.log("arr的返回值：", arr.indexOf(4));
console.log("arr的返回值：", arr.indexOf(3,4));
console.log("arr的原数组：", arr);

18、join()

array.join(separator)
  • 该方法用来将数组中的所有元素连接成一个字符串；
  • separator 为可选参数，表示连接使用的分隔符，默认为逗号【，】；
  • 返回连接后的字符串；
  • 不影响原数组；
let arr = [1, 2, 3, 4, 5];
console.log("arr的返回值：", arr.join());
console.log("arr的返回值：", arr.join('--'));
console.log("arr的原数组：", arr);

19、toString()

array.toString()
  • 该方法用来将数组中的所有元素连接成一个字符串，使用逗号【，】分隔；
  • 无参数；
  • 返回连接后的字符串；
  • 不影响原数组；
let arr = [1, 2, 3, 4, 5];
console.log("arr的返回值：", arr.toString());
console.log("arr的原数组：", arr);

20、fill()

array.fill(value, start, end)
  • 该方法使用固定值替换数组元素；
  • value 为必选参数，表示要替换成的值；
  • start 为可选参数，表示开始填充的位置（填充时包括该位置）； 
  • end 为可选参数，表示填充的结束位置（填充时不包括该位置），默认到数组结束；
  • 返回替换后的数组；
  • 改变原数组；
let arr1 = [1, 2, 3, 4, 5];
console.log("arr1的返回值：", arr1.fill(8));
console.log("arr1的原数组：", arr1);

let arr2 = [1, 2, 3, 4, 5];
console.log("arr2的返回值：", arr2.fill(8, 2, 4));
console.log("arr2的原数组：", arr2);

21、forEach()

array.forEach(callbackFn(currentValue, index, arr), thisValue)
  • 该方法使数组中的每个元素，均调用一次回调函数；
  • 无返回值；
  • 不影响原数组；
  • 空数组不会执行回调函数；
let arr = [1, 2, 3, 4, 5];
arr.forEach((item, index, arr)=>{
    item++ 
    console.log(`${arr}中的第${index+1}个元素为${item}`);
})
console.log("原数组：", arr);

 

22、map()

array.map(function(currentValue,index,arr), thisValue)
  • 该方法通过指定函数，处理数组中的每一个元素；
  • 返回经过处理的元素依次组成的新数组；
  • 不影响原数组；
let arr = [1, 2, 3, 4, 5];
console.log("返回值：", arr.map((item)=>{
    return 'map' + item;
}));
console.log("原数组：", arr);

=======================================================================

每天进步一点点~！

数组的操作也太常用了吧，多看看多看看！！！

白菜不太菜
关注
  • 16
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS中Array数组方法（秒懂数组方法如何使用）
百赢出品，必属精品
04-06 3698
JavaScript中的Array（数组）是一种用于存储多个值的数据结构，它是一种有序的集合，可以包含各种类型的数据，例如数字、字符串、对象等。
JavaScript中的Array对象
ccyzq的博客
12-23 1082
一、Array数组对象 1、数组对象的创建 2、数组对象的常用方法 注意 3、数组的遍历 方法一：for循环 方法二：foreach循环 ※
【Java 进阶篇】JavaScript Array数组详解
繁依Fanyi的博客
10-13 360
JavaScript数组是一种有序的数据集合，它可以存储多个值。数组的每个值称为元素，每个元素都有一个与之关联的索引，用来标识其在数组中的位置。数组可以包含不同数据类型的元素，包括数字、字符串、对象等。var fruits = ["苹果", "香蕉", "橙子"];在上面的示例中，我们创建了不同类型的数组。fruits数组包含字符串元素，numbers数组包含数字元素，mixed数组则混合了字符串、数字、布尔值和对象。JavaScript数组是一种强大的数据结构，用于存储和操作多个值。
涵盖至 EAMCScript 2024 (ES15)新特性 Array【数组】常用的属性方法全览
最新发布
学而不思则罔,思而不学则殆
07-22 1066
JavaScript 数组的属性方法大全一览，涵盖 EAMCScript 2024 （ES15）新特性
重磅！超详细的 JS 数组方法整理出来了
祈澈菇凉
01-06 1762
作者：Yushiahttps://juejin.cn/post/6907109642917117965数组是 js 中最常用到的数据集合，其内置的方法有很多，熟练掌握这些方法，可以有效的...
JavaScript Array（数组） 对象
笔记
02-18 981
JavaScript 中的 Array（数组）对象是一种用来存储一系列值的容器，它可以包含任意类型的数据，包括数字、字符串、对象等等。通过使用数组对象，我们可以轻松地组织和处理数据，以及进行各种操作，比如查找、排序、过滤、迭代等等。在 JavaScript 中，我们可以通过多种方式来创建一个数组对象。2.1 直接定义在这个例子中，我们定义了一个包含 5 个元素的数组，分别是 1、2、3、4、5。2.2 构造函数。
jQuery根据元素值或元素下标来删除一个数组元素及数组对象方法列表
ama7449的博客
11-20 118
前提不知道b在这个数组的下标，删除b这个元素 var arrList = ['a','b','c','d']; arrList.splice(jQuery.inArray('b',arrList),1); alert(arrList); 其中jQuery.inArray('b',arrList)是b这个元素在数组arrList 中的位置 splice(index,...
JavaScript之数组
peppa_pig的博客
07-30 241
1.数组的概念 所谓数组，是有序的元素序列。（一组有序 数据） js的数组可以包含任意数据类型，数组中的元素同场是同一种类型。 2.数组的构建方式    2.1字面量   var arr = [1,2,3,4,5];    2.2构造函数   var arr1 = new Array( )；              //创建一个空数组 var arr1 ...
javascript之Array 数组对象详解
01-21
1、创建Array对象方法： —>var arr = [element0, element1, …, ...//定义一个没有任何内容的数组对象，然后以下面的方式为其赋值 arr[0] = “arr0”; arr[1] = “arr1”; arr[2] = “arr2”; —>new Array(size
Javascript中的Array数组对象详谈
10-26
在JavaScript中，Array数组对象是用于存储一组有序数据的数据结构。它可以包含任意类型的数据，如数字、字符串、布尔值甚至是其他对象。数组的定义和初始化非常灵活，这体现了JavaScript语言的弱类型特性。例如，...
JavaScript 中有关数组对象的方法(详解)
10-21
在JavaScript中，数组对象是编程时经常使用的数据结构，它提供了丰富的操作方法来方便地处理和操作数组元素。本文将详细解析JavaScript中数组对象的一些主要方法。 首先，我们来看看如何添加数组元素。`push()`方法...
JavaScript-数组（Array）
StupidlyGrass的博客
01-16 4914
JavaScript数组（Array）
java script 遍历数组_Java script-数组与字符串方法
weixin_42425075的博客
02-16 322
数组：1.concat()功能：用于连接两个或多个数组，该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。参数：concat(data1,data2,...);所有参数可选，要合并的数据；data为数组时，将data合并到原数组；data为具体数据时直接添加到原数组尾部；省略时创建原数组的副本。2.join()功能：根据指定分隔符将数组中的所有元素放入一个字符串，并返回这个字符串。参数：...
JavaScript Array（数组）对象
weixin_43198323的博客
09-13 230
数组对象是使用单独的变量名来存储一系列的值。并且可以用变量名访问任何一个值。数组中的每个元素都有自己的的ID，以便它可以很容易地被访问到。 数组的概念 所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之为数组。 数组的定义 数组是一个有序的列表，可以在数组中存放任意的数据，并且数组的长度可以动态的调整。 数组赋值 也可以使用一个整数自变量...
第十课--Array（数组） 对象与Boolean（布尔） 对象
阅读之后，对你有帮助，那就点个赞再走吧
09-16 1035
1.Array（数组） 对象 var arr = new Array(); arr[0] = 1; arr[1] = 1; arr[2] = 1; console.log(arr) arr['a'] = 1; arr['b'] = 1; arr['c'] = 1; 数组属性 属性 描述 constructor 返回创建数组对象的原型函数。 length 设...
JavaScript中的数组对象Array详解
"这篇资料主要介绍了JavaScript中的数组对象Array，包括其属性和常用方法，并简述了JavaScript的历史、特点、功能以及与Java语言的区别。" 在JavaScript中，数组对象Array是一个核心的数据结构，用于存储一组有序的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值