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 相关文章推荐
jquery ajax提交表单数据的两种方式
Nov 24 Javascript
jQuery实现转动随机数抽奖效果的方法
May 21 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
ES6入门教程之Class和Module详解
May 17 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 Javascript
浅谈JS对象添加getter与setter的5种方法
Jun 09 Javascript
Vue中的$set的使用实例代码
Oct 08 Javascript
通过vue写一个瀑布流插件代码实例
Sep 07 Javascript
详解React 条件渲染
Jul 08 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+xslt在windows平台上
2006/10/09 PHP
php cookies中删除的一般赋值方法
2011/05/07 PHP
PHP Curl多线程原理实例详解
2013/11/06 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
2016/12/14 PHP
xtree.js 代码
2007/03/13 Javascript
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
JavaScript toFixed() 方法
2010/04/15 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
Vue实现固定定位图标滑动隐藏效果
2019/05/30 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
spyder常用快捷键(分享)
2017/07/19 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
Python 查看文件的编码格式方法
2017/12/21 Python
python2.x实现人民币转大写人民币
2018/06/20 Python
PHP基于phpqrcode类库生成二维码过程解析
2020/05/28 Python
Python爬虫爬取新闻资讯案例详解
2020/07/14 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
浙江文明网签名寄语
2014/01/18 职场文书
初中校园广播稿
2014/02/02 职场文书
新闻编辑专业毕业自荐书范文
2014/02/05 职场文书
小学语文国培感言
2014/03/04 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
故意伤害辩护词
2015/05/21 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS