JavaScript中的Array（数组）对象

目录

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

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

每天进步一点点~！

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

前端进阶：Vue.js

前端进阶：Vue.js

目录 框架&#xff1a; 助解&#xff1a; 框架&#xff1a; VUE 什么是Vue.js? Vue.js优点 Vue安装 方式一&#xff1a;直接用<script>引入 方式二&#xff1a;命令行工具 第一个Vue程序 代码 代码解释&#xff1a; 运行 Vue指令 v-text v-html v-tex…
阅读更多...
git 中有关 old mode 100644、new mode 10075的问题解决小结

git 中有关 old mode 100644、new mode 10075的问题解决小结

问题&#xff1a; 同一个文件被修改后&#xff0c;最后代码没有变&#xff08;代码刚开始修改了&#xff0c;最后又删除还原了&#xff09;&#xff0c;文件变了&#xff0c;导致提交了一个空文件 git diff 提示 filemode 发生改变&#xff08;old mode 100644、new mode 1007…
阅读更多...
RabbitMQ进阶篇

RabbitMQ进阶篇

文章目录 发送者的可靠性生产者重试机制实现生产者确认 MQ的可靠性数据持久化交换机持久化队列持久化消息持久化 Lazy Queue(可配置~)控制台配置Lazy模式代码配置Lazy模式更新已有队列为lazy模式 消费者的可靠性消费者确认机制失败重试机制失败处理策略 业务幂等性唯一消息ID业…
阅读更多...
layui-页面布局

layui-页面布局

1.布局容器 分为固定和完整宽度 class layui-container 是固定宽度 layui-fluid是完整宽度
阅读更多...
傻瓜交换机多网段互通组网、设备无法配置网关案例

傻瓜交换机多网段互通组网、设备无法配置网关案例

记录一下&#xff1a; 一、傻瓜交换机多网段互通组网 1、客户在核心交换机上创建了VLAN10&#xff0c;VLAN20。 VLAN10&#xff1a;IP192.168.10.254 VLAN20&#xff1a;IP192.168.20.254 在核心交换机下挂了一台傻瓜交换机&#xff0c;傻瓜交换机接入了一台OA服务器IP&#…
阅读更多...
从零开始：在Windows上部署大型模型

从零开始：在Windows上部署大型模型

这是一个超详细安装教程&#xff0c;介绍了在 Window 电脑上如何部署 Qwen1.5 大模型。本文还涉及到 Python 及其环境的配置。 适合对象&#xff1a;有点后端编程基础&#xff0c;没有 Python 基础。 需要环境&#xff1a;Window10/11&#xff0c;支持 Cuda 的 Nvidia 显卡。…
阅读更多...
数据结构与算法-动态规划-最长回文子串

数据结构与算法-动态规划-最长回文子串

最长回文子串 给你一个字符串 s&#xff0c;找到 s 中最长的回文子串。 示例 1&#xff1a; 输入&#xff1a;s "babad" 输出&#xff1a;"bab" 解释&#xff1a;"aba" 同样是符合题意的答案。示例 2&#xff1a; 输入&#xff1a;s "…
阅读更多...
识图ACWP.BCWS.BCWP

识图ACWP.BCWS.BCWP

将三个概念想象成三个角色&#xff08;如&#xff1a;勇士、法师、盗贼&#xff09;&#xff0c;其中&#xff1a; ACWP是勇士&#xff0c;代表实际力量&#xff08;实际成本&#xff09;&#xff1b;BCWS是法师&#xff0c;代表预期魔法&#xff08;预算成本工作量预测&#x…
阅读更多...
vscode移动侧边栏到右边

vscode移动侧边栏到右边

vscode移动侧边栏到右边&#xff0c;的简单办法 直接在侧栏上单击右键&#xff0c;选择向右移动主侧栏
阅读更多...
用友U8+ 存货核算——4.专题应用

用友U8+ 存货核算——4.专题应用

阅读更多...
有哪些好的 Stable Diffusion 提示词（Prompt）可以参考？

有哪些好的 Stable Diffusion 提示词（Prompt）可以参考？

Docker 作图咒语生成器 docker-prompt-generator 是一个开源项目&#xff0c;可以利用模型反推出提示词&#xff0c;让你偷偷懒&#xff0c;无需琢磨怎么写prompt&#xff0c;只需要找一个差不多的模型反推一下&#xff0c;直接用就好了&#xff0c;支持支持 MidJourney、Stab…
阅读更多...
Go - 9.struct 使用指南

