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与DropDownList 区别分析
Jan 01 Javascript
19个很有用的 JavaScript库推荐
Jun 27 Javascript
能说明你的Javascript技术很烂的五个原因分析
Oct 28 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
JavaScript实现输入框(密码框)出现提示语
Jan 12 Javascript
获取select的value、text值的简单示例(jquery与javascript)
Dec 07 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
JS实现闭包中的沙箱模式示例
Sep 07 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 Javascript
Vue 递归多级菜单的实例代码
May 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
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
用js做一个小游戏平台 (一)
2009/12/29 Javascript
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
javascript与CSS复习(三)
2010/06/29 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
JavaScript中的工厂函数(推荐)
2017/03/08 Javascript
微信小程序 向左滑动删除功能的实现
2017/03/10 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
python编写爬虫小程序
2015/05/14 Python
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
Python File readlines() 使用方法
2018/03/19 Python
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
英文简历中的自我评价
2013/10/06 职场文书
初三学生个人自我评定
2014/04/06 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
西柏坡导游词
2015/02/05 职场文书
主持人开场白台词
2015/05/29 职场文书
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang
新手必备Python开发环境搭建教程
2021/05/28 Python
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python
源码安装apache脚本部署过程详解
2022/09/23 Servers