JavaScript——驰骋网页的脚本执行者(4)

六、数组

1.数组的介绍

ECMAScript数组是有序列表,是存放多个值的集合,属于引用数据类型。它的特性有:

每一项都可以保存任何类型的数据;

数组的大小是可以动态调整的;

可以访问或改变数组的length属性(数组也是一种对象,length是表示数组长度的属性,length表示数组中数组项的个数):通过设置length的值在数组末尾移除数组项,或者向数组中添加新的数组项。

2.数组的创建

使用Array构造函数创建数组,如:

var arr = new Array();

var arr = new Array(20); //预先指定数组的长度

var arr = new Array("terry","larry","boss"); //传入参数作为数组项

Array继承Object,通过Array构造函数构建出来的对象可以调用Array原型中的方法,还可以调用Object原型中的方法(arr ->Array.prototype->Object.prototype)。

使用数组字面量创建数组,由一对包含数组项的方括号表示,多个数组项之间用逗号分隔,如:

var arr = ["terry","larry","boss"]; //数组的初始化

var arr = [] //空数组

3.数组的检测

对于一个网页或者一个全局作用域而言,使用instanceof操作符即可判断某个值是否是数组。如果网页中包含多个框架,这样就存在多个不同的全局执行环境,从而存在多个不同版本的Array构造函数,这样就会判断不准确。为解决这个问题,ECMAScript5新增了Array.isArray()方法进行判断,如:

var arr = [];

typeOf(arr); //object

arr instanceof Array //true,在同一个全局作用域下可以这么判断

Array.isArray(arr); //true,判断arr是否是数组类型

4.数组的访问

通过“数组变量名[索引]”访问数组,如果索引小于数组的长度,返回对应项的值;如果索引大于数组的长度,数组自动增加到该索引值加1的长度(因为数组索引从0开始)(数组中最多可以包含4 294 967 295个数组项),且值为undefined,如:

var arr = ["terry","larry","boss"];

arr[0] ; //访问数组中第一个元素,返回值为terry

arr[3] ="jacky"; //添加元素,数组程度变为4

(["terry","larry","boss","jacky"])

arr[9] ; //访问数组中第十个元素,返回值为undefined

可以使用循环语句遍历数组,如:

for(var i = 0; i<arr.length; i++){

var val = arr[i]

console.log(val);

}

for(var key in arr){

var val = arr[key]

}

5.通过栈和队列操作操作数组项

栈(先进后出)操作:

push()可接受任意类型的参数,将它们逐个添加到数组的末尾,并返回数组的长度,参数为要入栈的元素,返回值为数组长度

pop()从数组的末尾移除最后一项,减少数组的length值,返回移除的项,无参数,返回值为出栈的元素

队列(先进先出)操作:

shift()移除数组中的第一个项并且返回该项,同时将数组的长度减一,无参数,返回值为出队的元素

unshift()在数组的前端添加任意个项,并返回新数组的长度,参数为要插队的元素,返回值为插队后队列的长度

6.数组的截取

concat():数组拼接。先创建当前数组的一个副本,然后将接收到的参数添加到这个副本的末尾,返回副本,不改变原数组。

slice():数组切割。接收的参数为(start,end(可选)),只接收start时,返回从start指定位置开始到当前数组末尾的所有项;当接收start和end时,返回start到end之间的项,但不包含end位置的项,不改变原数组。

splice():数组更改。具体使用如下:

删除:指定两个参数(删除的起始位置,要删除的项数)

插入:指定三个参数(起始位置,0,要插入的任意数量的项)

替换:指定三个参数(起始位置,要替换的项,要插入的任意数量的项)

7.数组的排序

reverse():可以反转数组项的顺序

sort():默认排序会调用每个数组项的toString()方法,然后按照字符序列排序;

自定义排序可以接受一个比较函数作为参数(sort(comparator)),比较函数有两个参数(compare(a,b)),降序排序情况是,如果第一个参数位于第二个参数之后(小于第二个参数),返回正数(调换),如果第一个参数位于第二个参数之前(大于第二个参数),返回负数(保持),如下:

var arr = [3,12,29,8,32,4];

arr.sort(function(a,b){

if(a<b){

return 1;

} else {

return -1;

}

});

console.log(arr); //[ 32, 29, 12, 8, 4, 3 ]

8.数组的迭代

every():对数组中的每一项运行给定的函数,如果该函数对每一项都返回true,则该函数的执行结果返回结果为true,如:

var arr = [11,5,23,7,4,1,9,1];

var result = arr.every(function(item,index,arr){

return item >2;

});

console.log(result); //false,数组中存在小于2的项

some():对数组中的每一项运行给定的函数,如果该函数有任意一项返回true,则该函数执行结果返回true,如:

var arr = [11,5,23,7,4,1,9,1];

var result = arr.some(function(item,index,arr){

return item >2;

});

console.log(result); //true,数组中存在大于2的项

filter():对数组中的每一项运行给定的函数,会返回满足该函数的项组成的数组,如:

var arr = [11,5,23,7,4,1,9,1];

var result = arr.filter(function(item,index,arr){

return item >2;

});

console.log(result); //[11, 5, 23, 7, 4, 9],数组中的这些项大于2

map():对数组中的每一项运行给定的函数,返回每次调用该函数的结果组成的数组,如:

var arr = [11,5,23,7,4,1,9,1];

var result = arr.map(function(item,index,arr){

return item * 2;

});

console.log(result); //[22, 10, 46, 14, 8, 2, 18, 2],数组中所有项*2后的结果组成的数组

forEach():对数组中的每一项运行给定的函数,没有返回值,常用来遍历元素,如:

var result = arr.forEach(function(item,index,arr){

console.log(item);

});

9.数组的序列化

toString():在默认情况下会以逗号分隔字符串的形式返回数组项,如:

var arr = ["terry","larry","boss"];

arr.toString(); //terry,larry,boss

join():使用指定的字符串用来分隔数组字符串,如:

var arr = ["terry","larry","boss"];

arr.join("||"); //terry||larry||boss

10.部分数组方法重构

(1)模拟push(),重构为myPush()代码。

Array.prototype.myPush = function(){

var len = this.length; //2

for(var key in arguments){

var item = arguments[key];

this[len+(+key)] = item; //将字符串形式的key转成number

}

return this.length;

}

var arr = [3,12,29,8,32,4];

var result = arr.myPush("terry","larry","tom")

console.log(result,arr); //9 [3,12,29,8,32,4,"terry","larry","tom"]

var arr2 = [3,12,29,8,32,4];

var result2 = arr2.push("terry","larry","tom");

console.log(result2,arr2); //9 [3,12,29,8,32,4,"terry","larry","tom"]

(2)模拟pop(),重构为myPop()代码。

Array.prototype.myPop = function(){

var del = this[this.length - 1];

this.length -= 1;

return del;

}

var arr = [3,12,29,8,32,4];

var result = arr.myPop();

console.log(result,arr); //4 [3,12,29,8,32]

var arr2 = [3,12,29,8,32,4];

var result2 = arr2.pop();

console.log(result2,arr2); //4 [3,12,29,8,32]

(3)模拟shift(),重构为myShift()代码。

Array.prototype.myShift = function(){

var del = this[0];

this.splice(0,1);

return del;

}

var arr = [3,12,29,8,32,4];

var result = arr.myShift();

console.log(result,arr); //3 [12,29,8,32,4]

var arr2 = [3,12,29,8,32,4];

var result2 = arr2.shift();

console.log(result2,arr2); //3 [12,29,8,32,4]

(4)模拟unshift(),重构为myUnshift()代码。

Array.prototype.myUnshift = function(){

for(var key in arguments){

this.splice(key,0,arguments[key]);

}

return this.length;

}

var arr = [3,12,29,8,32,4];

var result = arr.myUnshift("terry","larry","tom")

console.log(result,arr); //9 ["terry","larry","tom",3,12,29,8,32,4]

var arr2 = [3,12,29,8,32,4];

var result2 = arr2.unshift("terry","larry","tom");

console.log(result2,arr2); //9 ["terry","larry","tom",3,12,29,8,32,4]

原文地址:https://www.cnblogs.com/wodeqiyuan/p/11408578.html

时间: 2024-10-09 05:53:19

JavaScript——驰骋网页的脚本执行者(4)的相关文章

JavaScript——驰骋网页的脚本执行者(1)

一.关于JavaScript JavaScript诞生的初衷,是为了减轻网站中表单验证部分对后台服务器和用户双方造成的负担,使一些基础数据检验在前台页面就能够完成,而不用浪费后台服务器资源,同时也减轻了后台验证时返回的页面跳转动作带来的网络负担. JavaScript最初的名字叫LiveScript,后来为了搭上媒体上热炒的java顺风车(蹭热度),在正式发布前夕改名为JavaScript.由于浏览器厂商对脚本控制的不同实现方式,当时的JavaScript有着不同的版本,但在欧洲计算机制造商协会

