JS数组(Array)处理函数整理


Posted in Javascript onDecember 07, 2014

1、concat() 连接两个或更多的数组
该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
例如:

 <script type="text/javascript">

        var arr = [1, 2, 3];

        var arr1 = [11, 22, 33];

        document.write(arr.concat(4, 5, arr1));

 </script>

输出结果:
1,2,3,4,5,11,22,33

2、join()
把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
例如:

 <script type="text/javascript">

       var arr = ['item 1', 'item 2', 'item 3'];

       var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';

 </script>

list结果:

'<ul><li>item 1</li><li>item 2</li><li>item 3</li></ul>'
这是迄今为止最快的方法!使用原生代码(如 join()),不管系统内部做了什么,通常比非原生快很多。——James Padolsey, james.padolsey.com

3、pop() 删除并返回数组的最后一个元素
pop()方法将删除数组的最后一个元素,把数组长度减 1,并且返回它删除的元素的值。
如果数组已经为空,则pop()不改变数组,并返回undefined值
例如:

 <script type="text/javascript">

       var arr = ["George", "John", "Thomas"];

       document.write(arr + "<br/>");

       document.write(arr.pop() + "<br/>");

       document.write(arr);

 </script>

输出结果:
George,John,Thomas
Thomas
George,John

4、push() 向数组的末尾添加一个或更多元素,并返回新的长度
例如:

 <script type="text/javascript">

       var arr = ["George", "John", "Thomas"];

       document.write(arr + "<br/>");

       document.write(arr.push("James") + "<br/>");

       document.write(arr);

 </script>

输出结果:
George,John,Thomas
4
George,John,Thomas,James

 

5、unshift() 向数组的开头添加一个或更多元素,并返回新的长度
例如:

 <script type="text/javascript">

       var arr = ["George", "John", "Thomas"];

       document.write(arr + "<br/>");

       document.write(arr.unshift("James") + "<br/>");

       document.write(arr);

 </script>

输出结果:
George,John,Thomas
4
James,George,John,Thomas

 

6、reverse() 颠倒数组中元素的顺序
例如:

 <script type="text/javascript">

       var arr = ["George", "John", "Thomas"];

       document.write(arr + "<br/>");

       document.write(arr.reverse());

 </script>

输出结果:
George,John,Thomas
Thomas,John,George

7、shift() 删除并返回数组的第一个元素
例如:

 <script type="text/javascript">

       var arr = ["George", "John", "Thomas"];

       document.write(arr + "<br/>");

       document.write(arr.shift() + "<br/>");

       document.write(arr);

 </script>

输出结果:
George,John,Thomas
George
John,Thomas

8、slice(start,end) 从某个已有的数组返回选定的元素
请注意,该方法并不会修改数组,而是返回一个子数组
例如:

 <script type="text/javascript">

       var arr = ["George", "John", "Thomas"];

       document.write(arr + "<br/>");

       document.write(arr.slice(1) + "<br/>"); // 从第一个元素开始截取到 数组结尾

       document.write(arr);

 </script>

输出结果:
George,John,Thomas
John,Thomas
George,John,Thomas

9、sort() 对数组的元素进行排序
对数组的引用。请注意,数组在原数组上进行排序,不生成副本
该方法默认是按照字符编码(ASCII)的顺序进行排序的
例如:

 <script type="text/javascript">

     var arr = new Array(6);

     arr[0] = "John";

     arr[1] = "George";

     arr[2] = "Thomas";

     document.write(arr + "<br/>");

     document.write(arr.sort());

 </script>

输出结果:
John,George,Thomas
George,John,Thomas

再来看一个例子:

 <script type="text/javascript">

     var arr = new Array(6);

     arr[0] = 10

     arr[1] = 5

     arr[2] = 40

     arr[3] = 25

     arr[4] = 1000

     arr[5] = 1

     document.write(arr + "<br/>");

     document.write(arr.sort());

 </script>

输出结果:
10,5,40,25,1000,1
1,10,1000,25,40,5

