使用JS也算有段时日,然对于数组的使用,总局限于很初级水平,且每每使用总要查下API,或者写个小Demo测试下才算放心,一来二去,浪费不少时间;思虑下,堪能如此继续之?当狠心深学下方是正道。 一, 数组常用方法1. 数组的创建var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度 var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); //创建一个数组并赋值 要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以将元素存储在规定长度以外的,注意:这时长度会随之改变 2. 数组的元素的访问var testGetArrValue=arrayObj[1]; //获取数组的元素值 arrayObj[1]= "这是新值"; //给数组元素赋予新的值 3. 数组元素的添加arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组结尾,并返回数组新长度 arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组开始,数组中的元素自动后移,返回数组新长度 arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置,插入位置的元素自动后移,返回""。 4. 数组元素的删除arrayObj.pop(); //移除最后一个元素并返回该元素值 arrayObj.shift(); //移除最前一个元素并返回该元素值,数组中元素自动前移 arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返回所移除的元素 5. 数组的截取和合并arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分,注意不包括 end 对应的元素,如果省略 end 将复制 start 之后的所有元素 arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); //将多个数组(也可以是字符串,或者是数组和字符串的混合)连接为一个数组,返回连接好的新的数组 6. 数组的拷贝arrayObj.slice(0); //返回数组的拷贝数组,注意是一个新的数组,不是指向 arrayObj.concat(); //返回数组的拷贝数组,注意是一个新的数组,不是指向 7. 数组元素的排序arrayObj.reverse(); //反转元素(最前的排到最后、最后的排到最前),返回数组地址 arrayObj.sort(); //对数组元素排序,返回数组地址 8. 数组元素的字符串化join()方法是一个非常实用的方法,它把当前Array的每个元素都用指定的字符串连接起来,然后返回连接后的字符串: arrayObj.join(separator); //返回字符串,这个字符串将数组的每一个元素值连接在一起,中间用 separator 隔开。 var arr = ['A', 'B', 'C', 1, 2, 3]; arr.join('-'); // 'A-B-C-1-2-3' 如果Array的元素不是字符串,将自动转换为字符串后再连接。 valueOf: 与String类似,Array也可以通过indexOf()来搜索一个指定的元素的位置: var arr = [10, 20, '30', 'xyz']; arr.indexOf(10); // 元素10的索引为0 arr.indexOf(30); // 元素30没有找到,返回-1 arr.indexOf('30'); // 元素'30'的索引为2 toLocaleString 、toString:可以看作是join的特殊用法,不常用; toLocaleString(): 方法可根据本地时间把 Date 对象转换为字符串,并返回结果。 toString:把数组转换为字符串,并返回结果。 lastIndexOf:返回在数组中搜索到的与给定参数相等的元素的最后(最大)索引。 toSource(): 返回一个字符串,代表该数组的源代码.<font color="red">该特性是非标准的,请尽量不要在生产环境中使用它!</font> Array.prototype.toSource() 二、数组对象的3个属性1. length属性Length属性表示数组的长度,即其中元素的个数。因为数组的索引总是由0开始,所以一个数组的上下限分别是:0和length-1。和其他大多数语言不同的是,JavaScript数组的length属性是可变的,这一点需要特别注意。当length属性被设置得更大时,整个数组的状态事实上不会发生变化,仅仅是length属性变大;当length属性被设置得比原来小时,则原先数组中索引大于或等于length的元素的值全部被丢失。下面是演示改变length属性的例子: var arr=[12,23,5,3,25,98,76,54,56,76];//定义了一个包含10个数字的数组 alert(arr.length); //显示数组的长度10 arr.length=12; //增大数组的长度 alert(arr.length); //显示数组的长度已经变为12 alert(arr[8]); //显示第9个元素的值,为56 arr.length=5; //将数组的长度减少到5,索引等于或超过5的元素被丢弃 alert(arr[8]); //显示第9个元素已经变为"undefined" arr.length=10; //将数组长度恢复为10 alert(arr[8]); //虽然长度被恢复为10,但第9个元素却无法收回,显示"undefined" 由上面的代码我们可以清楚的看到length属性的性质。但length对象不仅可以显式的设置,它也有可能被隐式修改。JavaScript中可以使用一个未声明过的变量,同样,也可以使用一个未定义的数组元素(指索引超过或等于length的元素),这时,length属性的值将被设置为所使用元素索引的值加1。例如下面的代码: var arr=[12,23,5,3,25,98,76,54,56,76]; console.log(arr.length); // 10 arr[15] = 34; console.log(arr.length); //16 console.log(arr[10]); //undefine console.log(arr.toString()) //12,23,5,3,25,98,76,54,56,76,,,,,,34 代码中同样是先定义了一个包含10个数字的数组,通过alert语句可以看出其长度为10。随后使用了索引为15的元素,将其赋值为15,即 arr[15]=34,这时再用alert语句输出数组的长度,得到的是16。无论如何,对于习惯于强类型编程的开发人员来说,这是一个很令人惊讶的特性。事实上,使用new Array()形式创建的数组,其初始长度就是为0,正是对其中未定义元素的操作,才使数组的长度发生变化。 大多数其他编程语言不允许直接改变数组的大小,越界访问索引会报错。然而,JavaScript的Array却不会有任何错误。在编写代码时,不建议直接修改Array的大小,访问索引时要确保索引不会越界。 由上面的介绍可以看到,length属性是如此的神奇,利用它可以方便的增加或者减少数组的容量。因此对length属性的深入了解,有助于在开发过程中灵活运用。 2. prototype 属性返回对象类型原型的引用。prototype 属性是 object 共有的。
objectName.prototype:objectName 参数是object对象的名称。 给数组对象添加返回数组中最大元素值的方法。要完成这一点,声明一个函数,将它加入 Array.prototype, 并使用它。 function array_max() { var i, max = this[0]; for (i = 1; i < this.length; i++) { if (max < this[i]) max = this[i]; } return max; } Array.prototype.max = array_max; var x = new Array(1, 2, 3, 4, 5, 6); var y = x.max(); 该代码执行后,y 保存数组 x 中的最大值,即:6。 3. constructor 属性表示创建对象的函数。object.constructor //object是对象或函数的名称。 说明:constructor 属性是所有具有 prototype 的对象的成员。它们包括除 Global 和 Math 对象以外的所有 JScript 固有对象。constructor 属性保存了对构造特定对象实例的函数的引用。 x = new String("Hi"); if (x.constructor == String) // 进行处理(条件为真)。 function MyFunc { // 函数体。 } y = new MyFunc; if (y.constructor == MyFunc) // 进行处理(条件为真)。 y = new Array(); 三、判断是否为数组
js因为设计上的某些缺陷,导致在对于Array的判断,也是颇费周折的。 var arr=new Array("1","2","3","4","5"); alert(typeof(arr)); // Object instanceof 操作符: 运算符会返回一个 Boolean 值,指出对象是否是特定类的一个实例。 var arrayStr=new Array("1","2","3","4","5"); alert(arrayStr instanceof Array); //true 虽然此时能够完好的工作,但,事实上在多个frame中穿梭就会产生大问题了。所以~~~ var iframe = document.createElement('iframe'); document.body.appendChild(iframe); xArray = window.frames[window.frames.length-1].Array; var arr = new xArray("1","2","3","4","5");//这个写法IE大哥下是不支持的,FF下才有 alert(arr instanceof Array); // false alert(arr.constructor === Array); // false ECMA-262中规范定义了Object.prototype.toString的行为:首先,取得对象的一个内部属性[[Class]],然后依据这个属性,返回一个类似于"[object Array]"的字符串作为结果(看过ECMA标准的应该都知道,[[]]用来表示语言内部用到的、外部不可直接访问的属性,称为“内部属性”)。利用这个方法,再配合call,我们可以取得任何对象的内部属性[[Class]],然后把类型检测转化为字符串比较,以达到我们的目的。于是利用这点,就有了下面这种方法: function isArray(obj) { return Object.prototype.toString.call(obj) === '[object Array]'; } call改变toString的this引用为待检测的对象,返回此对象的字符串表示,然后对比此字符串是否是'[object Array]',以判断其是否是Array的实例。也许你要问了,为什么不直接o.toString()?嗯,虽然Array继承自Object,也会有toString方法,但是这个方法有可能会被改写而达不到我们的要求,而Object.prototype则是老虎的屁股,很少有人敢去碰它的,所以能一定程度保证其“纯洁性”:)。这也是Array.isArray()方法的兼容旧环境(Polyfill)。 如此很好的解决了跨frame对象构建的问题,经过测试,各大浏览器兼容性也很好,可以放心使用。很多框架,比如jQuery、Base2等等,都计划借鉴此方法以实现某些特殊的,比如数组、正则表达式等对象的类型判定!当然也可以写成如下这样: function isArray2 (v){ return toString.apply(v) === '[object Array]'; } 要注意的是:toString方法极有可能被重写,所以需要使用的时候,可以直接使用Object.prototype.toString()方法。 Array.isArray()See方法用来判断某个值是否为数组。如果是,则返回 true,否则返回 false。 // 下面的函数调用都返回 true Array.isArray([]); Array.isArray([1]); Array.isArray(new Array()); // 鲜为人知的事实:其实 Array.prototype 也是一个数组。 Array.isArray(Array.prototype); // 下面的函数调用都返回 false Array.isArray(); Array.isArray({}); Array.isArray(null); Array.isArray(undefined); Array.isArray(17); Array.isArray('Array'); Array.isArray(true); Array.isArray(false); Array.isArray({ __proto__: Array.prototype }); 四, 数组迭代过程filter() See
方法使用指定的函数测试所有元素,并创建一个包含所有通过测试的元素的新数组。
示例:筛选排除掉所有的小值 function isBigEnough(element) { return element >= 10; } var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); // filtered is [12, 130, 44] forEach() See
方法让数组的每一项都执行一次给定的函数。
forEach 遍历的范围在第一次调用 callback 前就会确定。调用forEach 后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变,则传递给 callback 的值是 forEach 遍历到他们那一刻的值。已删除的项不会被遍历到。 注意: 没有办法中止 forEach 循环。如果要中止,可使用 Array.every 或 Array.some。见下面的例子。 示例1:打印出数组的内容 function logArrayElements(element, index, array) { console.log("a[" + index + "] = " + element); } [2, 5, 9].forEach(logArrayElements); // logs: // a[0] = 2 // a[1] = 5 // a[2] = 9
示例2:一个可以克隆对象的函数 function copy(o){ var copy = Object.create( Object.getPrototypeOf(o) ); var propNames = Object.getOwnPropertyNames(o); propNames.forEach(function(name){ var desc = Object.getOwnPropertyDescriptor(o, name); Object.defineProperty(copy, name, desc); }); return copy; } var o1 = {a:1, b:2}; var o2 = copy(o1); // o2 looks like o1 now every() See
方法测试数组的所有元素是否都通过了指定函数的测试。
实例:检测所有数组元素的大小 //检测数组中的所有元素是否都大于 10 function isBigEnough(element, index, array) { return (element >= 10); } var passed = [12, 5, 8, 130, 44].every(isBigEnough); // passed is false passed = [12, 54, 18, 130, 44].every(isBigEnough); // passed is true map() See方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。 语法: array.map(callback[, thisArg])
实例一:求数组中每个元素的平方根 //在一个 String 上使用 map 方法获取字符串中每个字符所对应的 ASCII 码组成的数组: var map = Array.prototype.map var a = map.call("Hello World", function(x) { return x.charCodeAt(0); }) // a的值为[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100] 通常情况下,map 方法中的 callback 函数只需要接受一个参数,就是正在被遍历的数组元素本身。但这并不意味着 map 只给 callback 传了一个参数。这个思维惯性可能会让我们犯一个很容易犯的错误。比如下面的语句返回什么呢: ["1", "2", "3"].map(parseInt); // 你可能觉的会是[1, 2, 3] // 但实际的结果是 [1, NaN, NaN] 通常使用parseInt时,只需要传递一个参数.但实际上,parseInt可以有两个参数.第二个参数是进制数.可以通过语句"alert(parseInt.length)===2"来验证.
map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素, 元素索引, 原数组本身. function returnInt(element){ return parseInt(element,10); } ["1", "2", "3"].map(returnInt); // 返回[1,2,3] some() See方法测试数组中的某些元素是否通过了指定函数的测试。 语法: arr.some(callback[, thisArg])
示例:测试数组元素的值 //检测在数组中是否有元素大于 10。 function isBigEnough(element, index, array) { return (element >= 10); } var passed = [2, 5, 8, 1, 4].some(isBigEnough); // passed is false passed = [12, 5, 8, 1, 4].some(isBigEnough); // passed is true reduce() See
接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。
示例1:将数组所有项相加 var total = [0, 1, 2, 3].reduce(function(a, b) { return a + b; }); // total == 6 示例2: 数组扁平化 var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) { return a.concat(b); }); // flattened is [0, 1, 2, 3, 4, 5] 示例2: 统计一个数组中有多少个不重复的单词 不使用reduce时的写法 var arr = ["apple","orange","apple","orange","pear","orange"]; function getWordCnt(){ var obj = {}; for(var i= 0, l = arr.length; i< l; i++){ var item = arr[i]; obj[item] = (obj[item] +1 ) || 1; } return obj; } console.log(getWordCnt()); 使用reduce()后的写法: var arr = ["apple","orange","apple","orange","pear","orange"]; function getWordCnt(){ return arr.reduce(function(prev,next){ prev[next] = (prev[next] + 1) || 1; return prev; },{}); } console.log(getWordCnt()); 这其中一个需要注意的点在于,initialValue提供与否对prev和next的影响; /* 二者的区别,在console中运行一下即可知晓*/ var arr = ["apple","orange",'pear','jade']; function noPassValue(){ return arr.reduce(function(prev,next){ console.log("prev:",prev); console.log("next:",next); //console.info('prev type:'+ typeof(prev)); //prev type:string return prev + " " +next; }); } function passValue(){ return arr.reduce(function(prev,next){ console.log("prev:",prev); console.log("next:",next); prev[next] = 1; //console.info('prev type:'+ typeof(prev)); // object return prev; },{}); } console.log("No Additional parameter:",noPassValue()); console.log("----------------"); console.log("With {} as an additional parameter:",passValue()); 一点总结:
pop,push,reverse,shift,sort,splice,unshift 会改变原数组 几个注意点:
JavaScript的数据类型分为:值类型和引用类型(地址值);而常见的引用类型有Object和Array/数组的存储模型中,如果是诸如Number,String之类的类型数据会被直接压入栈中,而引用类型只会压入对该值的一个索引(即C中所说的保存了数据的指针)。这些数据时储存在堆中的某块区间中,堆栈并不是独立的,栈中也可以在堆中存放。在使用Array的进行赋值操作的时候,也当注意是否要进行深度拷贝复制(可借助arr.slice(0)),以免造成对自身污染。对于Js数据,其实内容还是还有很多需要学习的,比如ArrayBuffer等。根据学以致用的原则,这些等到需要的时候再去学吧。 (责任编辑:好模板) |