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()方法将每个数组元素转化为字符串，并且使用本地化分隔符将这些字符串连接起来生成最终的字符串。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
本文介绍javascript中Number的使用方法，并对其进行了汇总，希望对大家有所帮助2016-11-11
本文将给大家详细介绍一下iframe的基本介绍与使用,iframe（内嵌框架）是 HTML 中一种用于将一个网页嵌入到另一个网页中的标签,它可以在一个页面中显示来自其他页面的内容,需要的朋友可以参考下2024-02-02
List the UTC Time on a Computer
List the UTC Time on a Computer...2007-06-06
这篇文章主要为大家详细介绍了如何利用Three.js实现酷炫3D地图的效果，文中的示例代码讲解详细，具有一定的借鉴价值，感兴趣的小伙伴可以尝试一下2022-10-10
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
这篇文章主要给大家介绍了关于JavaScript中常用的3种弹出提示框(alert、confirm、prompt)的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
这篇文章主要介绍了JS数组splice操作,结合实例形式分析了javascript使用splice方法删除数组元素相关操作技巧,需要的朋友可以参考下2019-10-10
本文介绍如何编写JavaScript脚本，将用户数据发回服务器。对此感兴趣的同学，可以参考下2021-05-05
这篇文章主要介绍了webpack4处理SCSS的方法示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了JS组件Bootstrap Table使用方法，具有一定的实用性，感兴趣的小伙伴们可以参考一下2016-02-02
作用域JavaScript 的变量作用域是按照函数划分的，为了快速的了解它的特性，我们通过实例来进行演示。2009-08-08
最新评论