最近在学习数组,发现很多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. Zend Guard Run-time support missing问题的解决

    Zend Guard不仅可以实现对PHP应用的脚本进行加密保护和对PHP应用的产品进行商业许可证管理,还可以为许多软件生产商.IT服务提供商提供完善的加密和安全的产品发布系统. 虽然现在可以成功加密p ...

  2. 建立dblink

    源地址:http://blog.itpub.net/24104981/viewspace-1116085/ create database link dblinkname connect to use ...

  3. 03.product.js

    /* item.jd.com Compressed by uglify Author:keelii Date: 2014-08-05 6:52:26 [PM] */ function insertSc ...

  4. HTML5 规范

    1.内容类型(ContentType) HTML5扩展仍然为".html"或".htm",内容类型(ContentType)仍然为"text/html ...

  5. Ubuntu 之 initramfs 报错解决之一

    问题出现: ubuntu 更新后,编辑文件提示权限不够,并提示更新错误,重启后进入 initramfs ,仔细看提示错误有: file system check of the root filesys ...

  6. 算法库:OpenCV3编译配置

    2016-01-20  23:55 更新: 关于Opencv3.1的lib文件 opencv_aruco310d.libopencv_bgsegm310d.libopencv_bioinspired3 ...

  7. LeetCode 67. Add Binary

    Given two binary strings, return their sum (also a binary string). For example,a = "11"b = ...

  8. 用HTML代码加载Unity内容(unity频道:http://unity3d.9ria.com/)

    Unity内容在浏览器通过Unity网络播放器插件加载.HTML代码与这个插件通常不直接通信,而是通过UnityObject的脚本帮助.其主要任务是Unity的内容嵌入一个非常简单的任务,通过从各种浏 ...

  9. 使用hive访问elasticsearch的数据

    使用hive访问elasticsearch的数据 1.配置 将elasticsearch-hadoop-2.1.1.jar拷贝到hive/lib hive -hiveconf hive.aux.jar ...

  10. 产生library cache latch原因

    产生library cache latch原因The library cache latches protect the cached SQL statements and objects' defi ...