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 处理网页内容的实现代码
Feb 15 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
Aug 01 Javascript
原生javascript实现无间缝滚动示例
Jan 28 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
Jun 25 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
微信小程序实现日历效果
Dec 28 Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 Javascript
微信小程序实现通讯录列表展开收起
Nov 18 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中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
2017/02/22 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
python多进程实现文件下载传输功能
2018/07/28 Python
python如何保证输入键入数字的方法
2019/08/23 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
学生励志演讲稿
2014/01/06 职场文书
培训讲师邀请函
2014/01/10 职场文书
中学生运动会入场词
2014/02/12 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
社区班子对照检查材料
2014/08/27 职场文书
2016年优秀少先队辅导员事迹材料
2016/02/26 职场文书
python中pycryto实现数据加密
2022/04/29 Python