最近加班了~~好久都没弄。。
数组是值的有序集合。每个值叫做元素,每个元素在数组中都有数字位置编号,也就是索引。JS中的数组是弱类型的,数组中可以含有不同类型的元素。数组元素甚至可以是对象或其它数组。
由于数组方便迭代,结构通用,因此,它在前端开发过程中的地位毋庸置疑!
下面为整理出的数组相关资料,我会努力持续更新!
一、创建数组、数组操作
//在js中,数组中可以包含不同类型的数据,如下 var arr = [1, true, null, undefined, {x : 1}, [1, 2, 3]];
创建数组-字面量
var BAT = ['Alibaba', 'Tencent', 'Baidu']; var students = [{name : 'Bosn', age : 27}, {name : 'Nunnly', age : 3}]; var arr = ['Nunnly', 'is', 'big', 'keng', 'B', 123, true, null]; var arrInArr = [[1, 2], [3, 4, 5]];
创建部分成员为空的数组
var commasArr1 = [1, , 2]; // 1, undefined, 2 var commasArr2 = [,,]; // undefined * 2
js中的数组长度限制
size from 0 to 4,294,967,295(2^23 -1 )
不能超过4,294,967,295个 也就是(2^23 -1 )
创建数组-new Array
var arr = new Array(); var arrWithLength = new Array(100); // undefined * 100 var arrLikesLiteral = new Array(true, false, null, 1, 2, "hi"); // 等价于[true, false, null, 1, 2, "hi"]; //new可以忽略
数组元素读写
var arr = [1, 2, 3, 4, 5]; arr[1]; // 2 arr.length; // 5 arr[5] = 6; arr.length; // 6 delete arr[0]; arr[0]; // undefined
数组元素增删
var arr = []; arr[0] = 1; arr[1] = 2; //使用push向数组的结尾添加成员 arr.push(3); arr; // [1, 2, 3] //arr.length使用向数组的结尾添加成员 arr[arr.length] = 4; // equal to arr.push(4); arr; // [1, 2, 3, 4] //使用unshift(0)想数组的前面添加成员 arr.unshift(0); arr; // [0, 1, 2, 3, 4]; //删除成员(删除后的程序仍然会存在于成员队列中,读取时返回undefined) delete arr[2]; arr; // [0, 1, undefined, 3, 4] 读取时返回undefined arr.length; // 5 2 in arr; // false //使用arr.length进行删除成员 arr.length -= 1; arr; // [0, 1, undefined, 3, 4], 4 is removed //使用pop()删除数组末尾成员 arr.pop(); // 3 returned by pop arr; // [0, 1, undefined], 3 is removed //把数组的第一个元素从其中删除; arr.shift(); // 0 returned by shift arr; // [1, undefined]
数组迭代
var i = 0, n = 10; var arr = [1, 2, 3, 4, 5]; for (; i < n; i++) { console.log(arr[i]); // 1, 2, 3, 4, 5 } //注意:使用in可能会导致数组遍历时读取prototype上面的值,并且排序可能不统一! for(i in arr) { console.log(arr[i]); // 1, 2, 3, 4, 5 } //声明一个数组的原型链x赋值为inherited的字符串 Array.prototype.x = 'inherited'; for(i in arr) { //迭代时原型链上面的数据被读取 console.log(arr[i]); // 1, 2, 3, 4, 5, inherited } for(i in arr) { //使用hasOwnProperty属性过滤掉原型链上面的数据 if (arr.hasOwnProperty(i)) { console.log(arr[i]); // 1, 2, 3, 4, 5 } }
二维数组
var arr = [[0, 1], [2, 3], [4, 5]]; // result: var i = 0, j = 0; // row 0 var row; // 0 for (; i < arr.length; i++) { // 1 row = arr[i]; // row 1 console.log('row ' + i); // 2 for (j = 0; j < row.length; j++) { // 3 console.log(row[j]); // row 2 } // 4 } // 5
稀疏数组
稀疏数组并不含有从0开始的连续索引。一般length属性值比实际元素个数大。
var arr1 = [undefined]; var arr2 = new Array(1); 0 in arr1; // true 0 in arr2; // false arr1.length = 100; arr1[99] = 123; 99 in arr1; // true 98 in arr1; // false var arr = [,,]; 0 in arr; // false
二、数组方法
{} => Object.prototype [] => Array.prototype
Array.prototype.join 将数组转为字符串
var arr = [1, 2, 3]; arr.join(); // "1,2,3" arr.join("_"); // "1_2_3" function repeatString(str, n) { return new Array(n + 1).join(str); } repeatString("a", 3); // "aaa" repeatString("Hi", 5); // "HiHiHiHiHi"
Array.prototype.reverse 将数组逆序
var arr = [1, 2, 3]; arr.reverse(); // [3, 2, 1] arr; // [3, 2, 1] 注意:原数组被修改
Array.prototype.sort 排序
var arr = ["a", "d", "c", "b"]; arr.sort(); // ["a", "b", "c", "d"] arr = [13, 24, 51, 3]; arr.sort(); // [13, 24, 3, 51] //注意:原数组被修改 arr; // [13, 24, 3, 51] //默认按照成员首数进行排序 //使用对比大小排序 arr.sort(function(a, b) { return a - b; }); // [3, 13, 24, 51] rr = [{age : 25}, {age : 39}, {age : 99}]; arr.sort(function(a, b) { return a.age - b.age; }); arr.forEach(function(item) { console.log('age', item.age); }); // result: // age 25 // age 39 // age 99
Array.prototype.concat 数组合并
var arr = [1, 2, 3]; arr.concat(4, 5); // [1, 2, 3, 4, 5] arr; // [1, 2, 3] 注意:原数组未被修改 arr.concat([10, 11], 13); // [1, 2, 3, 10, 11, 13] arr.concat([1, [2, 3]]); // [1, 2, 3, 1, [2, 3]]
Array.prototype.slice 返回部分数组
截取数组的一部分
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]
Array.prototype.splice 数组拼接
//字面意思,就是将一些外部对象、字符串、数组拼接在数组的某个端节 var arr = [1, 2, 3, 4, 5]; arr.splice(2); // returns [3, 4, 5] arr; // [1, 2]; 注意:原数组被修改 arr = [1, 2, 3, 4, 5]; arr.splice(2, 2); // returns [3, 4] arr; // [1, 2, 5]; arr = [1, 2, 3, 4, 5]; arr.splice(1, 1, 'a', 'b'); // returns [2] arr; // [1, "a", "b", 3, 4, 5]
———————————————————————-
下面的是ES5的新增数组的操作对象(只支持ie9及其更高的版本)
Array.prototype.forEach 数组遍历
//对数组进行循环迭代 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
Array.prototype.map 数组映射
//针对数组的所有成员进行统一操作 var arr = [1, 2, 3]; arr.map(function(x) { return x + 10; }); // [11, 12, 13] arr; // [1, 2, 3] 注意:原数组未被修改
Array.prototype.filter 数组过滤
//返回满足过滤条件的数组成员 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] 注意:原数组未被修改
Array.prototype.every & some 数组判断
//every 只要数组成员中有一个不满足条件 就返回flase 反之返回true var arr = [1, 2, 3, 4, 5]; arr.every(function(x) { return x < 10; }); // true arr.every(function(x) { return x < 3; }); // false //every 只要数组成员中只要有一个满足条件 就返回true 如果都不满足就返回false var arr = [1, 2, 3, 4, 5]; arr.some(function(x) { return x === 3; }); // true arr.some(function(x) { return x === 100; }); // false
Array.prototype.reduce&reduceRight 数组之间的两两操作
//reduce 由左至右 进行数组成员之间的两两操作 //所有成员相加 var arr = [1, 2, 3]; var sum = arr.reduce(function(x, y) { return x + y }, 0); // 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 //reduceRight 由右至左 进行数组成员之间的两两操作 //找出成员中的最大值 max = arr.reduceRight(function(x, y) { console.log(x + "|" + y); return x > y ? x : y; }); // 6|9 // 9|3 max; // 9
Array.prototype.indexOf&lastIndexOf 数组检索
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 arr.indexOf(2, -1); // -1 arr.lastIndexOf(2); // 3 arr.lastIndexOf(2, -2); // 3 arr.lastIndexOf(2, -3); // 1
Array.isArray 判断是否为数组
Array.isArray([]); // true [] instanceof Array; // true ({}).toString.apply([]) === '[object Array]'; // true [].constructor === Array; // true
三、数组小结
数组 VS. 一般对象
相同 | 都可以继承 数组是对象,对象不一定是数组 都可以当做对象添加删除属性 |
不同 | 数组自动更新length 按索引访问数组常常比访问一般对象属性明显迅速。 数组对象继承Array.prototype上的大量数组操作方法 |
字符串和数组
字符串属于类数组元素,所以我们可以使用类似数组的方式去操作字符串
var str = "hello world"; str.charAt(0); // "h" str[1]; // e Array.prototype.join.call(str, "_"); // "h_e_l_l_o_ _w_o_r_l_d"
(完)
爱你一万年
博主,你好,boke112导航特来拜会,发现贵站不错,已将贵站收录到博客导航的技术类,如有异议请留言哦!谢谢!PS:由于在贵站找不到留言板,所以在此留言告知,如造成困扰,请删除本评论,谢谢!
d