首页 > 代码库 > JavaScript 数组详解

JavaScript 数组详解

数组是值的有序集合。每个数组里的值叫做数组元素,而每个数组元素都有与之对应的数字下标,也称之为索引。JavaScript是弱类型的语言,数组中的元素可以是任意类型的元素,比如数组中可以包含其它数组或对象。下面举个栗子:

var arr = [1, ‘string‘, true, {x:1}, [1,2,3], null, undefined];//获取数组元素arr[0]; // 1arr[1]; // ‘string‘arr[2]; // truearr[3]; // {x:1}arr[3].x; // 1arr[4][1]; // 2arr[5]; // nullarr[6]; // undefined

比较特别的:

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

数组默认最大长度为 2³² -1,超出这个长度将会报错:

var arr = new Array(4294967295);arr.length    // 4294967295var arr = new Array(4294967296); //Invalid array length

数组如果以构造函数方式创建,里面的参数可以为数字,也可以为数组:

var arr = new Array(5);  //undefined × 5 //或者以数组形式加入var arr = new Array(1,2,true,‘string‘);arr    //[1, 2, true, "string"]

数组元素写入和删除:

var arr = [1,2,3];arr.length  // 3arr[3] = 4;    //向数组添加一个元素arr    //[1,2,3,4]delete arr[3];   //truearr[3]    //undefined//push,unshift方法添加元素var arr = [];arr.push(1);arr    // [1]arr.push(2,3);arr    //[1,2,3]arr[arr.length] = 4;    //相当于push方法往数组的最后添加元素arr.unshift(0);   //往数组的最前面添加元素0arr    //[0,1,2,3,4]delete arr[1];arr    //[0, undefined, 2, 3, 4]arr.length    //5    元素已经被删除,数组的长度还是保持不变1 in arr;   //false  元素1已经不存在arr.length -= 1; //4arr    //[0, undefined, 2, 3]     元素4已经被移除arr.length;    //4      长度也相应的减少//pop,shift方法移除元素arr.pop();    //3    显示被删除的元素3arr    //[0, undefined, 2]    数组的最后一个元素被删除arr.shift();   //0    显示被删除的元素0arr     //数组的第一个元素被删除 

假如我们往数组对象的原型上添加一个元素,那么这个元素会在for  in 循环里出现,再这里说点题外话,for in是用来循环带有字符串key的对象的方法,不推荐用for in 来循环数组,不过在ES6中我们可以使用for of来循环数组,它的功能和for in相似,但是它很好的弥补了for in的缺陷:

