读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);//
var item=array.pop();
console.log(item);//
console.log(array.length);//
队列是一种FIFO先进先出的数据结构,在列表末尾添加项,在列表开头移除项。
- push():向末尾添加项,和栈相同;
- shift():在列表开头移除项,减少数组length值,并返回移除项的值。
var array=[1,3,5];
var count=array.push(8,9,10);
console.log(count);//
var item=array.shift();
console.log(item);//
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]
说明:这些迭代方法都不会改变原数组中的元素。
读javascript高级程序设计07-引用类型、Object、Array的更多相关文章
- 读javascript高级程序设计00-目录
javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/>本笔记是为了方便日后查阅,仅作学习交流 ...
- 读javascript高级程序设计-目录
javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/>本笔记是为了方便日后查阅,仅作学习交流 ...
- 读javascript高级程序设计08-引用类型之Global、Math、String
一.Global 所有在全局作用域定义的属性和方法,都属于Global对象. 1.URI编码: encodeURI():主要用于对整个URI编码.它不会对本身属于URI的特殊字符进行编码. encod ...
- 读javascript高级程序设计01-基本概念、数据类型、函数
一. javascript构成 1.javascript实现由三部分组成: ECMAScript:核心语言功能 DOM:文档对象模型,提供访问和操作网页内容的方法和接口 BOM:浏览器对象模型,提供与 ...
- 《JavaScript高级程序设计》读书笔记 ---Array 类型
除了Object 之外,Array 类型恐怕是ECMAScript 中最常用的类型了.而且,ECMAScript 中的数组与其他多数语言中的数组有着相当大的区别.虽然ECMAScript 数组与其他语 ...
- JavaScript高级程序设计-(4) 引用类型
1.object var person={};//与new Object()相同 一般创建对象 var person=new Object(); person.Name="admin&quo ...
- 读javascript高级程序设计17-在线检测,cookie,子cookie
一.在线状态检测 开发离线应用时,往往在离线状态时把数据存在本地,而在联机状态时再把数据发送到服务器.html5提供了检测在线状态的方法:navigator.onLine和online/offline ...
- 读javascript高级程序设计03-函数表达式、闭包、私有变量
一.函数声明和函数表达式 定义函数有两种方式:函数声明和函数表达式.它们之间一个重要的区别是函数提升. 1.函数声明会进行函数提升,所以函数调用在函数声明之前也不会报错: test(); functi ...
- 读javascript高级程序设计06-面向对象之继承
原型链是实现继承的主要方法,通过原型能让一个引用类型继承另一个引用类型. 1.原型链实现继承 function SuperType(){ this.superprop=1; } SuperType.p ...
随机推荐
- Count Primes ----质数判断
质数的判断 埃拉托斯特尼筛法: 算法的过程如下图所示: 我们从2开始遍历到根号n,先找到第一个质数2,然后将其所有的倍数全部标记出来,然后到下一个质数3,标记其所有倍数,依次类推,直到根号n,此时数组 ...
- 什么是Servlet?它有哪些特点
什么是Servlet? 它有哪些特点? Servlet是运行在JSP服务器端,用来生成Web页面的一种java程序 特点: (1)效率点 (2)功能强大 (3) Servlet之间能够共享数据 (4 ...
- MySql5.7.12设置log-bin
什么是binlog日志 binlog日志记录了MySql数据库的增加.删除.修改操作.用来实现MySql主从复制. 设置binlog日志 在my.cnf中配置binlog日志 [mysqld] log ...
- ECMAScript 6教程 (一)
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出 原文连接,博客地址为 http://www.cnblogs.com/jasonnode/ .该系列课程是 ...
- this的面面观
http://www.cnblogs.com/Wayou/p/all-this.html <JavaScript语言精粹> 全局this 浏览器宿主的全局环境中, function f(x ...
- Win10系统Start Menu上的图标莫名消失
今天在工作过程中,突然有测试的同事给我报来一个问题.她是这么描述的“执行完XXX工具之后,在Start Menu找不到图标了.” 针对问题本身: 1,是执行完XXXX工具之后? 2,Start Men ...
- 【Jersey】IntelliJ IDEA + Maven + Jetty + Jersey搭建RESTful服务
本文参考以下内容: 使用Jersey实现RESTful风格的webservice(一) Starting out with Jersey & Apache Tomcat using Intel ...
- CentOS 7下Wireshark捕获USB数据包
1. 软件准备 安装Wireshark # yum install wireshark wireshark-gnome .csharpcode, .csharpcode pre { font-size ...
- CSS中的浮动问题
有关于我们经常做的导航问题.我们如果想用ul>li来做导航的话,我是一般是用到浮动这个属性的. 也就是 float:left; 或者是 display:inline-block; 下边代码: ...
- 2D空间中求一点是否在多边形内
参考自这篇博文:http://www.cnblogs.com/dabiaoge/p/4491540.html 一开始没仔细看做法,浪费了不少时间.下面是最终实现的效果: 大致流程: 1.随便选取多边形 ...