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 相关文章推荐
Javascript注入技巧
Jun 22 Javascript
jquery 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
jquery判断checkbox(复选框)是否被选中的代码
Oct 20 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
Javascript实现跑马灯效果的简单实例
May 31 Javascript
解析jQueryEasyUI的使用
Nov 22 Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
vue实现动态列表点击各行换色的方法
Sep 13 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 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
咖啡的传说和历史
2021/03/03 新手入门
PHP+DBM的同学录程序(3)
2006/10/09 PHP
FCKeditor添加自定义按钮
2008/03/27 PHP
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
深入浅出php socket编程
2015/05/13 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
Laravel如何自定义command命令浅析
2019/03/23 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
基于JS脚本语言的基础语法详解
2017/07/22 Javascript
JS简单添加元素新节点的方法示例
2018/02/10 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
Python生成pdf文件的方法
2014/08/04 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
Python中浅拷贝copy与深拷贝deepcopy的简单理解
2018/10/26 Python
pyshp创建shp点文件的方法
2018/12/31 Python
Python基于WordCloud制作词云图
2019/11/29 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
python实现扫雷游戏
2020/03/03 Python
python exit出错原因整理
2020/08/31 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
Python之多进程与多线程的使用
2021/02/23 Python
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
CLR与IL分别是什么含义
2016/08/23 面试题
介绍一下mysql的日期和时间函数
2013/03/28 面试题
家长学校实施方案
2014/03/15 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers