{{ title }}
{{ errorMessage }}


{{ errorMessage }}





{{ registerSuccessMessage }}

JavaScript Array 数组对象的所有方法及用法详解

Array(数组)是值的有序集合。每个值叫做一个元素,而每个元素在数组中有一个位置,以数字表示,称为索引。JavaScript数组是无类型的:数组元素可以是任意类型,并且同一个数组中的不同元素也有可能有不同的类型。数组的元素甚至也可能是对象或其他数组,这允许创建复杂的数据结构,如对象的数据和数组的数组。

数组继承自Array.prototype中的属性,它定义了一套丰富的数组操作方法,这意味着这些函数(方法)作为任何数组的方法都是可用的。本文将介绍ECMAScript 3中的数组方法及ECMAScript 5中新增的数组遍历方法。

本文开头简介及部分内容引用自“JavaScript权威指南(第六版)”第七章 数组

ECMAScript 3 中的数组方法

join()
Array.join()方法将数组中的所有元素都转化为字符串并链接在一起,返回最后的生成的字符串。默认分隔符为逗号,可以指定一个可选的字符串作为生成的字符串分隔符来分割数组的各个元素:

var arr = ["www", "webjike", "com"];
arr.join();  // => "wwww,webjike,com"
arr.join(".");  // => "www.webjike.com"

// 实例化一个长度为10的空数组
var arrTwo = new Array(10);
arrTwo.join("-");  // => "---------" : 九个连字号组成的字符串

提示:Array.join()方法不会改变原数组,而是返回新生成的值

reverse()
Array.reverse()方法将数组中的元素颠倒顺序,返回逆序的数组。reverse()方法是在原先的数组中重新排序,会改变数组的值:

var arr = ["www", "webjike", "com"];
arr.reverse();  // => ["com", "webjike", "www"]

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

var arr = ["www", "webjike", "com"];
arr.sort();  // => ["com", "webjike", "www"]

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

按照其他方式进行数组排序,必须给sort()方法传递一个比较函数,该函数决定了它的两个参数在排序好的数组中的先后顺序。假设第一个参数在前面,比较函数应该返回一个小于0的数值;反之,则函数应该返回一个大于0的数值。如果两个值相等,说明顺序无关紧要,函数应该返回0。

例如,用数值大小进行数组排序:

var arr = [10, 2, 5, 1024];
arr.sort(function (a, b) {
    return a - b;   // 根据顺序,返回负数、0、正数 => [2, 5, 10, 1024]
});

arr.sort(function (a, b) { return b-a });  // 数值大小相反的顺序 => [1024, 10, 5, 2]

不区分大小写的字母表排序:

var arr = ['ant', 'bug', 'cat', 'Dog'];
arr.sort();    // 区分大小写的排序 => ["Dog", "ant", "bug", "cat"]
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
});    // 不区分大小写的排序 => ["ant", "bug", "cat", "Dog"]

提示:Array.sort()方法是在原先数组中排序,所以会改变原先数组

concat()
Array.concat()方法创建并返回一个新数组,它的元素包含调用数组的元素和concat()的每个参数。如果传递的参数中有数组,则连接的是数组的元素,而非数组本身。

var arr = [1, 2, 3];
arr.concat(4, 5);    // => [1, 2, 3, 4, 5]
arr.concat([4, 5]);    // => [1, 2, 3, 4, 5]
arr.concat([4, 5], [6, 7]);    // => [1, 2, 3, 4, 5, 6, 7]
arr.concat(4, [5, [6, 7]]);    // => [1, 2, 3, 4, 5, [6, 7]] : 扁平化数组的数组不会被递归

注意:concat()不会递归扁平化数组的数组、同时该方法不会改变调用数组(原先数组)

slice()
Array.slice()方法返回指定数组的元素或一个片段,传入的两个参数指定返回数组元素的开始和结束位置。如果只传入一个参数,则返回的数组将包含从开始位置到数组结尾的所有元素,负数表示数组最后一个元素的位置:

var arr = ['https', '://', 'www', 'webjike', 'com'];
arr.slice(2);    // => ["www", "webjike", "com"]
arr.slice(3, 4);    // => ["webjike"]
arr.slice(1, -1);    // => ["://", "www", "webjike"]
arr.slice(-3, -2);    // => ["www"]

