数组是编程世界里最多见的数据结构。任何一种编程语言都包含数组,只是形式稍微有差别。数组是编程语言中的内建类型,一般效率都很高。能够知足不一样需求的数据存储,本章将探索javascript中的数组工做原理,以及它们的使用场合。javascript
一:javascript中对数组的定义html
数组的标准定义是:一个存储元素的线性集合(collection),元素能够经过索引来任意存储,索引一般是数字,用于计算元素之间存储位置的偏移量。几乎全部的编程语言都有相似的数据结构。然而javascript确略有不一样。java
javascript中数组是一种特殊的对象,用来表示偏移量的索引是该对象的属性,索引多是整数。然而这些数字索引在内部被转换为字符串类型,这是由于javascript对象中的属性名必须是字符串。数组在javascript又是一种特殊的对象,因此效率上不如其余语言中的高。程序员
javascript中的数组,严格的来讲应该称做为对象,是特殊的javascript对象,在内部被归类为数组。因为Array在javascript中被当作对象,所以它有不少属性和方法在编程中使用。算法
二:使用数组编程
javascript中的数组很是灵活。可是建立数组和存取元素的方法就有好多种。也能够经过关不一样的方式对数组进行进行查找和排序。javascript1.5还提供了一些函数,让程序员再处理数组时可使用函数式编程技巧。数组
1.建立数组数据结构
最简单的方式就是经过[]操做符声明一个数组变量。dom
var numbers = [];
使用这样的方式建立数组,将获得一个长度为0的空数组。也能够经过内建的length来证实这一点。编程语言
console.log(numbers.length); //0
另一种方式是在声明数组时,直接在[]操做符内放入一组元素。
var numbers = [1,2,3,4,5] console.log(numbers.length); //5
也能够经过调用Array的构造函数进行建立数组
var numbers = new Array(); console.log(numbers.length);//0
一样能够为构造函数传入一组元素做为数组的初始值
var numbers = new Array(1,2,3,4,5) console.log(numbers.length)
最后,在调用构造函数时,能够只传入一个参数,来指定数组的长度。
var numbers = new Array(10); console.log(numbers.length);//10 console.log(numbers);//[]
在脚本语言中很常见的一个特性是,数组中的元素没必要是同一种数据类型,这一点和其它编程语言不一样,以下所示:
var objects = [1,"joe",true,null];
能够调用Array.isArray()来判断一个对象是否数组。以下所示范
var numbers = 3; var arr = [7,4,123]; console.log(Array.isArray(numbers));//false console.log(Array.isArray(arr)) //true
本节咱们讨论的数组的建立,那种方式最好,大多数javascript专家推荐使用[],和Array的构造函数相比,这种方式被认为效率更高。
2.读写数组
在一条赋值语句中,可使用[]操做符将数据赋值给数组。好比如下循环,将1-100的数字赋予给一个数组。
var num = []; for (var i = 0; i < 100; ++i) { num[i] = i+1 }; console.log(num)
还可使用[]操做符读取数组中的元素,以下所示:
var numbers = [1,2,3,4,5] var sum = numbers[0]+ numbers[1] + numbers[2] + numbers[3] + numbers[4]; console.log(sum) //15
要依次取得数组中的全部元素,使用for循环更加简单。
var numbers = [1,2,3,5,8,13,21]; var sum = 0; for (var i = 0; i < numbers.length; i++) { sum += numbers[i] } console.log(sum);//53
3.由字符串生成数组
调用字符串对象split()方法也能够生成数组。该方法经过一些常见的分割符,好比分割单词的空格,将一个字符串分为几部分,并将每一个部分做为一个元素保存在一个新建的数组中。
下面的一段代码演示了split()的使用方法。
var sent = "the quik brown fox jumped over zhe lazy dog"; var word = sent.split(" ") console.log(word) ;//["the", "quik", "brown", "fox", "jumped", "over", "zhe", "lazy", "dog"] for (var i = 0; i < word.length; ++i){ word[i] console.log("word " + i + ":" + word[i]) }
4.对数组的总体性操做
有几个操做做为一个总体进行的。首先,能够将一个数组赋值给另一个数组:
var nums = []; for (var i = 0; i < 10 ; ++i){ nums[i] = i + 1; } var sam = nums; console.log(sam)
可是,当把一个数组赋值给另一个数组时,只是为被赋值的数组增长了一个新的引用。当你经过原引用修改了数组的值,另一个引用也会感知到这个变化。下面的代码展现了这个状况。
var nums = []; for (var i = 0; i < 100; +i){ nums[i] = i + 1; } var sament = nums; nums[0] = 400; console.log(sament[0])//400
这种复制被称为浅复制,新数组任然会指向原来的数组,一个更好的方案是深复制,将原数组的每个元素都复制到新数组中,能够写一个方法来复制函数来作这件事情
function arr_copy(arr1, arr2){ for (var i = 0; i < arr1.length; i++){ arr2[i] = arr1[i] } } var nums = []; for (i = 0; i < 100; i++) { nums[i] = i + 1; } var sament = []; arr_copy(nums,sament); nums[0] = 400; console.log(sament[0])//1
三:存取函数
javascript提供了一组用来访问数组元素的函数,叫存取函数,这些函数返回目标数组的某种变体。
1.查找元素
indexof()函数是最经常使用的存取函数之一,用来查找传进来的参数在目标数组中是否存在。若是目标函数中存在该参数,就返回该元素在数组中索引。若是不包含,就返回-1.indexof()对大小写敏感
若是数组中包含多个相同的元素,则indexof()则返回第一个与参数相同的元素索引。有另一个功能相似的函数,lastIndexOf().该函数返回相同元素的最后一个元素的索引,若是没有找到相同元素,则返回-1.以下.indexof()对大小写敏感
var str="Hello world!" console.log(str.indexOf("Hello")) console.log(str.indexOf("World")) console.log(str.indexOf("world"))
若是数组中包含多个相同的元素,则indexof()则返回第一个与参数相同的元素索引。有另一个功能相似的函数,lastIndexOf().该函数返回相同元素的最后一个元素的索引,若是没有找到相同元素,则返回-1.以下
var names = ["David", "Mike", "Cynthia", "Mike", "Jennifer"]; var name = "Mike"; var firstPos = names.indexOf(name); console.log(firstPos)//1 var lastPos = names.lastIndexOf(name) console.log(lastPos)//3
2.数组的字符串表示
有两个方法能够将数组转化为字符串:join()和toString(),这两个方法都返回一个包含数组全部元素的字符串,各元素之间用逗号隔开,下面是一些例子
var names = ["David", "Mike", "Cynthia", "Mike", "Jennifer"]; var namestr = names.join(); namestr.toString(); console.log(namestr);//David,Mike,Cynthia,Mike,Jennifer
3.由已有数组建立新数组
concat()和splice()方法容许经过已经有的数组建立新数组。concat方法能够合并多个数组建立一个新数组,splice()方法截取一个数组的子集建立一个新数组
咱们先来看看,concat方法的工做原理。该方法发起者是一个数组,参数是另外一个数组。做为参数的数组,其中全部的元素都被链接到调用concat()方法的数组后面,下面展现了concat()方法的工做原理
var cisDept = ["Mike", "Clayton", "Terrill", "Danny", "Jennifer"]; var dmpDept = ["Ramondy", "Cynthia", "Bryan"]; var itDiv = cisDept.concat(dmpDept); console.log(itDiv) //["Mike", "Clayton", "Terrill", "Danny", "Jennifer", "Ramondy", "Cynthia", "Bryan"] itDiv = dmpDept.concat(cisDept) console.log(itDiv) ;//["Ramondy", "Cynthia", "Bryan", "Mike", "Clayton", "Terrill", "Danny", "Jennifer"]
输出为
Mike,Clayton,Terrill,Danny,Jennifer,Ramondy,Cynthia,Bryan
Ramondy,Cynthia,Bryan,Mike,Clayton,Terrill,Danny,Jennifer
splice()方法从现有数组里截取一个新数组。该方法的第一个参数是是截取的起始索引,第二个参数是截取的长度。下面的程序展现了splice()方法工做原理:
var itDiv = ["Mike", "Clayton", "Terrill", "Danny", "Jennifer", "Cynthia", "Bryan"]; var dmpDept = itDiv.splice(3,3) //["Danny", "Jennifer", "Cynthia"] var cisDept = itDiv; //["Mike", "Clayton", "Terrill", "Bryan"]
splice()方法还有其它的用法,好比为一个数组增长或移除元素,具体请参考:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
4.可变函数
javascript中有一组可变函数,使用它们,能够没必要引用数组中某个元素,就能改变数组内容。这些函数一般化简繁。让困难的事情变得容易。
为数组添加元素
有两个方法 能够为数组添加元素,push()和unshift()。push()方法会将一个元素添加到数组末尾。
var nums = [1,2,3,4,5]; nums.push(6) console.log(nums);//[1, 2, 3, 4, 5, 6]
也可用使用数组的length属性为数组添加元素,但push()看起来更直观。
var nums = [1,2,3,4,5]; nums[nums.length] = 6; console.log(nums)
和在数组的末尾添加元素比起来,在数组的开头添加元素更难,若是不利于数组提供的可变函数,则新的元素添加进来后,须要把后面的每一个元素都相应的向后移一个位置。下面的代码展现了这个过程。
var nums = [111,2,3,4,5,22,2] var newnum = 1; var _n = nums.length; for (var i = _n; i >= 0; --i){ nums[i] = nums[i-1] } nums[0] = newnum; console.log(nums) //[1, 111, 2, 3, 4, 5, 22, 2]
不过随着数组中储存的元素愈来愈多,上述代码会变得原来越低效。
unshift()方法能够将元素添加在数组的开头,下面代码展现改方法的用法。
var nums = [2,3,4,5,6] var newnum = 1; nums.unshift(newnum); var nums2 = [3,4,5]; nums2.unshift(newnum,1,2) console.log(nums2) ;//[1, 1, 2, 3, 4, 5]
其中第二次出现的unshift(),展现了能够一次调用,为数组添加多个元素。
2. 从数组中删除元素
使用pop()方法能够删除数组末尾元素:
var nums = [1,2,3,4,5,9] nums.pop() console.log(nums)
若是没有可变函数,从数组中删除第一个元素须要将后续元素各自向前移动一个位置
var nums = [9,1,2,3,4,5,6]; for (var i = 0; i < nums.length; ++i) { nums[i] = nums[i+1] }
除了要将后续的元素向前移动一位,还多出了一个元素。
shift()方法能够删除数组中的第一个元素,下面代码展现其用法。
var nums = [11,1,2,3,4,5,6,7]; nums.shift(); console.log(nums)
这组数组末尾那个多余的逗号消失了。pop()和shift()方法都将删掉的元素做为方法返回值返回,所以,可使用一个变量来保存删除的元素。
var nums = [7,1,2,3,4,5,6]; var _d = nums.shift(); nums.push(_d) console.log(nums)//[1, 2, 3, 4, 5, 6, 7]
3.从数组的中间位置添加和删除元素
删除数组的第一个元素和在数组开头添加一个元素存在一样的问题 ,两种操做都须要将数组中的剩余元素向前或向后移,然而splice()方法能够帮助咱们执行其中的任何一种操做。
使用splice()方法为数组添加元素,须要提供如下参数
var nums = [1,2,3,7,8,9] var newElement = [4,5,6] nums.splice(3,0,newElement)
要插入的数组没必要组织成一个数组,能够是任意元素序列
var nums = [1,2,3,7,8,9] nums.splice(3,0,11,22,3,4,5) console.log(nums);//[1, 2, 3, 11, 22, 3, 4, 5, 7, 8, 9]
下面是splice()方法从数组中删除元素的例子
var nums = [1, 2, 3, 11, 22, 3, 4, 5, 7, 8, 9] nums.splice(3,3) console.log(nums);//[1, 2, 3, 4, 5, 7, 8, 9]
4.为数组排序。
剩下的两个方法是为数组排序。第一个方法是reverse(),该方法将数组数组中的元素进行反翻转。下面的例子展现了此用法。
var nums = [1,2,3,4,5,6] nums.reverse(); console.log(nums);//[6, 5, 4, 3, 2, 1]
对数组的排序是常常要遇到的要求,若是元素是字符串类型,那么数组的可变方法sort()就变得很是好使。
var names = ["David", "Mike", "Cynthia", "Mike", "Jennifer"]; names.sort(); console.log(names);//["Cynthia", "David", "Jennifer", "Mike", "Mike"]
可是,若是数组元素是数字类型,那么sort()方法的排序就不那么让人满意了。
var nums = [3,1,2,100,4,200] nums.sort() console.log(nums);//[1, 100, 2, 200, 3, 4]
sort()方法是按照字典排序时对元素进行排序的,所以,它将定元素都是字符串类型,在上一个例子中,即便元素是数字类型,也是会被认为为字符串类型。为了让sort()方法也能排序数字类型的元素,能够在调用方法时传入一个比较大小的函数。排序时,sort()方法将会比较两个数组元素的大小。
对于数字类型,该函数能够是一个简单的相减操做,从一个数字减去另一个数字。搞清楚这些后咱们将以下操做:
function compare(num1, num2){ return num1 - num2; } var nums = [3,1,2,100,4,200] nums.sort(compare); console.log(nums);//[1, 2, 3, 4, 100, 200]
5.迭代器方法
最后是迭代器方法,这些方法对数组中的每个元素应用一个函数,能够返回一个值,一组值或一个新数组。
1.不生成新数组的迭代器方法。
咱们讨论的第一组迭代器不产生任何新数组,相反,它们要么对于数组中的每一个元素执行某种操做,要么返回一个值。
这组中第一个方法是forEach(),该方法接受一个函数做为参数,对数组中的每一个元素使用该函数。
function square(num){ console.log(num,num * num); } var nums = [1,2,3,4,5,6,7,8,9,10] nums.forEach(square);
另一个迭代器方法是every(),该方法接受一个返回值为布尔类型的函数,对数组中的每一个元素使用该函数。若是对于全部的元素,该函数均返回true,则该方法返回true,下面是一个例子:
function isEven(num){ return num % 2 == 0; } var nums = [2,4,6,8,10]; var even = nums.every(isEven); if (even) { console.log("全是偶数") } else { console.log("不全是偶数") }
some()方法也接受一个返回值为布尔类型的函数,只要一个元素使得该函数返回true,该方法就返回true.
function isEven(num){ return num % 2 == 0; } var nums = [1,2,4,5,6,7,8,9,10] var someEven = nums.some(isEven); console.log(someEven)
reduce()方法接受一个函数,返回一个值。该方法会从一个累加值开始,不断对累加值和数组中的后续元素调用该函数,直到数组中的最后一个元素,最后返回获得的累加值。下面这个例子展现了如何使用reduce()
function add(num1, num2){ return num1 + num2; } var nums = [1,2,3,4,5,6,7,8,9,10]; var sum = nums.reduce(add); console.log(sum);//55
reduce()方法和add()函数一块儿,从左至右,依次对数组中的元素求和,其执行过程以下:
add(1,2) -> 3 add(3,3) -> 6 add(6,4) -> 10 add(10,5) -> 15 add(15,6) -> 21 add(21,7) -> 28 add(28,8) -> 36 add(36,9) -> 45 add(45,10) -> 55
reduce()方法也能够用来将数组中的元素连成一个长的字符串。
function concat(accString, item){ return accString + item; } var words = ['the ', 'quick ', 'brown ', 'fox ']; var sentence = words.reduce(concat) console.log(sentence) ;//the quick brown fox
javascript还提供了reduceRight()方法,和reduce()不一样,它是从右至左执行。下面的程序使用reduceRight()方法将数组中的元素进行翻转。
function concat(accString, item){ return accString + item; } var words = ['the ', 'quick ', 'brown ', 'fox ']; var sentence = words.reduceRight(concat) console.log(sentence) ;//fox brown quick the
2.生成新数组的迭代器方法
有两个迭代器方法能够产生新数组:map()和filter()。map()和forEach()有点儿像。对数组中的每一个元素使用某个函数。二者的区别是map()返回一个新的数组,该数组的元素是对原有元素应用某个函数获得的结果。下面给出一个例子:
function curve(grade){ return grade += 5; } var grades = [1,3,5,8,10]; var newgrades = grades.map(curve); console.log(newgrades)
下面是对一个字符串数组使用map()方法的例子:
function first(word){ return word[0] } var words = ['for', 'your', 'information']; var acronym = words.map(first); console.log(acronym.join(""));//fyi
filter()和every()相似,传入一个返回值为布尔类型的函数。和every()方法不一样的是,当对数组中全部的元素应用该函数,当结果为true时,该方法不返回true,而是返回一个新数组。该组包含该函数结果为true的元素。下面是一个例子。
function isEven(num){ return num % 2 == 0; } function isOdd(num){ return num % 2 != 0; } var nums = []; for (var i = 0; i < 20; ++i){ nums[i] = i + 1; } console.log(nums) var events = nums.filter(isEven) console.log(events);//[2, 4, 6, 8, 10, 12, 14, 16, 18, 20] var odds = nums.filter(isOdd); console.log(odds);//[1, 3, 5, 7, 9, 11, 13, 15, 17, 19]
下面是使用filter()方法的有趣案例
function passing(num){ return num >= 60; } var grades = []; for (var i = 0; i < 20; ++i){ grades[i] = Math.floor(Math.random()*101); } console.log(grades);//[4, 56, 87, 62, 24, 54, 80, 7, 95, 98, 40, 43, 56, 79, 84, 52, 87, 23, 43, 18] var passGardes = grades.filter(passing); console.log(passGardes);//[87, 62, 80, 95, 98, 79, 84, 87]随机
固然,还可使用filter()过滤字符串数组,下面的这个例子展现了那些不包含"cie"的单词:
function after(str) { if (str.indexOf("cie") > -1) { return true } return false; } var words = ["recieve", "deceive" , "percieve", "deceit", "concieven"]; var nocie = words.filter(after); console.log(nocie);//["recieve", "percieve", "concieven"]
六,二维和多维数组
javascript只支持一维数组,可是经过在数组里保存数组元素的方式,能够轻松建立多维数组。本节将讨论如何在javascript中建立二维数组。
1.建立二维数组
二维数组相似一种由行和列构成的数据表格。在javascript建立二维数组,须要建立一个数组,而后让数组的每一个元素也是一个数组。最起码,咱们须要知道二维数组要包含多少行,有了这个信息,就能够建立一个n行1列的二维数组了。
var twod = []; var row = 5; for (var i = 0; i < row; ++i){ twod[i] = []; } console.log(twod);//[Array[0], Array[0], Array[0], Array[0], Array[0]]
这样作的问题是,数组中的每一个元素都是undefined。更好的方式是经过扩展javascript数组对象,为其增长一个新方法。该方法根据传入的参数,设定了数组的行数,列数和初始值。下面是这个方法的定义;
Array.matrix = function(numrows, numcols, initial) { var arr = []; for (var i = 0; i < numrows; ++i){ var columns = []; for (var j = 0; j < numcols; ++j) { columns[j] = initial; } arr[i] = columns } return arr; }
下面是该测试方法的一些测试代码:
var nums = Array.matrix(5,5,0); console.log(nums[1][1]);//0 var names = Array.matrix(3,3,""); console.log(names) names[1][2] = "Joe";
还可使用使用一行代码和使用一组初始值来初始化一个二维数组
var grades = [[1,35,1],[123,52,14],[123,12,5,21,5,2]]
对于小规模数据,这是建立二维数组的最简单的方式。
2.处理二维数组的元素
处理二维数组中的元素,有两种最基本的方式:按列访问和按行访问。
对于这两种方式,咱们均使用一组嵌入式的for循环。对于按列访问,外层循环对于行,内层循环对应列。
以数组grades为例,每一行对于一个学生的成绩记录。咱们能够将该学生的全部成绩相加,而后除以科目数获得该学生的平均成绩。下面的代码展现了这个过程。
var grades = [[89,77,78],[76,62,81],[91,94,89]]; var total = 0; var average = 0.0; for (var row = 0; row < grades.length; ++i) { for (var col = 0; col < grades[row].length; ++col){ total += grades[row][col] } average = total / grades[row].length; console.log("Student" + parseInt(row + 1) + " average: " + average.toFixed(2)); total = 0; average = 0.0;
内层循环由这个表达式控制;
col < grades[row].length
这个表达式之因此多行,是由于每一行都是一个数组,咱们可使用数组的length属性判断每行包含多少行。
Student1 average: 81.33 Student2 average: 73.00 Student3 average: 91.33
对于按行访问,只须要稍微调整for循环的顺序,使外层循环对应列,内存循环对应行便可。下面的程序计算了一个学生的各科成绩。
var grades = [[89,77,78],[76,62,81],[91,94,89]]; var total = 0; var average = 0.0; for (var col = 0; col < grades.length; ++col) { for(var row = 0; row < grades[col].length; ++row){ total += grades[row][col] } average = total / grades[col].length; console.log("Test " + parseInt(col+1) + "average " + average.toFixed(2)); total = 0; average = 0.0; }
输出
Test 1average 85.33 Test 2average 77.67 Test 3average 82.67
3.层次不齐的数组
层次不齐的数组是指数组中每行的元素个数彼此不一样。不少编程语言在处理这样的数组时表现的都不是很好,但javascript表现良好,是由于每一行的长度能够经过计算获得。
为了给个示例,假设数组grades中,每一个学生的成绩记录个数是不同的,不用修改代码,依然能够正确计算出正确的平均分。
var grades = [[89,77],[76,82,81],[91,94,89,99]]; var total = 0; var average = 0.0; for (var row = 0; row < grades.length; ++row){ for (var col = 0; col < grades[row].length; ++col){ total += grades[row][col]; } average = total / grades[row].length; console.log("Student" + parseInt(row + 1) + " average " + average.toFixed(2)); total = 0; average = 0.0; }
注意,第一名同窗有两门课成绩,第二名有三门课成绩,第三名有4门课成绩。由于程序在内层for循环计算了每一个数组的长度,即便数组中每一行的长度不一,程序依然不会出现什么问题。该段程序输出为:
Student1 average 83.00 Student2 average 79.67 Student3 average 93.25
七,对象数组
到目前为止,本章讨论的数组都只包含基本数据类型的元素,好比数字和字符串。数组还能够包含对象,数组的方法和属性对对象依然适用。
请看下面的例子:
function Point(x,y) { this.x = x; this.y = y; } function displayPts(arr) { for (var i = 0; i < arr.length; ++i) { console.log(arr[i].x + ", " + arr[i].y); } } var p1 = new Point(1,2); var p2 = new Point(3,5); var p3 = new Point(2,8); var p4 = new Point(4,4); var points = [p1,p2,p3,p4] for (var i = 0 ; i < points.length; ++i) { console.log("Point " + parseInt(i+1) + ": " + points[i].x + ", " + points[i].y) } var p5 = new Point(12,-3); points.push(p5) displayPts(points); points.shift(); console.log(points) displayPts(points)
适用push()方法将点(12,-3)添加进数组,适用shift()方法将(1,2)从数组移除。
八,对象中的数组。
在对象中,可使用数组存储复杂的数据。不少数据都能被实现成一个对象,对象内部使用数组保存数据。
下面的例子,咱们建立了一个对象,用于保存观测到的最高气温数据,该对象有两个方法,一个方法用来增长一条新的气温记录,另一个方法用来计算存储在对象中的平均气温。代码以下
function weekTemps() { this.dataStore = []; this.add = add; this.average = average; } function add(temp) { this.dataStore.push(temp) } function average() { var total = 0; for (var i = 0; i < this.dataStore.length; ++i) { total += this.dataStore[i]; } return total / this.dataStore.length; } var thisWeek = new weekTemps(); thisWeek.add(52); thisWeek.add(55); thisWeek.add(61); thisWeek.add(65); thisWeek.add(55); thisWeek.add(50); thisWeek.add(52); thisWeek.add(49); console.log(thisWeek.average());//54.875
add()方法中用到了数组的push()方法,将元素添加到数组dataStore中,为何这个方法名叫add()而不是叫push()?这是由于在自定义方法时,一个直观的名字是很是有用的技巧(不是全部人知道push一个元素是什么意思,可是全部人add一个元素是什么意思。)
(本章完结)