JavaScript中数组对象详解
nz4686
7年前
<p>Array对象即数组对象用于在单个变量中存储多个值，JS的数组是弱类型的，所以允许数组中含有不同类型的元素，数组元素甚至可以是对象或者其他数组。</p> <ul> <li><strong>创建数组的语法</strong></li> </ul> <p>1、Array构造器</p> <pre> <code class="language-javascript">1、var list=new Array(); 2、var list=new Array(size); 3、var list=new Array(element0,element1,...elementn);</code></pre> <p>2、字面量的方式</p> <pre> <code class="language-javascript">var Array[element0,element1,...elementn];</code></pre> <p>举例子</p> <pre> <code class="language-javascript">var list=new Array(1,true,null,undefined,{x:1},[1,2,3]);</code></pre> <pre> <code class="language-javascript">var list[1,true,null,undefined,{x:1},[1,2,3]];</code></pre> <ul> <li><strong>数组的分类</strong></li> </ul> <p>1、二维数组，二维数组的本质是数组中的元素又是数组。</p> <pre> <code class="language-javascript">var arr = [[1,2],[a,b]]; alert(arr[1][0]); //a 第2列第1行所在的元素</code></pre> <p>2、稀疏数组</p> <p>稀疏数组是包含从0开始的不连续索引的数组。在稀疏数组中一般length属性值比实际元素个数大（不常见）</p> <p>举例</p> <p>var a=["a",,"b",,,,"c",,];</p> <ul> <li><strong>数组对象属性</strong></li> </ul> <table> <thead> <tr> <th>属性</th> <th>作用</th> </tr> </thead> <tbody> <tr> <td>length 属性</td> <td>表示数组的长度，即其中元素的个数</td> </tr> <tr> <td>prototype 属性</td> <td>返回对象类型原型的引用</td> </tr> <tr> <td>constructor 属性</td> <td>表示创建对象的函数</td> </tr> </tbody> </table> <p>1、length 属性</p> <p>通过一些操作来讲解length属性</p> <p>var arr=[1,2,3,4,5,6,7,8,9,10]; //定义了一个包含10个数字的数组。</p> <p>数组的长度属性是可变的</p> <pre> <code class="language-javascript">alert(arr.length); //显示数组的长度10 arr.length=15; //增大数组的长度,length属性是可变的 alert(arr.length); //显示数组的长度已经变为15</code></pre> <p>访问数组元素</p> <pre> <code class="language-javascript">alert(arr[3]); //显示第4个元素的值，为4</code></pre> <p>减小数组长度</p> <pre> <code class="language-javascript">arr.length=2; //将数组的长度减少到2，数组中的元素只剩下索引值小于2的元素 alert(arr[9]); //这时候显示第10个元素已经变为"undefined"因为索引值大于等于2的元素都被抛弃了</code></pre> <p>恢复数组长度</p> <pre> <code class="language-javascript">arr.length=10; //将数组长度恢复为10 alert(arr[9]); //长度恢复之后已经抛弃的元素却无法收回，显示"undefined"</code></pre> <p>2、prototype 属性</p> <p>prototype 属性返回对象类型原型的引用。 prototype 属性是 object 共有的。</p> <p>objectName.prototype</p> <p>objectName 参数是 object 对象的名称。</p> <p>说明：用 prototype 属性提供对象的类的一组基本功能。 对象的新实例“继承”赋予该对象原型的操作。</p> <p>对于数组对象，用以下例子说明prototype 属性的用途。</p> <p>给数组对象添加返回数组中最大元素值的方法。要完成这一点，声明一个函数，将它加入 Array.prototype， 并使用它。</p> <pre> <code class="language-javascript">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( );</code></pre> <p>该代码执行后，y 保存数组 x 中的最大值，或说 6。</p> <p>3、constructor 属性</p> <p>constructor 属性表示创建对象的函数。</p> <p>object.constructor //object 是对象或函数的名称。</p> <p>说明： constructor 属性是所有具有 prototype 的对象的成员。它们包括除 Global 和 Math 对象以外的所有 JScript 固有对象。 constructor 属性保存了对构造特定对象实例的函数的引用。</p> <p>例如：</p> <pre> <code class="language-javascript">x = new String("Hi"); if (x.constructor == String) // 进行处理（条件为真）。 //或 function MyFunc { // 函数体。 } y = new MyFunc; if (y.constructor == MyFunc) // 进行处理（条件为真）。</code></pre> <p>对于数组来说：</p> <pre> <code class="language-javascript">y = new Array();</code></pre> <ul> <li><strong>Array的对象方法</strong></li> </ul> <p>说明：部分是ECMAScript5的新特性（IE678不支持）</p> <table> <thead> <tr> <th>方法</th> <th>作用</th> </tr> </thead> <tbody> <tr> <td>concat()</td> <td>连接两个或者更多的数组，并返回结果</td> </tr> <tr> <td>join()</td> <td>将数组的元素组起一个字符串</td> </tr> <tr> <td>pop()</td> <td>删除并返回数组的最后一个元素</td> </tr> <tr> <td>push()</td> <td>数组末尾添加一个或者多个元素，返回新的长度</td> </tr> <tr> <td>reverse</td> <td>颠倒数组中元素的顺序</td> </tr> <tr> <td>shift()</td> <td>删除并返回数组的第一个元素</td> </tr> <tr> <td>slice()</td> <td>从某个已有的数组返回选定的元素</td> </tr> <tr> <td>sort()</td> <td>对数组元素排序</td> </tr> <tr> <td>splice()</td> <td>删除元素,并向数组添加新元素</td> </tr> <tr> <td>toSource()</td> <td>返回该对象的源代码</td> </tr> <tr> <td>toString()</td> <td>把数组转化为字符串并返回结果</td> </tr> <tr> <td>toLocalString()</td> <td>把数组转化为本地元素并返回结果</td> </tr> <tr> <td>unshift</td> <td>向数组开头添加一个或者更多的元素，并返回新的长度</td> </tr> <tr> <td>valueof()</td> <td>返回数组对象的原始值</td> </tr> <tr> <td>forEach()</td> <td>遍历数组对象</td> </tr> <tr> <td>map()</td> <td>对数组做一些映射</td> </tr> <tr> <td>filter()</td> <td>过滤</td> </tr> <tr> <td>every()</td> <td>检查判断</td> </tr> <tr> <td>some()</td> <td>检查判断</td> </tr> <tr> <td>reduce()</td> <td>两两执行一定的操作</td> </tr> <tr> <td>reduceRight()</td> <td>从右到左执行操作</td> </tr> <tr> <td>indexOf()</td> <td>数组检索查找某个元素</td> </tr> <tr> <td>Array.isArray（[]）</td> <td>判断是否是数组</td> </tr> </tbody> </table> <p>主要对一些新特性进行讲解</p> <p>concat</p> <p>concat作用是拼接数组，需要注意的是也可以把一个数组元素作为拼接的元素，如果这样的话，数组会被拉平，再和其它的元素拼接起来成为新的数组，但是不会被拉平两次，concat不会修改原数组。</p> <p>例如</p> <pre> <code class="language-javascript">var arr=[1,2,3,4,5]; arr.concat([10,11],13);//[1,2,3,4,5,10,11,13] arr.concat([1,[2,3]]);//[1,2,3,4,5,1,[1,3]]</code></pre> <p>slice</p> <p>slice（a,b）a和b可以取负数，表示从a位置开始截取到b位置的一段数组，是一个左闭右开的区间，a和b可以取负数，如果是负数代表倒数第a/b个元素</p> <pre> <code class="language-javascript">var arr=[1,2,3,4,5]; arr.slice(1,3);//[2,3] arr.slice(1);//[2,3,4,5] arr.slice(1,-1);//[2,3,4] arr.slice(-4,-3);//[2]</code></pre> <p>splice</p> <p>splice删除元素并向数组添加新元素</p> <p>object.splice(a) 从左边开始删除a个元素</p> <p>object.splice(a，b) 从a位置开始截取其中的b个元素</p> <p>object.splice(a，b，c，d) 从a位置开始截取b个元素，并将c和d或者更多的元素插入原数组</p> <p>需要注意的是splice会修改原数组</p> <pre> <code class="language-javascript">var arr=[1,2,3,4,5]; arr.splice(2);//[3,4,5] arr;//[1,2];原数组被修改了 var arr=[1,2,3,4,5]; arr.splice(2，2);//[3,4] arr;//[1,2,5]; var arr=[1,2,3,4,5]; arr.splice(1，1，‘a’，‘b’);//[2] arr;//[1,"a","b",3,4,5];</code></pre> <p>foreach</p> <p>foreach()函数从头到尾把数组遍历一遍。有三个参数分别是：数组元素，元素的索引，数组本身</p> <pre> <code class="language-javascript">var arr = [1, 2, 3, 4, 5]; arr.forEach(function(x, index, a) {//分别对应：数组元素，元素的索引，数组本身 console.log(x + '|' + index + '|' + (a === arr)); }); // 1|0|true // 2|1|true // 3|2|true // 4|3|true // 5|4|true</code></pre> <p>说明：如果只有一个参数那这个参数代表数组元素，也就是数组的值，请看例2。</p> <pre> <code class="language-javascript">例2 var data=[1,2,3,4,5,6]; var sum=0; data.forEach(function(v){//其中的v就是数组的值 123456 sum+=v;}) document.write(sum+"<br>");//打印出来是21</code></pre> <p>map</p> <p>map 对数组做一些映射,map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组，它与forEach的区别是forEach为数组中的每个元素执行一次回调函数。</p> <pre> <code class="language-javascript">var arr = [1, 2, 3]; arr.map(function(x) { return x + 10; }); // [11, 12, 13] arr; // [1, 2, 3]</code></pre> <p>filter</p> <p>filter 过滤掉某些元素，和map有点类似，Array的filter也接收一个函数。但是和map不同的是， filter把传入的函数依次作用于每个元素，然后根据返回值是 true 还是false决定保留还是丢弃该元素，也就是过滤掉不符合要求的某些元素。</p> <pre> <code class="language-javascript">var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; arr.filter(function(x, index) { return index % 3 === 0 || x >= 8; }); // returns [1, 4, 7, 8, 9, 10] arr; // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]</code></pre> <p>every()与some()</p> <p>every()与some()方法都是JS中数组的迭代方法。every()是对数组中的每一项运行给定函数，如果该函数对每一项返回true,则返回true。some()是对数组中每一项运行指定函数，如果该函数对任一项返回true，则返回true。</p> <p>总结就是every()当每个元素都符合条件的时候返回true,而some()是任一项满足条件就返回true</p> <pre> <code class="language-javascript">例1 every() var arr = [1, 2, 3, 4, 5]; arr.every(function(x) { return x < 10; }); // true arr.every(function(x) { return x < 3; }); // false</code></pre> <p>some只需要有一个符合的就行</p> <pre> <code class="language-javascript">例2 some var arr = [1, 2, 3, 4, 5]; arr.some(function(x) { return x === 3; }); // true arr.some(function(x) { return x === 100; }); // false</code></pre> <p>reduce()</p> <p>Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算，其效果就是：</p> <pre> <code class="language-javascript">[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)</code></pre> <pre> <code class="language-javascript">var arr = [1, 2, 3]; var sum = arr.reduce(function(x, y) { return x + y }, 0); //参数 0是可选的，如果写了参数0那第一次传递的两个值就是0和1 如果不写第一次传递的就是数组的前两个值，计算结果是6 arr; //[1, 2, 3] arr = [3, 9, 6]; var max = arr.reduce(function(x, y) { console.log(x + "|" + y); return x > y ? x : y; }); // 3|9 // 9|6 max; // 9</code></pre> <p>reduceRight</p> <p>和reduce一样只不过reduceRight 变成了从右到左两两执行某些操作</p> <pre> <code class="language-javascript">max = arr.reduceRight(function(x, y) { console.log(x + "|" + y); return x > y ? x : y; }); // 6|9 // 9|3 max; // 9</code></pre> <p>indexOf()</p> <p>indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置，indexOf（a,b）表示查找a元素，从b位置开始；lastindexOf表示从右向左找。当b为负数的时候表示从倒数第几个元素开始找，请看例子。</p> <pre> <code class="language-javascript">var arr = [1, 2, 3, 2, 1]; arr.indexOf(2); // 1 arr.indexOf(99); // -1表示没有这个元素 arr.indexOf(1, 1); // 4 arr.indexOf(1, -3); // 4查找1从倒数第3个元素开始 arr.indexOf(2, -1); // -1查找2从倒数第1个元素开始 arr.lastIndexOf(2); // 3从右边开始找第一次出现2的位置 arr.lastIndexOf(2, -2); // 3从右边的倒数第二个开始找2出现的位置 arr.lastIndexOf(2, -3); // 1</code></pre> <p>isArray</p> <p>isArray用来判断是否是数组，但是isArray是Array构造器对象上的属性，所以不能直接用isArray，必须要写成Array.isArray（[]），但是可以其它的判断方法直接判断</p> <pre> <code class="language-javascript">[]instanceof Array;//true ({}).toString.apply([])==='[object Array]';//true [].construcror===Array;//true</code></pre> <p>数组和一般对象的比较</p> <table> <thead> <tr> <th> </th> <th>数组 / 一般对象</th> </tr> </thead> <tbody> <tr> <td>相同点</td> <td>都可以继承，对象不一定是数组，都可以当做对象添加属性</td> </tr> <tr> <td>不同点</td> <td>数组自动更新length按索引访问数组比访问一般对象属性明显迅速。数组对象继承Array.prototype上的大量数组操作方法</td> </tr> </tbody> </table> <p>数组和字符串的比较</p> <table> <thead> <tr> <th> </th> <th>数组 /字符串</th> </tr> </thead> <tbody> <tr> <td>相同点</td> <td>字符串是数组的一种</td> </tr> <tr> <td>不同点</td> <td>字符串是不可变的数组，字符串没有数组的方法</td> </tr> </tbody> </table> <p> </p> <p> </p> <p>来自：http://www.jianshu.com/p/fd8c73d2cf2c</p> <p> </p>