提示:slice()不会修改调用的数组

splice()
splice()方法是在数组中插入或删除元素的通用方法,它可以同时删除和插入元素操作。
参数①:删除或插入元素的起始位置
参数②:删除元素的个数(若忽略此参数将从起始位置删除所有元素)
参数③+:从第二个参数开始的任意个数参数指定了插入数组中的元素,插入元素的位置由第一个参数决定

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

// 删除元素
arr.splice(4);   // => 返回[5, 6, 7, 8]; arr 是[1, 2, 3, 4]
arr.splice(1, 2);   // => 返回[2, 3]; arr 是[1, 4]
arr.splice(1, 1);   // =>  返回[4]; arr 是[1]

// 插入元素
arr.splice(1, 0, 2, 3);   // => 返回[]; arr 是 [1, 2, 3]
arre.splice(1, 2, [4, 5], 6);   // => 返回[2, 3]; arr 是 [1, [4, 5], 6]

注意:splice()会改变调用数组,返回值由删除元素组成的数组,若没有删除元素则返回空数组

push()和pop()
push()方法在数组的尾部添加一个或多个元素,并返回数组的新长度。pop()方法则相反,它删除数组中最后一个元素,并返回被删元素的值:

var arr = [];
arr.push(1, 2);  // => 返回:2 ,   arr: [1, 2]
arr.pop();  // => 返回:2 ,   arr: [1]
arr.push([1, 2]);  // => 返回:2 ,   arr: [1, [1, 2]]

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

unshift()和shift()
unshift()方法在数组头部添加一个或多个元素,并返回数组的新长度,unshift()和push()方法的行为相反:

var arr = [];
arr.unshift(1); // => 返回:1,arr: [1]
arr.unshift(22); // => 返回:2,arr: [22, 1]
arr.unshift([3, 4]); // => 返回:3,arr: [[3, 4], 22, 1]
arr.shift(); // => 返回:[3, 4],arr: [22, 1]
arr.shift(); // => 返回:[22],arr: [1]

toString()和toLocaleString()
数组和其他JavaScript对象一样拥有toString()方法。针对数组,该方法将数组中每个元素转化为字符串,并输出用逗号分隔的字符串列表;而toLocaleString()是toString()方法的本地化版本,同样将数组的元素转化为字符串。

var arr = [1, 2, 3, 4, 5, [6, "c"]];
arr.toString();  // => '1,2,3,4,5,6,c'

var time = new Date();
time.toLocaleString();    // => '2019/7/27 上午9:24:45'

注意:toLocaleString()方法在不同的本地环境返回的字符串可能不同,如转化Date对象时返回的格式不一样


ECMAScript 5 新增的数组方法

ES5定义了9个新的数组方法用来遍历、映射、过滤、检测、简化和搜索数组。

在学习这些新的数组方法前先了解一个概述:
①大多数方法的第一个参数都接收一个函数,并且对数组中的每个元素调用一次该函数
②大多数情况下,调用提供的函数使用三个参数:数组元素、元素的索引、数组本身(通常只需要第一个参数,后面两个可选)
③大多数方法的第一个参数是函数,参数二是可选的,如果存在第二个参数,则调用的函数被看作是第二个参数的方法。
④ES5中的数组方法都不会修改原始数组

 forEach()
Array.forEach()方法从头到尾遍历数组,为每个元素调用指定函数。传递的函数可传入两个参数:
①函数:接收三个回调参数(当前元素、当前元素索引、数组本身)
②对象(可选):调用函数时,函数内的this指向它;即调用函数作为该对象的方法调用

// 遍历数组
var data = [1, 2, 3, 4, 5];
var sum = 0;
data.forEach(function (value, index, arr) {
  sum += value; // 将每个值累加到sum中
  arr[index]++ // 数组中每个元素的值自增1
});
console.log(sum); // => 15
console.log(data); // => [2, 3, 4, 5, 6]

map()
Array.map()方法将数组中每个元素传递给指定函数,并返回一个新数组,它包含该函数返回的值:

// 映射数组
var aa = [1, 2, 3];
var bb = aa.map(function (value) {
    return value * value
});
console.log(bb);    // => 1, 4, 9]

提示:传递给map()的函数应该有返回值,且同上面概述一样,它不改变调用的数组

