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 相关文章推荐
javascript 函数调用规则
Aug 26 Javascript
字符串的replace方法应用浅析
Dec 06 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 Javascript
详解javascript实现瀑布流列式布局
Jan 29 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
js获取指定时间的前几秒
Apr 05 Javascript
详解webpack运行Babel教程
Jun 13 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 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读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
PHP7.1新功能之Nullable Type用法分析
2016/09/26 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
javascript中的对象创建 实例附注释
2011/02/08 Javascript
JavaScript中的细节分析
2012/06/30 Javascript
JavaScript实现复制功能各浏览器支持情况实测
2013/07/18 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python处理中文编码和判断编码示例
2014/02/26 Python
Python 文件管理实例详解
2015/11/10 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
Python中的heapq模块源码详析
2019/01/08 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
浅谈python多线程和多线程变量共享问题介绍
2020/04/17 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
英国独特礼物想法和个性化礼物网站:notonthehighstreet.com
2018/04/16 全球购物
企业文化标语大全
2014/06/10 职场文书
面试自我评价范文
2014/09/17 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
小学教育见习报告
2014/10/31 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书