• 欢迎访问我的个人网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

一枚前端小伙的JavaScript笔记(一)

编程开发 jason 1444次浏览 0个评论

下面是我和我司前端小Z某天的对话:

小Z:唉,我现在感觉基础太差。
 我:恩,为何有如此感觉?(心里想难道你去面试了)
 小Z:写了一些东西发现
 我: 底层的东西你知道的有点少
 小Z:恩, 也不仅仅是这个
 我: 恩….

过了两天后他发给一份文件:

这是我做的 JavaScript 笔记,  你看一下。

打开看一看, 有点被惊艳到, 说实话我做不出来这么的笔记,我需要向他多多学习。同时希望他的成果能得到肯定的同时,也能帮助到我们。我把她发布到这里来。

0. 函数中,js所传递的参数可以用arguments[i](注意别漏了s)来取,在argumengts[]数组中的顺序和你传递的顺序相同。 通过arguments.length()可以检查有多少个参数,arguments[]的定义也是双向绑定的,所以修改arguments中的值,会直接影响到传递参数的值。

访问对象的属性,除了可以用《点表示法》之外,还可以用《方括号表示法》, 后者有更多的功能,比如,当属性中包含【数字】项时,包含空格时,想使用变量表示属性名时,即,如下所示:

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

数组

判断是不是数组有一下几种方法(数组是特殊的对象);

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

toString() 方法 和 join() 方法;如果数组存在undefined项,在结果中将以空字符串表示

如果参数相同,join方法和split方法是反操作,如join(‘’)split(‘’)

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

数组的 队列方法; 先进先出。 Push() shift() 方法 

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

数组的 栈方法push() pop() 方法

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

除了以上外,ECMAScript还提供了unshift()方法,即与shift()相反,在数组的顶部增加项。我们可以使用unshift() pop() 来实现 反向队列操作 (灵活组合)。

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

 数组的 重排序 主要有两种方法,reverse() sort() 

20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

数组的任意追加 concat() 函数; 

 

数组的slice() 方法。如果slice参数为负数,表示从后往前。Slice也可用于截取字符串

20171021115508_89452 一枚前端小伙的JavaScript笔记(一) 

神奇的splice()方法删除插入替换  splice()传入一个参数,表示从该下标开始删

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

位置方法: indexOf() lastIndexOf();  后者从后往前找(只是查找顺序,不影响结果)

20171021115508_89452 一枚前端小伙的JavaScript笔记(一) 

12. 数组的 迭代方法: every(), some(), filter(), forEach(), map()

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

归并方法;  reduce(), reduceRight(); 后者和前者只是方向相反而已。

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

日期

Date类型 Date.parse()方法和 Date.UTC()方法。最常用的还是var t=new Date(2017,2,21)

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

15. Date.now() 返回调用这个方法时的日期和时间的毫秒数。Data.valueOf()返回日期毫秒数

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

Date格式的几种格式化方法(简化自己操作)。

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

Date 的几个处理方法。getDate() setDate() 类似

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

RegExp正则

正则函数RegExp() . 强烈建议使用 RegExp(), 避免直接使用字面量模式(循环时易出错)

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

RegExp()函数的两个参数都是字符串(不能直接把睁着表达式的字面量模式传递给RegExp构造函数)。 因此我们再传递的时候需要对一些字符进行双重转义。所有元字符都必须双重转义,那些已经被转义过的字符也是如此。例如 \n(字符\在字符串中被转义成\\,那么,在正则表达式中,就应该是 \\\\)。 见javascriptp104

RegExp的实例方法:  exec(); 可以返回匹配结果Bool) 和 返回匹配的字符串

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

该例将返回值放在 matches[0]中,matches[1]undefined

RegExp的实例方法: test(); 只返回匹配结果,常用语if()语句

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

函数

函数的类型: 函数是对象,函数名是指针

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

函数声明 和 函数表达式。 除了何时访问函数的区别外,函数语法其实是等价的。

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

 作为值 的函数

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

函数的内部属性: arguments类数组对象this对象

   Arguments[]的主要用途是保存函数参数,除此之外,arguments[]还有一个callee的属性,它是一个指针,指向拥有这个arguments[] 对象的函数。

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

   This引用的是函数执行的环境对象,或者说是this值,当作用于为全局中调用时,this对象引用的就是window

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

函数的 call() 方法     指派函数运行的作用域(扩充作用域)

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

于此类似的还有一个apply()方法

           func.apply(this, arguments)

基本包装类型

