内容要点:

一.join()

Array.join()方法将数组中所有元素都转化为字符串并连接在一起,返回最后生产的字符串。

可以指定一个可选的字符串在生产的字符串中来分隔数组的各个元素。如果不指定分隔符,默认使用逗号。

var a = [1,2,3];  //创建一个包含三个元素的数组

a.join();        //=>"1,2,3"

a.join(" ");    //=>"1 2 3"

a.join("");    //=>"123"

var b = new Array(10); //长度为10的空数组

b.join('-')  //=》'---------':9个连字组成的字符串

二.reverse()

Array.reverse()方法将数组中的元素颠倒顺序,返回逆序的数组。它采取了替换;换句话说,它不通过重新排列的元素创建新的数组,而是在原先的数组中重新排列它们。例如:

var a = [1,2,3];

a.reverse().join();  //"3,2,1",并且现在a是[3,2,1]

三.sort()

Array.sort()方法将数组中的元素排序并返回排序后的数组。当时,数组元素以字母表顺序排序(如有必要将临时转化为字符串进行比较):

var a = new Array("banana","cherry","apple");

a.sort();

var s = a.join(","); //s = = "apple,banana,cherry"

如果数组包含undefined元素,它们会被排到数组的尾部。

为了按照其他方式而非字母表顺序进行数组排序,必须给sort()方法传递一个比较函数。该函数决定了它的两个参数在排好序的数组中的先后顺序。

假设第一个参数应该在前,比较函数应该返回一个小于0的数值。反之,假设第一个参数应该在后,函数应该返回一个大于0的数值。并且,假设两个值相等(也就是说,它们的顺序无关紧要),函数应该返回0.

例如:用数组大小而非字母表顺序进行数组排序,代码如下:

var a=[33,4,1111,222];

var b=a.sort();

console.log(b);  //字母表顺序:1111,222,33,4

var c=a.sort(function(a,b){        //数值排序:4,33,222,1111

return a-b;               //根据顺序,返回负数,0,正数

});

console.log(c);  //数值排序:4,33,222,1111

a.sort(function(a,b){return b-a}); //数值大小相反的顺序

注意:这里使用匿名函数表达式非常方便。既然比较函数只使用一次,就没必要给它们命名了。

另外一个数组元素排序的例子,也许需要对一个字符串数组执行不区分大小写的字母表排序,比较函数首先将参数都转化为小写字符串(使用toLowerCase()方法),再开始比较:

a = ['ant','Bug','cat','Dog']

a.sort();   //区分大小写的排序:['Bug','Dog','ant','cat']

a.sort(function(s,t){  //不区分大小写的排序

var a = s.toLowerCase();

var  b = t.toLowerCase();

if(a<b)  return -1;

if(a > b) return 1;

return 0;

});    //=>['ant','Bug','cat','Dog']

四.concat()

Array.concat()方法创建并返回一个新数组,它的元素包括调用concat()的原始数组的元素和concat()的每个参数。

如果这些参数中的任何一个自身是数组,则连接的是数组的元素,而非数组本身。

但要注意,concat()不会递归扁平化数组的数组。concat()也不会修改调用的数组。

例如:

var a = [1,2,3];

a.concat(4,5)  //返回[1,2,3,4,5]

a.concat([4,5]) //返回[1,2,3,4,5]

a.concat([4,5],[6,7]) //返回[1,2,3,4,5,6,7]

a.concat(4,[5,[6,7]]) //返回[1,2,3,4,5,[6,7]]

五.slice()

Array.slice()方法返回指定数组的一个片段或子数组。它的两个参数分别指定了片段的开始和结束的位置。

返回的数组包含第一个参数指定的位置和所有到但不含第二个参数指定的位置之间的所有数组元素。

如果只指定一个参数,返回的数组将包含从开始位置到数组结尾的所有元素。

如参数中出现负数,它表示相对于数组中最后一个元素的位置。 例如,参数-1指定了最后一个元素,而-3指定了倒数第三个元素。

注意,slice()不会修改调用的数组。

例如:

var a = [1,2,3,4,5];

a.slice(0,3);  //返回[1,2,3]

a.slice(3);  //返回[4,5]

a.slice(1,-1); //返回[2,3,4]

a.slice(-3,-2); //返回[3]

六.splice()

Array.splice()方法是数组中插入或删除元素的通用方法。不同于slice()和concat(),splice()会修改调用的数组。

注意,splice()和slice()拥有非常相似的名字,但它们的功能却有本质的区别

splice()能够从数组中删除元素、插入元素到数组中或者同时完成这两种操作。

在插入或删除点之后的数组元素会根据需要增加或减小它们的索引值,因此数组的其他部分仍然保持连续的.

splice()的第一个参数指定了插入和(或)删除的起始位置。第二个参数指定了应该从数组中删除的元素的个数。

如果省略第二个参数,从起始点开始到数组结尾的所有元素都将被删除。

splice()返回一个由删除元素组成的数组,或者如果没有删除元素就返回一个空数组。

例如:

var a = [1,2,3,4,5,6,7,8];

a.splice(4); //返回[5,6,7,8];a是[1,2,3,4]

a.splice(1,2); //返回[2,3];a是[1,4]

a.splice(1,1); //返回[4],a是[1]

splice()的前两个参数指定了需要删除的数组元素。紧随其后的任意个数的参数指定了需要插入到数组中的元素,从第一个参数指定的位置开始插入。

例如:

var a = [1,2,3,4,5];

a.splice(2,0,'a','b');  //返回[],a是[1,2,'a','b',3,4,5]

a.splice(2,2,[1,2],3);  //返回['a','b',[1,2],3,3,4,5]

注意:区别于concat(),splice()会插入数组本身而非数组的元素。

