JavaScript中的Array对象~

news2024/12/25 13:23:34

初识Array：

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

定义：

方式1

//返回的数组为空，length字段为0
var 变量名=new Array();
//size是期望的数组元素个数，返回的length字段将被设置为size的值--返回具有指定个数，元素为undefined的数组
var 变量名=new Array(size);
//新创建的数组的元素就会被初始化为这些值，它的length字段也会被设置为参数的个数
var 变量名=new Array(元素列表);
//不使用new运算符直接调用构造函数，该效果和使用new运算符相同
var array=Array();

举例：

<script>
     var array=new Array(1,2,3);
     alert(array);
</script>

显示如下：

在这里插入图片描述

方式2

var 变量名=[元素列表];

举例：

<script>
     var array=[1,2,3];
     alert(array);
</script>

显示如下：

在这里插入图片描述

访问：

arr[索引]=值;
arr[0]=1;

举例：

<script>
     var array=[1,2,3];
     //将数组的最后一个元素修改为99
     array[2]=99;
     alert(array);
</script>

显示如下：

在这里插入图片描述

注意：JS数组与Java中的数组可不相同哦，它类似于java集合，长度，类型都可变

Array数组的特点：

变长：

即为长度可发生变化，在java中数组是定长的，一旦我们访问的下标超出范围，即会报错，但在JavaScript中，我们是可以访问任意下标的元素值

举例：

设置值的情况

<script>
     var array=[1,2,3];
     //将数组中下标为10的元素的值设置为16
     array[10]=16;
     alert(array[10]);
</script>

显示如下：

在这里插入图片描述

未设置值的情况

<script>
     var array=[1,2,3];
     //直接访问下标为8的元素的值
     alert(array[8]);
</script>

显示如下：

在这里插入图片描述

变类型：

举例：

<script>
     var array=[1,2,3];
     //将array数组下标为8的值设置为字符串类型
     array[8]="hello";
     alert(array[8]);
</script>

显示如下：

在这里插入图片描述

查看此时数组的值：

alert(array);

显示如下：

Array对象属性：

Array对象属性：

属性描述
length设置或返回数组中元素的数目
constructor返回对创建此对象的数组函数的引用
prototype使其有能力向对象添加属性和方法

length举例:

打开该网页依次弹出1,2,3

<script>
     var array=[1,2,3];
     for(let i=0;i<array.length;i++){
            alert(array[i]);
     }
</script>

constructor举例：

constructor属性用于返回创建该对象的构造函数

在JavaScript中，每个具有原型的对象都会自动获得constructor属性，除了arguments、Enumerator、Error、Global、Math、RegExp、Regular Expression等一些特殊对象之外，其他所有的JavaScript内置对象都具备constructor属性，例如：Array、Boolean、Date、Function、Number、Object、String等

举例：

<script type="text/javascript">
var test=new Array();
if (test.constructor==Array)
{
document.write("This is an Array");
}
if (test.constructor==Boolean)
{
document.write("This is a Boolean");
}
if (test.constructor==Date)
{
document.write("This is a Date");
}
if (test.constructor==String)
{
document.write("This is a String");
}
</script>

显示如下：

在这里插入图片描述

<script type="text/javascript">

function employee(name,job,born)
{
this.name=name;
this.job=job;
this.born=born;
}

var bill=new employee();

document.write(bill.constructor);

</script>

显示如下：

在这里插入图片描述

Array对象方法：

方法描述
concat()连接两个或更多的数组，并返回结果
join()把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分隔
pop()删除并返回数组的最后一个元素
push()向数组的末尾添加一个或更多的元素，并返回新的长度
shift()删除并返回数组的第一个元素
splice()删除元素，并向数组添加新元素
toSource()返回该对象的源代码
toString()把数组转换为字符串，并返回结果
toLocaleString()把数组转换为本地数组，并返回结果
unshift()向数组的开头添加一个或更多元素，，并返回新的长度
valueOf()返回数组对象的原始值

方法的举例：

concat:

该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本，其参数可以是具体的值，也可以是数组对象，可以是任意多个，多个之间用逗号隔开

<script type="text/javascript">

var str="hello"
var str1="sri"
alert(str.concat(str1))

</script>

显示如下：

该数组是通过把所有 参数添加到 str 中生成的,如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组

在这里插入图片描述

join:

可选参数,指定要使用的分隔符,如果省略该参数，则使用逗号作为分隔符,该字符串是通过把 str 的每个元素转换为字符串，再把这些字符串连接起来，在两个元素之间插入 separator 字符串而生成的

<script type="text/javascript">

var str=new Array(3)
str[0]="sri"
str[1]="good"
str[2]="hello"
//使用"-"分隔
document.write(str.join("-"))

</script>

在这里插入图片描述

pop：

pop() 方法将删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值，如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值

<script type="text/javascript">

var str=new Array(3)
str[0]="sri"
str[1]="good"
str[2]="hello"
//删除str的最后一个元素并将其输出
document.write(str.pop());
document.write("<br />");

//输出最新的str
document.write(str);

</script>

显示如下：

在这里插入图片描述

<script type="text/javascript">

var str=new Array(3)
str[0]="sri"
str[1]="good"
str[2]="hello"
//使用for循环依次删除数组中的元素
for(let i=0;i<3;i++){//注意：这里for循环的条件不能写成i<str.length，因为str.length的值是不断缩小的
    document.write(str.pop());
}
document.write("<br>");//换行
document.write("---------");
document.write("<br>");
document.write(str.pop());

</script>

显示如下：

在这里插入图片描述

push:

push() 方法可把它的参数顺序添加到 str 的尾部,它直接修改 str，而不是创建一个新的数组,push() 方法和 pop() 方法使用数组提供的先进后出栈的功能,该方法会改变数组的长度

提示：要想数组的开头添加一个或多个元素，请使用 unshift() 方法

<script type="text/javascript">
var str=new Array(3)
str[0]="sri"
str[1]="good"
str[2]="hello"
document.write("添加前：");
document.write(str);
document.write("<br>");
document.write(str.push("hi"));
document.write("<br>");
document.write("添加后：");
document.write(str);
</script>

显示如下：

在这里插入图片描述

reverse:

该方法会改变原来的数组，而不会创建新的数组

<script type="text/javascript">
var str=new Array(3)
str[0]="sri"
str[1]="good"
str[2]="hello"
document.write(str);
document.write("<br>");
document.write(str.reverse());
</script>

显示如下：

在这里插入图片描述

shift:

如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined 值,该方法不创建新数组，而是直接修改原有的 str,该方法会改变数组的长度

<script type="text/javascript">
var str=new Array(3)
str[0]="sri"
str[1]="good"
str[2]="hello"
document.write(str.shift());
document.write("<br>");
document.write(str);
</script>

slice:

str.slice(start,end)

start:必需,规定从何处开始选取

如果是负数，那么它规定从数组尾部开始算起的位置,也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推

end:可选,规定从何处结束选取

该参数是数组片断结束处的数组下标,如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素,如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素

最终产生一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素，该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()

<script type="text/javascript">
var str=new Array(3)
str[0]="sri"
str[1]="good"
str[2]="hello"
document.write(str);
document.write("<br>");
document.write(str.slice(1));
document.write("<br>");
document.write(str);
</script>

显示如下：

在这里插入图片描述

toSource：

表示对象的源代码，该原始值由 Array 对象派生的所有对象继承

toSource() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中

<script type="text/javascript">

function employee(name,job,born)
{
this.name=name;
this.job=job;
this.born=born;
}

var bill=new employee("Bill Gates","Engineer",1985);

document.write(bill.toSource());

</script>

只有 Gecko 核心的浏览器（比如 Firefox）支持该方法，也就是说 IE、Safari、Chrome、Opera 等浏览器均不支持该方法

toString:

当数组用于字符串环境时，JavaScript 会调用这一方法将数组自动转换成字符串但是在某些情况下，需要显式地调用该方法,数组中的元素之间用逗号分隔

<script type="text/javascript">
var array=new Array();
array[0]="hello";
array[1]="hi";
array[2]="siri";
document.write(array.toString());
</script>

显示如下：

在这里插入图片描述

unshift：将会返回新数组的长度

unshift() 方法将把它的参数插入 原数组 的头部，并将已经存在的元素顺次地移到较高的下标处，以便留出空间

该方法的第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素 1，以此类推…

请注意，unshift() 方法不创建新的创建，而是直接修改原有的数组,因此该方法会改变数组的长度

注：unshift() 方法无法在 Internet Explorer 中正确地工作！

<script type="text/javascript">
var array=new Array();
array[0]="hello";
array[1]="hi";
array[2]="siri";
document.write(array.unshift("jon"));
document.write("<br>");
document.write(array);
</script>

显示如下：

在这里插入图片描述

valueOf() ：

方法返回 Array 对象的原始值，该原始值由 Array 对象派生的所有对象继承，valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中

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

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

相关文章

vue2面试题持续更新。。。

vue2面试题持续更新。。。

文章目录1、vue 修改数据页面不重新渲染数组/对象的响应式 &#xff0c;vue 里面是怎么处理的&#xff1f;2、生命周期Vue 生命周期都有哪些&#xff1f;父子组件生命周期执行顺序3、watch 和 computed 的区别4、组件通信&#xff08;组件间传值&#xff09;5、$nextTick6、修饰…
阅读更多...
postman常用变量总结

postman常用变量总结

一、变量分类环境变量&#xff1a;只在所属环境内使用&#xff1b;全局变量&#xff1a;整个postman中全部接口皆可使用该变量&#xff1b;集合变量&#xff1a;只在设置的集合中可使用&#xff0c;且与环境无关&#xff1b;局部变量数据变量二、环境变量设置方式方式一方式二方…
阅读更多...
网络知识详解之：HTTP协议基础

网络知识详解之：HTTP协议基础

网络知识详解之&#xff1a;HTTP协议基础 计算机网络相关知识体系详解 网络知识详解之&#xff1a;TCP连接原理详解网络知识详解之&#xff1a;HTTP协议基础网络知识详解之&#xff1a;HTTPS通信原理剖析&#xff08;对称、非对称加密、数字签名、数字证书&#xff09;网络知…
阅读更多...
第三章.逻辑回归—逻辑回归

第三章.逻辑回归—逻辑回归

第三章.逻辑回归 3.1 逻辑回归&#xff08;Logistic Regression&#xff09; 线性回归以及非线性回归是用来处理回归问题的&#xff0c;而逻辑回归是用来处理分类问题的。 1.应用场景&#xff1a; 1).分类&#xff1a; 垃圾邮件分类预测肿瘤是良性还是恶行预测某人的信用是好…
阅读更多...
ITIL知识管理分析及如何实施

ITIL知识管理分析及如何实施

什么是知识管理 知识管理是在 IT 服务台内收集、分析、存储和共享知识的过程。它旨在帮助服务台团队在整个使用寿命期间做出正确的决策 通过有效控制和处理信息流来循环和事件解决过程。 ITIL 4将知识管理定义为负责向以下机构提供知识的一个中央流程 所有其他IT 服务管理 &a…
阅读更多...
linux / Generic Netlink

linux / Generic Netlink

一、概述 Generic Netlink 是内核专门为了扩展 netlink 协议簇而设计的“通用netlink协议簇”。由于 netlink 协议最多支持 32 个协议簇&#xff0c;目前 Linux4.1 的内核中已经使用其中 21 个&#xff0c;对于用户需要定制特殊的协议类型略显不够&#xff0c;而且用户还需自行…
阅读更多...
SHELL基本知识超级详解

SHELL基本知识超级详解

目录 shell基本知识 1&#xff0c;为什么学习和使用Shell编程 2&#xff0c; shell的起源 3&#xff0c;shell的功能 4&#xff0c;shell的分类 5&#xff0c; shell脚本的基本元素 6&#xff0c; shell脚本编写规范 7&#xff0c;shell脚本的执行方式 8&#xff0c; 执…
阅读更多...
JavaScript 类的继承

JavaScript 类的继承

通过原型链的方式继承 通过实例化一个构造函数&#xff0c;使字类的原型指向父类的实例&#xff0c;字类就可以调用到父类的属性和方法 function Parent() {this.parentName 父亲;this.getParentName function () {console.log("parent name is: %s", this.paren…
阅读更多...
剑指 Offer 第13天 第14天

剑指 Offer 第13天 第14天

目录 剑指 Offer 21. 调整数组顺序使奇数位于偶数前面 剑指 Offer 57. 和为s的两个数字 剑指 Offer 58 - I. 翻转单词顺序 剑指 Offer 12. 矩阵中的路径 面试题13. 机器人的运动范围 剑指 Offer 21. 调整数组顺序使奇数位于偶数前面 输入一个整数数组&#xff0c;实现一个函…
阅读更多...
maven基础-关于什么是maven、如何安装以及在Eclipse中的使用等等

maven基础-关于什么是maven、如何安装以及在Eclipse中的使用等等

本文是向大家介绍项目管理工具maven的基础使用&#xff0c;它能够实现项目构建打包共享&#xff0c;能够实现自动清理、编译、测试、报告等提高开发效率。一、为什么使用Maven这样的构建工具【why&#xff1f;】二、maven是什么【what&#xff1f;】三、安装maven四、第一个mav…
阅读更多...
SpringCloud_02

