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 相关文章推荐
简单的JS多重继承示例
Mar 13 Javascript
一个cssQuery对象 javascript脚本实现代码
Jul 21 Javascript
js 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
js对象数组按属性快速排序
Jan 31 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
javascript确认框的三种使用方法
Dec 17 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 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 日期时间处理函数小结
2009/12/18 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
jQuery select的操作实现代码
2009/05/06 Javascript
Javascript 类与静态类的实现
2010/04/01 Javascript
javascript 弹出层组件(升级版)
2011/05/12 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
触屏中的JavaScript事件分析
2015/02/06 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
简介JavaScript中substring()方法的使用
2015/06/06 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
JS实现仿百度文库评分功能
2017/01/12 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
python将ip地址转换成整数的方法
2015/03/17 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
shell程序中如何注释
2012/01/28 面试题
行政主管岗位职责
2013/11/18 职场文书
2013年学期结束动员演讲稿
2014/01/07 职场文书
安全保证书范文
2014/04/29 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书
Java 定时任务技术趋势简介
2022/05/04 Java/Android