JavaScript Array 数组对象实例集合

news2024/11/29 12:40:38

文章目录

  • JavaScript Array 数组对象实例集合
    • 创建数组
    • 合并两个数组 - concat()
    • 合并三个数组 - concat()
    • 用数组的元素组成字符串 - join()
    • 删除数组的最后一个元素 - pop()
    • 数组的末尾添加新的元素 - push()
    • 反转一个数组中的元素的顺序 - reverse()
    • 删除数组的第一个元素 - shift()
    • 从一个数组中的选择元素 - slice()
    • 数组排序（按字母顺序升序）- sort()
    • 数字排序（按数字顺序升序）- sort()
    • 数字排序（按数字顺序降序）- sort()
    • 在数组的第2位置添加一个元素 - splice()
    • 转换数组到字符串 -toString()
    • 在数组的开头添加新元素 - unshift()

JavaScript Array 数组对象实例集合

在这里插入图片描述

创建数组

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<script>
var i;
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
for (i=0;i<mycars.length;i++){
	document.write(mycars[i] + "<br>");
}
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述

合并两个数组 - concat()

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<script>
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai);
document.write(children);
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述

合并三个数组 - concat()

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<script>
var parents = ["Jani", "Tove"];
var brothers = ["Stale", "Kai Jim", "Borge"];
var children = ["Cecilie", "Lone"];
var family = parents.concat(brothers, children);
document.write(family);
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述

用数组的元素组成字符串 - join()

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<p id="demo">点击按钮将数组作为字符串输出。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	var x=document.getElementById("demo");
	x.innerHTML=fruits.join();
}
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述

删除数组的最后一个元素 - pop()

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<p id="demo">单击按钮删除数组的最后一个元素。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.pop();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

数组的末尾添加新的元素 - push()

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<p id="demo">单击按钮给数组添加新的元素。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.push("Kiwi")
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

反转一个数组中的元素的顺序 - reverse()

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<p id="demo">单击按钮将数组反转排序。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.reverse();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

删除数组的第一个元素 - shift()

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<p id="demo">单击按钮删除数组的第一个元素。</p>
<p id="demo2"></p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	var delell = fruits.shift();
	var x=document.getElementById("demo");
	x.innerHTML= '删除后数组为：' +  fruits;
	document.getElementById("demo2").innerHTML= '删除的元素是：' +  delell;
}
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

从一个数组中的选择元素 - slice()

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<p id="demo">点击按钮截取数组下标 1 到 2 的元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
	var citrus = fruits.slice(1,3);
	var x=document.getElementById("demo");
	x.innerHTML=citrus;
}
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述

数组排序（按字母顺序升序）- sort()

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<p id="demo">单击按钮升序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.sort();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述

数字排序（按数字顺序升序）- sort()

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<p id="demo">单击按钮升序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var points = [40,100,1,5,25,10];
	points.sort(function(a,b){return a-b});
	var x=document.getElementById("demo");
	x.innerHTML=points;
}
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述

数字排序（按数字顺序降序）- sort()

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<p id="demo">单击按钮降序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var points = [40,100,1,5,25,10];
	points.sort(function(a,b){return b-a});
	var x=document.getElementById("demo");
	x.innerHTML=points;
}
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述

在数组的第2位置添加一个元素 - splice()

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<p id="demo">点击按钮向数组添加元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.splice(2,0,"Lemon","Kiwi");
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述

转换数组到字符串 -toString()

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<p id="demo">点击按钮将数组转为字符串并返回。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	var str = fruits.toString();
	var x=document.getElementById("demo");
	x.innerHTML= str;
}
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述

在数组的开头添加新元素 - unshift()

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<p id="demo">单击按钮在数组中插入元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.unshift("Lemon","Pineapple");
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>
<p><b>注意:</b> unshift()方法不能用于 Internet Explorer 8 之前的版本，插入的值将被返回成<em> undefined </em>。</p>
</body>
</html>
  • 运行效果
    在这里插入图片描述

在这里插入图片描述

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

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

相关文章

数字化时代，企业的商业模式建设

数字化时代，企业的商业模式建设

随着新一代信息化、数字化技术的应用&#xff0c;众多领域通过科技革命和产业革命实现了深度化的数字改造&#xff0c;进入到以数据为核心驱动力的&#xff0c;全新的数据处理时代&#xff0c;并通过业务系统、商业智能BI等数字化技术和应用实现了数据价值&#xff0c;从数字经…
阅读更多...
Vue项目打包部署总结配合nginx部署

Vue项目打包部署总结配合nginx部署

