文档章节

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

林祺泰
 林祺泰
发布于 2017/08/31 12:53
字数 1201
阅读 4
收藏 0
点赞 0
评论 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
06/19
0
0
细说JavaScript数据类型及转换

细说JavaScript数据类型及转换 JavaScript数据类型 1.Boolean(布尔) 布尔:(值类型)var b1=true;//布尔类型 2.Number(数字) 数值:(值类型)var n1=3.1415926;//数值类型 n1.toFixed...

开元中国2015
2015/07/13
0
0
JavaScript中call()与apply()有什么区别?

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

小微
2012/08/27
0
1
javascript与php数据交换之json

这两天js跟php数据传递弄伤心了,特意整理一些资料,做个小结! json是js的一种数据格式,可以直接被js解析,当我们在结合php和javascript实现某些功能时,经常会用到它。php无法直接读取jso...

The-duke
2013/07/17
0
3
[JavaScript]-Array构造的数组使用map为何失效?

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

xiaoLoo
06/27
0
0
js与php在数组与对象之间的差异

摘要:js和php都是弱类型语言,他们都支持跨平台,然后数据在使用时,都不需要定义类型。有点类似于c++的函数模板,自动判断类型。但他们还是有挺多区别的,下面简单的介绍下js和php在数组与...

魏邪乎
2014/07/21
0
0
mysqludf_json将关系数据以JSON编码

前言 sphinx2.1版本引入了json属性,该如何构建json格式数据呢?mysql触发器与gearman结合应用时,只能向gearman worker传递单一的字符串参数,如果要将mysql表中的某些列的数据传递给worke...

NorthBoy
2013/08/29
0
0
《JavaScript权威指南》笔记(二)

第二篇笔记的内容主要涉及:数据类型转换,函数、对象、数组的创建以及null与undefined的比较。 1. javascript中类型转换的方法: (1)数字-->字符串: number+" "; String(number); number...

小微
2012/08/28
0
7
JavaScript中call()与apply()区别

我有时发现有道云笔记其中有段代码用到了apply方法用于递归实现数组的展开。可是我不懂这个函数的用法,因此查了一下,将资料整理如下。 Javascript的每个Function对象中有一个apply方法: ...

唐俊-
2013/12/30
0
0
Array构造的数组使用map为何失效?

译者按: Array函数构造的数组没有初始化索引,无法使用map函数。 原文: Here’s Why Mapping a Constructed Array in JavaScript Doesn’t Work 译者: Fundebug 为了保证可读性,本文采用意...

Fundebug
06/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

百度云iOS架构师在职场中的忠告

1.工具不能代替思考 在我多年的咨询工作和与许多组织和管理者的共事中,我发现了修复问题的共同套路,那就是管理人员相信工具可以“解决”给出的问题。当问题域被理解透彻,并且不可能有很多...

_小迷糊
20分钟前
0
0
Java基础——异常

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 异常处理: 可以挖很多个陷阱,但是不要都是一样...

凯哥学堂
33分钟前
0
0
180723-Quick-Task 动态脚本支持框架之结构设计篇

文章链接:https://liuyueyi.github.io/hexblog/2018/07/23/180723-Quick-Task-动态脚本支持框架之结构设计篇/ Quick-Task 动态脚本支持框架之结构设计篇 相关博文: 180702-QuickTask动态脚本...

小灰灰Blog
36分钟前
0
0
SBT 常用开发技巧

SBT 一直以来都是 Scala 开发者不可言说的痛,最主要的原因就是官方文档维护质量较差,没有经过系统的、循序渐进式的整理,导致初学者入门门槛较高。虽然也有其它构建工具可以选择(例如 Mill...

joymufeng
41分钟前
0
0
HBase in Practice - 性能、监控及问题解决

李钰(社区ID:Yu Li),阿里巴巴计算平台事业部高级技术专家,HBase开源社区PMC&committer。开源技术爱好者,主要关注分布式系统设计、大数据基础平台建设等领域。连续4年基于HBase/HDFS设计和...

中国HBase技术社区
41分钟前
1
0
ES18-JAVA API 批量操作

1.批量查询 Multi Get API public static void multiGet() {// 批量查询MultiGetResponse response = getClient().prepareMultiGet().add("my_person", "my_index", "1")// 查......

贾峰uk
46分钟前
0
0
SpringBoot2.0使用health

1,引入actuator <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-actuator</artifactId></dependency> 2,application.properties ......

暗中观察
53分钟前
0
0
阿里巴巴Java开发规约

###编程规约 命名风格 【强制】代码中的命名均不能以下划线或美元符号开始,也不能以下划线或美元符号结束 【强制】代码中的命名严禁使用拼音与英文混合的方式,更不允许直接使用中文的方式。...

简心
58分钟前
0
0
如何用TypeScript来创建一个简单的Web应用

转载地址 如何用TypeScript来创建一个简单的Web应用 安装TypeScript 获取TypeScript工具的方式: 通过npm(Node.js包管理器) npm install -g typescript 构建你的第一个TypeScript文件 创建...

durban
今天
0
0
分享好友,朋友圈自定义分享链接无效

这个问题是微信6.5.6版本以后,修改了分享规则:分享的连接必须在公众号后台设定的js安全域名内

LM_Mike
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部