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 相关文章推荐
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
javascript实现信息增删改查的方法
Jul 25 Javascript
JavaScript的面向对象编程基础
Aug 13 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 Javascript
Bootstrap实现默认导航栏效果
Sep 21 Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
VUE实现表单元素双向绑定(总结)
Aug 08 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
Dec 25 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 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/03/20 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
JS实现简易计算器
2020/02/14 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
Python迭代用法实例教程
2014/09/08 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
文科生自我鉴定
2014/02/15 职场文书
合作意向书模板
2014/03/31 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
小学班主任事迹材料
2014/12/17 职场文书
研究生论文答辩开场白
2015/05/27 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
Java实现多线程聊天室
2021/06/26 Java/Android
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript
JavaScript中isPrototypeOf函数
2021/11/07 Javascript
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers