最近在学习数组,发现很多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. java内部类的作用分析

    提起Java内部类(Inner Class)可能很多人不太熟悉,实际上类似的概念在C++里也有,那就是嵌套类(Nested Class),关于这两者的区别与联系,在下文中会有对比.内部类从表面上看,就 ...

  2. ajaxSubmit中option的参数

    var options = { target: '#output1', // target element(s) to be updated with server response beforeSu ...

  3. Spark-1.5.2安装

    1.下载scala-2.10.6包解压到指定目录 #SCALA VARIABLES START export SCALA_HOME=/usr/local/scala-2.10.6 export PAT ...

  4. python 赋值,交换值理解

    python里的赋值都是引用,第一次赋值就是定义. 看下面两个交换值的例子: 1. >>> a,b,c = 1,2,3 >>> a = b >>> ...

  5. Android——inflate 将一个xml中定义的布局找出来

    通俗的说,inflate就相当于将一个xml中定义的布局找出来. 因为在一个Activity里如果直接用findViewById()的话,对应的是setConentView()的那个layout里的组 ...

  6. Redis集群功能概述

    在单机Redis中介绍过Redis的复制特性以及Redis Sentinel和twemproxy,其中: 复制:可以创建指定服务器的复制品,这些复制品可以用户扩展系统处理读请求的能力: Redis S ...

  7. 在word中做复选框打对勾钩

    在word中做复选框打对勾钩 现在终于搞明白正确的操作方法 一.你在word里输入2610,按alt+X就能出 空checkbox 你在word里输入2611,按alt+X就能出 打了勾的checkb ...

  8. C and C++ 如何嵌套使用

    1. 要知道extern "C"的含义: (1) extern是C/C++中表明函数和全局变量作用范围的关键字, 该关键字表明其申明的函数和变量可以在本模块或者其他模块中使用. ( ...

  9. CLOB和BLOB的区别

    BLOB和CLOB都是大字段类型,BLOB是按二进制来存储的,而CLOB是可以直接存储文字的.其实两个是可以互换的的,或者可以直接用LOB字段代替这两个.但是为了更好的管理ORACLE数据库,通常像图 ...

  10. [工具] 如何利用Notepad++去除重复行

    问题: 需要去除重复数据, 例如: 解决方案: 1. 打开notepad++: 2. 如果没有找到"TextFx" 选项, 需要先安装该插件. 依次打开"插件" ...