JS高级程序设计拾遗
《JavaScript高级程序设计(第三版)》反反复复看了好多遍了,这次复习作为2017年上半年的最后一次,将所有模糊的、记不清的地方记录下来,方便以后巩固。
0. <script>元素属性
async表示立即下载脚本,但不应该妨碍页面中其他操作;
defer表示延迟到文档完全被解析和显示之后再执行。这两个属性都仅适用于外部脚步,而且现实中脚步不一定按顺序执行。指定async属性的目的是不让页面等待脚本下载和执行。
最好只包含一个延迟脚本,把延迟脚本放在页面最底部仍然是最佳选择。
1.Number类型
1.1 NaN即非数值可以用isNaN()来确定。isNaN()在接收到一个值后,会尝试将这个值转换为数值,任何不能转换为数值的值都会导致isNaN()返回true。
alert(isNaN(NaN)) //true alert(isNaN("10")) //false alert(isNaN("blue")) //true
1.2 数值转换
上例讲到的isNaN()会将值转换为数值,那是怎么转换的呢。JS所有数值转换,默认情况下都是调用Number()转型函数的。
Number()、parseInt()、parseFloat() 区别: Number()参数可以为任何数据类型,后两个参数只能为字符串(parseInt()还可以多一个转换基数的参数;Number()对空字符串返回0,后两个则返回NaN,原因是parseInt()对于第一个字符不是数字字符或负号,就会返回NaN;对于参数是字符串,Number()要求字符串只包含数字才转换成数值(空字符串转为0),否则转换为NaN,而后两个函数没这个要求。另外,对于Number(),null转为0,undefined转为NaN
2.逻辑与操作符(&&)的理解 (《JS权威指南》)
“&&”运算符有三个层次的理解。第一层理解是,当操作数都是布尔值时,进行布尔操作,运算结果总是布尔值true或false。第二层理解是,当有操作数不是布尔值时,则对真值和假值进行布尔操作,并返回相应的真假值,
因此“&&”并不总返回true和false。第三层理解是对上面提到的真假值的补充,运算符首先计算左操作数的值,如果为假值,则整个表达式结果一定也是假值,此时“&&”简单返回左操作数的值,而并不会对右操作数进行计算;反过来,
若左操作数是真值,那么整个表达式结果依赖于右操作数的值,“&&”计算右操作数的值并将其返回作为整个表达式的计算结果。其实,第一层理解也可归并到第三层理解中。
var a = 0;// var a = null;// var a = 3;var b = 5;var c = a && b;console.log(c); // a=0时,结果是0;a=null时,结果是null;a=3时,结果是5.
3.加法操作符(+) (《JS权威指南》)
如果其中一个操作数是对象,对该对象进行到原始值的转换;
进行对象到原始值的转换后,如果其中一个操作数是字符串,则另一个操作数也转换为字符串,然后进行字符串连接;
否则,两个操作数都转换为数字(或NaN),然后进行加法操作;
"1" + 2; //"12"1 + {}; //"1[object Object]" :对象转换为字符串后进行拼接true + true //2 :布尔值转换为数字2 + null //2 :null转换为02 + undefined //NaN :undefined转为NaN
4.关系操作符 (小于< ,大于>等) 发现这部分内容还是《JS权威指南》讲得好
如果操作数为对象,进行对象到原始值的转换;
在对象转为原始值后,如果两个操作数都是字符串,则进行字符编码的比较;
在对象转为原始值后,如果至少一个操作数不是字符串,那么两个操作数都转为数值比较;
如果一个操作数(或转换后)是NaN,则返回false;
5.相等操作符(==)、全等操作符(===)
===比较简单,要求两个值的类型相同,否则不相等。下面全部是==的规则。
null与undefined相等;
如果一个操作数是数字,另一个是字符串,则字符串转数字后比较;
如果一个操作数是布尔值,则转为数字后比较;
如果一个操作数是的对象,另一个操作数不是,则将对象转为原始值后比较;
6.引用类型操作
6.1 instanceof 检测对象类型
var a = {};console.log( a instanceof Object); //true
6.2 Array.isArray 检测是否是数组
var a = [];console.log(Array.isArray(a)); //true
6.3 数组push时推入参数的顺序
push()参数靠前的放在数组靠前的位置
var a = [];a.push('11', '22')console.log(a); // ["11", "22"]
6.4数组unshift时推入参数的顺序
unshift()参数靠前的放在数组靠前的位置
var a = [];a.unshift('11', '22');a.unshift('33');console.log(a); // ["33",11", "22"]
7.URI编码方法
Global对象的encodeURI()和encodeURIComponent()方法可以对URI进行编码。encodeURI主要用于给整个URI编码,encodeURIComponent可以对URI的部分
进行编码。区别是encodeURI不会对本身属于URI的特殊字符进行编码,如冒号、问号、井字符,而encodeURIComponent会对任何非标准字符进行编码。通过
decodeURI和decodeURIComponent可以进行相应的解码。
var uri = "http://www.baidu.com/illeagl value.html#start";console.log(encodeURI(uri)); //http://www.baidu.com/illeagl%20value.html#startconsole.log(encodeURIComponent(uri)); // http%3A%2F%2Fwww.baidu.com%2Filleagl%20value.html%23start
8.JSON对象的解析与序列化
ES5的JSON对象有2个方法,JSON.stringify()用于把js对象序列化为JSON字符串,JSON.parse()用于把JSON字符串解析为JS值。
9.JSONP
看了高程后,看这篇文章
10. 浏览器链接指向新url后发生的一系列过程。虽然不是JS的东西,但作为网络基础,还是在这儿写一下
假设链接https://www.baidu.com 其IP地址是166.166.166.166。
1)浏览器分析url,并解析出服务器的主机名www.baidu.com
2)浏览器向DNS请求解析www.baidu.com的IP地址
3) DNS解析出IP地址为166.166.166.166
4)浏览器与服务器建立TCP链接
5)浏览器向服务器发送一条HTTP请求报文
6)服务器向浏览器回送一条HTTP响应报文
7)释放TCP链接
8)显示文档
11.DOM操作
// 获取元素document.getElementById('id');elem.getElementsByTagName('tag');document.getElementsByName('name');// html5新增elem.getElementsByClassName('class');// 获取属性elem.getAttribute('attr');// 设置属性elem.setAttribute('attr', value);// 移除属性elem.removeAttribute('attr');// 子节点列表 childNodes有浏览器兼容问题,需要对节点类型进行判断,推荐用children element.childNodes;// nodeType属性 node.nodeType 1:元素节点 2:属性节点 3:文本节点// nodeValue属性 node.nodeValue// firstChild和lastChild node.firstChild==node.childNodes[0] ;node.lastChild==node.childNodes[node.childNodes.length - 1] ;// innerHTML属性 既可读又可以写// 创建新元素 document.createElement(elem);// 将元素节点插入节点树// 追加子节点 parent.appendChild(child);// 在已有节点前插入新节点 node.parentNode.insertBefore(newNode, node);// DOM没有提供在现有节点后插入新节点的方法// 节点的下一兄弟节点 node.nextSibling;// 节点的前一兄弟节点 node.previousSibling;// 替换节点 someNode.replaceChild(newNode, oldNode);// 移除节点 someNode.removeChild(oldNode);// 克隆节点 true 深复制, false 浅复制node.cloneNode(boolean);// 创建文本节点 document.createTextNode(text);// CSS-DOM// 设置类名elem.setAttribute("class", "intro");elem.className;// DOM扩展// 接收一个CSS选择符,返回匹配的第一个元素 elem.querySelector();// 接收一个CSS选择符,返回匹配的NodeListelem.querySelectorAll();
转载于:https://www.cnblogs.com/zhansu/p/6366929.html
JS高级程序设计拾遗相关推荐
- 《Ext JS 高级程序设计》的目录与样张
第一部分 Ext Core 第1 章 Ext Core 重要概念 ············· 2 1.1 Ext.Element······························· 2 1. ...
- Ext JS高级程序设计
Ext JS高级程序设计 图书详细情况查看: http://www.china-pub.com/193076 市场价 :¥59.00 会员价 : ¥44.25(75折) [作 者]黄灯桥;徐会生 [同 ...
- js高级程序设计第四部分
js高级程序设计:BOM.客户端检测 BOM window对象 在浏览器中,window 对象有双重角色,它既是通过 JavaScript 访问浏览器窗口的一个接口,又是 ECMAScript 规定的 ...
- 读js高级程序设计中有感
我现在都到js高级程序设计最难的章节,第六章,对象,虽然有人推荐不用全部读完,但我还是完整的读一遍吧,一遍可以敲代码一边看书理解加百度,我认为这种方式很好,可以加深理解增强印象,这是我觉得这本书比JS ...
- JS高级程序设计【红宝书】学习笔记——数据类型
目录 数据类型 Number类型 1.值的范围 2.NaN 3.数值转换 String类型 1.字符字面量(详见JS高级程序设计P63 2.转换为字符串 Symbol类型 Object类型 objec ...
- Js高级程序设计第三版学习(十二章)
Js高级程序设计第三版学习(十二章) 第十二章 DOM2和DOM3 1.样式: 访问样式属性 任何支持style特性的HTML元素都有一 ...
- JS高级程序设计——阅读笔记四
JS高级程序设计--阅读笔记四 第六章 集合引用类型 6.1 Object 6.2 Array 6.2.1 创建数组 from()函数 6.2.2 数组空位 6.2.3 数组索引 6.2.4 检测数组 ...
- js高级程序设计(一) —— js简介
学习<JavaScript高级程序设计>的知识总结,以及对部分内容的扩展~ 1.一个完整的js实现的三个部分 核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ...
- 《JS高级程序设计》第二遍读书笔记
这一遍的重点还是在JS语言本身,后面的DOM和BOM部分看的比较快,因为现在实际上用的不多,掌握大致的原理,需要的时候再翻手册就可以了. 认为暂时没必要的知识点WebGL, 认为已经不需要.过时的知识 ...
最新文章
- 老板要我开发一个简单的工作流引擎
- FPGA等效门数的计算方法
- 2019牛客第四场I题 string
- Cookie和Session区别
- 霍金竟然亲口承认自己是个赌徒!明明失败了不止一次,“菜鸡”却成了神话!...
- 企业如何寻找最合适的托管数据中心,以维持IT和业务的增长运营
- 云开发0基础训练营第二期热力来袭!
- Android之自定义控件深入
- 关于C#操作mysql数据库乱码
- 更换计算机名后打不开PPT,ppt视频换电脑无法播放怎么办
- Android 获取应用信息—PackageManager
- 合工大离散数学实验 油管实验
- Java程序员工资尤其的高,具体原因是什么呢?
- 微擎人人商城 后台开启WAP访问后 微信浏览器 跳过授权 手机号密码登录
- 全国计算机一级WORD第三套,全国计算机等级考试一级WPSOffice练习题及答案第三套.pdf...
- nuScenes自动驾驶数据集:格式转换,模型的数据加载(二)
- 考试/答题系统的设计思路
- Hibernate的几种查询方式 HQL,QBC,QBE,离线查询,复合查询,分页查询
- 【观察】锐捷网络:坚定选择以太全光网路线,为企业级全光网树立新标准
- ADC0809 VHDL控制程序
热门文章
- DataGridView和ListT绑定不显示问题
- 网络规划设计培训与方案集下载
- 找出字符串中所有数字
- Cisco asa 5510升级IOS和ASDM
- c# 数据可视化_#OpenVisConf上的22位数据可视化从业者的10点收获
- static interface method calls are not supported at language level 1.6
- ZJU-java进阶笔记 第七周(输入输出)
- Python工程师求职必知的经典面试题
- python selenium脚本_怎样开始写第一个基于python的selenium脚本
- Bzoj4016: [FJOI2014]最短路径树问题