JavaScript——驰骋网页的脚本执行者(3)

五.对象及函数 ECMAScript中的对象其实就是一组数据(属性)和功能(方法)的集合,是一种复杂的引用数据类型,引用数据类型的函数和数组也可以看成是一种特殊的对象. 1.对象的创建 可以使用构造函数创建对象(Object是所有对象的根对象,一个普通对象都会直接间接的继承Object),如: var person = new Object(); person.name = "briup"; person.age = 22; 也可以使用对象字面量表示法创建对象,不同的属性之间用','分

JavaScript——驰骋网页的脚本执行者(2)

四.流程控制语句 1.分支 if语句 condition表示任意表达式,该表达式求值的结果不一定是布尔类型,如果不是布尔类型,ECMAScript会调用Boolean()转换函数将这个表达式结果转换为一个布尔类型,当该值为true时,执行if代码块中的内容. if-else语句 当condition为true时,执行if代码块中的内容,否则,执行else代码块中的内容,一般情况下,如果代码块中代码只有一行,可以省略大括号. if-else if-else语句,如: if(condition1){

将JavaScript 插入网页的方法

将JavaScript 插入网页的方法 使用Javascript代码. 插入JavaScript 与在网页中插入CSS的方式相似.使用下面的代码可以在网页中插入JavaScript: ... 其中的...就是代码的内容.JavaScript的插入位置不同,效果也会有所不同,还可以像CSS一样,将JavaScript保存成一个外部文件,这些内容会在下一节讨论. 用JavaScript在网页中输出内容 JavaScript使用document.write来输出内容.例如  document.writ

html dom与javascript的关系 -我们用JavaScript对网页(HTML)进行的所有操作都是通过DOM进行的

一,什么是DOM (参考源http://www.cnblogs.com/chaogex/p/3959723.html) DOM是什么 DOM全称为The Document Object Model,应该理解为是一个规范,定义了HTML和XML文档的逻辑结构和文档操作的编程接口. 文档逻辑结构 DOM实际上是以面向对象方式描述的对象模型,它将文档建模为一个个对象,以树状的结构组织(本文称之为"文档树",树中的对象称为"节点").每个文档包含1个document节点,0

【JavaScript】网页节点的增删改查

一.基本概念 这部分也就是所谓的"HTML DOM",所谓HTML DOM也就是Web页面加载规则,是一个规则,也就是网页组成的基本公式. 也就是所有网页都必须按照:<html><body></body></html>--的规则编写,也按照这样的规则加载. 所谓的"网页节点",也叫"DOM节点"的通俗解释,例如html节点下的内容就是<html></html>之间所有内容,b

读javascript高级编程12-HTML5脚本编程

一.跨文档消息传递(XDM) 1.发送消息 postMessage(msg,domain)用于发送跨文档消息.第一个参数是要传递的消息内容,第二个参数表示接收方来自哪个域.第二个参数有助于提高安全性,如果发现域不匹配则不会进行操作. 2.接收消息 接收到消息时,会触发window对象的message事件.传递给onmessage事件处理程序的对象主要包含三个信息: data:对应postMessage()第一个参数传入的内容: origin:发送消息的文档所在域.接收到消息后,检测消息来源是非常

用JavaScript实现网页动态水印

原文:用JavaScript实现网页动态水印 1.基本原理 页面加载后,通过javascript创建页面元素div,并在div元素中创建文本节点,展示水印内容 设置div元素样式,将其zIndex设置一个较高的值,并设置透明度,实现浮在页面的水印效果 其核心逻辑如下所示 var mask_div = document.createElement('div'); mask_div.id = 'mask_div1'; mask_div.appendChild(document.createTextN

通过javascript在网页端生成zip压缩包并下载

原文:通过javascript在网页端生成zip压缩包并下载 zip.js是什么 zip.js的github项目地址:http://gildas-lormeau.github.io/zip.js/ 通过zip.js封装一个能在网页端生成zip文件的插件, 直接在网页中创建包含文件夹和文件的压缩包,也可以自定义名字并下载: 如何使用: 1:引用zip.js 2:引用jQuery; 3:并引用封装的ZipArchive.js ,(因为zip.js的api使用起来比较繁琐,所以自己封装实现了这个插件)