最近在学习数组,发现很多ES5的方法平时很少用到。细节比较多,自己做了大量例子和整理,希望对大家了解JavaScript中的Array有所帮助。

概念

数组是值的有序集合。每个值叫做元素,每个元素在数组中都有数字位置编号,也就是索引。JS中的数组是弱类型的,数组中可以含有不同类型的元素。数组元素甚至可以是对象或其它数组。

JS引擎一般会优化数组,按索引访问数组常常比访问一般对象属性明显迅速。

数组长度范围 from 0 to 4,294,967,295(2^23 - 1)

数组创建

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
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"];

数组读写

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

数组 VS. 一般对象

相同点

  • 数组是对象,对象不一定是数组
  • 都可以继承
  • 都可以当做对象添加删除属性

不同点

  • 数组自动更新length
  • 数组操作通常被优化
  • 数组对象继承Array.prototype上的大量数组操作方法

稀疏数组

稀疏数组并不含有从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

数组的length属性

var arr = [1, 2, 3, 4, 5]
arr.length = 2;
arr; // [1, 2];

元素增删

var arr = [];
arr[0] = 1;
arr[1] = 2;
arr.push(3);
arr; // [1, 2, 3] arr[arr.length] = 4; // equal to arr.push(4);
arr; // [1, 2, 3, 4] arr.unshift(0);
arr; // [0, 1, 2, 3, 4];
delete arr[2];
arr; // [0, 1, undefined, 3, 4]
arr.length; // 5
2 in arr; // false arr.length -= 1;
arr; // [0, 1, undefined, 3, 4], 4 is removed 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
} for(i in arr) {
console.log(arr[i]); // 1, 2, 3, 4, 5
} Array.prototype.x = 'inherited'; for(i in arr) {
console.log(arr[i]); // 1, 2, 3, 4, 5, inherited
} for(i in arr) {
if (arr.hasOwnProperty(i)) {
console.log(arr[i]); // 1, 2, 3, 4, 5
}
}

二维数组

var arr = [[0, 1], [2, 3], [4, 5]];
var i = 0, j = 0;
var row;
for (; i < arr.length; i++) {
row = arr[i];
console.log('row ' + i);
for (j = 0; j < row.length; j++) {
console.log(row[j]);
}
}
// result:
// row 0
// 0
// 1
// row 1
// 2
// 3
// row 2
// 4
// 5

数组方法

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

[1, 2, 3].reverse(); // [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] arr = [{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];
var result = 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]

Array.prototype.forEach (ES5)

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 (ES5)

var arr = [1, 2, 3];
arr.map(function(x) {
return x + 10;
}); // [11, 12, 13]
arr; // [1, 2, 3]

Array.prototype.filter (ES5)

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 (ES5)

var arr = [1, 2, 3, 4, 5];
arr.every(function(x) {
return x < 10;
}); // true arr.every(function(x) {
return x < 3;
}); // false

Array.prototype.some (ES5)

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 (ES5)

var arr = [1, 2, 3];
var sum = arr.reduce(function(x, y) {
return x + y
}, 0); // 6 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 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 (ES5)

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 (ES5)

Array.isArray([]); // true

字符串和数组

strings的行为像是只读数组

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"

javascript 详解数组的更多相关文章

  1. Day03 javascript详解

    day03 js 详解 JavaScript的基础 JavaScript的变量 JavaScript的数据类型 JavaScript的语句 JavaScript的数组 JavaScript的函数 Ja ...

  2. awk详解 数组

    第1章 awk命令基础 1.1 awk命令执行过程 1.如果BEGIN 区块存在,awk执行它指定的动作. 2.awk从输入文件中读取一行,称为一条输入记录.如果输入文件省略,将从标准输入读取 3.a ...

  3. JavaScript详解(三)

    JavaScript的数组 JavaScript中的数组具有相当的灵活性,除了能存储数据外,还提供了一系列的属性和方法.因为JavaScript本身是一个弱类型语言,故其数组不会限制存放数据的类型. ...

  4. 【原创教程】JavaScript详解之语法和对象

    JavaScript的好的想法:函数.弱类型.动态对象和一个富有表现力的对象字面量表示法. JavaScript的坏的想法:基于全局变量的编程模型.   好了,不管他是好的还是坏的,都是我的最爱,下面 ...

  5. Web前端之Javascript详解20180330

    一.javascript概述 javascript是基于对象和事件的脚本语言. 特点: 1.安全性(不允许直接访问本地硬盘(因为是被远程的浏览器解释)),它可以做的就是信息的动态交互 2.跨平台性(只 ...

  6. JavaScript: 详解正则表达式之一

    正则表达式是一个精巧的利器,经常用来在字符串中查找和替换,JavaScript语言参照Perl,也提供了正则表达式相关模块,开发当中非常实用,在一些类库或是框架中,比如jQuery,就存在大量的正则表 ...

  7. javascript详解1

    推荐学习链接: https://book.apeland.cn/details/356/ http://es6.ruanyifeng.com/#README https://developer.moz ...

  8. JavaScript详解(二)

    js的流程控制 if语句: if (条件表达式A){ xx; }else if (条件表达式B){ xx; } else{ xx; } switch语句: switch (表达式){ case 值1: ...

  9. JavaScript详解(一)

    简介: Javascript是一个脚本语言,弱类型的编程语言,简称js,被称为网站开发的行为.它的作用是增加页面特效.前后台交互以及应用于后台开发.它即可写在HTML的script标签里,也可写在外部 ...

随机推荐

  1. centos7编译安装nginx1.8

    安装pcre wget ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/pcre-8.38.tar.gz tar -zxvf pcre-8. ...

  2. HTTP Get请求URL最大长度

    各浏览器HTTP Get请求URL最大长度并不相同,几类常用浏览器最大长度及超过最大长度后提交情况如下: IE6.0                :url最大长度2083个字符,超过最大长度后无法提 ...

  3. Python从2.6升级到2.7,使用pip安装module,报错:No Module named pip.log(转载)

    From:http://blog.csdn.net/iefreer/article/details/8086834 python升级后,使用pip安装module,错误: 错误原因:版本升级后,之前的 ...

  4. ArrayList,Vector线程安全性测试

    import java.util.ArrayList; import java.util.List; //实现Runnable接口的线程 public class HelloThread implem ...

  5. cursor详解

    源地址:http://www.cnblogs.com/jiewoyishengwzm/archive/2010/06/08/1754232.html 查询 SELECT语句用于从数据库中查询数据,当在 ...

  6. DXperience-11.1.5 破解

    将DXPerience_11.1.5_Crack里的所有文件粘贴到DXperience-11.1.5的bin文件夹下,然后在cmd运行register.bin

  7. 图标的使用————JAVA——Swing

    public class MyImageIcon extends JFrame{    public MyImageIcon()    {    JFrame jf=new JFrame();     ...

  8. fw:sed的高级用法

    转的,找不到原创了.... sed高级用法 <收藏> 首先,应该明白模式空间的定义.模式空间就是读入行所在的缓存,sed对文本行进行的处理都是在这个缓存中进行的.这对接下来 的学习是有帮助 ...

  9. Prim算法POJ1258

    http://poj.org/problem?id=1258 这道题是最简单的一个啦,,,, #include<stdio.h> #include<iostream> #inc ...

  10. 使用pscp实现Windows 和 Linux服务器间远程拷贝文件

    转自:http://www.linuxidc.com/Linux/2012-05/60966.htm 在工作中,每次部署应用时都需要从本机Windows服务器拷贝文件到Linux上,有时还将Linux ...