JavaScript中数组Array方法详解

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

1、Array.join()方法

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

var arr = ['a', 'b', 'c'];
console.log(arr.join()); // a,b,c
console.log(arr.join(" ")); // a b c
console.log(arr.join("")); // abc
console.log(arr.join("slf")); // aslfbslfc
var 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)); // 4
console.log(arr); // [1, 2, 3, 7]
console.log(arr.push([2, 4])); // 5
console.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()); // 6
console.log(arr); // [2, 3, 4, 5, 6]
console.log(arr.unshift(['a', 'b'])); // 6
console.log(arr); // [['a', 'b'], 2, 3, 4, 5, 6]
console.log(arr.unshift('a', 'b')); // 8
console.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')); // 9
console.log(arr); // ['a', 'b', 'c', 6, 2, 3, 4, 5, 6]
console.log(arr.unshift(1)); // 10
console.log(arr); // [1, 'a', 'b', 'c', 6, 2, 3, 4, 5, 6]
console.log(arr.unshift(2)); // 11
console.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,3
console.log(typeof(arr.toString())) // string
console.log(arr); // [1, 2, 3]

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

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

时间: 2017-02-25

js删除Array数组中指定元素的两种方法

本节内容: js删除Array数组中指定元素 方法一, /* * 方法:Array.remove(dx) 通过遍历,重构数组 * 功能:删除数组元素. * 参数:dx删除元素的下标. */ Array.prototype.remove=function(dx) { if(isNaN(dx)||dx>this.length){return false;} for(var i=0,n=0;i<this.length;i++) { if(this[i]!=this[dx]) { this[n++]=

用js实现in_array的方法

在js中我们不能像php中那样直接要判断一个值或字符串在数组中利用in_array来实现,因为js没有in_array函数,但是我们可以自定来给js写一个in_array函数,下面我收集了几个. 例1 复制代码 代码如下: function in_array(stringToSearch, arrayToSearch) { for (s = 0; s < arrayToSearch.length; s++) {  thisEntry = arrayToSearch[s].toString(); 

Javascript数组Array方法解读

接上一篇<Javascript数组Array基础介绍>,这一篇详细介绍Array的所有方法. 所有数组的方法都定义在Array.prototype上,而Array.prototype本身也是一个数组. array.concat() 浅复制一份当前数组,并把接收到的参数附加到新数组的末尾.原数组不改变. 语法 array.concat(value1, value2, ..., valueN) 参数为需要合并的数组或非数组值 var arr1 = [1, 2, 3]; var obj = {ani

js中数组Array的一些常用方法总结

var list = new Array()是我们在js中常常写到的代码,今天就总结哈Array的对象具有哪些方法. list[0] = 0; list[1] = 1; list[2] = 2; 或者这样声明:var list = [0,1,2] 1 shift()t:删除数组的第一个元素,返回删除的值.这里是0 2 unshift(3,4):把参数加载数组的前面,返回数组的长度.现在list:中是3,4,0,1,2 3pop():删除数组的最后一个元素,返回删除的值.这里是2. 4push(3

JavaScript ES5标准中新增的Array方法

ES5中新增的不少东西,了解之对我们写JavaScript会有不少帮助,比如数组这块,我们可能就不需要去有板有眼地for循环了. ES5中新增了写数组方法,如下: forEach (js v1.6) map (js v1.6) filter (js v1.6) some (js v1.6) every (js v1.6) indexOf (js v1.6) lastIndexOf (js v1.6) reduce (js v1.8) reduceRight (js v1.8) 1.js中常用的数

JavaScript中的ArrayBuffer详细介绍

相信每一个 javascript 学习者,都会去了解 JS 的各种基本数据类型,数组就是数据的组合,这是一个很基本也十分简单的概念,他的内容没多少,学好它也不是件难事情.但是本文着重要介绍的并不是我们往常看到的 Array,而是 ArrayBuffer. 我写的很多东西都是因为要完成某些特定的功能而刻意总结的,可以算是备忘,本文也是如此!前段时间一直在研究 Web Audio API 以及语音通信相关的知识,内容侧重于音频流在 AudioContext 各个节点之间的流动情况,而现在要摸清楚音频

以JSON形式将JS中Array对象数组传至后台的方法

业务是需要将前台jQuery easyUI DataGrid列表中所选的若干行的数据传到后台进行update操作 通常情况下我们会获取所选取行对象的ID,通过循环及简单封装拼凑成一个长String传送过去,并在Service层解释再通过findByID获取实例并update 但今次我们需要将整个对象群完整的传输至后台 其结构如下 选用谷歌的GSON插件及json2.js搭配使用 前台代码如下,简洁起见已去除部分简单验证代码: 复制代码 代码如下: var rows = $('#dg1').dat

javascript object array方法使用详解

Array.prototype.push push向数组尾部添加一项并更新length ,返回数组长度. 如果Object使用push会怎样? 看下面代码, obj好像数组一样工作了.length会自动更新. 复制代码 代码如下: var push = Array.prototype.push; var obj = {}; push.call(obj, "hello"); // 返回值 1 // obj {"0":"hello", length:

JS中数组Array的用法示例介绍

new Array() new Array(len) new Array([item0,[item1,[item2,...]]] 使用数组对象的方法: var objArray=new Array(); objArray.concact([item1[,item2[,....]]]-------------------将参数列表连接到objArray的后面形成一个新的数组并返回,原有数组不受影响.如:var arr=["a","b","c"];

JS array 数组详解

1.数组的声明方法 (1): arrayObj = new Array(); //创建一个数组. 复制代码 代码如下: var arr1 = new Array(); (2):arrayObj = new Array([size]) 创建一个数组并指定长度,注意不是上限,是长度. 复制代码 代码如下: var a = new Array(5); (3):arrayObj = new Array([element0[, element1[, ...[, elementN]]]]) 创建一个数组并赋

Swift4.0 Array数组详解

数组的介绍 数组(Array)是一串有序的由相同类型元素构成的集合,数组中的集合元素是有序的,可以重复出现.在Swift中数组类型是Array,是一个泛型集合.数组分成:可变数组和不可变数组,分别使用let修饰的数组是不可变数组,使用var修饰的数组是可变数组. 数组的初始化 一.初始化一个空数组(类型:[数据类型]()) 1.创建一个整形的空数组 let  array = [Int] () 这里array 数组变量 被let 修辞 ,array数组是不可变数组,只能访问,不能修改 var  a

js中的关联数组与普通数组详解

var privArr = []; privArr['staProjQueryGrid'] = [{ btn_id : 'but_add', roles : ['2001','2005'] }] console.log(privArr,privArr.staProjQueryGrid[0].btn_id) 第一行是定义一个数组priArr,第二行是给这个数组添加一个属性staProjQueryGird,这个属性值是一个数组.打印结果是  but_add var unPrivArr = [];//

数据结构之数组Array实例详解

数据结构之数组Array实例详解 数组Array 基本操作 Status InitArray(int dimm,...)//若维数dim和随后的各维长度合法,则构造相应的数组A,并返回OK Status DestroyArray() //销毁数组A Status Locate(va_list ap,int &off) //若ap指示的各下标值合法,则求出该元素在A中相对地址off Status Value(ElemType &e,...) //A是n维数组,e为元素变量,随后是n个下标值.

JS hashMap实例详解

Hashmap是一种非常常用的.应用广泛的数据类型.本文通过实例代码给大家介绍js hashMap的相关知识,具体代码内容如下所示: /** * MAP对象,实现MAP功能 * * 接口: * size() 获取MAP元素个数 * isEmpty() 判断MAP是否为空 * clear() 删除MAP所有元素 * put(key, value) 向MAP中增加元素(key, value) * remove(key) 删除指定KEY的元素,成功返回True,失败返回False * get(key)

js对象实例详解(JavaScript对象深度剖析,深度理解js对象)

这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕. 平时发的文章基本都是开发中遇到的问题和对最佳解决方案的探讨,终于忍不住要写一篇基础概念类的文章了. 本文探讨以下问题,在座的朋友各取所需,欢迎批评指正: 1.创建对象 2.__proto__与prototype 3.继承与原型链 4.对象的深度克隆 5.一些Object的方法与需要注意的点 6.ES6新增特性 下面反复提到实例对象和原型对象,通过构造函数 new

js array数组对象操作方法汇总

js 数组对象操作方法如下: 1. 创建数组 var array1 = [1,2] //方法一 var array2 = new Array() //方法二 array[0] = 1; array[1] = 2; 2.遍历数组 for循环 和for...in 循环 var array1 = [1,2]; var l = array1.length; //for循环 for(var i=0;i< l;i++){ console.log(array1 [i]); } //for...in 循环 fo

Js面试算法详解

素数 Q:你将如何验证一个素数? A:一个素数只能被它自己和1整除.所以,我将运行一个while循环并加1.(看代码示例,如果你无法理解,那这不是你的菜.先回去学习javaScript基础知识然后再回来吧.) 方法1 function isPrime(n){ var divisor = 2; while (n > divisor){ if(n % divisor == 0){ return false; } else divisor++; } return true; } isPrime(137

JS库之Highlight.js的用法详解

官网:https://highlightjs.org/ 下载地址:https://highlightjs.org/download/ 下载到本地后,新建个页面测试 1.在head中加入css和js的引用 <head> <title>highlight</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link r

JS 实现计算器详解及实例代码(一)

Javascript 实现计算器: 系列文章: JS 实现计算器详解及实例代码(一) Javascript 实现计算器时间功能详解及实例(二) 小型JavaScript计算器 自己寻思出的解决方案,比较笨拙的方法,虽然完成了但是还有不少bug,用的方法也不是最有效的,基本功能算是完成了,一些小的细节地方也考虑到了,但是还有其他的细节需要处理. 总体设计思路是,先画草图 -> 设计UI -> 编写UI代码 -> 编写CSS -> 编写JS逻辑代码: 面板(main-board) 面板