javascript类型系统 Array对象学习笔记
数组是一组按序排列的值,相对地,对象的属性名称是无序的。从本质上讲,数组使用数字作为查找键,而对象拥有用户自定义的属性名。javascript没有真正的关联数组,但对象可用于实现关联的功能
Array()仅仅是一种特殊类型的Object(),也就是说,Array()实例基本上是拥有一些额外功能的Object()实例。数组可以保存任何类型的值,这些值可以随时更新或删除,且数组的大小是动态调整的
一、数组创建
与Javascript中的大多数对象一样,可以使用new操作符连同Array()构造函数,或者通过使用字面量语法来创建数组对象
【1】使用Array构造函数(在使用Array构造函数时,也可以省略New操作符),可以将数组实例的值传递给构造函数,以逗号分隔作为参数,Array()构造函数可以接收4294967295(大约43亿)个参数
如果只有一个参数:若传递的是数值,它将用来设置数组的长度;若传递的是其他类型的参数,则会创建包含那个值的只有一项的数组
var colors; console.log(colors = new Array(),colors.length);//[] 0 console.log(colors = new Array('red','blue','green'),colors.length);//['red','blue','green'] 3 console.log(colors = new Array(20),colors.length);//[] 20 console.log(colors = new Array('red'),colors.length);//['red'] 1
var foo = new Array(1,2,3); var bar = new Array(100); console.log(foo[0],foo[2]);//1 3 console.log(bar[0],bar.length);//undefined 100
【2】使用数组字面量表示法
var colors = ['red','blue','green']; var colors = []; //Array构造函数 var myArray1 = new Array('blue','green','orange','red'); console.log(myArray1);//['blue','green','orange','red'] //数组字面量表示法 var myArray2 = ['blue','green','orange','red']; console.log(myArray2);//['blue','green','orange','red'] var colors = [1,2,]; //在IE8及以前中会包含一个三个项目,且每个项目为1、2和undefined的数组。在其他浏览器中为只包含1和2的数组 var colors = [,,,]; //在IE8及以前会创建4项的数组,而在其他浏览器中会创建3项的数组
二、数组操作
在读取和设置数组的值时,要使用方括号并提供相应值的基于0的数字索引
数组的长度length属性表示数组中值的数量,而数组的数字索引是从0开始的;且length属性可读可写,通过设置数组的Length属性,可以从数组的末尾移除项或向数组中添加新项。如果设置的长度高于数组中值的实际数量,将向数组中添加undefined值;若将长度值的数量设置为少于数组中的值的数量,可能会删除数组中的值
var myArray = ['blue','green','orange','red']; console.log(myArray.length);//4 myArray.length = 99; console.log(myArray.length);//99 myArray.length = 1; console.log(myArray[1]);//undefined console.log(myArray);//['blue'] var colors = ['red','blue','green']; colors.length = 2; alert(colors[2]);//undefined colors.length = 4; alert(colors[3]);//undefined
当把一个值放在超出数组大小的位置上时,数组就会重新计算其长度值,即长度值等于最后一项的索引加1,Javascript将会使用undefined值填充当前索引之前的所有索引
var myArray = []; myArray[50] = 'blue'; console.log(myArray.length);//51 var colors = ['red','blue','green']; colors[99] = 'black'; console.log(colors.length);//100
[tips]利用length属性可以方便地在数组末尾添加新项
colors[colors.length] = 'black';
三、继承的方法
toString()
返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串
valueof()
返回的还是数组
var colors = ['red','blue','green']; console.log(colors.valueOf());//['red','blue','green'] alert(colors.valueOf());//'red,blue,green' alert(colors.toString());//'red,blue,green' alert(colors);//'red,blue,green'[注意]由于alert()要接收字符串参数,它会在后台调用toString()方法,会得到与toString()方法相同的结果
toLocaleString()
调用该方法时,数组的每一项的值调用的是toLocaleString()方法
var person1 = { toLocaleString: function(){ return 'Nikolaos'; }, toString: function(){ return 'Nicholas'; } }; var person2 = { toLocaleString: function(){ return 'Grigorios'; }, toString: function(){ return 'Greg'; } }; var people = [person1,person2]; alert(people);//Nicholas,Greg alert(people.toString());//Nicholas,Greg alert(people.toLocaleString());//Nikolaos,Grigorios
四、实例方法
数组转换
join()
数组继承的toLocaleString()、toString()、valueOf()方法,在默认情况下都会以逗号分隔的字符形式返回数组项;而join()方法可以使用不同的分隔符来构建这个字符串,join()方法只接收一个参数,用作分隔符的字符串,然后返回包含所有数组项的字符串。如果不给join()方法传入任何值,或者传入undefined,则使用逗号作为分隔符
var colors = ['red','green','blue']; console.log(colors.join(','));//'red,green,blue' console.log(colors.join('||'));//'red||green||blue' console.log(colors.join());//'red,green,blue' console.log(colors.join(undefined));//'red,green,blue'[注意]IE7-会使用undefined作为分隔符
[注意]如果数组中的某一项的值是null或者undefined,那么该值在join()、toLocaleString()、toString()和valueOf()方法返回的结果中以空字符串表示
数组检测
自从ES3做出规定之后,就出现了确定某个对象是不是数组的经典问题。一般的常见方法是使用instance操作符,但该方法有它的局限性;ES5专门新增了isArray()方法来检测数组
var value = [123]; console.log(value instanceof Array);//true
instanceof操作符的问题在于它假定只有一个全局执行环境,如果网页中包含多个框架,那实际上就存在两个以上不同的全局环境,从而存在两个以上不同版本的Array构造函数。如果从一个框架向另一个框架传入一个数组,那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的构造函数
//在不同框架中不能共享prototype属性 var iframe = document.createElement('iframe'); document.body.appendChild(iframe); var value = new window.frames[0].Array; console.log(value instanceof Array);//false console.log(value.constructor == Array);//false
但是,在不同框架中可以跨原型链调用toString()方法
var iframe = document.createElement('iframe'); document.body.appendChild(iframe); var value = new window.frames[0].Array; console.log(Object.prototype.toString.call(value));//[object Array]
ES5新增了Array.isArray()方法,来最终确定某个值到底是不是数组,而不管它在哪个全局环境中创建的
Array.isArray()
var value = [123]; console.log(Array.isArray(value));//true var iframe = document.createElement('iframe'); document.body.appendChild(iframe); var value = new window.frames[0].Array; console.log(Array.isArray(value));//true
栈和队列
push()
可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度
pop()
从数组末尾移除最后一项,减少数组的length值,然后返回移除的项
shift()
移除数组中的第一个项并返回该项,同时数组的长度减1(结合使用shift()和push()可以模拟队列)
unshift()
在数组前端添加任意个项并返回新数组长度(结合使用unshift()和pop()从相反方向模拟队列)
[注意]IE7-浏览器unshift()方法返回的总是undefined
var colors = []; var count = colors.push('red','green'); console.log(colors,count);//['red','green'] 2 var count = colors.pop(); console.log(colors,count);//['red'] 'green' var count = colors.unshift('white','black'); console.log(colors,count);//["white", "black", "red"] 3 var count = colors.shift(); console.log(colors,count);//["black", "red"] "white"
排序方法
reverse()
反转数组的顺序,返回经过排序之后的数组;而原数组顺序也发生改变
var array = [1,2,4,3,5]; console.log(array,array.reverse());//[5,3,4,2,1] [5,3,4,2,1] var array = ['str',true,3]; console.log(array,array.reverse());//[3,true,'str'] [3,true,'str']
sort()
默认情况下,按字符串升序排列数组项,sort方法会调用每个数组项的toString()方法,然后比较得到的字符串排序,返回经过排序之后的数组,而原数组顺序也发生改变
var array = [1,2,4,3,5]; console.log(array,array.sort());//[1,2,3,4,5] [1,2,3,4,5] var array = ['3str',3,2,'2']; console.log(array,array.sort());//[2, "2", 3, "3str"] [2, "2", 3, "3str"] var array = [1,5,10,50]; console.log(array,array.sort());//[1, 10, 5, 50] [1, 10, 5, 50]
[注意]sort()方法可以接受一个比较函数作为参数,以便指定哪个值在哪个值的前面。比较函数接收两个参数,如果第一个参数应该位于第二个参数之前则返回一个负数,如果两个参数相等则返回0,如果第一个参数应该位于第二个参数之后则返回一个正数
[tips]比较函数
function compare(value1,value2){ if(value1 < value2){ return -1; }else if(value1 > value2){ return 1; }else{ return 0; } } var array = ['5px',50,1,10]; //当数字与字符串比较大小时,字符串'5px'会被转换成NaN,这样结果就是false console.log(array.sort(compare));//["5px",1, 10, 50]
对于数值类型或valueOf()方法会返回数值类型的对象类型,比较函数可以简化为:
function compare(value1,value2){ return value1 - value2; } var array = ['5px',50,1,10]; console.log(array.sort(compare));//["5px",1,10,50] var array = [5,50,1,10]; console.log(array.sort(compare));//[1,5,10,50]
[tips]创建一个随机数组
function compare(){ return Math.random() - 0.5; } var array = [1,2,3,4,5]; console.log(array.sort(compare));//[2,1,5,4,3]
操作方法
concat()
基于当前数组中的所有项创建一个新数组,先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组(concat()不影响原数组)
如果不给concat()方法传递参数时,它只是复制当前的数组;如果参数是一个或多个数组,则该方法会将这些数组中的每一项都添加到结果数组中;如果传递的值不是数组,这些值就会被简单地添加到结果数组的末尾
var numbers = [1,2]; console.log(numbers,numbers.concat());//[1,2] [1,2] console.log(numbers,numbers.concat([5,4,3],[3,4,5],1,2));//[1,2] [1,2,5,4,3,3,4,5,1,2]
slice()
基于当前数组中的一个或多个项创建一个新数组,接受一个或两个参数,即要返回项的起始和结束位置,最后返回新数组(slice()不影响原数组)
如果没有参数,则返回原数组;如果只有一个参数时,slice()方法返回从该参数指定位置开始到当前数组末尾的所有项;若有两个参数时,该方法返回起始位置和结束位置之间的项,但不包括结束位置的项;若参数为负数时,则用数组长度加负数作为参数;若结束位置小于开始位置,则返回空数组
var numbers = [1,2,3,4,5]; console.log(numbers.slice());//[1,2,3,4,5] console.log(numbers.slice(2));//[3,4,5] console.log(numbers.slice(2,3));//[3] console.log(numbers.slice(-3));//-3+5=2 -> [3,4,5] console.log(numbers.slice(2,1));//[]
splice()
原数组变为修改后的数组,而splice()返回从原数组中删除的项组成的数组,若无删除项则返回空数组。若第一个参数为负数时,则用数组长度加负数作为参数;若第二个参数为负数时,则用0作为参数
[1]删除:两个参数为要删除的第一项的位置、要删除的项数
[2]插入:三个参数为起始位置、0(要删除的基数)、要插入的项
[3]替换:三个参数为起始位置、要删除的项数、要插入的项
var numbers = [1,2,3,4,5]; console.log(numbers.splice(),numbers);//[] [1, 2, 3, 4, 5] console.log(numbers.splice(0,2),numbers);//[1,2] [3,4,5] var numbers = [1,2,3,4,5]; console.log(numbers.splice(1,0,11,12),numbers);//[] [1,11,12,2,3,4,5] var numbers = [1,2,3,4,5]; console.log(numbers.splice(1,3,11,12),numbers);//[2,3,4] [1,11,12,5] var numbers = [1,2,3,4,5]; console.log(numbers.splice(-4,3,11,12),numbers);//-4+5=1 -> [2,3,4] [1,11,12,5] var numbers = [1,2,3,4,5]; console.log(numbers.splice(-4,-3,11,12),numbers);//-4+5=1 -> [] [1,11,12,2,3,4,5]
位置方法
ES5为数组实例添加了两个位置方法indexOf()、lastIndexOf()。这两个方法都接收两个参数:要查找的项、表示查找起点位置的索引(可选)。返回第一个满足条件的查找项在数组中的位置,如果没有找到则返回-1(位置方法不会影响原数组)
[注意]方法在比较参数时,使用的是全等操作符
indexOf() 从前向后查找
lastIndexOf() 从后向前查找
var numbers = [1,2,3,4,5,4,3,2,1]; console.log(numbers.indexOf(4));//3 console.log(numbers.lastIndexOf(4));//5 console.log(numbers.indexOf(4,4));//5 console.log(numbers.lastIndexOf(4,4));//3 var person = {name: 'Nicholas'}; var people = [{name: 'Nicholas'}]; var morePeople = [person]; alert(people.indexOf(person));//-1,因为person和people[0]虽然值相同,但是是两个引用 alert(morePeople.indexOf(person));//0,因为person和morepeople[0]是同一个引用 alert(morePeople.indexOf({name: 'Nicholas'}));//-1,因为不是同一个引用
[tips]返回满足条件的项的所有索引值
function allIndexOf(array,value){ var result = []; var pos = array.indexOf(value); if(pos === -1){ return -1; } while(pos > -1){ result.push(pos); pos = array.indexOf(value,pos+1); } return result; } var array = [1,2,3,3,2,1]; console.log(allIndexOf(array,1));//[0,5]
以上就是本文的详细内容,希望对大家的学习javascript程序设计有所帮助。
相关文章
使用PHP+JavaScript将HTML页面转换为图片的实例分享
这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19- 在昨天的《Javascript权威指南》学习笔记之十:ECMAScript 5 增强的对象模型一文中,对于一段代码的调试出现了一个奇怪现象,现将源代码贴在下面: 复制代码 代码如下: <script type="text/javascript"> function Person(){}...2014-05-31
- 最近做一个小项目不可避免的需要前端脚本与后台进行交互。由于是在asp.net中实现,故问题演化成asp.net中jiavascript与后台c#如何进行交互。...2020-06-25
- 复制代码 代码如下: //element:需要添加新样式的元素,value:新的样式 function addClass(element, value ){ if (!element.className){ element.className = value; }else { newClassName = element.className; newClas...2014-05-31
- 在javascritp中,不一定只有对象方法的上下文中才有this, 全局函数调用和其他的几种不同的上下文中也有this指代。 它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。JavaScript 中函数的调用有以下...2015-03-15
- 有一道js面试题,题目是这样的:下列代码的执行结果是什么,为什么? 复制代码 代码如下: var i, j, k; for (i=0, j=0; i<10, j<6; i++, j++) { k = i+j; } document.write(k); 答案是显示10,这道题主要考察JavaScript的逗...2015-03-15
- 事件触发器从字面意思上可以很好的理解,就是用来触发事件的,但是有些没有用过的朋友可能就会迷惑了,事件不是通常都由用户在页面上的实际操作来触发的吗?这个观点不完全正确,因为有些事件必须由程序来实现,如自定义事件,jQue...2014-06-07
- 首先,我想到的是另建一个结果数组,用来存储原始数组中不重复的数据。遍历原始数组依次跟结果数组中的元素进行比较,检测是否重复。于是乎,我写出了如下代码A: Array.prototype.clearRepetitionA = function(){ var resul...2015-11-08
- 1、ActiveX向Javascript传参 复制代码 代码如下: <script language="javascript" for="objectname" event="fun1(arg)"> fun2(arg); </script> objectname为ActiveX控件名,通过<object>标签里的id属性设定,如下; 复制...2014-06-07
- 这篇文章主要介绍了Javascript类型转换的规则实例解析,涉及到javascript类型转换相关知识,对本文感兴趣的朋友一起学习吧...2016-02-27
- 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 HTML DOM 模型被构造为对象的树: 通过可编程的对象模型,Java...2015-10-23
- Window有navigator对象让我们得知浏览器的全部信息.我们可以利用一系列的API函数得知浏览器的信息.JavaScript代码如下:function message(){ txt = "<p>浏览器代码名: " + navigator.appCodeName + "</p>";txt+= "<p>...2015-11-24
- 虽然ES6都还没真正发布,但已经有用ES6重写的程序了,各种关于ES789的提议已经开始了,这你敢信。潮流不是我等大众所能追赶的。潮流虽然太快,但我们不停下学习的步伐,就不会被潮流丢下的,下面来领略下ES6中新特性,一堵新生代JS...2015-11-24
- 神马是“解释器模式”?先翻开《GOF》看看Definition:给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子。在开篇之前还是要科普几个概念: 抽象语法树: 解释器模式并未解释如...2014-06-07
- ---恢复内容开始---1.location.href.....(1)self.loction.href="http://www.cnblogs.com/url" window.location.href="http://www.cnblogs.com/url" 以上两个用法相同均为在当前页面打开URL页面 (2)this.locati...2015-10-30
- tab切换在网页中很常见,故最近总结了4种实现方法。 首先,写出tab的框架,加上最简单的样式,代码如下: <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style> *{ pa...2015-11-08
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
前言在面向对象的编程范式中,封装都是必不可少的一个概念,而在诸如 Java,C++等传统的面向对象的语言中, 私有成员是实现封装的一个重要途径。但在 JavaScript 中,确没有在语法特性上对私有成员提供支持, 这也使得开发人员使...2015-10-30- 这篇文章主要介绍了JavaScript预解析,对象的的相关资料,小编觉得这篇文章写的还不错,需要的朋友可以参考下,希望能够给你带来帮助...2021-11-10
- 这篇文章主要为大家介绍了JavaScript设计模式中的装饰者模式,对JavaScript设计模式感兴趣的小伙伴们可以参考一下...2016-01-21
- 生生把写过的java版改成javascript版,第一次写,很不专业,见谅。唉,我是有多闲。复制代码 代码如下: var Sudoku = { init: function (str) { this.blank = []; this.fixed = []; this.cell =...2015-03-15