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代码
May 09 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
JS+CSS实现仿新浪微博搜索框的方法
Feb 24 Javascript
深入解析JavaScript中的立即执行函数
May 21 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
Sep 30 Javascript
jQuery内容筛选选择器实例代码
Feb 06 Javascript
seajs中最常用的7个功能、配置示例
Oct 10 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
Nov 22 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
vuex实现及简略解析(小结)
Mar 01 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 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导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
session 加入redis的实现代码
2016/07/15 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
对frameset、frame、iframe的js操作示例代码
2013/08/16 Javascript
js实现表格字段排序
2014/02/19 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
python简单的函数定义和用法实例
2015/05/07 Python
python字典基本操作实例分析
2015/07/11 Python
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
python3实现随机数
2018/06/25 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
在Pycharm terminal中字体大小设置的方法
2019/01/16 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
银行求职信个人范文
2013/12/16 职场文书
征婚广告词
2014/03/17 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
企业反腐倡廉心得体会
2015/08/15 职场文书
PHP 时间处理类Carbon
2022/05/20 PHP