读javascript高级程序设计07-引用类型、Object、Array
一、引用类型
ECMAScript是支持面向对象的,可以通过引用类型描述一类对象所具有的属性和方法。
创建对象实例的方法时是用new 操作符加构造函数:var p=new Person()。
二、Object类型
1.创建Object实例两种方式:
使用new操作符跟Object构造函数。
var o = new Object(); o.name = 'dami'; o.age = 25;
使用对象字面量表示法,推荐这种方式,代码量小而且看上去有封装的感觉。
var o = {name: 'dami',age: 25 }
如果对象字面量声明对象时,大括号中为空,那对象只包含默认的属性和方法。
var o={};等同于var o=new Object();
对象字面量还适用于向函数传递大量可选参数。
function showResult(args){var result='the result:';if(typeof args.name=="string"){result+=" my name is "+args.name;}if(typeof args.age=="number"){result+=" my age is "+args.age;}console.log(result); } showResult({});//the result: showResult({name:"Peter"});//the result: my name is Peter showResult({name:"Kate",age:28});//the result: my name is Kate my age is 28
对象字面量的属性名可以加引号,也可以不加引号。但是如果属性名是关键字或者包含特殊符号,则必须加引号。
var o = {name: 'dami',age: 25,"data-id":35 }
2.读取属性
- 点表示法:o.name;
- 方括号表示法:o["age"];
但是如果属性名是关键字或者包含特殊符号,则必须使用方括号表示法:o["data-id"];
二、Array类型
ECMAScript中的数组元素可以是多种数据类型,而且长度是可以动态调整的。
1.创建数组对象
①使用构造函数Array().
var array=new Array('a','b','c');//["a", "b", "c"];
注意当参数是一个值时,如果参数是数值类型,则创建相应长度的数组;如果参数是其他类型,则创建的数组长度是1。
var array=new Array(5);//[undefined, undefined, undefined, undefined, undefined] var array=new Array('5');//["5"]
2.检测数组对象--Array.isArray()
var array=[1,3,5]; Array.isArray(array);//true
3.转换方法
- toString():返回由数组中的每个元素用逗号分隔而成的字符串;
- valueOf():返回的仍然是数组;
- join():方法有一个参数,将该参数作为分隔符,返回包含所有数组元素的字符串。如果参数为空,则默认用逗号分隔。
var array=[1,3,5]; array.toString();//"1,3,5" array.valueOf();//[1, 3, 5] array.join();//"1,3,5" array.join('|');//"1|3|5
4.栈和队列
栈是一种LIFO后进先出的数据结构,只在顶部做插入和删除操作。
- push():将元素压入数组。可以接收多个参数,将他们逐个添加的数组末尾,并返回修改后的数组长度;
- pop():将元素弹出。弹出数组的末尾项,减少数组长度length,并且返回移除项的值。
var array=[1,3,5]; var count=array.push(8,9,10); console.log(count);//6 var item=array.pop(); console.log(item);//10 console.log(array.length);//5
队列是一种FIFO先进先出的数据结构,在列表末尾添加项,在列表开头移除项。
- push():向末尾添加项,和栈相同;
- shift():在列表开头移除项,减少数组length值,并返回移除项的值。
var array=[1,3,5]; var count=array.push(8,9,10); console.log(count);//6 var item=array.shift(); console.log(item);//10 console.log(array);// [3, 5, 8, 9, 10]
5. 重排序:
- reverse():反转数组元素的顺序。
- sort():对数组元素进行排序。sort方法排序方式要注意,是先对数组元素调用toString()方法得到字符串,然后根据字符串进行排序。
sort()方法还可以接受一个函数名作为参数,以便指定排序的规则。
var array=[1,5,9,3,10,7]; array.reverse();//[7, 10, 3, 9, 5, 1] array.sort();//[1, 10, 3, 5, 7, 9] function compare(a,b){if(a==b){return 0;}else if(a>b){return 1;}else{return -1;} } array.sort(compare);//[1, 3, 5, 7, 9, 10]
6.操作方法
concat():连接数组元素。先创建数组的副本,然后将元素追加到数组结尾,最后返回新数组。
- 如果参数为空,则直接复制数组;
- 如果参数是一个元素,则直接将其追加到数组末尾;
- 如果参数也是数组,则将该数组元素追加到副本末尾。
var array=[1,3,5]; array.concat();//[1, 3, 5] array.concat(88);//[1, 3, 5, 88] array.concat('a',[[4,99],'b']);//[1, 3, 5, "a", [4, 99], "b"]
slice():取得数组分片。
- 当传入两个参数时,分别表示数组的开头和结尾位置的索引,但是返回的分组包含开始项但不包含结尾项。
- 当传入一个参数时,该参数标识起始位置索引,返回的分组是从该开始位置一直到数组结尾。
- 当传入参数为负数时,从数组结尾开始计数,最后一个元素为-1.
var array=[1,2,3,4,5,6,7,8,9,10]; array.slice(2);//[3, 4, 5, 6, 7, 8, 9, 10] array.slice(5,8);//[6, 7, 8] array.slice();//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10] array.slice(-3,-1);//[8, 9]
splice():向数组中插入项。通过传入不同参数可以实现多个操作:
- 删除:传入两个参数,第一个参数是要删除的起始位置,第二个参数是要删除的长度。
- 插入:第一个参数是要插入的位置索引,第二个参数是0,从第三个参数起是要插入的元素项。
- 替换:第一个参数是要替换的起始位置,第二个参数是要被替换的长度,第三个参数起是要替换的新的元素项。
var array=[1,2,3,4,5,6,7,8,9,10]; //删除 var removed=array.splice(1,2); removed;//[2,3] array;//[1, 4, 5, 6, 7, 8, 9, 10] //插入 array.splice(1,0,88,88,88); array;//[1, 88, 88, 88, 4, 5, 6, 7, 8, 9, 10] //替换 array.splice(1,3,2,3); array;//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
7.迭代方法
every(fn):对数组中的每个元素执行方法,如果每一项都返回true,则结果为true。
var array=[1,2,3,4,5,6,7,8,9,10]; var result=array.every(function(item,index,array){ return item>2; });//false
some(fn)::对数组中的每个元素执行方法,如果至少有一项返回true,则结果为true。
result=array.some(function(item,index,array){ return item>2; });//true
filter(fn)::对数组中的每个元素执行方法,返回该函数执行结果为true的元素组成的数组。
result=array.filter(function(item,index,array){ return item>2; });//[3, 4, 5, 6, 7, 8, 9, 10]
map(fn)::对数组中的每个元素执行方法,返回每一项的执行结果组成的数组。
result=array.map(function(item,index,array){
return item*2; });//[2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
说明:这些迭代方法都不会改变原数组中的元素。
本文转自 陈敬(Cathy) 博客园博客,原文链接:http://www.cnblogs.com/janes/p/3868268.html,如需转载请自行联系原作者
读javascript高级程序设计07-引用类型、Object、Array相关推荐
- 读javascript高级程序设计-目录
javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/> 本笔记是为了方便日后查阅,仅作学习交 ...
- javascript高级程序设计之引用类型
1.概要 引用类型的值(对象)是引用类型的一个实例.在ECMAScript中,引用类型是一种数据结构,用于将数据和功能组织在一起,也称为类.ECMAScript从技术上讲是一门面向对象的语言,便它不具 ...
- 读javascript高级程序设计03-函数表达式、闭包、私有变量
一.函数声明和函数表达式 定义函数有两种方式:函数声明和函数表达式.它们之间一个重要的区别是函数提升. 1.函数声明会进行函数提升,所以函数调用在函数声明之前也不会报错: test(); functi ...
- 读javascript高级程序设计10-DOM
一.节点关系 元素的childNodes属性来表示其所有子节点,它是一个NodeList对象,会随着DOM结构的变化动态变化. hasChildNodes():是否有子节点. var headline ...
- 读javascript高级程序设计06-面向对象之继承
原型链是实现继承的主要方法,通过原型能让一个引用类型继承另一个引用类型. 1.原型链实现继承 function SuperType(){ this.superprop=1; } SuperType.p ...
- 读javascript高级程序设计15-Ajax,CORS,JSONP,Img Ping
平时用惯了jQuery.ajax之类的方法,却时常忽略了它背后的实现,本文是学习了AJAX基础及几种跨域解决方案之后的一些收获. 一.AJAX--XMLHttpRequest 谈起Ajax我们都很熟悉 ...
- 读javascript高级程序设计13-JSON
JSON是一个轻量级的数据格式,可以简化表示数据结构的工作量.在实际工作中,我们经常用它来传递数据,不过对于其使用的一些细节还是需要注意的.在ECMAScript5中定义了原生的JSON对象,可以用来 ...
- 读javascript高级程序设计02-变量作用域
一. 延长作用域链 有些语句可以在作用域前端临时增加一个变量对象,该变量对象在代码执行完成后会被移除. ①with语句延长作用域. function buildUrl(){ var qs=" ...
- 读javascript高级程序设计12-HTML5脚本编程
一.跨文档消息传递(XDM) 1.发送消息 postMessage(msg,domain)用于发送跨文档消息.第一个参数是要传递的消息内容,第二个参数表示接收方来自哪个域.第二个参数有助于提高安全性, ...
最新文章
- 机器学习中使用的交叉熵(cross entropy)透彻分析
- 平滑无损!引入Elasticsearch的系统架构实战
- 不喜欢SAP GUI?那试试用Eclipse进行ABAP开发吧
- 《MonkeyRunner原理剖析》第九章-MonkeyImage实现原理 - 概览
- 表格内部的文本对齐类
- 排序算法 | 简单选择排序,算法的图解、实现、复杂度和稳定性分析
- 汽车车牌识别系统(六)-- 项目中的各个文件解析
- java分布式api网管关,分布式04-Spring Cloud Zuul Api网关 一
- MFC(六)(对话框)
- C#连接MySQL数据库 制作股票交易模拟程序
- 这三位同学的名字绝了!笑得肚子疼......
- 7-9 地下迷宫探索 (8 分)
- ATL--创建简单的ATL之dll工程,给接口添加属性(实际上就是一个函数对)
- Android中日期与时间设置控件的使用
- 怎么在苹果手机计算机上打字,iPhone苹果手机在打字时如何进行换行
- 光纤跳线接口_如何为10G SFP+光模块搭配对应的光纤跳线类型?
- (真实经验)我干了5年的JAVA面试官,发现很多求职者都忽略这七大方面的问题!
- 安卓app上架各大应用商店
- uni.navigateBack直接返回到首页
- 彻底解决Word中子标题变黑块问题
热门文章
- 计算机显卡怎么拨下来,电脑显卡怎么拆
- html怎么引用小图标,Css引用图标方法.html
- PostgreSQL pg_hba.conf 配置
- 浏览器限制文件上传的大小
- 5G网络的主要特性、关键技术及其发展趋势 : 奇点临近——中国如何迎接未来的5G网络革命?
- 基于Java毕业设计智能推荐二手车交易网站源码+系统+mysql+lw文档+部署软件
- t972和鸿蒙818,电视芯片学问大 鸿鹄818与Amlogic T972哪家强
- mvc的各个部分都有那些技术来实现?如何实现?
- CodeWar代码学习
- Java Virtual Machine(一)