你可能还想了解&#xff1a;https://blog.csdn.net/weixin_52901235/article/details/129437990?spm1001.2014.3001.5502使用Vue做前后端分离项目时&#xff0c;通常前端是单独部署&#xff0c;用户访问的也是前端项目地址&#xff0c;因此前端开发人员很有必要熟悉一下项目部…
阅读更多...
C#要点技术(二) - Dictionary 底层源码剖析

C#要点技术(二) - Dictionary 底层源码剖析

Dictionary 底层代码我们知道 Dictionary 字典型数据结构&#xff0c;是以关键字Key 和 值Value 进行一一映射的。Key的类型并没有做任何的限制&#xff0c;可以是整数&#xff0c;也可以是的字符串&#xff0c;甚至可以是实例对象。关键字Key是如何映射到内存的呢&#xff1f;…
阅读更多...
【python】如何用python写一个下拉选择框和页签？

【python】如何用python写一个下拉选择框和页签？

文章目录前言ttk模块下拉选择框combobox下拉选择框2页签Notebook前言 python学习之路任重而道远&#xff0c;要想学完说容易也容易&#xff0c;说难也难。 很多人说python最好学了&#xff0c;但扪心自问&#xff0c;你会用python做什么了&#xff1f; 刚开始在大学学习c语言&…
阅读更多...
【玩转c++】stack和queue的介绍和模拟实现

【玩转c++】stack和queue的介绍和模拟实现

本期主题&#xff1a;list的讲解和模拟实现博客主页&#xff1a; 小峰同学分享小编的在Linux中学习到的知识和遇到的问题小编的能力有限&#xff0c;出现错误希望大家不吝赐stack的介绍和使用1.1.stack的介绍1. stack是一种容器适配器&#xff0c;专门用在具有后进先出操作的上…
阅读更多...
论文阅读-MGTAB: A Multi-Relational Graph-Based Twitter Account DetectionBenchmark

论文阅读-MGTAB: A Multi-Relational Graph-Based Twitter Account DetectionBenchmark

目录 摘要 1. 引言 2. 相关工作 2.1. 立场检测 2.2.机器人检测 3.数据集预处理 3.1.数据收集和清理 3.2.专家注释 3.3. 质量评估 3.4.特征分析 4. 数据集构建 4.1.特征表示构造 4.2.关系图构建 5. 实验 5.1.实验设置 5.2.基准性能 5.3训练集大小的研究 5.4 社…
阅读更多...
Matlab进阶绘图第6期—雷达图/蜘蛛图/星图

Matlab进阶绘图第6期—雷达图/蜘蛛图/星图

雷达图&#xff08;Radar Chart&#xff09;&#xff0c;又称星图、蜘蛛图、蜘蛛网图、网络图、Kiviat图等&#xff0c;是一种以从同一点开始的轴上表示的三个以上变量的二维图表的形式&#xff0c;来显示多变量数据的图形方法。 雷达图可以直观地对多维数据集目标对象的性能、…
阅读更多...
三步搞定OOM内存溢出，记一次使用Arthas处理OOM内存溢出问题java.lang.OutOfMemoryError: Java heap space

三步搞定OOM内存溢出，记一次使用Arthas处理OOM内存溢出问题java.lang.OutOfMemoryError: Java heap space

记一次OOM内存溢出问题修复java.lang.OutOfMemoryError: Java heap spaceOutOfMemoryError1.使用article找到问题线程2.分析线程运行链路&#xff0c;找出问题代码位置3.使用堆文件确认问题Arthas 是Alibaba开源的Java诊断工具&#xff0c;功能强大&#xff0c;操作简单 Arthas…
阅读更多...
我们为什么使用docker 优点 作用

我们为什么使用docker 优点 作用

1. 我们为什么使用Docker? 当我们在工作中&#xff0c;一款产品从开发设计到上线运行&#xff0c;其中需要开发人员和运维工程师&#xff0c;开发人员负责代码编写&#xff0c;开发产品&#xff0c;运维工程师需要测试环境&#xff0c;产品部署。这之间就会有分歧。 就好比我…
阅读更多...
信创国产化，试试 Solon v2.2.2

信创国产化，试试 Solon v2.2.2

Solon 是一个高效的 Java 应用开发框架&#xff1a;更快、更小、更简单。它不是 Spring、没有用 Servlet、也无关 JavaEE&#xff0c;是一个有自己接口标准的开放生态。可以为应用软件国产化提供支持&#xff0c;助力信创建设。 150来个生态插件&#xff0c;覆盖各种不同的应用…
阅读更多...
不知道Redis？来这里可以带你快速学完Redis，干活满满！

不知道Redis？来这里可以带你快速学完Redis，干活满满！