例如string,作为一个基本类型,它不是对象,在逻辑上讲,他是不应该有方法的,但是,我们调用str.substring(2)方法时,是能够正常执行的,这让人感觉很怪异。原因在于,javascript为了让我们实现这种直观的操作,后台已经自动完成了一批操作,在读取模式中访问字符串的同时,后台自动完成以下几个步骤:

创建String类型的一个实例;(2)在实例上调用指定的方法;(3)销毁实例 即:

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

但是,需要注意的是,基本包装类型的生存期只存在于当行代码,如下例子:

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

 Number类型(基本封装类型)

20171021115508_89452 一枚前端小伙的JavaScript笔记(一) 

28.  Number类型(基本封装类型)  取最合适格式  toPrecision()方法

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

 String类型(基本封装类型: 以下省略不写)   不修改原数据

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

30.  String 类型  substring()方法 和 substr()方法, 不修改原数据

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

 String类型  trim(); 删除前后所有空格(中间不删除)不修改原数据

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

String类型 模式匹配  match();  等价于Regexp类型的exec()

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

String类型 大小写转换  toUpperCase() toLowerCase()  建议用toLocaleUpperCase()

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

String 模式匹配  search(); 查找  返回第一个匹配的索引或 -1

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

String模式匹配  replace(); 替换  两个参数,第一个:正则,RegExp对象 或 字符串;第二个:字符串 或 函数。   如果第一个是字符串,这仅匹配并替换第一个匹配的子字符串,如果要替换所有,需要使用正则表达式并且指定g标志

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

36. String 模式匹配  split(); 分割成数组  一或两个参数,1:分割符; 2: 返回的数组长度

20171021115508_89452 一枚前端小伙的JavaScript笔记(一) 

单体内置对象

Global对象,即所谓的全局对象,全局作用域就是他的作用域。(他是js终极对象),

isNaN()isFinite()parseInt()parseFloat()等方法都是Global对象的方法。NaNundefinedObjectFunctionDateErrorStringArray(以上均说的是构造方法) 等 都是Global的属性。

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

isFinite()isNaN()类似,检测其参数是否无穷大,如果是有限数字,返回true,如果无穷大或非法数字,返回false

Globaluri编解码方法 encodeURI()decodeURI()encodeURIComponent();等

encodeURI()不会对本身属于URI的特殊字符进行编码,例如冒号,正斜杠,问号和井号,而encodeURIComponent()编码所有非标准字符。decodeURI()encodeURI()反过程

20171021115508_89452 一枚前端小伙的JavaScript笔记(一) 

     一般调用encodeURIComponent()方法比较常用,因为在实践中更常见的是对查询字符串参数进行编码而不是对URI本身进行编码。

Global对象的访问: 利用window对象可以访问Global对象的作用域。(Globalwindw并不等价,window还能实现很多功能。)

 20171021115508_89452 一枚前端小伙的JavaScript笔记(一)

另一种访问的方法就是实现Global对象 var global = function(){return this}(); 需要设置函数自执行。

单体内置对象2Math对象。解决数学问题,js中少用到。

20171021115508_89452 一枚前端小伙的JavaScript笔记(一) 

面向对象的程序设计 

ECMAScript支持面向对象编程,但不使用类或借口。

理解对象。定义:无序属性的集合,其属性可以包含基本值,对象或者函数。

 

创建对象: 工厂模式

 

回顾注释定义一个函数,每次调用该函数返回一个对象

创建对象: 构造函数模式   构造一个函数为对象类型,每次实例化该对象类型(new)

缺点: 每次实例化的时候都会重新创建构造函数中的方法,浪费时间和空间。

 

创建一个新的实例,会经历以下四个步骤: 红框位置加一个typeof

 创建一个新的对象;

 将构造函数的作用域赋给新对象(因此this就指向了新对象);

 执行构造函数中的代码;

 返回新对象。

创建对象: 原型模式   创建了一个对象,就会以一定规则创建一个原型对象

 

创建对象: 组合使用构造函数 和 原型模式  (最常用,最好用)

 

回顾注释: 将构造函数中的方法剥离出来放到原生函数中定义,此时依旧用new实例化

46. 继承对象  借用构造函数 方式  call()调用超类,将作用域设置为SubType的作用域 借用构造函数 传递参数,更大化增加数据设置的灵活性

 

缺点: 构造函数内部 方法无法共享使用。还是少用。

组合继承。思路:使用原型链实现对原型属性和方法的继承,通过借用构造函数实现对实例属性的继承。 这种继承方式是javascript最常用的继承方式。

 

