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 相关文章推荐
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
Mar 19 Javascript
js实现星星打分效果的方法
Jul 05 Javascript
详解javascript中原始数据类型Null和Undefined
Dec 17 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 Javascript
JS实现对json对象排序并删除id相同项功能示例
Apr 18 Javascript
React 组件间的通信示例
Jun 14 Javascript
关于微信小程序bug记录与解决方法
Aug 15 Javascript
VUE写一个简单的表格实例
Aug 06 Javascript
Vue和React有哪些区别
Sep 12 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
我的论坛源代码(六)
2006/10/09 PHP
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
Jquery 常用方法经典总结
2010/01/28 Javascript
JS画线(实例代码)
2013/11/20 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
jqTransform美化表单
2015/10/10 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
Python中的index()方法使用教程
2015/05/18 Python
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
HTML5进度条特效
2014/12/18 HTML / CSS
幼儿园园长自我鉴定
2013/10/22 职场文书
信息部岗位职责
2013/11/12 职场文书
歌唱比赛主持词
2014/03/18 职场文书
收款授权委托书
2014/10/02 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
JavaScript实现栈结构详细过程
2021/12/06 Javascript