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中mouseleave和mouseout的区别
Feb 17 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
JS优化与惰性载入函数实例分析
Apr 06 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 Javascript
详解VUE单页应用骨架屏方案
Jan 17 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 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
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
PHP5中使用mysqli的prepare操作数据库的介绍
2019/03/18 PHP
php session_decode函数用法讲解
2019/05/26 PHP
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
Jquery倒计时源码分享
2014/05/16 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
python中List的sort方法指南
2014/09/01 Python
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
python连接mongodb集群方法详解
2020/02/13 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
元旦晚会策划方案
2014/02/18 职场文书
高中生职业规划范文
2014/03/09 职场文书
个人校本研修方案
2014/05/26 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
飞越疯人院观后感
2015/06/09 职场文书
2016新年晚会开场白
2015/12/03 职场文书
基于CSS3画一个iPhone
2021/04/21 HTML / CSS
golang日志包logger的用法详解
2021/05/05 Golang
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