JavaScript中的Array（数组）对象

news2024/7/7 17:27:43

目录

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

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

每天进步一点点~！

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1886641.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

VQA视觉问答系统

VQA视觉问答系统

这是一个典型的多模态问题，融合了CV与NLP的技术，计算机需要同时学会理解图像和文字。 Joint embedding 首先，图像和问题分别由CNN和RNN进行第一次编码得到各自的特征，随后共同输入到另一个编码器中得到joint embedding，最后通过解码器输出答案。 值得注意的是，有的工作…
阅读更多...
我与C++的爱恋：list的使用

我与C++的爱恋：list的使用

​ ​ 🔥个人主页：guoguoqiang. 🔥专栏：我与C的爱恋 一、list介绍 1.list是可以在常数范围内在任意位置进行插入和删除的序列式容器，并且该容器可以前后双向迭代 2.list的底层是双向链表结构，双向链表中…
阅读更多...
python: create Envircomnet in Visual Studio Code 创建虚拟机

python: create Envircomnet in Visual Studio Code 创建虚拟机

先配置python开发环境 1.在搜索栏输入“>" 或是用快捷组合键ctrlshiftP键 就会显示”>",再输入"python:" 选择已经安装好的python的版本,选定至当前项目中，都是按回车 就可以看到创建了一个虚拟机的默认的文件夹名".venv" 2 te…
阅读更多...
KUKA仿真教学8：设备保养屏蔽

KUKA仿真教学8：设备保养屏蔽

目录 一、屏蔽步骤 一、屏蔽步骤
阅读更多...
ghost恢复？电脑文件恢复如何操作？电脑数据恢复工具！5款！

ghost恢复？电脑文件恢复如何操作？电脑数据恢复工具！5款！

在数字化时代，电脑数据的价值日益凸显。然而，数据丢失、误删、系统崩溃等问题时有发生，给个人和企业带来巨大损失。本文将为您详细介绍Ghost恢复方法，同时推荐五款高效的电脑数据恢复工具，助您轻松应对数据丢失的困扰。…
阅读更多...
Node.js学习（一）

Node.js学习（一）

Node.js安装与入门案例： 需求：点击按钮，请求本地目录指定文件的内容，并显示在页面上 刚入门肯定想着直接写相对路径请求指定路径数据就行了，可是会发现不行。 网页运行在浏览器端，通常后续要发布&#xf…
阅读更多...
全面了解机器学习

全面了解机器学习

目录 一、基本认识 1. 介绍 2. 机器学习位置 二、机器学习的类型 1. 监督学习 2. 无监督学习 3. 强化学习 三、机器学习术语 1. 训练样本 2. 训练 3. 特征 4. 目标 5. 损失函数 四、机器学习流程 五、机器学习算法 1. 分类算法 2. 聚类算法 3. 关联分析 4. …
阅读更多...
高通骁龙(Qualcomm Snapdragon)CDSP HVX HTP 芯片简介与开发入门

高通骁龙(Qualcomm Snapdragon)CDSP HVX HTP 芯片简介与开发入门

1. Hexagon DSP/HVX/HTP 硬件演进 说到高通骁龙芯片大家应该不会陌生，其作为最为广泛的移动处理器之一，几乎每一个品牌的智能手机都会使用高通骁龙的处理器。 高通提供了一系列骁龙芯片解决方案。根据性能强弱分为了5个产品系列：从最高端的…
阅读更多...
verilog实现PID控制

verilog实现PID控制