SpringCloud_02

注意&#xff1a; spring:application:name: userserviceprofiles:active: devcloud:nacos:server-addr: localhost:8848config:file-extension: yaml这里的name如果对应的nacos只有默认的命名空间&#xff0c;就直接写入服务名&#xff0c; 如果有其他的命名空间&#xff0c;…
阅读更多...
windows 10使用Pycharm从0到1搭建一个QQ聊天机器人

windows 10使用Pycharm从0到1搭建一个QQ聊天机器人

文章目录选择Python环境安装nb-cli配置Go-cqhttp大工告成&#xff01;选择Python环境 Nonebot2官方说&#xff0c;python版本要大于3.8&#xff0c;推荐大家使用虚拟环境&#xff0c;在Poetry、venv、Conda选择一个自己熟悉的即可。 安装nb-cli pip install -i https://pypi…
阅读更多...
2-3-1-1、MySQL相关变种及体系结构

2-3-1-1、MySQL相关变种及体系结构

目录与MySQL有关的数据库DrizzleMariaDBPercona ServerPostgre SQLSQLiteMySQL体系结构简介连接池管理工具和服务SQL 接口解析器存储引擎、文件系统连接层Server层&#xff08;SQL处理层&#xff09;缓存缓存弃用的原因存储引擎层MySQL 官方引擎概要InnoDB 存储引擎MylSAM 存储…
阅读更多...
Linux常用命令——rexec命令

Linux常用命令——rexec命令

在线Linux命令查询工具(http://www.lzltool.com/LinuxCommand) rexec 运程执行Linux系统下命令 补充说明 rexec命令用于在指定的远程Linux系统主机上执行命令&#xff0c;向远程rexec服务器发出执行命令的请求。 rexec命令通过检查$HOME/.netrc文件&#xff08;包含远程主机…
阅读更多...
安装NLTK出现11004和11006错误

安装NLTK出现11004和11006错误

出现11404的错误 原因是因为访问github的ip地址出现错误 解决方案&#xff1a; 打开C:->Windows->System32->drivers->etc->host, 打开host文件。 在文件最后添加185.199.108.133 raw.githubusercontent.com&#xff0c;即可解决 可以查看raw.githubusercont…
阅读更多...
Sublime Text运行C和C++程序

Sublime Text运行C和C++程序

Sublime Text 是一款当下非常流行的文本编辑器&#xff0c;其功能强大&#xff08;提供有众多的插件&#xff09;、界面简洁、还支持跨平台使用&#xff08;包括 Mac OS X、Linux 和 Windows&#xff09;。 在程序员眼中&#xff0c;Sublime Text 不仅仅是一个文本编辑器&…
阅读更多...
文本处理以及求相似度

文本处理以及求相似度

常规操作。先读取文档 ## 1. 分词 &#xff0c; 清洗关键词&#xff0c; # # 删除 特殊字符 # PATTERN r[?|$|&|*|%||(|)|~] # text re.sub(PATTERN, r, text)# string manipulation libs import re import string import nltk from nltk.corpus impor…
阅读更多...
Eureka、Ribbon、Nacos之初识微服务（一）

Eureka、Ribbon、Nacos之初识微服务（一）

一.微服务技术栈二.服务架构1.1单体架构1.2分布式架构1.3微服务技术对比1.4服务提供者与消费者&#xff08;相对&#xff09;服务提供者:暴露接口给其它微服务调用服务消费者:调用其它微服务提供的接口提供者与消费者角色其实是相对的三.Eureka注册中心1.1Eureka的作用Eureka自…
阅读更多...
美团动态线程池实践思路，开源了

美团动态线程池实践思路，开源了

背景 「使用线程池 ThreadPoolExecutor 过程中你是否有以下痛点呢&#xff1f;」 ❝ 1.代码中创建了一个 ThreadPoolExecutor&#xff0c;但是不知道那几个核心参数设置多少比较合适 2.凭经验设置参数值&#xff0c;上线后发现需要调整&#xff0c;改代码重启服务&#xff0c;…
阅读更多...
java职工工资管理系统(GUI+无数据库)使用java制作

java职工工资管理系统(GUI+无数据库)使用java制作

当年大一的课程设计，欢迎大家参考借鉴！ 二、系统实现 1.登录界面 创建容器，把相应得组件设置后放入容器。如：密码、文本框、用户、按钮等组件。 设置组件位置使其更加美观（如下图）。账号:root 密码：123 2.系统界面 在查询窗口输入工号，监听模块识别并在文件内查找与工…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023