我们可以看到,并非是按照我们认为的按数字大小排序,如果想按照数字大小排序,则需要改变默认的排序方式,自行指定排序规则。
如下:

 <script type="text/javascript">

     var arr = new Array(6);

     arr[0] = 10

     arr[1] = 5

     arr[2] = 40

     arr[3] = 25

     arr[4] = 1000

     arr[5] = 1

     document.write(arr + "<br/>");

     document.write(arr.sort(function (a, b) {return a - b;}));// 从大到小

 </script>

输出结果:
10,5,40,25,1000,1
1,5,10,25,40,1000
如果想要降序排列呢?
将排序规则改为:
function (a, b) {return b - a;}
就OK了

10、splice() 删除元素,并向数组添加新元素
splice() 方法与 slice() 方法的作用是不同的,splice() 方法会直接对数组进行修改
(1)删除指定范围的数组元素:

 <script type="text/javascript">

     var arr = new Array(6);

    arr[0] = "George"; 

    arr[1] = "John";

    arr[2] = "Thomas";

    arr[3] = "James";

    arr[4] = "Adrew";

    arr[5] = "Martin";

    document.write(arr + "<br/>");

    arr.splice(2, 3); // 删除第三个元素以后的三个数组元素(包含第三个元素)

    document.write(arr);

 </script>

输出结果:
George,John,Thomas,James,Adrew,Martin
George,John,Martin

(2)从指定下标开始插入指定元素(元素个数不限):

 <script type="text/javascript">

    var arr = new Array(6);

    arr[0] = "George";

    arr[1] = "John";

    arr[2] = "Thomas";

    arr[3] = "James";

    arr[4] = "Adrew";

    arr[5] = "Martin";

    document.write(arr + "<br/>");

    arr.splice(2, 0, "William","JACK"); // 在第三个元素之前插入"William","JACK"

    document.write(arr);

 </script>

输出结果:
George,John,Thomas,James,Adrew,Martin
George,John,William,JACK,Thomas,James,Adrew,Martin

(3)删除指定范围的数组元素,并用指定元素替换(元素个数不限):

 <script type="text/javascript">

    var arr = new Array(6);

    arr[0] = "George";

    arr[1] = "John";

    arr[2] = "Thomas";

    arr[3] = "James";

    arr[4] = "Adrew";

    arr[5] = "Martin";

    document.write(arr + "<br/>");

    arr.splice(2,3,"William","JACK"); // 删除第三个元素以后的三个数组元素(包含第三个元素),并用"William","JACK"进行替换

 document.write(arr);

 </script>

输出结果:
George,John,Thomas,James,Adrew,Martin
George,John,William,JACK,Martin
Javascript 相关文章推荐
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
Feb 03 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
js原型继承的两种方法对比介绍
Mar 30 Javascript
jQuery实现鼠标划过展示大图的方法
Mar 09 Javascript
JavaScript中的getTime()方法使用详解
Jun 10 Javascript
vue动态生成dom并且自动绑定事件
Apr 19 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
vue 中引用gojs绘制E-R图的方法示例
Aug 24 Javascript
JavaScript简单实现的仿微博留言功能示例
Jan 17 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 Javascript
vue组件暴露和.js文件暴露接口操作
Aug 11 Javascript
浅谈JS日期(Date)处理函数
Dec 07 #Javascript
AngularJS HTML编译器介绍
Dec 06 #Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 #Javascript
什么是 AngularJS?AngularJS简介
Dec 06 #Javascript
AngularJS入门教程(二):AngularJS模板
Dec 06 #Javascript
AngularJS入门教程(一):静态模板
Dec 06 #Javascript
AngularJS入门教程(零):引导程序
Dec 06 #Javascript
You might like
PHP学习之PHP表达式
2006/10/09 PHP
PHP时间戳 strtotime()使用方法和技巧
2013/10/29 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
jQuery设计思想
2017/03/07 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
使用Python实现简单的服务器功能
2017/08/25 Python
python matlibplot绘制3D图形
2018/07/02 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
Python字典对象实现原理详解
2019/07/01 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
Numpy之reshape()使用详解
2019/12/26 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
如何开启linux的ssh服务
2015/02/14 面试题
写给老师的表扬信
2014/01/21 职场文书
仓库管理员岗位职责
2014/03/19 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
主要领导对照检查材料
2014/08/26 职场文书
2015年工会工作总结
2015/03/30 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
python3操作redis实现List列表实例
2021/08/04 Python