1 原理讲解 距离上一次说PID算法的事情过去蛮久了，今天又重新看了看PID的代码，其实还是存在一些不合理的地方。 整理归纳了一下原理，位置式和增量式的变化。 2 工程实现 timescale 1ns / 1psmodule pid_controller(input clk,input r…
阅读更多...
MySQL——事务ACID原则、脏读、不可重复读、幻读

MySQL——事务ACID原则、脏读、不可重复读、幻读

什么是事务 要么都成功，要么都失败 一一一一一一一 1. SQL执行：A给B转账 A 1000 ---->200 B 200 2. SQL执行：B收到A的钱 A 800 B 400 一一一一一一一 将一组SQL放在一个批次中去执行~ 事务原则：ACI…
阅读更多...
从零搭建Prometheus到Grafana告警推送

从零搭建Prometheus到Grafana告警推送

目录 一、Prometheus源码安装和动态更新配置 二、Prometheus操作面板和常见配置 三、Prometheus常用监控组件exporter配置 3.1 exporter是什么 3.2 有哪些exporter 3.3 exporter怎么用 3.4 实战 node_exporter ​3.5 其它exporter都怎么用 四、Promethus整合新版Sprin…
阅读更多...
线程状态转换总结

线程状态转换总结

1. NEW -> RUNNABLE 创建线程后是 NEW 状态&#xff08;只是 Java 层面新建的&#xff0c;还没有关联到操作系统实际的线程上&#xff09;&#xff0c;调用线程的 start() 方法会将 Java 线程和操作系统的线程关联起来&#xff0c;进入 RUNNABLE 状态 2. RUNNABLE <->…
阅读更多...
入门PHP就来我这（纯干货）05

入门PHP就来我这（纯干货）05

~~~~ 有胆量你就来跟着路老师卷起来&#xff01; -- 纯干货&#xff0c;技术知识分享 ~~~~ 路老师给大家分享PHP语言的知识了&#xff0c;旨在想让大家入门PHP&#xff0c;并深入了解PHP语言。 1 数组及创建 数组&#xff0c;顾名思义&#xff0c;本质上就是一系列数据的组合…
阅读更多...
【Linux进程通信】使用匿名管道制作一个简单的进程池

【Linux进程通信】使用匿名管道制作一个简单的进程池

进程池是什么呢&#xff1f;我们可以类比内存池的概念来理解进程池。 内存池 内存池是在真正使用内存之前&#xff0c;先申请分配一定数量的、大小相等(一般情况下)的内存块留作备用。当有新的内存需求时&#xff0c;就从内存池中分出一部分内存块&#xff0c;若内存块不够再继…
阅读更多...
docker-compose搭建prometheus、grafana

docker-compose搭建prometheus、grafana

一、安装prometheus 1、安装 version: 3.1services:prometheus:image: prom/prometheus:v2.48.0container_name: prometheushostname: prometheusrestart: alwaysvolumes:- ./prometheus/prometheus.yml:/etc/prometheus/prometheus.yml- ./prometheus/:/etc/prometheus/port…
阅读更多...
淘宝扭蛋机小程序开发，新玩法、新收益体验！

淘宝扭蛋机小程序开发，新玩法、新收益体验！

近几年&#xff0c;随着娱乐消费的火爆&#xff0c;潮玩市场得到了快速发展&#xff0c;从而带动了扭蛋机市场的发展&#xff0c;扭蛋机也逐渐风靡在消费市场中。对于年轻人消费者来说&#xff0c;愿意为扭蛋机的热门IP商品而买单。目前&#xff0c;价格低、颜值高、种类多样的…
阅读更多...
大科技公司大量裁员背后的真相

大科技公司大量裁员背后的真相

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
试用笔记之-汇通计算机等级考试软件一级Windows

试用笔记之-汇通计算机等级考试软件一级Windows

首先下载汇通计算机等级考试软件一级Windows http://www.htsoft.com.cn/download/htwork.rar
阅读更多...
JavaMySQL 学习（基础）

JavaMySQL 学习（基础）

目录 Java CMD Java发展 计算机存储规则 Java学习 switch新用法&#xff08;可以当做if来使用&#xff09; 数组定义 随机数 Java内存分配 MySQL MySQL概述 启动和停止 客户端连接 数据模型 关系型数据库 SQL SQL通用语法 SQL分类 DDL--数据定义语言 数据库…
阅读更多...
时间复利效应才是人生的催化剂

时间复利效应才是人生的催化剂

在追求成功的道路上&#xff0c;许多人都在寻找捷径。然而&#xff0c;真正的捷径并非不劳而获的幻想&#xff0c;而是通过长期坚持在某一领域深耕细作&#xff0c;享受时间复利效应带来的巨大收益。本文将探讨如何选择合适的领域并长期坚持下去&#xff0c;以实现成功。 时间…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023