JavaScript 处理数组函数的总结

487次阅读  |  发布于3年以前

JavaScript的array可以包含任意数据类型，并通过索引来访问每个元素。

1、检测数组：instanceof、slice()、Array.isArray()

检测一个对象是不是数组的三种方法： (1)方法一：instanceOf检测方法 

var arr = ['a','b','c'];
if (arr instanceof Array){
// do something...
}

或者：

var arr = ['a','b','c'];
if (Array.prototype.isPrototypeOf(arr)){
// do something...
}

A instanceof B:检查B.prototype 是否存在于A的原型链[[prototype]]中。

(2)方法二：Array.isArray(obj)方法

var arr = ['a','b','c'];
if (Array.isArray(arr)){
// do something...
}

这个方法克服了instanceof的问题，可以确定某个变量是不是数组，而不管它是在哪个全局执行环境中创建的。

(3)方法三：万能方法

function isArray(arr){
    return Object.prototype.toString.call(arr) == '[object Array]';
}
var arr = ['a','b','c'];
isArray(arr);//true
var arr = [];
console.log(Object.prototype.toString.call(arr)); // "[object Array]"
// Array
Object.prototype.toString.call(value); // "[object Array]"

// Function
Object.prototype.toString.call(value); // "[object Function]"

// RegExp
Object.prototype.toString.call(value); // "[object RegExp]"

// Date
Object.prototype.toString.call(value); // "[object Date]"

2、获取数组长度：length

直接访问length属性获取数组长度：

var arr = [1,'hihi',3.14,null,true];
arr.length;//5

注意： length还是可写的，直接给Array的length赋一个新的值会导致Array大小的变化:

var arr = [1,2,3];
arr.length;//3
arr;//1,2,3
arr.length = 5;
arr;//1,2,3,undefined,undefined
arr.length = 2;
arr;//1,2

通过设置Array的length属性，可以从数组的末尾移除或者添加若干新项。 利用length属性还可以方便的向数组末尾添加新项：arr[arr.length]="black"，不过，这种方法通常可以用'push'方法来替代。

3、修改数组元素

Array可以通过索引把对应的元素修改为新的值，因此，对Array的索引进行赋值会直接修改这个Array：

var arr = [1,2,3];
arr[2] = 5;
arr;//1,2,5

注意：如果通过索引赋值时，索引超过了范围，仍然会引起Array的大小变化:

var arr = [1,2,3];
arr[5] = 8;
arr;//1,2,3,undefined,undefined,8

建议：大多数其他编程语言不允许直接改变数组的大小，越界访问索引会报错。然而，JavaScript的Array却不会有任何错误。在编写代码时，不建议直接修改Array的大小，访问索引时要确保索引不会越界。

4、位置方法

与String类似，Array也可以通过indexOf()来搜索一个指定的元素在Array中首次出现的位置:

var arr = [10,20,'30',20,30];
arr.indexOf(20);//1
arr.indexOf(20,2)//3

补充：

stringObject.indexOf(searchvalue,fromindex) indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

searchvalue: 必需。规定需检索的字符串值。 fromindex: 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

  • indexOf() 方法对大小写敏感！
  • 如果要检索的字符串值没有出现，则该方法返回 -1。
  • 在判断查找的项是否存在时，使用的是全等===。
  • lastIndexOf和indexOf操作符类似，不过是从数组的末尾开始向前查找的。

5、操作方法:slice()、concat()、splice()

slice()就是对应String的substring()版本，它截取Array的部分元素，然后返回一个新的Array：

var arr = ['A','B','C','D','E','F','G'];
arr.slice(1,3);//['B','C']
arr.slice(3);//['D','E','F','G']
arr.slice(3,50);//['D','E','F','G']
arr.slice(-3);//['E','F','G']
arr.slice(3,-2);//['D','E']

注意

补充：

arrayObject.slice(start,end) slice() 方法可从已有的数组中返回选定的元素。

start: 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。(这里的必需，有待商榷，实际上不写也是可以的) end: 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

小技巧：复制数组 如果不给slice()传递任何参数，它就会从头到尾截取所有元素。利用这一点，我们可以很容易地复制一个Array：

var arr = ['A','B','C','D','E','F','G'];
var aCopy = arr.slice();
aCopy;//['A','B','C','D','E','F','G']
arr === aCopy; //false(如果，你不知道这里为什么是`false`,那么你应该去看看原始值和引用对象)

splice()方法是修改Array的“万能方法”，它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素：

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只删除,不添加:
arr.splice(2, 2); // ['Google', 'Facebook']
arr; // ['Microsoft', 'Apple', 'Oracle']
// 只添加,不删除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

补充：

arrayObject.splice(index,howmany,item1,item2,...,itemx) splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

index: 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 howmany: 必需。要删除的项目数量。如果设置为 0，则不会删除项目。 item1,item2,...,itemx: 可选。向数组添加的新项目。

注意：

concat()方法把当前的Array和另一个Array连接起来，并返回一个新的Array:

var arr = ['one','two','three'];
var arrAdd = arr.concat([1,2,3]);
arrAdd;//['one','two','three',1,2,3];
arr;//['one','two','three']

注意：请注意，concat()方法并没有修改当前Array，而是返回了一个新的Array。 实际上，concat()方法可以接收任意个元素和Array，并且自动把Array拆开，然后全部添加到新的Array里：

var arr = ['one','two','three'];
var arrAdd = arr.concat(1,2,['A','B']);
arrAdd;//['one','two','three',1,2,'A','B']

补充：

arrayObject.concat(arrayX,arrayX,...,arrayX) concat() 方法用于连接两个或多个数组。

arrayX: 必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。

关于数组的操作方法

6、栈方法:push和pop

var arr = [1, 2];
arr.push('A', 'B'); // 返回Array新的长度: 4
arr; // [1, 2, 'A', 'B']
arr.pop(); // pop()返回'B'
arr; // [1, 2, 'A']
arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次
arr; // []
arr.pop(); // 空数组继续pop不会报错，而是返回undefined
arr; // []

补充：

(1)push: 方法可向数组的末尾添加一个或多个元素，并返回Array新的长度。

arrayObject.push(newElement1,newElement2,...,newElementX)

newElement1: 必需。要添加到数组的第一个元素。 newElement2: 可选。要添加到数组的第二个元素。 newElementX: 可选。可添加多个元素。

(2)pop: 方法用于删除并返回数组的最后一个元素

arrayObject.pop()

7、队列方法:unshift和shift

unshift和shift的作用于push和pop类似，只不过前者操作的是Array的头部.

var arr = [1, 2];
arr.unshift('A', 'B'); // 返回Array新的长度: 4
arr; // ['A', 'B', 1, 2]
arr.shift(); // 'A'
arr; // ['B', 1, 2]
arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次
arr; // []
arr.shift(); // 空数组继续shift不会报错，而是返回undefined
arr; // []

注意： unshift() 方法无法在 Internet Explorer 中正确地工作！

8、重排序方法：sort和reserve

sort()可以对当前Array进行排序，它会直接修改当前Array的元素位置，直接调用时，按照默认顺序(将按字母顺序对数组中的元素进行排序)排序:

var arr = ['c','b','a','C','B','A'];
arr.sort();
arr;//['A','B','C','a','b','c'];

补充：

arrayObject.sort(sortby) sort() 方法用于对数组的元素进行排序。

sortby: 可选。规定排序顺序。必须是函数。

  1. 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
  2. 若 a 等于 b，则返回 0。
  3. 若 a 大于 b，则返回一个大于 0 的值。

举例说明： 实例1：按数字大小对数字排序

function sortNumber(a,b){
    return a-b
}

var arr=[3,5,1,10,21];
arr.sort();
arr;//[1,10,21,3,5];
arr.sort(sortNumber);
arr;//[1,3,5,10,21]

实例2：默认情况下，对字符串排序，是按照ASCII的大小比较的，现在，我们提出排序应该忽略大小写，按照字母序排序。

var arr = ['Google','apple','Microsoft','BUPT'];
arr.sort();
arr;//['BUPT','Google','Microsoft'，'apple'];
arr.sort(function(s1,s2){
    var x1 = s1.toLowerCase();
    var x2 = s2.toLowerCase();
    if(x1<x2)
        return -1;
    if(x1>x2)
        return 1;
    return 0;
});
arr;//['apple','BUPT','Google','Microsoft']

将整个Array的元素给掉个(gě)个(gè)，也就是反转：

var arr = ['one','two','three'];
arr.reverse();
arr;//['three','two','one'];

注意：该方法会直接改变原来的数组，而不会创建新的数组。

9、转换方法：join、toString、toLocaleString、valueOf

该方法会返回由数组中每个值的字符串形式拼接而成的一个以，分割的字符串.该方法首先会针对数组中的每一项调用其相应的toString()方法得到字符串，然后再用,拼接这些字符串。

该方法会返回数组本身。

该方法也会创建一个数组值的以,分隔的字符串，但是与前面两个方法不同的是，这一次为了取得数组中每一项的值，调用的是每一项的toLocaleString()方法。

join()方法是一个非常实用的方法，它把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串：

var arr = ['a','b','c',1,2,3];
var arrToString = arr.join('-');
arrToString;//a-b-c-1-2-3

注意：如果Array的元素不是字符串，将自动转换为字符串后再连接。

补充：

arrayObject.join(separator) join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

separator: 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

关于转换方法，需要注意：

如果数组中某一项的值为null、undefined,那么该值在这些方法的返回结果中以空白字符串表示。

10、迭代方法：every、filter、forEach、map、some

这些方法都接收两个参数：要在每一项上运行的函数和（可选的）运行该函数的作用域对象——影响this的值。传入这些方法的函数会接收三个参数：数据项的值、该项在数组中的位置和数组对象本身。

这两个方法会忽略数组中undefined项

注意，该方法与jQuery中$().filter()方法的区别

expr:字符串值，包含供匹配当前元素集合的选择器表达式。 obj:现有的jQuery对象，以匹配当前的元素。 ele:一个用于匹配元素的DOM元素。 fn:一个函数用来作为测试元素的集合。它接受一个参数index，这是元素在jQuery集合的索引。在函数， this指的是当前的DOM元素。

注意，该方法不会遍历只声明而为定义的值

注意，该方法与jQuery中$.each()和each()方法的区别。

object:需要例遍的对象或数组。 callback:每个成员/元素执行的回调函数。回调函数拥有两个参数：第一个为对象的成员或数组的索引index，第二个为对应变量或内容value。

calback:对于每个匹配的元素所要执行的函数。回调函数只有一个参数，即index。

11、归并方法：reduce、reduceRight

参考

1、数组-廖雪峰的官方网站 2、js中substr,substring,indexOf,lastIndexOf的用法小结 3、 JavaScript 检测数组 4、[javascript 高级教程]()

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8