八.push()和pop()

push()和pop()方法允许将数组当做栈来使用。

push()方法在数组的尾部添加一个或多个元素,并返回数组新的长度。

pop()方法则相反:它删除数组的最后一个元素,减少数组长度并返回它删除的值。

注意,两个方法都修改并替换原始数值而非生成一个修改版的新数组。

组合使用push()和pop()能够用js数组实现先进后出的栈。

例如:

var stack = [];

stack.push(1,2); //stack:[1,2]  返回2

stack.pop(); //stack:[1] 返回2

stack.push(3); //stack:[1,3] 返回2

stack.pop();    //stack:[1] 返回3

stack.push([4,5]); //stack:[1,[4,5]] 返回2

stack.pop()      //stack:[1] 返回[4,5]

stack.pop();     //stack:[]  返回1

九.unshift()和shift()

unshift()和shift()方法的行为非常类似,不一样的是前者是在数组的头部而非尾部进行元素的插入和删除操作。

unshift()在数组的头部添加一个或多个元素,并将已存在的元素移除到更高索引的位置来获得足够的空间,最后返回数组新的长度。

shift()删除数组的第一个元素并将其返回,然后把所有随后的元素下移一个位置来填补数组头部的空缺.

例如:

var a = []; //a:[]

a.unshift(1); //a:[1]  返回:1

a.unshift(22);  //a:[22,1] 返回:2

a.shift();  //a:[1] 返回:22

a.unshift(3,[4,5]); //a:[3,[4,5],1] 返回:3

a.shift();  //a:[[4,5],1] 返回:3

a.shift();  //a:[1] 返回:[4,5]

a.shift();  //a:[]  返回:1

十.toString()和toLocaleString()

数组和其他JS对象一样拥有toString()方法。针对数组,该方法将其每个元素转化为字符串(如有必要将调用元素的toString()方法)并且输出用逗号分隔的字符串列表。

注意,输出不包括方括号或其他任何形式的包裹数组值的分隔符。

例如:

[1,2,3].toString() //生成'1,2,3'

["a","b","c"].toString()  //生成'a,b,c'

[1,[2,'c']].toString() //生成 '1,2,c'

注意,这里与不使用任何参数调用join()方法返回字符串是一样的。

toLocaleString()是toString()方法的本地化版本,它调用元素的toLocaleString()方法将每个数组元素转化为字符串,并且使用本地化(和自定义实现的)分隔符将这些字符串连接起来生成最终的字符串。

《JS权威指南学习总结--7.8 数组方法》的更多相关文章

  1. 简单物联网:外网访问内网路由器下树莓派Flask服务器

    最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...

  2. 利用ssh反向代理以及autossh实现从外网连接内网服务器

    前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...

  3. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  4. 外网访问内网SpringBoot

    外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...

  5. 外网访问内网Elasticsearch WEB

    外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...

  6. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  7. 怎样从外网访问内网Memcached数据库

    外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...

  8. 怎样从外网访问内网CouchDB数据库

    外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...

  9. 怎样从外网访问内网DB2数据库

    外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...

  10. 怎样从外网访问内网OpenLDAP数据库

    外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

随机推荐

  1. 菜鸟互啄:WINFORM如何实现无聚焦框的Button按钮

    当我们将一个button按钮设置如下属性时,总有一个聚焦框来困扰着我们 button1.FlatStyle = FlatStyle.Flat; 我们想要的效果是这样的: 但当使用了Tab切换焦点时 发 ...

  2. ipad 横屏 竖屏 CSS

    /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-devic ...

  3. Ajax beforeSend和complete 方法与防止重复提交

    $.ajax({ beforeSend: function(){ // Handle the beforeSend event }, complete: function(){ // Handle t ...

  4. codevs1002搭桥(prim)

    题目描述: 这是道题题意有点迷(或者是我语文不好),但其实实际上求的就是图中连通块的个数,然后在连通块与连通块之间连边建图跑最小生成树.但是--这个图可能是不连通的--求桥的数量和总长 于是我立刻想到 ...

  5. Google Daydream 在中国的第一次演讲摘录

    从 PC.手机到 VR/AR,计算机平台正在迁移,而在这个过程中,与用户使用体验息息相关的「人机交互方式」也将不可避免的发生变化.作为这几波浪潮的弄潮儿,Google 怎么看这种人机交互方式的演进? ...

  6. SDN理解:SDN现状

    目录 - SDN现状 - (一)SDN现状 - SDN诞生的背景 - SDN的介绍 - (二)SDN领域的相关组织和发展现状 - 1.ONF - 2.OpenDaylight - 3. IETF -  ...

  7. 更新UI

    //1. this.Invoke(new ThreadStart(delegate { textBox1.AppendText(" + "\r\n"); })); //2 ...

  8. Vultr日本vps搭建ss/ssr/openvpn免流教程

    每个月的手机流量不够用,运营商流量套餐价格偏高,怎么才能省钱?你在淘宝上,搜索手机免流,可找到很多奸商销售免流套餐,一块钱可买1GB流量,免流原理是什么?自己能搞吗? 手机免流原理 手机运营商中国电信 ...

  9. Android使用 startActivityForResult 、 onActivityResult 时的注意事项

    今天使用 startActivityForResult 时遇到两个问题,应该是常见问题了吧,浪费了些时间才搞定,做个记录. 1. onActivityResult 的触发顺序问题 这个问题很郁闷,我一 ...

  10. 使用 voluptuous 校验数据

    在 Python 中,我们经常需要对参数进行校验,这是我们有好多种方法,例如写很多 if 啊,或者写正则表达式啊等等,技巧高的人可以写得很巧妙,而技巧一般的人呢,可能会写得很冗长,例如我,经常就不能很 ...