当前位置:首页 > 日记 > 正文

JavaScript中数组Array方法详解

JavaScript中数组Array方法详解

ECMAScript 3在Array.prototype中定义了一些很有用的操作数组的函数,这意味着这些函数作为任何数组的方法都是可用的。

1、Array.join()方法

Array.join()方法将数组中所有元素都转化为字符串并连接在一起,返回最后生成的字符串。可以指定一个可选的符号或字符串在生成的字符串中来分隔数组的各个元素。如果不指定分隔符,默认使用逗号。注意:此方法不会改变原始数组

var arr = ['a', 'b', 'c'];console.log(arr.join()); // a,b,cconsole.log(arr.join(" ")); // a b cconsole.log(arr.join("")); // abcconsole.log(arr.join("slf")); // aslfbslfcvar arr2 = new Array(10);console.log(arr2.join("-")); // ---------

扩展:Array.join()方法是String.split()方法的逆向操作,后者是将字符串分割成若干块来创建一个数组。

2、Array.reverse()方法

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

var arr = ['a', 'b', 'c'];console.log(arr.reverse()); // ['c', 'b', 'a']console.log(arr); // ['c', 'b', 'a']

3、Array.sort()方法

Array.sort()方法将数组中的元素排序并返回排序后的数组。当不带参数调用sort()方法时,数组元素以字母表顺序排序。注意:此方法会改变原始数组。

var arr = ['ba', 'b', 'ac'];console.log(arr.sort()); // ['ac', 'b', 'ba']console.log(arr); // ['ac', 'b', 'ba']

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

var arr = new Array(4);arr[0] = 'ba';arr[1] = 'b';arr[2] = 'zc';arr[3] = undefined;console.log(arr.sort()); // ['ac', 'b', 'ba', undefined]console.log(arr); // ['ac', 'b', 'ba', undefined]

如果想按照其他方式而非字母表顺序进行数组排序,则必须给sort()方法传递一个比较函数。该函数决定了它的两个参数在排好序的数组中的先后顺序。假设第一个参数在前,比较函数应该返回一个小于0的数值。反之,假设第一个参数在后,函数应该返回一个大于0的数值。并且,假设两个值相等(它们的顺序无关紧要),函数应该返回0。例如,用数值大小而非字母表顺序进行数组排序,代码如下:

var arr = new Array(4);arr[0] = 45;arr[1] = 12;arr[2] = 103;arr[3] = 24;console.log(arr.sort()); // [103, 12, 24 45]console.log(arr.sort(function(a, b){return b-a;})); // [103, 45, 24, 12]

有时候需要对一个字符串数组执行不区分大小写的字母表排序,这时可以使用比较函数,首先将参数都转化为小写字符串(使用toLowerCase()方法),再开始比较。

var arr = ['abc', 'Def', 'BoC', 'FED'];console.log(arr.sort()); // ["BoC", "Def", "FED", "abc"]console.log(arr.sort(function(s, t){  var a = s.toLowerCase();  var b = t.toLowerCase();  if (a < b) return -1;  if (a > b) return 1;  return 0;})); // ["abc", "BoC", "Def", "FED"]

4、Array.concat()方法

Array.concat()方法创建并返回一个新数组,它的元素包括调用concat()的原始数组的元素和concat()的每个参数。如果这些参数中的任何一个自身是数组,则连接的是数组的元素,而非数组本身。但要注意,concat()不会递归扁平化数组的数组。注意:此方法
不会修改原始数组。

var arr = ['abc', 'Def', 'BoC', 'FED'];console.log(arr.concat(1, 2)); // ["abc", "Def", "BoC", "FED", 1, 2]console.log(arr.concat(1, 2, [4, 5])); // ["abc", "Def", "BoC", "FED", 1, 2, 4, 5]console.log(arr.concat(1, 2, [4, ['slf', 5]])); // ["abc", "Def", "BoC", "FED", 1, 2, 4, Array[2]]console.log(arr); // ["abc", "Def", "BoC", "FED"]

5、Array.slice()方法

Array.slice()方法返回指定数组的一个片段或子数组。它的两个参数分别指定了片段的开始和结束的位置。返回的数组包含第一个参数指定的位置和所有到第二个参数指定的位置(但不含第二个参数指定的位置)之间的所有数组元素。如果只指定一个参数,返回的数组将包含从开始位置到数组结尾的所有元素。如参数中出现负数,它表示相对于数组中最后一个元素的位置。例如,参数-1指定了最后一个元素,而-3指定了倒数第三个元素。注意,此方法不会修改原始数组。

var arr = ['abc', 'Def', 'BoC', 'FED', 'slf'];console.log(arr.slice(1, 2)); // ["Def"]console.log(arr.slice(3)); // ["FED", 'slf']console.log(arr.slice(0, -1)); // ['abc', 'Def', 'BoC', 'FED']console.log(arr.slice(-3, -1)); // ['BoC', 'FED']console.log(arr); // ['abc', 'Def', 'BoC', 'FED', 'slf']

6、Array.splice()方法

Array.splice()方法是在数组中插入或删除元素的通用方法。注意,splice()和slice()拥有非常相似的名字,但它们的功能却有本质的区别。splice()能够从数组中删除元素、插入元素到数组中或者同时完成这两种操作。在插入或删除点之后的数组元素会根据需要增加或减小它们的索引值,因此数组的其他部分仍然保持连续的。splice()的第一个参数指定了插入和(或)删除的起始位置。第二个参数指定了应该从数组中删除的元素的个数。如果省略第二个参数,从起始点开始到数组结尾的所有元素都将被删除。splice()返回一个由删除元素组成的数组,或者如果没有删除元素就返回一个空数组。注意:此方法会改变原始数组。(区别于concat(), splice()会插入数组本身而非数组的元素。)

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];console.log(arr.splice(7)); // [8, 9]console.log(arr); // [1, 2, 3, 4, 5, 6, 7]console.log(arr.splice(2, 4)); // [3, 4, 5]console.log(arr); // [1, 2, 7]console.log(arr.splice(2, 1, 3, 4, 5, 6)); // [7]console.log(arr); // [1, 2, 3, 4, 5, 6]console.log(arr.splice(3, 2, 3, [1, 2, 3])); // [4, 5]console.log(arr); // [1, 2, 3, [1, 2, 3], 6]

7、Array.push()和Array.pop()方法

push()和pop()方法允许将数组当做栈来使用。push()方法在数组的尾部添加一个或多个元素,并返回数组新的长度。pop()方法则相反:它删除数组的最后一个元素,减小数组长度并返回它删除的值。注意:这两个方法都会修改原始数组。

var arr = [1, 2, 3];console.log(arr.push(7)); // 4console.log(arr); // [1, 2, 3, 7]console.log(arr.push([2, 4])); // 5console.log(arr); // [1, 2, 3, 7, [2, 4]]console.log(arr.pop()); // [2, 4]console.log(arr); // [1, 2, 3, 7]

8、Array.unshift()和Array.shift()方法

unshift()和shift()方法的行为非常类似于push()和pop()方法,不一样的是:前者是在数组的头部进行元素的插入和删除操作。unshift()在数组的头部添加一个或多个元素,并将已存在的元素移动到更高索引的位置来获得足够的空间,最后返回数组新的长度。shift()删除数组的第一个元素并返回所删除的元素,然后把所有随后的元素向前移动一个位置来填补数组头部的空缺。注意:这两个方法都会修改原始数组。

var arr = [6, 2, 3, 4, 5, 6];console.log(arr.shift()); // 6console.log(arr); // [2, 3, 4, 5, 6]console.log(arr.unshift(['a', 'b'])); // 6console.log(arr); // [['a', 'b'], 2, 3, 4, 5, 6]console.log(arr.unshift('a', 'b')); // 8console.log(arr); // ['a', 'b', ['a', 'b'] 2, 3, 4, 5, 6]

注意,当使用多个参数调用unshift()时,如果参数是一次性插入的而非一次一个地插入,这意味着最终的数组中插入的元素的顺序和它们在参数列表中的顺序一致。而假如元素是一次一个地插入,它们的顺序应该是反过来的。

var arr = [6, 2, 3, 4, 5, 6];console.log(arr.unshift('a', 'b', 'c')); // 9console.log(arr); // ['a', 'b', 'c', 6, 2, 3, 4, 5, 6]console.log(arr.unshift(1)); // 10console.log(arr); // [1, 'a', 'b', 'c', 6, 2, 3, 4, 5, 6]console.log(arr.unshift(2)); // 11console.log(arr); // [2, 1, 'a', 'b', 'c', 6, 2, 3, 4, 5, 6]

9、Array.toString()和Array.toLocaleString()方法

数组和其他JavaScript对象一样拥有toString()方法。针对数组,该方法将数组的每个元素都转化为字符串并且输出用逗号分隔的字符串列表。注意:此方法不会修改原始数组(这与不使用任何参数调用join()方法返回的字符串是一样的)

var arr = [1, 2, 3];console.log(arr.toString()); // 1,2,3console.log(typeof(arr.toString())) // stringconsole.log(arr); // [1, 2, 3]

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!

相关文章

vue轮播图插件vue-awesome-swiper

