这章主要讲解了数组的工作原理和其适用场景。

定义:

  一个存储元素的线性集合,元素可以通过索引来任意存取,索引通常是数字,用来计算元素之间存储位置的偏移量。

javascript数组的特殊之处:

  javascript中数组是一种特殊的对象,用来表示偏移量的索引是该对象的属性,索引可能是整数,但是这些整数会被转化为字符串。

这是因为javascript中对象的属性必须死字符串类型。

1. 数组的基本操作

 a) 创建数组

  声明空的数组:

  1. // 1. 使用new关键字
  2. var arr1 = new Array();
  3. // 2. 使用中括号(推荐)
  4. var arr2 = [];

初始化:

  1. // new 的方式一个参数
  2. var arr1 = new Array(5);
  3. console.info(arr1.length); --> 5
  4. // 多个参数
  5. var arr2 = new Array(1,2,3,4,5);
  6. console.info(arr2.length); --> 5
  7. // [] 方式
  8. var arr3 = [1,2,3,4,5];
  9. console.info(arr3.length); --> 5

可以调用Array.isArray方法,判断是否为数组

  1. var num = 3;
  2. var arr = ['a', 12, true, null];
  3. console.info(Array.isArray(num)); -> false
  4. console.info(Array.isArray(arr)); -> true

 b) 读写数组

  利用循环写数组:

  1. var arr = [];
  2. for(var i=0;i<10;i++){
  3. arr[i] = i;
  4. }

  利用循环读取:

  1. var arr = [1,2,3,4,5];
  2. for(var i=0;i<arr.length;i++){
  3. console.info(arr[i]);
  4. }

 c) 由字符串生成数组

字符串对象调用 split 方法也可以生成数组

split方法就是根据某一个特定字符将字符串拆分为多条数据

  1. var str = "you are a great javascripter".
  2. var arr = str.split(' ');
  3. for(var i=0;i<arr.length;i++){
  4. console.info(arr[i]);
  5. }
  6. =》 you
  7. =》 are
  8. =》 a
  9. =》 great
  10. =》 greate
  11. =》 javascripter

 d) 对数组的整体性操作

从一个数组对另一个数组复制

  1. var a = [5, 11];
  2. var b = a;
  3. console.info(b[0]); =>5
  4. a[0] = 1;
  5. console.info(b[0]); =>1

我们可以看到,在首次赋值时,数组b确实是拥有和a一样的值,但是将原有的a数组中的数据进行改变后,b数组中也随之改变,

说明了我们赋值给b的知识a数组的引用。这种赋值方式也叫做浅拷贝

为了达成深拷贝,必须每个值依依复制:

  1. function copyArr(org, dest){
  2. for(var i=0; i<org.length; i++){
  3. dest[i] = org[i];
  4. }
  5. }
  6.  
  7. var a = [5, 11];
  8. var b = copyArr(a, b);
  9. console.info(b); =>5,11
  10. a[0] = 1;
  11. console.info(b); =>1,11

2.存取函数

  a) 查找元素

  indexOf()是javascript中最常用的查找函数,参数为你要查找的内容,返回为该内容所在的下标位置,没有时返回-1,若是有多个相同元素则返回第一次出现的位置。

  1. var arr = ['David', 'Jason', 'Kerry', 'Jimmy','Kerry'];
  2. var index = arr.indexOf('Jimmy');
  3. console.info(index); => 3
  4. index = arr.indexOf('Owen');
  5. console.info(index); => -1;index = arr.indexOf('Kerry');console.info(index); => 2 

 如果想获取最后一次出现的位置使用lastIndexOf()方法即可。

  b) 数组的字符串表示

 有两个方法可以讲数组转为字符串 join(str)和toString()

  1. var arr = ['a', 'b', 'c'];
  2. var str1 = arr.join();
  3. console.info(str1); => "a,b,c";
  4. var str2 = arr.toString();
  5. console.info(str2); => "a,b,c";

  与其他语言类似直接打印一个非String类型变量的时候,会自动调用其toString()方法。

  c) 由已有数组创建的新数组

  javascript中有两个方法去通过原有数组创建新数组。

  ArrayObject.concat(ArrayObject) 用于合并数组

  1. var arr1 = [1, 2, 3, 4, 5];
  2. var arr2 = [6, 7, 8, 9, 10];
  3. var arr = arr1.concat(arr2);
  4. > arr1
  5. [1, 2, 3, 4, 5]
  6. > arr2
  7. < [6, 7, 8, 9, 10]
  8. > arr
  9. < [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

可以看到被操作数组arr1和arr2没有被改变,concat方法的返回值为二者合并后的结果。

  ArrayObject.splice(index, length) 用于截取数组

  1. var arr1 = [1, 2, 3, 4, 5];
  2. var arr2 = [6, 7, 8, 9, 10];
  3. var arr = arr1.concat(arr2);
  4. var _arr = arr.splice(1,2);
  5.  
  6. > arr
  7. < [1, 4, 5, 6, 7, 8, 9, 10]
  8. > _arr
  9. < [2, 3]

该方法会修改原有数组中的内容。

3.可变函数

  a) 添加

  在数组的末尾添加:

方法一: 

  1. var arr = [1, 2, 3, 4, 5];
  2. arr.push(6);
  3. > arr
  4. < [1,2,3,4,5,6]

方法二:

  1. var arr = [1, 2, 3, 4, 5];
  2. arr[arr.length] = 6;
  3.  
  4. > arr
  5. < [1,2,3,4,5,6]

方法一比方法二更加直观些。

  在数组开头增加元素:

方法一:

  1. var arr = [1, 2, 3, 4, 5];
  2. var len = arr.length;
  3. for (var i = len; i >= 1; i--) {
  4. arr[i] = arr[i-1]; // 将原有的数据向后移动一位
  5. }
  6. arr[0] = 0; // 第一个元素为要添加的元素
  7.  
  8. > arr
  9. < [0,1,2,3,4,5]

方法二:

  1. var arr = [1, 2, 3, 4, 5];
  2. var newnum = 0;
  3. arr.unshift(newnum);
  4.  
  5. > arr
  6. < [0,1,2,3,4,5]
  7.  
  8. arr.unshift(6, 7, 8);
  9.  
  10. > arr
  11. < [6, 7, 8, 0, 1, 2, 3, 4, 5]

  b) 删除

  将数组最后一个元素删除:

  1. var arr = [1, 2, 3, 4, 5];
  2. var num = arr.pop(); // newnum用来保存删除的元素
  1. > arr < [1, 2, 3, 4] > num < 5

  讲述组第一个元素删除:

方法一:

  1. var arr = [1, 2, 3, 4, 5];
  2. var len = arr.length;
  3. for(var i=0; i<len-1;i++){
  4. arr[i] = arr[i+1];
  5. }
  6. arr.length = len - 1;
  7.  
  8. > arr
  9. < [2, 3, 4, 5]

方法二:

  1. var arr = [1, 2, 3, 4, 5];
  2. var newnum = arr.shift(); // newnum用来保存删除的元素
  3.  
  4. > arr
  5. < [2, 3, 4, 5]
  6. > newnum
  7. < 1

方法二更为高效和直观些。

  c) 在确定位置添加和删除

使用之前提到过的splice方法即可:

  1. var arr = [1, 2, 3, 4, 5];
  2. // 末尾添加
  3. arr.splice(arr.length, 0, 6); // = > [1, 2, 3, 4, 5, 6]
  4. // 开头添加
  5. arr.splice(0, 0, 0); //= > [0, 1, 2, 3, 4, 5, 6]
  6. // 从第二为开始删除3个元素
  7. arr.splice(2, 3); // = > [0, 1, 5, 6]
  8. // 从第二位起,添加元素2, 3, 4
  9. arr.splice(2, 0, 2, 3, 4); // = > [0, 1, 2, 3, 4, 5, 6]

  d) 为数组排序

翻转:

  1. var arr = [1, 2, 3, 4, 5];
  2. // 对数组进行翻转
  3. console.info(arr.reverse()); // = > [5, 4, 3, 2, 1]
  4. // arr 数组直接被修改
  5. console.info(arr); // = > [5, 4, 3, 2, 1]

排序:

  对于字符串使用 sort 方法效果不错:

  1. var arr = ['Bonnee', 'Demon', 'Stefan', 'Elena', 'Jeremy'];
  2. arr.sort();
  3. console.info(arr); // = >  ["Bonnee", "Demon", "Elena", "Jeremy", "Stefan"]

可以看到对于字符串使用sort方法,会根据首字母的顺序进行排列。

  但是对于数字排序如果我们直接使用sort方法就会出现奇怪的东西了:

  1. var arr = [5, 30, 2, 400, 1];
  2. arr.sort();
  3. console.info(arr); // = > [1, 2, 30, 400, 5]

其实sort方法中我们还缺少了一个参数,作为比较的方法判断函数。如果不加这个函数时,sort方法会将数组中的元素进行字典排序,不会进行大小排序。

  1. var arr = [5, 30, 2, 400, 1];
  2. // 正序排列
  3. arr.sort(function(x, y){
  4. return x - y;
  5. });
  6. console.info(arr); // = > [1, 2, 5, 30, 400]
  7. // 倒序排列
  8. arr.sort(function(x, y){
  9. return y - x;
  10. });
  11. console.info(arr); // = > [400, 30, 5, 2, 1]

4.迭代器方法

  a) 不生成新数组的迭代器方法

  forEach方法(不能写成 foreach ), 用于对数组中每个元素都进行相同操作

  1. var arr = [1, 2, 3, 4, 5, 6];
  2. var square = function(x){
  3. console.info(x, x*x);
  4. };
  5. arr.forEach(square);
  6.  
  7. ---------------------------------
  8. 1 1
  9. 2 4
  10. 3 9
  11. 4 16
  12. 5 25
  13. 6 36
  14. ---------------------------------

every方法,用于对每个元素进进行统一判断,最后返回boolean值。如果有一个值为false就返回false,所有为true才会返回true

如判读一组数是否都为偶数:

  1. var arr = [1, 2, 3, 4, 5, 6];
  2. var isEven = function(x){
  3. return x%2 === 0;
  4. };
  5. var rs = arr.every(isEven);
  6. if(rs){
  7. console.info("all the number in the array are even.");
  8. }else{
  9. console.info("not all the number in the array are even.");
  10. }
  11.  
  12. -----------------------------------------------
  13. not all the number in the array are even.
  14. -----------------------------------------------

some 方法,如果一个值返回true,则会返回true,所有为false才会为false

如判断一组数中是否有偶数:

  1. var arr = [1, 2, 3, 4, 5, 6];
  2. var isEven = function(x){
  3. return x%2 === 0;
  4. };
  5. var rs = arr.some(isEven);
  6. if(rs){
  7. console.info("some number in the array are even.");
  8. }else{
  9. console.info("all the number in the array are not even.");
  10. }
  11.  
  12. ------------------------------------------
  13. number in the array
  14. ------------------------------------------

reduce方法,一般用于累加:

  1. var arr = [1, 2, 3, 4, 5, 6];
  2. var add = function(runningNum, currentNum){
  3. return runningNum + currentNum;
  4. };
  5. var rs = arr.reduce(add); // = > 21

reduceRight方法,从右到左进行累加

  1. var strArr = [' Paper',' are','You'];
  2. var joinStr = function(runningStr, currentStr){
  3. return runningStr + currentStr;
  4. };
  5. var rsStr = strArr.reduceRight(joinStr); // = 》 "You are Paper"

  b) 生成新数组的迭代器方法

所谓生成新数组就是对数组中的元素依次改变,最后返回一个由改变的元素组成的新的数组对象

map方法 

  1. var strArr = [' Paper', ' are', ' You'];
  2.  
  3. var delSpace = function(x){
  4. return x.replace(/\s/g, '');
  5. };
  6. var rsArr = strArr.map(delSpace); // = > ["Paper", "are", "You"]

filter方法

和其名称一样,filter会根据你传入的函数,过滤掉为false的元素

如过滤掉无用元素:

  1. var strArr = ['a','', null, 'c', undefined];
  2. var rsArr = strArr.filter(function(x){
  3. return x;
  4. }); // => ["a", "c"]

5.二维和多维数组

  a) 创建二维数组

创建二维数组首先要创建一个一维数组,然后其中每个元素都为一个一维数组就行了:

  1. var arr = [];
  2. var len = 5;
  3. for (var i = 5 - 1; i >= 0; i--) {
  4. arr[i] = [];
  5. };
  6.  
  7. > arr
  8. < [Array[0]length: 0__proto__: Array[0], Array[0]length: 0__proto__: Array[0], Array[0]length: 0__proto__: Array[0], Array[0]length: 0__proto__: Array[0], Array[0]length: 0__proto__: Array[0]]

其实我们也可以再Array上直接添加方法:

  1. Array.matrix = function(row, col, init){
  2. var arr = [];
  3. for(var i=0; i<row; i++){
  4. var temp = [];
  5. for(var j=0;j<col; j++){
  6. temp[j] = init;
  7. }
  8. arr[i] = temp;
  9. }
  10. return arr;
  11. };
  12.  
  13. var arr = Array.matrix(3, 4, 1);
  14.  
  15. console.info(arr[2][3]); // = > 1

