Javascript数组操作
前端笔记 2017-11-15 09:37:27

 一, 数组常用方法

1. 数组的创建

JavaScript Code复制内容到剪贴板
  1. var arrayObj = new Array();　//创建一个数组  
  2. var arrayObj = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度  
  3. var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);　//创建一个数组并赋值  

 

要说明的是，虽然第二种方法创建数组指定了长度，但实际上所有情况下数组都是变长的，也就是说即使指定了长度为5，仍然可以将元素存储在规定长度以外的，注意：这时长度会随之改变

 

2. 数组的元素的访问

JavaScript Code复制内容到剪贴板
  1. var testGetArrValue=arrayObj[1]; //获取数组的元素值  
  2. arrayObj[1]= "这是新值"; //给数组元素赋予新的值  

 

3. 数组元素的添加

JavaScript Code复制内容到剪贴板
  1. arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组结尾，并返回数组新长度  
  2. arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度  
  3. arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回""。  

 

4. 数组元素的删除

JavaScript Code复制内容到剪贴板
  1. arrayObj.pop(); //移除最后一个元素并返回该元素值  
  2. arrayObj.shift(); //移除最前一个元素并返回该元素值，数组中元素自动前移  
  3. arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素，数组形式返回所移除的元素  

 

5. 数组的截取和合并

JavaScript Code复制内容到剪贴板
  1. arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分，注意不包括 end 对应的元素，如果省略 end 将复制 start 之后的所有元素  
  2. arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); //将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组  

 

6. 数组的拷贝

JavaScript Code复制内容到剪贴板
  1. arrayObj.slice(0); //返回数组的拷贝数组，注意是一个新的数组，不是指向  
  2. arrayObj.concat(); //返回数组的拷贝数组，注意是一个新的数组，不是指向  

 

7. 数组元素的排序

JavaScript Code复制内容到剪贴板
  1. arrayObj.reverse(); //反转元素（最前的排到最后、最后的排到最前），返回数组地址  
  2. arrayObj.sort(); //对数组元素排序，返回数组地址  

 

8. 数组元素的字符串化

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

JavaScript Code复制内容到剪贴板
  1. arrayObj.join(separator); //返回字符串，这个字符串将数组的每一个元素值连接在一起，中间用 separator 隔开。  
  2.   
  3. var arr = ['A', 'B', 'C', 1, 2, 3];  
  4. arr.join('-'); // 'A-B-C-1-2-3'  

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

valueOf: 与String类似，Array也可以通过indexOf()来搜索一个指定的元素的位置：

JavaScript Code复制内容到剪贴板
  1. var arr = [10, 20, '30', 'xyz'];  
  2. arr.indexOf(10); // 元素10的索引为0  
  3. arr.indexOf(30); // 元素30没有找到，返回-1  
  4. arr.indexOf('30'); // 元素'30'的索引为2  

 

toLocaleString 、toString：可以看作是join的特殊用法，不常用; toLocaleString(): 方法可根据本地时间把 Date 对象转换为字符串，并返回结果。

toString:把数组转换为字符串，并返回结果。

lastIndexOf：返回在数组中搜索到的与给定参数相等的元素的最后（最大）索引。

toSource(): 返回一个字符串,代表该数组的源代码.<font color="red">该特性是非标准的，请尽量不要在生产环境中使用它！

 

二、数组对象的3个属性

1. length属性

Length属性表示数组的长度，即其中元素的个数。因为数组的索引总是由0开始，所以一个数组的上下限分别是：0和length-1。和其他大多数语言不同的是，JavaScript数组的length属性是可变的，这一点需要特别注意。当length属性被设置得更大时，整个数组的状态事实上不会发生变化，仅仅是length属性变大；当length属性被设置得比原来小时，则原先数组中索引大于或等于length的元素的值全部被丢失。下面是演示改变length属性的例子：

JavaScript Code复制内容到剪贴板
  1. var arr=[12,23,5,3,25,98,76,54,56,76];//定义了一个包含10个数字的数组  
  2. alert(arr.length); //显示数组的长度10  
  3.   
  4. arr.length=12; //增大数组的长度  
  5. alert(arr.length); //显示数组的长度已经变为12  
  6. alert(arr[8]); //显示第9个元素的值，为56  
  7.   
  8. arr.length=5; //将数组的长度减少到5，索引等于或超过5的元素被丢弃  
  9. alert(arr[8]); //显示第9个元素已经变为"undefined"  
  10.   
  11. arr.length=10; //将数组长度恢复为10  
  12. alert(arr[8]); //虽然长度被恢复为10，但第9个元素却无法收回，显示"undefined"  

 

由上面的代码我们可以清楚的看到length属性的性质。但length对象不仅可以显式的设置，它也有可能被隐式修改。JavaScript中可以使用一个未声明过的变量，同样，也可以使用一个未定义的数组元素（指索引超过或等于length的元素），这时，length属性的值将被设置为所使用元素索引的值加1。例如下面的代码：

JavaScript Code复制内容到剪贴板
  1. var arr=[12,23,5,3,25,98,76,54,56,76];  
  2. console.log(arr.length);  // 10  
  3.   
  4. arr[15] = 34;  
  5. console.log(arr.length);  //16  
  6.   
  7. console.log(arr[10]);     //undefine  
  8. console.log(arr.toString())  
  9. //12,23,5,3,25,98,76,54,56,76,,,,,,34  

在编写代码时，不建议直接修改Array的大小，访问索引时要确保索引不会越界。

 

2. prototype 属性

返回对象类型原型的引用。prototype 属性是 object 共有的。

objectName.prototype:objectName 参数是object对象的名称。
说明：用 prototype 属性提供对象的类的一组基本功能。 对象的新实例“继承”赋予该对象原型的操作。
对于数组对象，以以下例子说明prototype 属性的用途。

给数组对象添加返回数组中最大元素值的方法。要完成这一点，声明一个函数，将它加入 Array.prototype， 并使用它。

JavaScript Code复制内容到剪贴板
  1. function array_max()  
  2.  {  
  3.     var i,  
  4.     max = this[0];  
  5.     for (i = 1; i < this.length; i++)  
  6.     {  
  7.         if (max < this[i])  
  8.         max = this[i];  
  9.     }  
  10.     return max;  
  11. }  
  12. Array.prototype.max = array_max;  
  13. var x = new Array(1, 2, 3, 4, 5, 6);  
  14. var y = x.max();  

该代码执行后，y 保存数组 x 中的最大值，即：6。

 

3. constructor 属性

表示创建对象的函数。object.constructor //object是对象或函数的名称。

说明：constructor 属性是所有具有 prototype 的对象的成员。它们包括除 Global 和 Math 对象以外的所有 JScript 固有对象。constructor 属性保存了对构造特定对象实例的函数的引用。

JavaScript Code复制内容到剪贴板
  1. x = new String("Hi");  
  2. if (x.constructor == String) // 进行处理（条件为真）。  
  3.   
  4. function MyFunc {  
  5.    // 函数体。  
  6. }  
  7. y = new MyFunc;  
  8. if (y.constructor == MyFunc) // 进行处理（条件为真）。  
  9.   
  10. y = new Array();  

 

三、判断是否为数组

js因为设计上的某些缺陷，导致在对于Array的判断，也是颇费周折的。
typeof 操作符:对于Function， String， Number ，Undefined 等几种类型的对象来说，他完全可以胜任，但是为Array时,难免会让人失望：

JavaScript Code复制内容到剪贴板
  1. var arr=new Array("1","2","3","4","5");  
  2. alert(typeof(arr));  // Object  

instanceof 操作符: 运算符会返回一个 Boolean 值，指出对象是否是特定类的一个实例。

JavaScript Code复制内容到剪贴板
  1. var arrayStr=new Array("1","2","3","4","5");  
  2. alert(arrayStr instanceof Array);  //true  

 

虽然此时能够完好的工作，但，事实上在多个frame中穿梭就会产生大问题了。所以：

JavaScript Code复制内容到剪贴板
  1. var iframe = document.createElement('iframe');      
  2. document.body.appendChild(iframe);      
  3. xArray = window.frames[window.frames.length-1].Array;         
  4. var arr = new xArray("1","2","3","4","5");//这个写法IE大哥下是不支持的，FF下才有  
  5.   
  6. alert(arr instanceof Array); // false   
  7. alert(arr.constructor === Array); // false  

 

ECMA-262中规范定义了Object.prototype.toString的行为：首先，取得对象的一个内部属性[[Class]]，然后依据这个属性，返回一个类似于"[object Array]"的字符串作为结果（看过ECMA标准的应该都知道，[[]]用来表示语言内部用到的、外部不可直接访问的属性，称为“内部属性”）。利用这个方法，再配合call，我们可以取得任何对象的内部属性[[Class]]，然后把类型检测转化为字符串比较，以达到我们的目的。于是利用这点，就有了下面这种方法：

JavaScript Code复制内容到剪贴板
  1. function isArray(obj) {    
  2.   return Object.prototype.toString.call(obj) === '[object Array]';     
  3. }  

 

call改变toString的this引用为待检测的对象，返回此对象的字符串表示，然后对比此字符串是否是'[object Array]'，以判断其是否是Array的实例。也许你要问了，为什么不直接o.toString()？嗯，虽然Array继承自Object，也会有toString方法，但是这个方法有可能会被改写而达不到我们的要求，而Object.prototype则是老虎的屁股，很少有人敢去碰它的，所以能一定程度保证其“纯洁性”：）。这也是Array.isArray()方法的兼容旧环境（Polyfill）。

如此很好的解决了跨frame对象构建的问题，经过测试，各大浏览器兼容性也很好，可以放心使用。很多框架，比如jQuery、Base2等等，都计划借鉴此方法以实现某些特殊的，比如数组、正则表达式等对象的类型判定！当然也可以写成如下这样：

JavaScript Code复制内容到剪贴板
  1. function isArray2 (v){  
  2.     return toString.apply(v) === '[object Array]';  
  3. }  

 

要注意的是：toString方法极有可能被重写，所以需要使用的时候，可以直接使用Object.prototype.toString()方法。

Array.isArray()See方法用来判断某个值是否为数组。如果是，则返回 true，否则返回 false。

JavaScript Code复制内容到剪贴板
  1. // 下面的函数调用都返回 true  
  2. Array.isArray([]);  
  3. Array.isArray([1]);  
  4. Array.isArray(new Array());  
  5. // 鲜为人知的事实：其实 Array.prototype 也是一个数组。  
  6. Array.isArray(Array.prototype);   
  7.   
  8. // 下面的函数调用都返回 false  
  9. Array.isArray();  
  10. Array.isArray({});  
  11. Array.isArray(null);  
  12. Array.isArray(undefined);  
  13. Array.isArray(17);  
  14. Array.isArray('Array');  
  15. Array.isArray(true);  
  16. Array.isArray(false);  
  17. Array.isArray({ __proto__: Array.prototype });  

 

四, 数组迭代过程

filter() See

方法使用指定的函数测试所有元素，并创建一个包含所有通过测试的元素的新数组。
语法：arr.filter(callback[, thisArg])
如果为 filter 提供一个 thisArg 参数，则它会被作为 callback 被调用时的 this 值。否则，callback 的 this 值在非严格模式下将是全局对象，严格模式下为 undefined。

filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或 等价于 true 的值 的元素创建一个新数组。callback 只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。

示例：筛选排除掉所有的小值

JavaScript Code复制内容到剪贴板
  1. function isBigEnough(element) {  
  2.   return element >= 10;  
  3. }  
  4. var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);  
  5. // filtered is [12, 130, 44]  

 

forEach()

方法让数组的每一项都执行一次给定的函数。
语法: array.forEach(callback[, thisArg])

forEach 方法按升序为数组中含有效值的每一项执行一次callback 函数，那些已删除（使用delete方法等情况）或者从未赋值的项将被跳过（但不包括哪些值为 undefined 的项）。

forEach 遍历的范围在第一次调用 callback 前就会确定。调用forEach 后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变，则传递给 callback 的值是 forEach 遍历到他们那一刻的值。已删除的项不会被遍历到。 注意： 没有办法中止 forEach 循环。如果要中止，可使用 Array.every 或 Array.some。见下面的例子。

示例1:打印出数组的内容

JavaScript Code复制内容到剪贴板
  1. function logArrayElements(element, index, array) {  
  2.     console.log("a[" + index + "] = " + element);  
  3. }  
  4. [2, 5, 9].forEach(logArrayElements);  
  5. // logs:  
  6. // a[0] = 2  
  7. // a[1] = 5  
  8. // a[2] = 9  

示例2:一个可以克隆对象的函数
使用下面的代码可以复制一个给定的对象,虽然有很多不同的复制对象的方法.不过下面介绍的这种方法使用了Array.prototype.forEach和其他一些ECMAScript 5中的Object.*函数.

JavaScript Code复制内容到剪贴板
  1. function copy(o){  
  2.   var copy = Object.create( Object.getPrototypeOf(o) );  
  3.   var propNames = Object.getOwnPropertyNames(o);  
  4.   
  5.   propNames.forEach(function(name){  
  6.     var desc = Object.getOwnPropertyDescriptor(o, name);  
  7.     Object.defineProperty(copy, name, desc);  
  8.   });  
  9.   
  10.   return copy;  
  11. }  
  12.   
  13. var o1 = {a:1, b:2};  
  14. var o2 = copy(o1); // o2 looks like o1 now  

every()

方法测试数组的所有元素是否都通过了指定函数的测试。
语法:arr.every(callback[, thisArg])

every 方法为数组中的每个元素执行一次 callback 函数，直到它找到一个使 callback 返回 falsy（表示可转换为布尔值 false 的值）的元素。如果发现了一个这样的元素，every 方法将会立即返回 false。否则，callback 为每一个元素返回 true，every 就会返回 true。callback 只会为那些已经被赋值的索引调用。不会为那些被删除或从来没被赋值的索引调用。callback 被调用时传入三个参数：元素值，元素的索引，原数组。 every 不会改变原数组。

实例：检测所有数组元素的大小

JavaScript Code复制内容到剪贴板
  1. //检测数组中的所有元素是否都大于 10  
  2. function isBigEnough(element, index, array) {  
  3.   return (element >= 10);  
  4. }  
  5. var passed = [12, 5, 8, 130, 44].every(isBigEnough);  
  6. // passed is false  
  7. passed = [12, 54, 18, 130, 44].every(isBigEnough);  
  8. // passed is true  

 

map()

方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。

语法: array.map(callback[, thisArg])

map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用；那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。map 不修改调用它的原数组本身（当然可以在 callback 执行时改变原数组）。

实例一：求数组中每个元素的平方根

JavaScript Code复制内容到剪贴板
  1. //在一个 String  上使用 map 方法获取字符串中每个字符所对应的 ASCII 码组成的数组：  
  2. var map = Array.prototype.map  
  3. var a = map.call("Hello World", function(x) { return x.charCodeAt(0); })  
  4. // a的值为[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]  

通常情况下，map 方法中的 callback 函数只需要接受一个参数，就是正在被遍历的数组元素本身。但这并不意味着 map 只给 callback 传了一个参数。这个思维惯性可能会让我们犯一个很容易犯的错误。比如下面的语句返回什么呢:

JavaScript Code复制内容到剪贴板
  1. ["1", "2", "3"].map(parseInt);  
  2. // 你可能觉的会是[1, 2, 3]  
  3. // 但实际的结果是 [1, NaN, NaN]  

通常使用parseInt时,只需要传递一个参数.但实际上,parseInt可以有两个参数.第二个参数是进制数.可以通过语句"alert(parseInt.length)===2"来验证.

map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素, 元素索引, 原数组本身.
第三个参数parseInt会忽视, 但第二个参数不会,也就是说,parseInt把传过来的索引值当成进制数来使用.从而返回了NaN。 因此此时应该使用如下的用户函数returnInt：

JavaScript Code复制内容到剪贴板
  1. function returnInt(element){  
  2.   return parseInt(element,10);  
  3. }  
  4.   
  5. ["1", "2", "3"].map(returnInt);  
  6. // 返回[1,2,3]  

 

some()

方法测试数组中的某些元素是否通过了指定函数的测试。

语法: arr.some(callback[, thisArg])

描述:some 为数组中的每一个元素执行一次 callback 函数，直到找到一个使得 callback 返回一个“真值”（即可转换为布尔值 true 的值）。如果找到了这样一个值，some 将会立即返回 true。否则，some 返回 false。callback 只会在那些”有值“的索引上被调用，不会在那些被删除或从来未被赋值的索引上调用。
示例：测试数组元素的值

JavaScript Code复制内容到剪贴板
  1. //检测在数组中是否有元素大于 10。  
  2. function isBigEnough(element, index, array) {  
  3.   return (element >= 10);  
  4. }  
  5. var passed = [2, 5, 8, 1, 4].some(isBigEnough);  
  6. // passed is false  
  7. passed = [12, 5, 8, 1, 4].some(isBigEnough);  
  8. // passed is true  

 

reduce()

接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。
语法: arr.reduce(callback,[initialValue]) callback:执行数组中每个值的函数，包含四个参数

previousValue:上一次调用回调返回的值，或者是提供的初始值（initialValue）
currentValue 数组中当前被处理的元素
index 当前元素在数组中的索引
array 调用 reduce 的数组 initialValue: 作为第一次调用 callback 的第一个参数。
描述:reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。

