JavaScript中数组的合并以及排序实现示例


Posted in Javascript onOctober 24, 2015

合并两个数组 - 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 相关文章推荐
jquery JSON的解析方式
Jul 25 Javascript
JavaScript中几种常见排序算法小结
Feb 22 Javascript
读jQuery之二(两种扩展)
Jun 11 Javascript
JS的replace方法介绍
Oct 20 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 Javascript
js编写trim()函数及正则表达式的运用
Oct 24 Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 Javascript
用js实现博客打赏功能
Oct 24 Javascript
canvas的神奇用法
Feb 03 Javascript
AngularJS日期格式化常见操作实例分析
May 17 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 #Javascript
js判断日期时间有效性的方法
Oct 24 #Javascript
JavaScript中日期的相关操作方法总结
Oct 24 #Javascript
JavaScript中Date对象的常用方法示例
Oct 24 #Javascript
js实现表单多按钮提交action的处理方法
Oct 24 #Javascript
JS实现状态栏跑马灯文字效果代码
Oct 24 #Javascript
JavaScript实现标题栏文字轮播效果代码
Oct 24 #Javascript
You might like
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
PHP中文分词的简单实现代码分享
2011/07/17 PHP
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
jQuery基于扩展简单实现倒计时功能的方法
2016/05/14 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
vue+iview动态渲染表格详解
2019/03/19 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
vue项目创建步骤及路由router
2020/01/14 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
python中redis的安装和使用
2016/12/04 Python
浅谈五大Python Web框架
2017/03/20 Python
Python面向对象编程基础解析(二)
2017/10/26 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
QML实现钟表效果
2020/06/02 Python
Keras 中Leaky ReLU等高级激活函数的用法
2020/07/05 Python
python中的yield from语法快速学习
2020/11/06 Python
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
12.4法制宣传日标语
2014/10/08 职场文书
欠条格式范本
2015/07/03 职场文书
经销商会议开幕词
2016/03/04 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang