Javascript数组Array方法解读

网络编程 2024/11/16 佚名

3 1 2

接上一篇《Javascript数组Array基础介绍》，这一篇详细介绍Array的所有方法。

所有数组的方法都定义在Array.prototype上,而Array.prototype本身也是一个数组。

array.concat()

浅复制一份当前数组，并把接收到的参数附加到新数组的末尾。原数组不改变。

语法

array.concat(value1, value2, ..., valueN)
参数为需要合并的数组或非数组值

var arr1 = [1, 2, 3];
var obj = {animal : 'monkey'};
var arr2 = arr1.concat([4, 5, 6], obj, [7, 8, 9]);
// arr1 [1, 2, 3]
// arr2 [1, 2, 3, 4, 5, 6, {animal : 'monkey'}, 7, 8, 9]

obj.animal = 'tiger';
// [1, 2, 3, 4, 5, 6, {animal : 'tiger'}, 7, 8, 9]

可以合并数组或非数组值，但是要注意如果包含对象，对象还是引用原来的对象。

array.join()

返回一个将数组所有元素用分隔符拼接成的字符串，默认分隔符为逗号。

语法

array.join(seperator)
参数为分割符

var arr1 = [1, 2, 3];
var str = arr1.join(); // 1,2,3
str = arr1.join('#'); // 1#2#3

当将大量字符串片段组装时，join方法比+元素运算符要快。

利用new Array(3)将生成一个长度为三的空数组，同时结合join()方法，可以实现重复某段字符串。

var str = new Array(3).join('-+'); // -+-+

重复的次数就是数组长度减一，因为字符串是分隔符。

由于数组本身是对象，拥有toString()方法，利用它也能实现将数组拼接成一个字符串，只不过分隔符只能是逗号了。

var arr1 = [1, 2, 3];
arr1.toString(); // 1,2,3

实际上它会先调用每一个元素的toString()方法。

array.push()

把一个或多个参数附加在数组末尾，返回数组长度。改变数组自身。

语法

array.push(value1, value2, ..., valueN);
实例

var arr1 = [1, 2, 3];
var len = arr1.push(4, 5);

console.log(len); // 5
console.log(arr1); // [1, 2, 3, 4, 5]

另一种方法也可以实现在数组末尾插入值。

arr1[arr1.length] = 6; // [1, 2, 3, 4, 5, 6]  
array.pop()

将数组最后一项删除，并返回删除项。改变数组自身。

var arr1 = [1, 2, 3];
arr.pop(); // [1, 2] 返回 3

如果数组为空，返回undefined。

array.unshift()

把一个或多个参数插入到数组头部，返回数组长度。改变数组自身。

var arr1 = [1, 2, 3];
var len = arr1.unshift(4, 5);

console.log(len); // 5
console.log(arr1); // [4, 5, 1, 2, 3]

array.shift()

将数组的第一项删除，并返回删除项。改变数组自身。

var arr1 = [1, 2, 3];
arr.shift(); // [2, 3] 返回 1

如果数组为空，返回undefined。

array.sort()

这个方法按照每个元素的toString()方法返回的值进行排序，所以一般得不到期望的结果。

var arr1 = [1, 2, 3, 14, 24];
arr1.sort(); // [1, 14, 2, 24, 3]

但是sort()方法可以接收一个我们自定义的函数进行比较。比较函数接受两个参数，尤其sort()默认是升序，所以如果想让第一个参数位于第二个参数前面就要返回负数，相等返回0，位于后面返回正数。

var compare = function(a, b){
  return a - b;
}

var arr2 = [1, 12, 2, 23, 3 , 5, 4];
arr2.sort(compare); // [1, 2, 3, 4, 5, 12, 23]

比较字符串可以结合string.localeCompare()方法来用。

var arr3 = ['F', 'e', 'f', 'E'];
arr3.sort(function(a, b){
  return a.localeCompare(b);
});
// ['e', 'E', 'f', 'F']

array.reverse()

反转数组元素顺序，返回数组自身。

var arr1 = [1, 4, 3, 2];
arr1.reverse(); // [2, 3, 4, 1]

array.slice()

对数组浅复制其中的一段，不改变数组自身。

array.slice(start, end);
方法接受两个参数，最后一个可以省略，默认是数组自身长度。

var arr1 = [1, 2, 3, 4, 5, 6];

arr1.slice(4); // [5, 6]
arr1.slice(2, 4); // [3, 4]
arr1.slice(-3); // [4, 5, 6]

如果传入负数，那么会被自动加上数组的长度，试图变成非负数。
传入一个绝对值小于数组长度的值，就是从后向前取负数绝对值个数的元素。例如例子中取了后三个元素。

array.splice()

这是数组中最强大也最常用对的方法了，可以实现删除，插入，替换。

语法

array.slice(start, count, item);
该方法移除一个或多个元素，并用新的元素替代他们。start是开始的位置，count是删除的数量，item是新增加的元素（item不止一个，也可省略)，以数组形式返回删除的元素。

var arr1 = [1, 2, 3, 4, 5];
//删除
arr1.splice(2, 1); // [1, 2, 4, 5] 返回 [3]
//插入
arr1.splice(3, 0, 6, 7); // [1, 2, 4, 6, 7, 5]
//替换
arr1.splice(1, 2, 8, 9); // [1, 8, 9, 6, 7, 5] 返回[2, 4]

下面介绍一些ECMAScript5新增的方法，主要是ie8不支持。

indexOf() 与 lastIndexOf()

查找对应项在数组中的索引位置，第二个参数表示对应查找方向的起始位置，返回第一个匹配的位置，如果没有找到则返回-1;
indexOf()是从前往后查找，lastIndexOf()是从后往前查找。

var arr1 = [1, 2, 3, 4, 3, 2, 1];
arr1.indexOf(2); // 1
arr1.indexOf(2, 3); // 5

arr1.lastIndexOf(3); // 4
arr1.lastIndexOf(3, 4) // 2

迭代方法

以下方法接受两个参数，第一个是每一项运行的函数，第二个函数运行的作用域。
运行函数有三个参数，分别是当前项，位置，数组本身。

array.every()

运行给定函数，如果迭代每一项都返回true,则最终返回true。

var arr1 = [1, 2, 3, 4, 5];
arr1.every(function(item, index, array){
  return item > 3;
});
// false

array.some()

运行给定函数，如果迭代中有一项返回true,则最终返回true。

arr1.some(function(item, index, array){
  return item > 3;
});
// true

array.map()

运行给定函数，将迭代中返回的值组成数组，返回该数组。

arr1.map(function(item, index, array){
  return item * 2;
});
// [2, 4, 6, 8, 10]

array.filter()

运行给定函数，将迭代中返回true的元素以数组形式返回

arr1.filter(function(item, index, array){
  return item > 3;
});
// [4, 5]

array.forEach()

运行给定函数，不返回任何值。类似于普通的for循环的功能。

归并方法

函数接受两个参数，第一个参数是每一个运行的自定义函数，第二项是作为归并基础的初始值。
自定义函数接受四个参数，分别是前一项，当前项，位置，数组。

array.reduce() 与 array.reduceRight()
var splitstr = function(prev, item, index, array){
  return prev + '#' + item;
}

var arr1 = [1, 2, 3, 4, 5];
arr1.reduce(splitstr, 8); // 8#1#2#3#4#5
arr1.reduceRight(splitstr, 8); // 8#5#4#3#2#1

小结

这一篇介绍了数组方法的种种细节和注意问题，下一篇将会介绍数组更高级的用法。本篇后续会添加ECMAScript6 新增加的数组方法的介绍。

Javascript,数组Array方法

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“Javascript数组Array方法解读”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

Javascript数组Array方法解读

使用jQuery操作HTML的table表格的实例解析

GitHub上一些实用的JavaScript的文件压缩解压缩库推荐

评论“Javascript数组Array方法解读”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

Javascript数组Array方法解读

使用jQuery操作HTML的table表格的实例解析

GitHub上一些实用的JavaScript的文件压缩解压缩库推荐

评论“Javascript数组Array方法解读”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存