最近在学习数组,发现很多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. Configuration problem: Only one AsyncAnnotationBeanPostProcessor may exist within the context.

    去配置文件中找 , 某个配置文件被引用了两次以上.移除后保留一个即可.如下即可产生上述问题 <import resource="classpath:testContext-curren ...

  2. 高可用集群heartbeat全攻略

    heartbeat的概念   Linux-HA的全称是High-Availability Linux,它是一个开源项目,这个开源项目的目标是:通过社区开发者的共同努力,提供一个增强linux可靠性(r ...

  3. setInterval()和setTimeout()的区别

    一.setInterval()函数的语法结构: setInterval(code,interval) setInterval()函数可周期性执行一段代码,也就是说代码会被周期性不断的执行下去. 函数具 ...

  4. OperationResult

    public class OperationResult<T> { private readonly ConcurrentDictionary<string, T> _valu ...

  5. IIS6.0中布署MVC站点(转)

    昨晚我写的API上线,API是vs2010 + MVC4开发的,需要布署到windows 2003 server + IIS6.0的环境中,之前一直是布在IIS7.0,比较熟悉, 换到IIS6.0,添 ...

  6. js监听浏览器关闭事件

    html : <HTML>  <HEAD>  <title>test</title>  </HEAD>  <body onbefore ...

  7. [FlashPlyaer] FP版本20.0.267对Win10的64位系统的不兼容问题

    Win10近日推送了一个新的升级补丁KB3132372,它专门用来修复Adobe Flash Player里的安全漏洞.但是很多用户反映升级了这个补丁之后导致浏览器上网时出现崩溃.卡死.空白等现象,尤 ...

  8. (medium)LeetCode 207.Course Schedule

    There are a total of n courses you have to take, labeled from 0 to n - 1. Some courses may have prer ...

  9. 剑指offer习题集

    1.重载赋值运算符函数:(具体见代码) //普通做法 CMyString& CMyString::operator=(const CMyString& str) { if (this ...

  10. LPC1788 SDRAM运行程序

    折腾了很久 终于解决了 从SDRAM中运行APP程序. 说明:LPC1788 本身有512K的flash和96K的RAM.支持TFT和SDRAM 这算是跟别家cortex-M3架构MCU相比较的一个亮 ...