位置: 编程技术 - 正文
推荐整理分享JavaScript基础篇(3)之Object、Function等引用类型(javascript基础编程),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:javascript基础笔记,javascript基础编程,javascript零基础,javascript教程chm,javascript基础编程,javascript 基础,javascript 基础,javascript基础入门视频教程,内容如对您有帮助,希望把文章链接给更多的朋友!
阅读目录
Object类型
1、通过构造函数来创建2、通过字面量表示法来创建对象
Array类型
同样Array也有两种创建方式:如果我们想要打印数组中所有的值,直接打印数组的变量名就可以:往数组添值:栈方法、队列方法: 关于数组的排序: 数组的一些操作方法:查找位置方法迭代方法
归并方法
Date类型
RegExp类型
Function类型
三种表示法:
方法重载函数内部属性(arguments 和 this)
基本包装类型
浏览器的内置对象URI 编码方法
总结
我们在《一步步学习javascript基础篇(1):基本概念》中简单的介绍了五种基本数据类型Undefined、Null、Boolean、Number和String。今天我们主要介绍下复杂数据类型(即引用数据类型)
Object类型
我们用的最多的引用类型就属object类型了,一般用来存储和传输数据是再好不过的。然,它的两种创建方式我们是否了解呢?
1、通过构造函数来创建
如: var obj = new Object();
在js中的引用类型有个非常灵活的用法,可以动态的附加属性和赋值。
如:
2、通过字面量表示法来创建对象
现在大家用得比较多的就是字面量表示法来创建对象了。
如:
和上面的效果是等效的。通过这样方式创建感觉结构更加的清晰,更加有封装的感觉。:)
我们还可以这样用
如:
如:
是不是感觉很强大很灵活呢?我在访问属性的时候一般都是点出来,但是还有另外的方式。
如:(我们可以使用中括号的形式来访问属性值)
例:
Array类型
除了object之外,应该属数组用的最多了。下面来罗列下常见用法。
同样Array也有两种创建方式:
上面两种方式是等效的,我们可以直接通过下标的方式来访问数组: alert(arr[2]); 。
如果我们想要打印数组中所有的值,直接打印数组的变量名就可以:
例:
例:
上面直接打印arr2,我们发现默认都是以逗号分隔的。那么有时候,我们不想用逗号怎么办呢。那你可能可以用到join方法
往数组添值:
我们可以直接: arr2[4] = 7; arr2[5] = 8;
还有一种更加巧妙地添值方式: arr2[arr2.length] = 9; arr2[arr2.length] = ; ,下标length刚好是数组最大长度的下一个,添加值后length再次动态自动累计。
栈方法、队列方法:
什么是栈?(后进先出)。什么是队列?(先进先出),我们怎样用数组来模仿这种数据结构的访问方式?下面通过一张图来解释下数组对象提供的四个方法。
从图可以看出:shift和push、unshift和pop的组合可以实现栈的数据结构访问,shitf和pop、shift和unshift的组合可以实现队列的数据机构访问方式。 这里需要注意:pop和shift取数据的同时,数组中对于的值也同时移除了。
例:
关于数组的排序:
关于数组的排序有sort(正)reverse(反)。
先看个例子,大家猜想下结果:
然结果并不是我们想要的:
为什么会这样呢?因为sort不会直接比较数字类型,而已转为string了再做的比较。那么我们想要比较数字怎办?我们可以往sort传函数,例:
有人会问o1和o2是怎么来的?这是sort函数规定的。这样说大家可能不好接受。下面,我们自己来模拟下sort的排序,大家就明白了。
当然,我们模拟的并不是那么的好,大概就是这么个意思。
反序就简单了:(直接reverse()就可以了)
数组的一些操作方法:concat创建一个新的副本,并合并传进来的参数
slice创建一个新的副本,取数组的位置数据
splice会改变原数组数据,可实现对数组的删、插和替换
查找位置方法
indexOf()和 lastIndexOf(),就是查找在数组中的位置,和string中的对应方法差不多。
迭代方法
every():对数组中的每一项运行给定函数,如果该函数对每一项都返回 true,则返回 true。 filter():对数组中的每一项运行给定函数,返回该函数会返回 true 的项组成的数组。 forEach():对数组中的每一项运行给定函数。这个方法没有返回值。 map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。 some():对数组中的每一项运行给定函数,如果该函数对任一项返回 true,则返回 true。
以上方法都不会修改数组中的包含的值。
如:
其中。forEach和map区别不大,只是一个有返回值,一个没有。实际中我们用forEach比较多,下面我们模拟forEach的实现。
归并方法
reduce()和 reduceRight(),这两个方法是比较有意思的,以前还真没接触过。先看例子,再解释:
也是个循环,第一次执行 prev 是 1, cur 是 2。第二次, prev 是 3(1 加 2 的结果), cur 是 3(数组的第三项)。这个过程会持续到把数组中的每一项都访问一遍,最后返回结果。reduceRight只是方向相反。
下面我们来模拟:
Date类型
我们很多时候需要测试一个函数的性能,可以取它的执行进过时间:
下面列出一些常用方法
getTime() 返回表示日期的毫秒数;与valueOf()方法返回的值相同setTime(毫秒) 以毫秒数设置日期,会改变整个日期getFullYear() 取得4位数的年份(如而非仅)getUTCFullYear() 返回UTC日期的4位数年份setFullYear(年) 设置日期的年份。传入的年份值必须是4位数字(如而非仅)setUTCFullYear(年) 设置UTC日期的年份。传入的年份值必须是4位数字(如而非仅)getMonth() 返回日期中的月份,其中0表示一月, 表示十二月getUTCMonth() 返回UTC日期中的月份,其中0表示一月, 表示十二月setMonth(月) 设置日期的月份。传入的月份值必须大于0,超过则增加年份setUTCMonth(月) 设置UTC日期的月份。传入的月份值必须大于0,超过则增加年份getDate() 返回日期月份中的天数(1到)getUTCDate() 返回UTC日期月份中的天数(1到)setDate(日) 设置日期月份中的天数。如果传入的值超过了该月中应有的天数,则增加月份setUTCDate(日) 设置UTC日期月份中的天数。如果传入的值超过了该月中应有的天数,则增加月份getDay() 返回日期中星期的星期几(其中0表示星期日, 6表示星期六)getUTCDay() 返回UTC日期中星期的星期几(其中0表示星期日, 6表示星期六)getHours() 返回日期中的小时数(0到)getUTCHours() 返回UTC日期中的小时数(0到)setHours(时) 设置日期中的小时数。传入的值超过了则增加月份中的天数setUTCHours(时) 设置UTC日期中的小时数。传入的值超过了则增加月份中的天数getMinutes() 返回日期中的分钟数(0到)getUTCMinutes() 返回UTC日期中的分钟数(0到)setMinutes(分) 设置日期中的分钟数。传入的值超过则增加小时数setUTCMinutes(分) 设置UTC日期中的分钟数。传入的值超过则增加小时数getSeconds() 返回日期中的秒数(0到)getUTCSeconds() 返回UTC日期中的秒数(0到)setSeconds(秒) 设置日期中的秒数。传入的值超过了会增加分钟数setUTCSeconds(秒) 设置UTC日期中的秒数。传入的值超过了会增加分钟数getMilliseconds() 返回日期中的毫秒数getUTCMilliseconds() 返回UTC日期中的毫秒数setMilliseconds(毫秒) 设置日期中的毫秒数setUTCMilliseconds(毫秒) 设置UTC日期中的毫秒数getTimezoneOffset() 返回本地时间与UTC时间相差的分钟数。例如,美国东部标准时间返回。在某地进入夏令时的情况下,这个值会有所变化
RegExp类型
两种表示法:
后面的参数代表模式,如:g:表示全局(global)模式、i:表示不区分大小写(case-insensitive)模式、m:表示多行(multiline)模式
关于正则了解不是很清楚,后期有机会在单独学习整理正则这块。
Function类型
三种表示法:
以上三种都是可行的,不过我们平时用得比较多的是第一种,第二种也有用,第三种用得比较少,但是最能看出function的本质,其实就是一个Function对象的实例。
我们来看看1和2的区别。
因为js解析器是从上到下的解析,在执行sum2的时候还没有定义,所以报异常。但是sum1比较特殊,是申明式的。在执行sum1之前就会”预解析“(函数声明提升)。相当于把sun1的定义提到了最上面(放到源代码树的顶部)。
方法重载
严格来说,js中是没有方法重载的,不过我们可以根据参数的个数来模拟。(还有,js中函数的形参我们是不确定类型的)
例:上面并没有出现我们预料中的结果,因为第二次定义的sun1不是实现的重载,而是直接覆盖了第一次的定义。下面,我们就简单的模拟实现方法重载:
函数内部属性(arguments 和 this)
arguments:类数组对象,包含着传入函数中的所有参数。下面通过arguments实现上面的模拟重载:
我们在第一篇博文里面有提一个问题:
六、
不过,并没有同学去解答,有人可能觉得太简单,或是不乐意懒得去解答。这题的答案是:
为什么会是这个答案呢?好像和我们预料中的不一样。下面我们图解:
我们可能发现了一个问题,那就是第4步调用的已经不是所在的这个函数本身了(也就是没有递归了),这不是我们想要的。我们要的是,不管外面怎么改变,4处都代表所在的函数指针。那么我们可以用到arguments的callee方法,例:
函数的另一个内部属性this:
首先我们看看这样一个问题:
为什么会有不同的结果?我们记住一句话,一般情况"哪个对象点出来的方法,this就是哪个对象"。上面的例子其实等效于:
虽然"哪个对象点出来的方法,this就是哪个对象",但是有时候我们不想要这样的结果,我们不想用对象点或者对象点出了想this是另外的对象。那么我们可以使用call:
传如的第一个参数,直接赋值给函数里面的this。和call类似的有apply,区别看下面:
基本包装类型
在这个系列的第一篇中有个问题:
四、
为什么会是这样的结果?因为str1.name2设置值的时候访问的是string的包装类,然后再次访问str1.name2之前就把之前那个包装类已经被销毁。
为什么要有包装类?
因为可以像操作引用对象一样操作基本数据类型,如: var s1 = "some text"; var s2 = s1.substring(2);
哪些基本类型有包装类
Boolean、Number和String类型。
浏览器的内置对象
Global(其实也就是我们平时用的window)和Math(一些计算功能)
URI 编码方法
这是一个js中最最最强大的函数了,相对与一个独立的解析器。如我文中的操作实例就是用这个函数实现的。
如:
效果图:
当然,你还的引入jqeruy问题,博客园中默认就已经引入了。所以,你不需要再次引入,你测试的话是看不到alert弹框的,因为博客园禁掉了。我的是用的jquery ui中的Dialog对话框做的。
javascript中eval和with用法实例总结 本文实例讲述了javascript中eval和with用法。分享给大家供大家参考,具体如下:我们都知道javascript的作用域机制,但是with和eval有时会破坏我们对于作用
全面解析Bootstrap排版使用方法(文字样式) 一、段落段落是排版中另一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式(这里所说的文本是指正文文本):1、全局文本字号为px(fo
基于js实现微信发送好友如何分享到朋友圈、微博 微信浏览器内置了javascript私有对象WeixinJSBridge,可以实现发送给朋友、分享到朋友圈、分享到微博等功能。scriptvarimgUrl="图片地址";varlineLink="当前网址";v
标签: javascript基础编程
本文链接地址:https://www.jiuchutong.com/biancheng/386339.html 转载请保留说明!友情链接: 武汉网站建设