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 相关文章推荐
关于图片按比例自适应缩放的js代码
Oct 30 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
Apr 29 Javascript
JS产生随机数的用法小结
Dec 10 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
对layer弹出框中icon数字参数的说明介绍
Sep 04 Javascript
JS立即执行的匿名函数用法分析
Nov 04 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
Oct 31 Javascript
详解JavaScript 中的批处理和缓存
Nov 19 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中利用XML技术构造远程服务(下)
2006/10/09 PHP
PHP脚本的10个技巧(1)
2006/10/09 PHP
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
使用JS 清空File控件的路径值
2013/07/08 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
jQuery的缓存机制浅析
2014/06/07 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
python网络编程学习笔记(四):域名系统
2014/06/09 Python
跟老齐学Python之关于类的初步认识
2014/10/11 Python
Python进阶之递归函数的用法及其示例
2018/01/31 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
python 实现识别图片上的数字
2019/07/30 Python
python实现代码统计程序
2019/09/19 Python
python绘制规则网络图形实例
2019/12/09 Python
python 实现两个线程交替执行
2020/05/02 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
C#的几个面试问题
2016/05/22 面试题
《美丽的公鸡》教学反思
2014/02/25 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
中学生逃课检讨书
2015/02/17 职场文书
2015年前台个人工作总结
2015/04/03 职场文书
详解Vue slot插槽
2021/11/20 Vue.js