var arr = [1,2,3];Array.prototype.name = ‘animal‘;for (var i in arr){     console.log(arr[i]);    //1,2,3,‘animal‘}//可以使用hasOwnProperty方法来检测该属性是否存在当前数组来弥补for (var i in arr){    if (arr.hasOwnProperty(i)) {        console.log(arr[i]);    //1,2,3     }}//也可以使用for offor (var value of arr){     console.log(value);    //1,2,3}

下面来讲讲数组的方法,数组包含了许多自带的方法,如sort,join,concat,slice等等,一起来看下它们的功能:

var arr = [1,2,33];//数组检索   indexOf(从左向右)  lastIndexOf(从右向左)var arr = [1,2,3,4,3,2,5];arr.indexOf(3);  //2   第一个参数为要查找的元素,并返回该元素的索引值arr.indexOf(10);   //-1   如果没有该元素则返回 -1arr.indexOf(3,2);   //4   第二个参数规定在何处开始查找arr.indexOf(2,-3);   //5   也可以为负数,-3 表示末尾往左第三个位置//将数组转化为字符串arr.join();    // "1,2,33"arr.join(‘-‘);    // "1-2-33"arr.join(‘‘);    // "1233"//将数组逆序排列arr.reverse();    //[33, 2, 1]arr    //[33, 2, 1]    原数组也被修改//数组排序var arr = ["c","b","d","a"];arr.sort();    //["a","b","c","d"]var arr = [1,33,6,20];arr.sort();    //[1, 20, 33, 6]//如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。所以上面的数字并没有按照我们所想要的按数字大小排序。如果想按数字大小排序,就要用sort方法里加参数。 注意:sort方法也会改变原数组而不会重新生成一个新副本。arr.sort(function(a,b){    return a - b;   //[1, 6, 20, 33]})//sort方法将比较两个数字的大小,函数提供两个参数。若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。若 a 大于 b ,则返回一个大于 0 的值。如果 a 等于 b ,则返回0。//当数组里面包含对象,比如存储每个学生的分数并按成绩由高到低排序var arr = [{name:‘张三‘, score:67},{name:‘李四‘, score:98},{name:‘王五‘, score:75}];arr.sort(function(a,b){     return b.score - a.score;})arr.forEach(function(val){     console.log(val.score);    //98,75,67})//数组合并var arr = [1,2,3];arr.concat(4,5);    //[1,2,3,4,5]arr    //[1,2,3]     原数组未被修改arr.concat([11,12],13);  //[1, 2, 3, 11, 12, 13]  还是一维数组arr.concat([[11,12],13]);   //[1, 2, 3, [11, 12], 13]  变成二维数组了//返回选定的元素var arr = [1,2,3,4,5];arr.slice(2,4);    //[3,4]arr    //[1,2,3,4,5]   原数组不会被修改arr.slice(1,-1);    //[2, 3, 4]  //slice方法第一个参数为数组的下标,表示从哪里开始选取,第二个参数可选,表示从哪里结束选取,不填则一直选取到数组末尾。-1表示数组末尾的第一个元素。//splice方法表示 数组删除/拼接元素,然后返回被删除的项目var arr = [1,2,3,4,5];arr.splice(3);    //[4,5]    // 3 表示从数组的何处开始删除并返回被删除的元素arr    //[1, 2, 3]var arr = [1,2,3,4,5];arr.splice(3,1);    //[4]  第二个参数表示要删除元素个数var arr = [1,2,3,4,5];arr.splice(2,2,‘a‘,8);    //[3,4]   返回被删除的元素,并向数组添加新的元素arr   //[1, 2, "a", 8, 5]//forEach数组遍历var arr = [1,2,3];arr.forEach(function(value, index, o){    console.log(value+‘,‘+index+‘,‘+(o===arr));})//输出结果  三个参数分别为数组元素,元素的索引,数组本身//1,0,true//2,1,true//3,2,true//map数组映射var arr = [1,2,3];arr.map(function(x){    return x * 10;    //[10, 20, 30]   每个数组元素会乘以10})arr     //[1,2,3]   原数组不会改变//filter数组过滤var arr = [1,2,3,4,5,6,7,8,9,10];arr.filter(function(x, index){     return x <3 || x >=8;    //[1, 2, 8, 9, 10]  过滤筛选出你需要的元素})arr     //[1,2,3,4,5,6,7,8,9,10]   原数组不会改变//every,some数组判断var arr = [1,2,3,4,5];arr.every(function(x){    return x < 10;    //true    数组中所有元素都必须满足条件})arr.every(function(x){    return x < 2;    //false    数组中只要有一个元素不满足条件})arr.some(function(x){    return x < 2;    //true    数组中只要有一个元素满足条件})arr.some(function(x){    return x > 10;    //false    数组中所有元素都不满足条件})arr     //[1,2,3,4,5]   原数组不会改变//reduce数组的两个值(从左到右)应用var arr = [1,2,3,4,5];arr.reduce(function(x,y){    return x + y;    //15})arr.reduce(function(x,y){    return x + y;    //20   后面一个参数表示从该值开始相加},5)arr     //[1,2,3,4,5]   原数组不会改变

最后,边看边动手练习才能更好的理解每个方法。

 

JavaScript 数组详解