粉红色框是关键。首先,SubType的原型对象prototypeSuperType类型,但它是的构造函数明确是SubType的。

   函数表达式:  没有名字的函数表达式叫匿名函数,在函数内部定义了其他函数,就创建了闭包,闭包有权访问包含在函数内部的所有变量

函数表达式 与 函数声明  函数声明有个重要特性,就是函数声明提升: 在执行代码之前会先读取函数声明,也就意味着可以吧函数声明放在调用之后

 

函数声明提升也会带来问题。

 

把函数当做值来使用

 

函数的递归  自身调用自身 

 

52. 函数的闭包  闭包是指有权访问另一个函数作用域中的变量的函数, 创建闭包的常见方法,就是就是在一个函数内部创建另一个函数。

 

函数作用域的配置机制有一个值得注意的副作用, 即闭包只能取得包含函数中任何变量的最后一个值,这一点,在循环+操作(如查询)中影响至为关键。下述例子中,注释部分,result数组的每一项结果都是10。,红框部分,result[i]的值是i.

 

闭包函数 引发的this 关键字问题

 

this问题相同,如果想要访问作用域中的arguyments对象,也要保存到另一个变量中。

提示: 如果本例不应用闭包,不会导致该问题,this访问的就是my Object。(好像是废话)

闭包函数 关于内存泄漏 问题  因为闭包函数中存在着相互引用,容易导致一些资源无法被销毁

 

闭包 模仿块级作用域(私有作用域)  防止变量污染全局空间

 

这种方式可以减少比保重内存占用的问题,只要使用完毕,就可以立即销毁作用域链了。

57.  闭包 构造函数实现 私有变量    在函数内部定义的变量(私有作用域中定义的变量)

把有权访问私有变量和私有函数的公有方法称为 特权方法。(开通私有变量的访问入口),除了特权方法没有其他方式可以访问私有变量。

 

闭包,构造函数和原型模式 实现静态私有变量。 因为方法共享,只要修改其中一个实例的属性值,所有的实例的变量将全部改变,这也是为什么叫静态的原因。

 

针对单例模式  模块模式     单例:指的就是只有一个实例的对象。单例模式,整个运行期间只会被初始化一次,singleton是全局变量,在js载入时被初始化。

+++在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象。+++  单例模式相关内容继续查网络

 

    BOMBrowser Object Modal

 BOM的核心对象是window,他表示浏览器的一个实例,在浏览器中,window不仅是Javascript访问浏览器窗口的一个接口,又是ECMAScriptguiding Global对象。

 窗口关系及框架。 以下anotherframeset.htm内部也能设置框架。

 

 窗口大小   跨浏览器确定一个窗口的大小。IE9+FFSafariOperaChrome均提供了四个属性: innerWidthinnerHeightouterWidthouterHeight

 

间歇调用 和 超时调用

 

控制间隙调用方法执行的一个实例: 如果有两个,他们之间的间歇互不影响

 

同样的例子使用超时函数来实现

 

说明: 在开发环境下很少使用真正的间歇调用,原因是后一个间歇调用很可能在前一个间歇调用结束之前就启用,而超时调用不会有这种问题

  Localtion对象   最有用的BOM对象之一

 Location对象提供了与当前窗口中加载的文档有关的信息,还能将URL解析为独立的片段,让开发人员能通过不同的属性访问这些片段

  Hash:   返回URL中的hash,如果URL中不包括散列,则返回空字符串

  Host:   返回服务器名 和 端口号(如果存在);  www.baidu.com:8080

  Hostnam:  返回不带端口好的服务器名;  www.baidu.com

 Href:  返回当前加载页面的完整的URL,同locationtoString()方法;http:www.baidu.com

 Pathname:  返回URL中的目录和(或)文件名 

 Port:       返回端口

 Protocal:   返回协议; 如  http:

 Search:    返回URL中的查询字符串;这个字符串以问好开头 ?q=javascript

65. 手动解析URL中的参数  仿照

 

Localtion的位置操作:

 

 Navigator对象中的属性    插件检测   更多详见书本

 

以上方法适用于ffsafariOperaChome;在IE中检测的办法就是用ActiveXObject类型,并尝试创建一个特定插件类型,IE是以COM方式创建插件的,而COM对象使用唯一标识符表示

 

真正使用过程中,var result = hasPlugin(“Flash”);  if (!result){result = hasIEPlugin(“Flash”)} 

Screen 对象: 

 

History对象

 

另外, history.length保存着历史记录的数量,这个数量也包括了你操作向前和向后的处理记录,对于加载到窗口,标签页或框架中的第一个页面而言,history.length等于0。这个0可以检测用户是否一开始打开的页面时候是当前页面。


喜欢 (0)