回调函数第一次执行时，previousValue 和 currentValue 可以是一个值，如果 initialValue 在调用 reduce 时被提供，那么第一个 previousValue 等于 initialValue ，并且currentValue 等于数组中的第一个值；如果initialValue 未被提供，那么previousValue 等于数组中的第一个值，currentValue等于数组中的第二个值。

如果数组为空并且没有提供initialValue， 会抛出TypeError 。如果数组仅有一个元素（无论位置如何）并且没有提供initialValue， 或者有提供initialValue但是数组为空，那么此唯一值将被返回并且callback不会被执行。
示例1：将数组所有项相加

JavaScript Code复制内容到剪贴板
  1. var total = [0, 1, 2, 3].reduce(function(a, b) {  
  2.     return a + b;  
  3. });  
  4. // total == 6  

示例2: 数组扁平化

JavaScript Code复制内容到剪贴板
  1. var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {  
  2.     return a.concat(b);  
  3. });  
  4. // flattened is [0, 1, 2, 3, 4, 5]  

示例2: 统计一个数组中有多少个不重复的单词

不使用reduce时的写法

JavaScript Code复制内容到剪贴板
  1. var arr = ["apple","orange","apple","orange","pear","orange"];  
  2. function getWordCnt(){  
  3.     var obj = {};  
  4.   
  5.     for(var i= 0, l = arr.length; i< l; i++){  
  6.         var item = arr[i];  
  7.         obj[item] = (obj[item] +1 ) || 1;  
  8.     }  
  9.   
  10.     return obj;  
  11. }  
  12. console.log(getWordCnt());  

使用reduce()后的写法：

JavaScript Code复制内容到剪贴板
  1. var arr = ["apple","orange","apple","orange","pear","orange"];  
  2. function getWordCnt(){  
  3.     return arr.reduce(function(prev,next){  
  4.         prev[next] = (prev[next] + 1) || 1;  
  5.         return prev;  
  6.     },{});  
  7. }  
  8. console.log(getWordCnt());  

这其中一个需要注意的点在于，initialValue提供与否对prev和next的影响；

JavaScript Code复制内容到剪贴板
  1. /* 二者的区别，在console中运行一下即可知晓*/  
  2. var arr = ["apple","orange",'pear','jade'];  
  3.   
  4. function noPassValue(){  
  5.     return arr.reduce(function(prev,next){  
  6.         console.log("prev:",prev);  
  7.         console.log("next:",next);  
  8.   
  9.         //console.info('prev type:'+ typeof(prev)); //prev type:string  
  10.         return prev + " " +next;  
  11.     });  
  12. }  
  13. function passValue(){  
  14.     return arr.reduce(function(prev,next){  
  15.         console.log("prev:",prev);  
  16.         console.log("next:",next);  
  17.   
  18.         prev[next] = 1;  
  19.         //console.info('prev type:'+ typeof(prev)); // object  
  20.         return prev;  
  21.     },{});  
  22. }  
  23. console.log("No Additional parameter:",noPassValue());  
  24. console.log("----------------");  
  25. console.log("With {} as an additional parameter:",passValue());  

 

一点总结：

pop,push,reverse,shift,sort,splice,unshift 会改变原数组
join,concat,indexOf,lastIndexOf,slice,toString 不会改变原数组
map,filter,some,every,reduce,forEach这些迭代方法不会改变原数组

几个注意点：

shift,pop会返回那个被删除的元素
splice 会返回被删除元素组成的数组，或者为空数组
push 会返回新数组长度
some 在有true的时候停止
every 在有false的时候停止
上述的迭代方法可以在最后追加一个参数thisArg,它是执行 callback 时的 this 值。
JavaScript的数据类型分为：值类型和引用类型(地址值)；而常见的引用类型有Object和Array／数组的存储模型中，如果是诸如Number,String之类的类型数据会被直接压入栈中，而引用类型只会压入对该值的一个索引（即C中所说的保存了数据的指针）。这些数据时储存在堆中的某块区间中，堆栈并不是独立的，栈中也可以在堆中存放。在使用Array的进行赋值操作的时候，也当注意是否要进行深度拷贝复制(可借助arr.slice(0))，以免造成对自身污染。对于Js数据，其实内容还是还有很多需要学习的，比如ArrayBuffer等。根据学以致用的原则，这些等到需要的时候再去学吧。

 

 

本文来自于：http://www.yoyo88.cn/note/frontend/206.html

上一篇 upload 上传图片(简易)
下一篇 javascript操作dom
相关的文章
Powered by yoyo苏ICP备15045725号