平武建站

怎样深入理解JavaScript

本篇文章为大家展示了怎样深入理解JavaScript，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

创新互联建站主营冷水江网站建设的网络公司,主营网站建设方案,成都APP应用开发,冷水江h5重庆小程序开发搭建,冷水江网站营销推广欢迎冷水江等地区企业咨询

正则表达式

A.创建正则表达式

1.字面量：/xyz/i，加载时编译

2.构造函数：new RegExp(‘xyz’,’i')，运行时编译

3.标识：

  • g（global），给定的正则可以匹配多次

  • i（ignoreCase），试图匹配给定的正则时忽略大小写

  • M（multiline），在多行模式时，开始操作符^和结束操作符$匹配每一行

B.正则方法

  • RegExp.prototype.test()：是否存在匹配

  • String.prototype.search()：匹配位置的索引

  • RegExp.prototype.exec()：捕获分组

  • String.prototype.match()：捕获分组或返回所有匹配的子字符串

  • String.prototype.replace()：查找和替换

C.标识/g的一些问题

1.带有/g的正则表达式不能内联

2.带有/g的正则表达式作为参数：为了安全起见，应该设置lastIndex为0（test()和exec()时）

3.共享带有/g的正则表达式：需要把lastIndex设置为0

D.提示与技巧

1.缺少断言（例如^、$）的正则表达式可以在任意位置匹配

2.匹配一切：new RegExp(‘’).test()或/(?:)/，不匹配任何字符：/.^/

E.正则表达式备忘单：P310

https://github.com/zhangyue0503/html5js/blob/master/speakingjavascript/19.js

Date

A.Date构造函数

1.new Date(year, month,date?,hours?,minutes?,seconds?,milliseconds?)

B.Date原型方法

  • Date.prototype.get<>()：根据当地时间返回单位时间

  • Date.prototype.set<>()：根据当地时间设置单位时间

  • Date.prototype.getUTC<>()：根据世界时间返回单位时间

  • Date.prototype.setUTC<>()：根据世界时间设置单位时间

  • Date.prototype.getTime()：返回毫秒数（从1970.1.1开始）

  • Date.prototype.setTime()：以毫秒数为单位指定日期

  • Date.prototype.valueOf()：当日期转换成数值的时候调用此方法

  • Date.prototype.getTimezoneOffset()：以分钟为单位返回当地时间与世界时间的偏差

  • Date.prototype.getFullYear()：获取年

  • Date.prototype.setFullYear()：设置年

  • Date.prototype.toTimeString()：返回当前时区的时间

  • Date.prototype.toLocaleTimeString()：返回的时间格式是具备地区特性的

  • Date.prototype.toDateString()：返回日期

  • Date.prototype.toLocaleDateString()：具备地区特性的日期

  • Date.prototype.toString()：返回的日期和时间落在当前的时区内不包含毫秒

  • Date.prototype.toLocaleString()：具备地区特性

  • Date.prototype.toUTCString()：返回世界时间

  • Date.prototype.toISOString()：所有的内部属性都出现在返回的字符串中

  • Date.prototype.toJSON()：以日期为对象转换成JSON字符串

Math

A.Math属性

Math.E（欧拉常数）、Math.LN2（2的自然对数）、Math.LN10（10的自然对数）、Math.LOG2E（以2为底的e的对数）、Math.LOG10E（以10为底的e的对数）、Math.PI（圆周率）、Math.SQRT1_2（1/2的平方根）、Math.SQRT2（2的平方根）

B.数值函数

  • Math.abs()：绝对值

  • Math.ceil(x)：返回大于等于x的最小整数 

  • Math.exp(x)：返回e的x次幂

  • Math.floor(x)：返回小于等于x的最大整数

  • Math.log(x)：返回x的自然对数

  • Math.pow(x)：返回x的y次幂

  • Math.round(x)：返回最接近x的整数 

  • Math.sqrt(x)：返回根号x

C.三角函数

  • Math.acos(x)：返回x的反余弦值

  • Math.atan(x)：返回x的反正切值

  • Math.cos(x)：返回x的余弦值

  • Math.sin(x)：返回x的正弦值

  • Math.tan(x)：返回x的正切值

D.其他函数

  • Math.min(……)：返回参数中最小的数字，通过apply可以应用于数组

  • Math.max(……)：返回参数中最大的数字，通过apply可以应用于数组

  • Math.random()：返回一个伪随机数，0<=r<=1

JSON

A.背景

1.遵循两个原则

  • 字符串必须使用双引号，字符串字面量是无效的

  • 属性键也必须使用双引号

B.JSON.stringify(value, replacer?,space?)

1.将值valueOf转换成JSON字符串

2.replacer用于转换前替换参数value：节点访问函数、属性键白名单

3.space影响输出格式，没有这个参数将以单行文本输出：可选数字和字符来控制缩进

4.解析不被JSON支持的内容：

  • 一个不被支持的值返回undefined，如JSON.stringify(function(){})

  • 不被支持的属性直接被忽略，如JSON.stringify({foo:function(){}})

  • 不被支持的值在数组中被解析成null，如JSON.stringify([function(){}])

5.JSON.stringify()遇到一个对象具有toJSON方法，则直接该方法来获得字符串化的值，内置toJSON的：

Boolean.prototype.toJSON()、Number.prototype.toJSON()、String.prototype.toJSON()、Date.prototype.toJSON()

C.JSON.parse(text, reviver?)

1.解析方便格式的JSON数据，返回相应的值

2.reviver是一个节点访问函数，可以用来转换解析后的数据

标准全局变量

A.构造器

Array、Boolean、Date、Function、Number、Object、RegExp、String

B.Error构造器

Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError

C.非构造器函数

  • encodeURI(uri)：用百分号来编码特殊字符，除了;,/?:@&=+$#a-zA-z0-9-_.!~*’()

  • encodeURIComponent(uriComponent)：编码，除了a-zA-Z0-9-_.!~*’()

  • decodeURI()：解码encodeURI

  • decodeURIComponent()：解码encodeURIComponent

  • 废弃函数：escape()、unescape()

  • isFinite(number)检测是否为infinity、isNaN()、parseFloat()、parseInt()

D.通过eval()和new Function()来动态执行JS代码

1.非严格模式中，eval所执行的代码会在当前作用域下创建本地变量，而严格模式下不会

2.执行eval()的方式有两种

  • 直接调用：直接调用eval函数

  • 间接调用：通过将eval()存储在另一个名称下并通过call()方法来调用

3.new Function()会创建全局作用域的函数

4.尽可能使用new Function()来替代eval执行代码，参数更为没弄明白

5.最佳实践是尽量避免使用eval()和new Function()。动态执行代码通常相对比较慢并且存在安全隐患

E.Console API

console.clear()、console.debug()、console.error()、console.exception()、console.info()、console.log()、console.trace()、console.warn()、console.assert()、console.count()、console.dir()、console.dirxml()、console.group()、console.groupCollapsed()、console.groupEnd()、console.table()、console.markTimeline()、console.profile()、console.profileEnd()、console.time()、console.timeEnd()、console.timeStamp()

编码和JavaScript

1.对于你自己的应用，可以使用Unicode。但是必须声明app的HTML页面是UTF-8编码的

元编程风格指南

A.通用技巧

1.代码应该具有一致性

2.代码应该易于理解：简短并不总是更好的；好的代码是一本教科书（代码应该解释正在发生的事情，注释应该解释事情为什么发生、文档应该填补代码和注释留下的空白）；

3.不要自作聪明，不要让人思考

4.避免优化代码速度或大小

B.普遍认可的最佳实践

1.使用严格模式；总是使用分号；总是使用严格相等（===）和严格不等（!==）；只有空格或只用制表符缩进，但不要混合使用；引用字符串；避免全局变量；

2.括号风格：使用1TBS，左括号开始于同一行的语句头部之后，if(x){这样

3.推荐字面量而不是构造函数

4.不要自作聪明：不要嵌套条件操作符；使用逻辑操作符时，不要简写if语句；使用自增或自减操作符作为语句而不要作为表达式；检查undefined；使用Math.round()转换整数；

5.可接受的技巧：使用或(||)提供默认值；使用泛型方法，把Object.prototype简写为{}，把Array.prototype简写为[]；ECMAScript5中末尾的逗号是合法的；ECMAScript5允许使用保留字作为属性键；

C.具有争议的规则

1.面向对象

  • 推荐构造函数而不是其他实例创建模式

  • 避免私有数据使用闭包

  • 即使构造函数没有参数，也要写括号

  • 小心操作符优先级

调试的语言机制

  • 调试器声明的行为类似于设置数点并启动调试器

  • console.log(x)把x的值输出到JS引擎的控制台

  • console.trace()把堆栈跟踪信息打印到引擎的控制台

子类化内置构造函数

A.术语

1.使用“子类化内置构造函数(subclass a built-in)”，而避免采用“扩展(extend)”

B.障碍1：具有内部属性的实例

1.在JS中常用的子类化技术是在子类构造函数中调用超类构造函数，且作用域中this指向子类自身

2.解决方法：直接复制方法和属性到实例中

C.障碍2：内置的构造函数不能作为方法调用

1.解决方法：在子类构造函数中，新建一个超类实例，并且将超类实例的属性复制到子类实例中

D.另一种解决方案：委托

JSDoc：生成API文档

1.通过/**来标记内容

类库

1.shim和polyfill，在旧的JS引擎上改造新的功能

模块系统和包管理器

A.模块系统

1.CommonJS模块(CommonJS Module,CJS)：化身就是Node.js模块，紧凑的语法、同步加载的设计、主要用于服务端

2.异步模块定义（Asynchronous Module Definition,AMD）：典型就是Requirejs，语法稍复杂但不通过eval或者静态编译步骤就可以工作、异步加载的设计、主要用于浏览器

B.包管理器

npm、Bower、Browserify

其他工具

1.代码检测：JSLint、JSHint、ESLint

2.单元测试：Jasmine、mocha

3.压缩：UglifyJS、YUI Compressor、Closure Compiler

上述内容就是怎样深入理解JavaScript，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。


文章名称：怎样深入理解JavaScript
文章源于：http://pwwzsj.com/article/ihodgs.html

其他资讯