或者直接初始化:

  1. var arr = [[43,23],[52,1],[2,4]];

  b) 处理二维数组的元素

按行处理:

arr 用以保存 3 名学生 3 门课的成绩,求每个学生的平均成绩:arr 用以保存 3 名学生 3 门课的成绩

  1. var arr = [[98,77,89],[77,66, 59],[92,82,89]];
  2. for(var i=0; i<arr.length; i++){
  3. var total = 0,
  4. average = 0.0;
  5. var currentStu = arr[i];
  6. for(var j=0; j<currentStu.length; j++){
  7. total += currentStu[j];
  8. }
  9. average = total/currentStu.length;
  10. console.info("Student " + parseInt(i) + ": " + average.toFixed(2));
  11. }
  12.  
  13. --------------------------------
  14. Student 1: 88.00
  15. Student 2: 67.33
  16. Student 3: 87.67
  17. --------------------------------

按列处理:

arr 用以保存 3 名学生 3 门课的成绩,求每门课的平均成绩:

  1. var grades = [[89, 77, 78] , [76, 82, 81] , [91, 94, 89], [71, 83, 74]] ;
  2. var total = 0;
  3. var average = 0.0;
  4. var courseNum = 3;
  5. var stuNum = grades.length;
  6. // 已知有三门课程
  7. for (var col = 0; col < courseNum; ++col) {
  8. for (var row = 0; row < stuNum; ++row) {
  9. total += grades[row][col] ;
  10. }
  11. average = total / stuNum;
  12. console.info("Course " + parseInt(col+1) + " average: " + average. toFixed(2));
  13. total = 0;
  14. average = 0.0;
  15. }
  16.  
  17. -------------------------------------------
  18. Course 1 average: 81.75
  19. Course 2 average: 84.00
  20. Course 3 average: 80.50
  21. -------------------------------------------

  c) 参差不齐的数组

和之前一样,没有变化:

  1. var arr = [[98,77,89],[77,66,59, 82, 78],[92,82,89,33]];
  2. for(var i=0; i<arr.length; i++){
  3. var total = 0,
  4. average = 0.0;
  5. var currentStu = arr[i];
  6. for(var j=0; j<currentStu.length; j++){
  7. total += currentStu[j];
  8. }
  9. average = total/currentStu.length;
  10. console.info("Student " + parseInt(i) + ": " + average.toFixed(2));
  11. }
  12.  
  13. ---------------------------------------
  14. Student 0: 88.00
  15. Student 1: 72.40
  16. Student 2: 74.00
  17. ---------------------------------------

6.对象数组

和普通类型的数组没有什么区别,都可以使用以上提到过的方法。

7.对象中的数组

以上面提到过的学生成绩和求该学生的平均成为为例:

  1. var StuGrade = function(){
  2. var total = 0;
  3. this.grades = [];
  4. this.add = function(grade){
  5. this.grades.push(grade);
  6. total += grade;
  7. };
  8. this.average = function(){
  9. return total / this.grades.length;
  10. };
  11. };
  12.  
  13. var stu1 = new StuGrade();
  14. stu1.add(80);
  15. stu1.add(73);
  16. stu1.add(88);
  17. stu1.add(92);
  18. console.info(stu1.grades); // = > [80, 73, 88, 92]
  19. console.info(stu1.average()); // = > 83.25

第二章知识思维导图:

javascript 数据结构和算法读书笔记 > 第二章 数组的更多相关文章

  1. javascript 数据结构和算法读书笔记 > 第一章 javascript的编程环境和模型

    1.变量的声明和初始化 必须使用关键字 var,后跟变量名,后面还可以跟一个赋值表达式. var name; var age = 5; var str = 'hello'; var flg = fal ...

  2. javascript 数据结构和算法读书笔记 > 第五章 队列

    队列是一种列表,但是它只能够在队尾插入元素,在队首删除元素.队列用于存储按照顺序排列的数据,先进先出.而栈则是后入栈的元素反而被优先处理. 实际中一般被应用在进程池.排队操作上面. 1. 队列的操作 ...

  3. javascript 数据结构和算法读书笔记 > 第四章 栈

    1. 对栈的操作 栈是一种特殊的列表,栈中的元素只能通过列表的一端进行访问,即栈顶.类似于累起一摞的盘子,只能最后被放在上面的,最先能被访问到. 就是我们所说的后入先出(LIFO). 对栈主要有入栈p ...

  4. javascript 数据结构和算法读书笔记 > 第三章 列表

    1. 结构分析 列表首先要有以下几个属性: listSize 长度 pos 当前位置 dataStore 数据 我们要通过以下方法对上面三个属性进行操作: length() 获取长度 | getPos ...

  5. 《javascript权威指南》读书笔记——第二篇

    <javascript权威指南>读书笔记——第二篇 金刚 javascript js javascript权威指南 今天是今年的196天,分享今天的读书笔记. 第2章 词法结构 2.1 字 ...

  6. 为什么我要放弃javaScript数据结构与算法(第六章)—— 集合

    前面已经学习了数组(列表).栈.队列和链表等顺序数据结构.这一章,我们要学习集合,这是一种不允许值重复的顺序数据结构. 本章可以学习到,如何添加和移除值,如何搜索值是否存在,也可以学习如何进行并集.交 ...

  7. 为什么我要放弃javaScript数据结构与算法(第五章)—— 链表

    这一章你将会学会如何实现和使用链表这种动态的数据结构,这意味着我们可以从中任意添加或移除项,它会按需进行扩张. 本章内容 链表数据结构 向链表添加元素 从链表移除元素 使用 LinkedList 类 ...

  8. 为什么我要放弃javaScript数据结构与算法(第十一章)—— 算法模式

    本章将会学习递归.动态规划和贪心算法. 第十一章 算法模式 递归 递归是一种解决问题的方法,它解决问题的各个小部分,直到解决最初的大问题.递归通常涉及函数调用自身. 递归函数是像下面能够直接调用自身的 ...

  9. 为什么我要放弃javaScript数据结构与算法(第七章)—— 字典和散列表

    本章学习使用字典和散列表来存储唯一值(不重复的值)的数据结构. 集合.字典和散列表可以存储不重复的值.在集合中,我们感兴趣的是每个值本身,并把它作为主要元素.而字典和散列表中都是用 [键,值]的形式来 ...

随机推荐

  1. 今天进行了一次IOS面试,分享一下面试结果

    IOS开发工程师岗位职责:1.负责移动产品IOS版客户端软件开发:2.可根据需求独立完成客户端软件的设计和开发;3.日常工作包括手机软件系统开发.单元测试.维护以及文档编写:不定期的公司内部培训.任职 ...

  2. C# HTML转换为WORD

    使用aspose.words仅需要4句代码,即可搞定. Document doc = new Document(); DocumentBuilder builder = new DocumentBui ...

  3. activiti 部署在oracle多用户下不能自动建表问题的解决!

    在activiti配置文件中的SpringProcessEngineConfiguration的配置项中添加<property name= "databaseSchema" ...

  4. Android url中文编码问题

    最近项目遇见一个很奇葩问题,关于URL问题,项目中加载图片,图片的URL含有中文,但是,我的手机可以加载,没问题,同事也都可以,但是测试手机却不可以,加载失败,找到问题,就是URL含有中文问题. 解决 ...

  5. 复习篇(一)Activity的生命周期和启动模式

    (一)关于<intent-filter>中的<data> 当设置<data>过滤器的时候,使用intent的时候必须要设置响应的匹配,否则无法匹配成功.不过不设置则 ...

  6. JavaScript 数组操作备忘

    数组的定义: 方法1. var mycars=new Array()mycars[0]="Saab"mycars[1]="Volvo"mycars[2]=&qu ...

  7. 用户登录之cookie信息安全一二事

    大家都知道用户登陆后,用户信息一般会选择保存在cookie里面,因为cookie是保存客户端, 并且cookie可以在客户端用浏览器自由更改,这样将会造成用户cookie存在伪造的危险,从而可能使伪造 ...

  8. 1分钟快速生成用于网页内容提取的xslt

      1,项目背景   在<Python即时网络爬虫项目说明>一文我们说过要做一个通用的网络爬虫,而且能节省程序员大半的时间,而焦点问题就是提取器使用的抓取规则需要快速生成.在python使 ...

  9. Digital Roots(hdoj1013)

    Problem Description The digital root of a positive integer is found by summing the digits of the int ...

  10. Intent、Bundle——实现Activity之间的通信

    http://blog.sina.com.cn/s/blog_62dea93001015847.html 一个应用程序会有多个Activity,但是只有一个Activity作为程序的入口,应用中的其他 ...