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 相关文章推荐
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
JavaScript 判断浏览器类型及版本
Feb 21 Javascript
在Windows上安装Node.js模块的方法
Sep 25 Javascript
这段js代码得节约你多少时间
Dec 20 Javascript
Jquery简单实现GridView行高亮的方法
Jun 15 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
简单谈谈js的数据类型
Sep 25 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
微信小程序textarea层级过高的解决方法
Mar 04 Javascript
微信小程序vant弹窗组件的实现方式
Feb 21 Javascript
JS实现简易贪吃蛇游戏
Aug 24 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
使用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里8个鲜为人知的安全函数分析
2014/12/09 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
javascript之水平横向滚动歌词同步的应用
2007/05/07 Javascript
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
js解决movebox移动问题
2016/03/29 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
记录一次websocket封装的过程
2020/11/23 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
Python的装饰器模式与面向切面编程详解
2015/06/21 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
Python tkinter常用操作代码实例
2020/01/03 Python
python绘制动态曲线教程
2020/02/24 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
小摄影师教学反思
2014/04/27 职场文书
小学校长开学致辞
2015/07/29 职场文书
宾馆安全管理制度
2015/08/06 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
CSS中Single Div 绘图技巧的实现
2021/06/18 HTML / CSS