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 使用手册(一)
Sep 23 Javascript
javascript 日期常用的方法
Nov 11 Javascript
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
extjs render 用法介绍
Sep 11 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
javascript框架设计之种子模块
Jun 23 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
浅谈angular懒加载的一些坑
Aug 20 Javascript
微信小程序实现日历效果
Dec 28 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 Javascript
如何理解Vue简单状态管理之store模式
May 15 Vue.js
使用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 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
PHP-redis中文文档介绍
2013/02/07 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
详解php中serialize()和unserialize()函数
2017/07/08 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
js展开闭合效果演示代码
2013/07/24 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
公务员个人自我评价分享
2013/11/06 职场文书
新闻专业推荐信范文
2013/11/20 职场文书
水务局局长岗位职责
2013/11/28 职场文书
八年级英语教学反思
2014/01/09 职场文书
职业生涯规划设计步骤
2014/01/12 职场文书
制作部班长职位说明书
2014/02/26 职场文书
银行内勤岗位职责
2014/04/09 职场文书
学生评语大全
2014/04/18 职场文书
法制宣传标语
2014/06/23 职场文书
打架检讨书
2015/01/27 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书