首页 > 代码库 > 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 数组详解
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。