文章目录一、NoSQL的基本介绍二、为什么要使用NoSQL&#xff0c;难道SQL不够你用吗&#xff1f;三、Redis的基本概念四、Redis基本操作命令五、Redis五大数据类型及其操作命令六、三种特殊的数据类型及其操作命令七、 Redis事务八、Redis对key的监控九、Redis数据库密码十、Jed…
阅读更多...
广州蓝景分享—8大Web前端开发的趋势

广州蓝景分享—8大Web前端开发的趋势

2023 年 1 月 11 日&#xff0c;2022 年度 StateOfJS 调查结果正式公布&#xff01;StateOfJS 是前端生态圈中比较有影响力的且规模较大的数据调查。本文就来解读一下 2022 年 StateOfJS 的调查结果&#xff01; JavaScript 发展很快&#xff0c;但似乎 JavaScript 开发人员的…
阅读更多...
《传感器技术》考试学习笔记

《传感器技术》考试学习笔记

文章目录一、选择题二、简答题1.什么是传感器&#xff1f;传感器的共性是哪些&#xff1f;2.差动变气隙式传感器电感传感器的灵敏度推导过程是什么&#xff08;推导公式&#xff09;&#xff1f;与单极性进行比较它们的优缺点是哪些&#xff1f;3.霍尔传感器如何进行微位移测量…
阅读更多...
uniapp上实现左右关联滚动

uniapp上实现左右关联滚动

先看效果&#xff1a; 代码&#xff1a; <template><view class"container"><!-- 左侧fixed导航区域 --><view class"left"><viewv-for"item in leftList":key"item.id"class"left_item":class…
阅读更多...
JVM结构-类加载（类加载子系统，类加载的角色，类加载的过程，类加载器分类，双亲委派机制，类的主/被动使用）

JVM结构-类加载（类加载子系统，类加载的角色，类加载的过程，类加载器分类，双亲委派机制，类的主/被动使用）

JVM 结构-类加载2.1类加载子系统2.2类加载的角色2.3类加载的过程2.3.1加载2.3.2链接2.3.3初始化2.4类加载器分类2.4.1 引导类加载器2.4.2扩展类加载器2.4.3应用程序类加载器2.5双亲委派机制2.6类的主动/被动使用2.1类加载子系统 类加载器子系统负责从文件系统或者网络中加载 cl…
阅读更多...
【深度强化学习】(1) DQN 模型解析，附Pytorch完整代码

【深度强化学习】(1) DQN 模型解析，附Pytorch完整代码

大家好&#xff0c;今天和各位讲解一下深度强化学习中的基础模型 DQN&#xff0c;配合 OpenAI 的 gym 环境&#xff0c;训练模型完成一个小游戏&#xff0c;完整代码可以从我的 GitHub 中获得&#xff1a; https://github.com/LiSir-HIT/Reinforcement-Learning/tree/main/Mod…
阅读更多...
腾讯云新用户怎么配置服务器的方法教程

腾讯云新用户怎么配置服务器的方法教程

腾讯云新用户怎么配置服务器&#xff1f;腾讯云服务器配置选择攻略&#xff0c;先选择云服务器地域和可用区&#xff0c;然后根据用户使用场景需要平衡型、计算型或高IO型等特性来选择云服务器CVM实例规格&#xff0c;主机教程网来详细说下腾讯云服务器配置选择攻略。 1、腾讯云…
阅读更多...
政府工作报告连提9年科技创新 企业研发如何“又快又好”

政府工作报告连提9年科技创新 企业研发如何“又快又好”

今年的政府工作报告&#xff0c; “科技创新” 这一描述连续出现7次&#xff0c;这也是自2015年开始&#xff0c; “科技创新” 这一概念在全国“两会”政府工作报告中连续九年被提到。政府工作报告指出&#xff0c;科技政策要聚焦自立自强&#xff0c;完善新型举国体制&#x…
阅读更多...
ccc-pytorch-LSTM（8）

ccc-pytorch-LSTM（8）

文章目录一、LSTM简介二、LSTM中的核心结构三、如何解决RNN中的梯度消失/爆炸问题四、情感分类实战&#xff08;google colab&#xff09;一、LSTM简介 LSTM&#xff08;long short-term memory&#xff09;长短期记忆网络&#xff0c;RNN的改进&#xff0c;克服了RNN中“记忆…
阅读更多...
ArcGIS动态表格批量出图

ArcGIS动态表格批量出图

一.产品介绍&#xff1a;ArcGIS动态表格扩展模块Mapping and Charting Solutions&#xff0c;可用于插入动态表格&#xff0c;与数据驱动结合&#xff0c;出图效率无敌。注&#xff1a;优先选择arcgis10.2.2。 二、下载连接&#xff1a; https://www.xsoftnet.com/share/a001CX…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023