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 来操作字符串(一些字符串函数)
Feb 15 Javascript
RGB颜色值转HTML十六进制(HEX)代码的JS函数
Apr 25 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 Javascript
jQuery AjaxUpload 上传图片代码
Feb 02 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
Apr 29 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
Sep 20 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
May 13 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 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/11/03 PHP
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
js关于命名空间的函数实例
2015/02/05 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
详解vue-router 路由元信息
2017/09/13 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
python 遍历列表提取下标和值的实例
2018/12/25 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
Python socket聊天脚本代码实例
2020/01/02 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
Python多线程的退出控制实现
2020/08/10 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
纽约JewelryAffairs珠宝店:精细金银时尚首饰
2017/02/05 全球购物
Coccinelle官网:意大利的著名皮具品牌
2019/05/15 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
2014年应届大学生自我评价
2014/01/09 职场文书
教师网络培训感言
2014/03/09 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
自荐信格式范文
2015/03/04 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server