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 相关文章推荐
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
JS延时器提示框的应用实例代码解析
Apr 27 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
用vue构建多页面应用的示例代码
Sep 20 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
vue-next/runtime-core 源码阅读指南详解
Oct 25 Javascript
js实现超级玛丽小游戏
Mar 18 Javascript
5个实用的JavaScript新特性
Jun 16 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
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
理解javascript async的用法
2017/08/22 Javascript
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
javascript将非数值转换为数值
2018/09/13 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
Flask框架配置与调试操作示例
2018/07/23 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
python使用wxpy轻松实现微信防撤回的方法
2019/02/21 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
初学者学习Python好还是Java好
2020/05/26 Python
一文读懂Python 枚举
2020/08/25 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
Python之多进程与多线程的使用
2021/02/23 Python
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
Europcar德国:全球汽车租赁领域的领导者
2018/08/15 全球购物
公务员年总结的自我评价
2013/10/25 职场文书
工厂保安员岗位职责
2014/01/31 职场文书
小学班主任事迹材料
2014/12/17 职场文书
个人委托函范文
2015/01/29 职场文书
总经理检讨书范文
2015/02/16 职场文书
红十字会救护培训简讯
2015/07/20 职场文书
电力安全教育培训心得体会
2016/01/11 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
Win10系统下配置Java环境变量
2021/06/13 Java/Android