JavaScript数组的操作基础


最近加班了~~好久都没弄。。

数组是值的有序集合。每个值叫做元素,每个元素在数组中都有数字位置编号,也就是索引。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"

(完)

共有 4 条评论

  1. 博主,你好,boke112导航特来拜会,发现贵站不错,已将贵站收录到博客导航的技术类,如有异议请留言哦!谢谢!PS:由于在贵站找不到留言板,所以在此留言告知,如造成困扰,请删除本评论,谢谢!

Top