首页 web前端 js教程 JavaScript中数组的合并以及排序实例详解

JavaScript中数组的合并以及排序实例详解

Jul 07, 2017 pm 03:05 PM
javascript js 排序

这篇文章主要介绍了JavaScript数组的合并以及排序实现示例,是JavaScript入门学习中的基础知识,需要的朋友可以参考下

合并两个数组 - concat()
源代码:

<!DOCTYPE html>
<html>
<body>

<p id="demo">点击按钮合并数组。</p>

<button onclick="myFunction()">点我</button>

<script>
function myFunction()
{
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var children = hege.concat(stale);
var x=document.getElementById("demo");
x.innerHTML=children;
}
</script>

</body>
</html>
登录后复制

测试结果:

Cecilie,Lone,Emil,Tobias,Linus
登录后复制

合并三个数组 - concat()
源代码:

<!DOCTYPE html>
<html>
<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>
登录后复制

测试结果:

Jani,Tove,Stale,Kai Jim,Borge,Cecilie,Lone
登录后复制

数组排序(按字母顺序升序)- sort()
源代码:

<!DOCTYPE html>
<html>
<body>

<p id="demo">Click the button to sort the array.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction()
{
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>

</body>
</html>
登录后复制

测试结果:

Apple,Banana,Mango,Orange
登录后复制

数字排序(按数字顺序升序)- sort()
源代码:

<!DOCTYPE html>
<html>
<body>

<p id="demo">Click the button to sort the array.</p>

<button onclick="myFunction()">Try it</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>
登录后复制

测试结果:

1,5,10,25,40,100
登录后复制

数字排序(按数字顺序降序)- sort()
源代码:

<!DOCTYPE html>
<html>
<body>

<p id="demo">Click the button to sort the array.</p>

<button onclick="myFunction()">Try it</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>
登录后复制

测试结果:

100,40,25,10,5,1
登录后复制

将一个数组中的元素的顺序反转排序 - reverse()
源代码:

<!DOCTYPE html>
<html>
<body>

<p id="demo">Click the button to reverse the order of the elements in the array.</p>

<button onclick="myFunction()">Try it</button>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];

function myFunction()
{
fruits.reverse();
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>

</body>
</html>
登录后复制

测试结果:

Mango,Apple,Orange,Banana
登录后复制

以上是JavaScript中数组的合并以及排序实例详解的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何在Windows 11/10中按拍摄日期对照片进行排序 如何在Windows 11/10中按拍摄日期对照片进行排序 Feb 19, 2024 pm 08:45 PM

本文将介绍如何在Windows11/10中根据拍摄日期对图片进行排序,同时探讨如果Windows未按日期排序图片应该如何处理。在Windows系统中,合理整理照片对于方便查找图像文件至关重要。用户可以根据不同的排序方式(如日期、大小和名称)来管理包含照片的文件夹。此外,还可以根据需要设置升序或降序排列,以便更灵活地组织文件。如何在Windows11/10中按拍摄日期对照片进行排序要按在Windows中拍摄的日期对照片进行排序,请执行以下步骤:打开图片、桌面或放置照片的任何文件夹在功能区菜单中,单

如何在Outlook中按发件人、主题、日期、类别、大小对电子邮件进行排序 如何在Outlook中按发件人、主题、日期、类别、大小对电子邮件进行排序 Feb 19, 2024 am 10:48 AM

Outlook提供了许多设置和功能,可帮助您更有效地管理工作。其中之一是排序选项,可让您根据需要对电子邮件进行分类。在这个教程中,我们将学习如何利用Outlook的排序功能,根据发件人、主题、日期、类别或大小等条件对电子邮件进行整理。这将让您更轻松地处理和查找重要信息,提高工作效率。MicrosoftOutlook是一个功能强大的应用程序,可以方便地集中管理您的电子邮件和日历安排。您可以轻松地发送、接收和组织电子邮件,而内置的日历功能也让您能够方便地跟踪您即将面临的活动和约会。如何在Outloo

推荐:优秀JS开源人脸检测识别项目 推荐:优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属,在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别,大大缩短了用户等待时间,提高了用户体验;弱势是:受到模型大小限制,其中准确率也有限。如何在web端使用js实现人脸检测呢?为了实现Web端人脸识别,需要熟悉相关的编程语言和技术,如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是,由于Web端的计

PHP与JS开发技巧:掌握绘制股票蜡烛图的方法 PHP与JS开发技巧:掌握绘制股票蜡烛图的方法 Dec 18, 2023 pm 03:39 PM

随着互联网金融的迅速发展,股票投资已经成为了越来越多人的选择。而在股票交易中,蜡烛图是一种常用的技术分析方法,它能够显示股票价格的变化趋势,帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧,带领读者了解如何绘制股票蜡烛图,并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前,我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人

wps怎么排序成绩高低 wps怎么排序成绩高低 Mar 20, 2024 am 11:28 AM

在我们的工作中,经常会用到wps软件,wps软件处理数据的方式方法是非常多的,而且函数功能也是非常强大的,我们经常用函数来求平均值,求汇总等,可以说只要是统计数据能用的方法,wps软件库里都已经为大家准备好了,下面我们要介绍的是wps怎么排序成绩高低的操作步骤,看完以后大家可以借鉴一下经验。1、首先打开需要排名的表格。如下图所示。  2、然后输入公式=rank(B2,B2:B5,0),一定要输入0。如下图所示。  3、输入完公式以后,按下电脑键盘上的F4键,这步操作是为了让相对引用变为绝对引用。

如何通过拖放在Power Query中对多列进行重新排序 如何通过拖放在Power Query中对多列进行重新排序 Mar 14, 2024 am 10:55 AM

在这篇文章中,我们将向你展示如何通过拖放在PowerQuery中对多列进行重新排序。通常,从各种来源导入数据时,列可能不是所需的顺序。重新排序列不仅允许您按照符合您的分析或报告需求的逻辑顺序排列它们,还可以提高数据的可读性,并加快过滤、排序和执行计算等任务。如何在Excel中重新排列多个列?在Excel中,重新排列列的方法有多种。您可以简单地选择列标题,然后将其拖动到所需位置。但是,当处理包含许多列的大表时,这种方法可能会变得繁琐。为了更高效地重新排列列,您可以使用增强查询编辑器。通过增强查询编

WPS表格怎么排序方便数据统计 WPS表格怎么排序方便数据统计 Mar 20, 2024 pm 04:31 PM

WPS是一款功能非常完善的办公软件,其中包括文字编辑、数据表格、PPT演示、PDF格式、流程图等功能。其中我们使用最多的就是文字、表格、演示,也是我们最熟悉的。我们在学习工作中,有时会使用WPS表格制作一些数据统计,比如学校里会对每个学生的成绩进行统计,那么多的学生如果我们要通过手动进行学生成绩排序的话,那真是让人头疼,其实我们可以不必烦心,因为我们的WPS表格中有排序这个功能为我们解决这一问题。接下来我们就一起学习一下WPS怎么排序的方法。方法步骤:第一步:首先我们需要打开需要排序的WPS表格

简易JavaScript教程:获取HTTP状态码的方法 简易JavaScript教程:获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest

See all articles