Go - 9.struct 使用指南

目录 一.引言 二.struct 定义 三.struct 实践 1. 初始化 struct 2. 嵌套 struct 3. func 与 struct 四.struct 进阶 1.Json Tags 2.Other Tags 五.总结 一.引言 在编程中&#xff0c;结构体&#xff08;struct&#xff09;是一种聚合数据类型&#xff0c;用于将多个…
阅读更多...
文献解读-长读长测序-第十四期|《作为了解棉花驯化的资源，印度棉（Gossypium herbaceum L. Wagad）基因组》

文献解读-长读长测序-第十四期|《作为了解棉花驯化的资源，印度棉（Gossypium herbaceum L. Wagad）基因组》

关键词&#xff1a;基因组&#xff1b;长读长测序&#xff1b;棉花基因组&#xff1b; 文献简介 标题&#xff08;英文&#xff09;&#xff1a;The Gossypium herbaceum L. Wagad genome as a resource for understanding cotton domestication标题&#xff08;中文&#xff…
阅读更多...
【HTML入门】列表与表格

【HTML入门】列表与表格

文章目录 前言一、列表与表格是什么&#xff1f;列表表格 二、使用标签列表标签表格标签 三、组合情况列表的组合表格的组合 四、示例代码总结 好的&#xff0c;以下是一个关于HTML列表与表格的文章示例&#xff1a; 前言 随着网页开发的普及&#xff0c;HTML成为了构建网页的…
阅读更多...
零基础学习MySQL---MySQL入门

零基础学习MySQL---MySQL入门

顾得泉&#xff1a;个人主页 个人专栏&#xff1a;《Linux操作系统》 《C从入门到精通》 《LeedCode刷题》 键盘敲烂&#xff0c;年薪百万&#xff01; 一、什么是数据库 问&#xff1a;存储数据用文件就可以了&#xff0c;为什么还要弄个数据库呢&#xff1f; 这就不得不提…
阅读更多...
Java面试八股文

Java面试八股文

一、Redis 1. 使用场景 &#xff08;1&#xff09;Redis的数据持久化策略有哪些 RDB&#xff1a;全称Redis Database Backup file&#xff08;Redis数据备份文件&#xff09;&#xff0c;也被叫作Redis数据快照。简单来说就是把内存中的所有数据都记录到磁盘中。当Redis实例故…
阅读更多...
Chapter9 更复杂的光照——Shader入门精要学习笔记

Chapter9 更复杂的光照——Shader入门精要学习笔记

Chapter9 更复杂的光照 一、Unity的渲染路径1.渲染路径的概念2.渲染路径的类型①前向渲染路径a. 前向渲染路径的原理b. Unity中的前向渲染c. 两种Pass ②延迟渲染路径a. 延迟渲染路径的原理b. Unity中的延迟渲染c. 两种Pass ③顶点照明渲染路径 二、Unity的光源类型1.光源类型①…
阅读更多...
毫秒级相应逆流检测电表安科瑞防逆流电能表

毫秒级相应逆流检测电表安科瑞防逆流电能表

家庭储能系统 生态环境与人们的日常生活密切相关&#xff0c;越来越多的家庭开始重视居住环境的绿色、环保、智能及可持续性&#xff0c;并采取具体行动。截至2023年&#xff0c;欧洲太阳能发电容量已超200GW&#xff0c;家庭储能系统的安装量呈爆炸性增长。 用户痛点及需求 …
阅读更多...
前端基础：JavaaScript（篇二）

前端基础：JavaaScript（篇二）

目录 内置对象 String字符串 属性 代码 运行 方法 代码 运行 日期 代码 运行 Math 代码 运行 数组 定义 属性 代码 运行 方法 join(分隔符>) &#xff1a; 代码 运行 reverse()&#xff1a; 代码 运行 sort() &#xff1a; 代码 运行 事件 …
阅读更多...
有哪些手持小风扇品牌推荐?五大手持小风扇诚意推荐！

有哪些手持小风扇品牌推荐?五大手持小风扇诚意推荐！

在炎炎夏日&#xff0c;一款便携且高效的手持小风扇无疑是消暑的必备神器。为了帮助大家轻松应对酷暑&#xff0c;我们精心挑选了五大手持小风扇品牌进行诚意推荐。这些品牌不仅拥有出色的降温效果&#xff0c;更在外观设计、便携性、续航能力及操作便捷性上表现卓越。接下来&a…
阅读更多...
最新文章

Copyright @ 2022~2023