filter()
Array.filter()方法按传递的函数条件过滤,并返回过滤后的新数组。它是调用数组的一个子集,调用函数返回true或false(一个能转化为true/false的值);利用filter()方法可以压缩数组,去除不存在(稀疏数组)、undefiend、unll值:

// 过滤数组
var cc = [5, 4, 3, 2, 1, , undefined, null];
var valOne = cc.filter(function (value) { return value < 3 });
var valTwo = cc.filter(function (value) { return value !== undefined && value != null });
console.log(valOne);   // => [2, 1, null]
console.log(valTwo);   // => [5, 4, 3, 2, 1]
console.log(cc);   // => [5, 4, 3, 2, 1, empty, undefined, null]

every()和some()
Array.every()方法对数组每个元素进行逻辑判定,返回true或false;当数组中的每个元素都满足判定条件时(返回true),它才返回true。some()方法同样是对数组进行逻辑判断,只要调用数组中的任意一个元素符合判断条件,它就返回true。

every()和some()两个方法在遍历数组时,只要判定值符合条件,则循环会立即停止,否则他将遍历整个数组:

// 检测数组
var arr = [1, 2, 3, 4, 5];
arr.every(function (value) { return value < 10 }); // => true: 所有值都小于10
arr.every(function (value) { return value % 2 === 0 }); // => false: 不是所有的值都是偶数
arr.some(function (value) { return value === 3 }); // => true: 数组中包含3的值
arr.some(isNaN); // => false: 数组不包含非数值元素

reduce()和reduceRight()
Array.reduce()和reduceRight()方法使用指定函数将数组元素进行组合,生成单个值。这在函数式编程中是常见的操作,也可以称之为“注入”和“折叠”。reduce()需要两个参数:第一个参数是执行简化操作的函数、第二个(可选)是传递给函数的初始值;

简化函数的任何是用某种方法把两个值组合或简化成一个值,并返回简化后的值:

// 简化数组
var arr = [1, 2, 3, 4, 5];
var sum = arr.reduce(function (x, y) { return x + y }, 0);    // => 15
var product = arr.reduce(function (x, y) { return x * y }, 1);    // => 120
var max = arr.reduce(function (x, y) { return (x > y) ? x : y }, 1);    // => 5

简化函数接收的回调参数:
① 简化操作累计的值(函数返回值),第一次调用函数时,该值是reduce()第二个参数(初始值);
    若没有传入初始值,则默认用调用数组的第一个元素作为初始值.
② ~ ④ 分别为:数组元素、元素索引、数组本身

注意:在空数组上,不带初始值参数调用reduce()将抛出类型错误异常

reduceRight()方法工作原理和reduce()一样,不用的是它按照数组索引从高到低(从右到左)处理数组,而不是从低到高。

例如乘方操作的优先顺序是从右到左:

var arr = [2, 3, 4];
var big = arr.reduceRight(function (sum, value) {
    return Math.pow(value, sum);
});
console.log(big);   // => 2.4178516392292583e+24

indexOf()和lastIndexOf()
indexOf()和lastIndexOf()方法搜索整个数组中具有给定值的元素,返回找到的第一个元素的索引,若不存在则返回-1。indexOf()从头到尾搜索,而lastIndexOf()则反向搜索。传入两个参数:
① 需要搜索的值、② 起始位置(可选的的),若忽略此参数,则从头或从尾开始搜索

// 搜索数组
var arr = [0, 1, 2, 1, 0];
arr.indexOf(1); // => 1
arr.lastIndexOf(1); // => 3
arr.lastIndexOf(3); // => -1

提示:字符串也有indexOf()和lastIndexOf()方法,它们和数组方法的功能类似

例子,利用下列函数搜索指定的值并返回所有匹配的元素索引组成的数组:

var searchArr = [1, 2, 3, 1, 22, 33, 11, 1, 4, 5]
function findall(a, x) {
    var results = [], len = a.length, pos = 0;
    while (pos < len) {
        pos = a.indexOf(x, pos); // 搜索
        if (pos === -1) break;  // 未找到,就完成搜索
        results.push(pos);  // 否则,在数组中存储索引并开始下一个位置开始搜索
        pos += 1;
    }
    return results
}
findall(searchArr, 1); // => [0, 3, 7


文章分类
热门文章
文章标签