vue轮播图插件vue-awesome-swiper

轮播图,代码实例,插件,电脑软件,vue,最近写vue2.0项目中用到了轮播图的一个插件,也就是vue-awesome-swiper,个人感觉还是比较强大的,swiper官网中的API及配置均可使用(支持3.0),以下说下使用该插件的一些步骤:第一步安装npm install vue-awesome…

AI混合工具制作低多边形风格几何lo

AI混合工具制作低多边形风格几何lo

混合,教程,工具,多边形,几何,版权申明:本文原创作者&ldquo;如如酱w &rdquo;,感谢&ldquo;如如酱w &rdquo;的原创经验分享!低多边形的正式名称叫做 Low Poly 3D,翻译过来叫做低面设计或低多边形设计。 低多边形风格正火,接下来小编就给大家分析分…

excel2007停止工作的解决方法excel

excel2007停止工作的解决方法excel

解决方法,工作,电脑软件,strong,  停止工作解决方法在Excel中是比较常用的功能之一,如果有不懂的朋友却需要用到这个功能的朋友不妨学习一番吧!接下来是小编为大家带来的excel2007停止工作的解决方法,供大家参考。excel2007停止工作的解决…

CDR怎么绘制齿轮零件模型?

CDR怎么绘制齿轮零件模型?

模型,绘制,齿轮,零件,电脑软件,在PS中可以利用Ctrl+Shift+AIT+T这个命令再次变换对象,从而可以达到对象围绕某一中心点旋转复制的效果,这在做类似齿轮、花儿造型的时候能够经常用到。使用CorelDRAW绘制简单齿轮效果是轻松快捷的,可以直接使用C…

元素全屏的设置与监听实例

元素全屏的设置与监听实例

设置,全屏,元素,实例,电脑软件,设置全屏和退出全屏//全屏设置 $('#fullScreen').on('click', function () { fullScreen(); }); //退出全屏 $('#exitFullScreen').on('click', function () { exitFullScreen(); }); //进入全屏fu…

一个有意思的鼠标点击文字特效jque

一个有意思的鼠标点击文字特效jque

鼠标点击,有意思,代码,文字特效,电脑软件,今天在【幻想's Blog】看到一段比较喜欢的鼠标点击文字特效JS代码,感觉很不错就用到博客上来了!喜欢的站长也可以用一下感觉一下!只需将如下JS代码放到</body>之前即可。<script type="text/javascr…

Photoshop合成创意风格的圣诞节狂

Photoshop合成创意风格的圣诞节狂

教程,创意,圣诞节,海报,狂欢夜,本教程主要使用Photoshop合成圣诞节狂欢夜活动海报教程,整体的海报都是用素材一起合成完成的,喜欢的朋友一起来学习吧。12 阅读全文教程结束,以上就是Photoshop合成创意风格的圣诞节狂欢夜活动海报教程,怎么样,大…

详解Angularjs 如何自定义Img的ng-

详解Angularjs 如何自定义Img的ng-

事件,自定义,详解,电脑软件,Angularjs,在使用AngularJs的过程中,我们常常会用到一些ng-事件,如ng-click、ng-change等,这些事件都是AngularJs事先为我们定义好的。也有的情况下,我们会用到一些使用频率不高的dom事件,如img的onload(图片加载完成…

如何使用Bootstrap 按钮实例详解

如何使用Bootstrap 按钮实例详解

如何使用,详解,实例,按钮,电脑软件,Bootstrap 按钮本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示:以下样式可用于…

在React中如何优雅的处理事件响应

在React中如何优雅的处理事件响应

事件响应,详解,优雅,电脑软件,React,前言本文主要给大家介绍的是关于React处理事件响应的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍吧。React中定义一个组件,可以通过React.createClass或者ES6的class。本文讨论的React组件…

Photoshop合成北欧小户型沙发摆放

Photoshop合成北欧小户型沙发摆放

动态,北欧,小户型,场景,电脑软件,本篇文章如何分析打造风格沙发情景案例技巧分享,在家装效果图上的效果很不错的说,喜欢的朋友一起来学习吧,学习一下设计的思路,可惜的是作者没有给素材,大家可以自己百度动手找找看吧。12 阅读全文教程结束,以上…

ASP.NET防止SQL注入的方法示例

ASP.NET防止SQL注入的方法示例

方法,示例,电脑软件,ASP,NET,本文实例讲述了ASP.NET防止SQL注入的方法。分享给大家供大家参考,具体如下:最近接手别人一个项目,发现存在SQL注入漏洞,因为不想改太多代码,所以那种参数法防注入呢我就用不着了。只能用传统的笨一点的办法了。1、新…