文档章节

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

林祺泰
 林祺泰
发布于 2017/08/31 12:53
字数 1201
阅读 4
收藏 0

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

本文转载自:http://www.jb51.net/article/58250.htm

共有 人打赏支持
林祺泰
粉丝 0
博文 17
码字总数 2143
作品 0
温州
私信 提问
JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa
2018/06/19
0
0
[JavaScript]-Array构造的数组使用map为何失效?

[示例] 假设你需要生成一个从0到99的数组。你要怎么做呢?下面是一种解法: 看到这种使用传统的for循环的方式会有点不大习惯。事实上,各种高阶函数,像forEach, map, filter, reduce足以写出...

xiaoLoo
2018/06/27
0
0
JavaScript中call()与apply()有什么区别?

今天读《JavaScript权威指南》时发现其中有段代码用到了apply方法用于递归实现数组的展开。可是我不懂这个函数的用法,因此查了一下,将资料整理如下。 Javascript的每个Function对象中有一个...

小微
2012/08/27
0
1
JavaScript中Promise使用

定义 Promise对象用于包装异步函数执行结果,以便用同步的方式处理其结果。 promise 包含3种状态: pending: 初始状态 fulfilled: 完成状态 rejected: 失败状态 链式调用方法 then()返回一个...

王桥修道院副院长
01/12
0
0
精心收集的 95 个超实用的 JavaScript 代码片段( ES6+ 编写)

目录 Array 数组 Array concatenation (数组拼接) Array difference (数组比较) Array includes (数组包含) Array intersection (数组交集) Array remove (移除数组中的元素) Array sample ......

大灰狼的小绵羊哥哥
2018/11/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

jenkins 配置

1. ssh-keygen -t rsa 2. 配置 GitLab 用户 创建一个用户或选择一个已有用户,用来让 Jenkins 和 GitLab API 交互。这个用户将需要是全局的管理员或添加进每个组/工程,并作为成员。需要开发...

应如是
27分钟前
1
0
中台迷思

到处都在喊中台,到处都是中台,中台这个词在我看来已经被滥用了。 在有些人眼里:中台就是技术平台,像微服务开发框架、Devops平台、PaaS平台,容器云之类的,人们都叫它“技术中台”。 在有...

老道士
34分钟前
3
0
Linux命令参数解析

Linux命令参数 通过一个例子来理解什么是Linux命令参数。以Linux中常用的删除命令“rm”为例,输入“rm --help”可以看到如下信息,其中红色框内的就是命令参数。经常使用Linux对命令参数应该...

RongJinhui0
37分钟前
1
0
边缘节点服务ENS重磅升级 阿里云首次定义“边缘云计算”概念层层深入

摘要: 在这一横一纵之间,阿里云在2018年率先提供了基于运营商边缘节点和网络的弹性分布式算力资源平台,也就是边缘节点服务ENS,连接最后10公里的ENS可以帮助用户将计算、转发等业务下沉至...

阿里云云栖社区
42分钟前
2
0
阿里云 Aliplayer高级功能介绍(四):直播时移

基本介绍 时移直播基于常规的HLS视频直播,直播推流被切分成TS分片,通过HLS协议向播放用户分发,用户请求的m3u8播放文件中包含不断刷新的TS分片地址;对于常规的HLS直播而言,TS分片地址及相...

阿里云官方博客
45分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部