当前位置: 首页 > 编程日记 > 正文

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

相关文章:

mysql建立高效索引,如何知道你建立的MySQL索引是高效,合理的

不管是开发人员&#xff0c;仍是数据库维护人员&#xff0c;给表建立索引是很常见的事情。普通到什么程度&#xff0c;初级&#xff0c;中级开发人员的印象中&#xff0c;只要写的sql语句效率不高&#xff0c;第一反应就是建索引&#xff0c;而无论这个字段是否适合建立索引。反…

32位java 最大内存_【答疑系列】为什么32位系统只支持最大4G内存?

这个问题一直都有同学问到&#xff0c;算是提问次数最多的问题之一了。32位是什么现在主流的操作系统都是64位的&#xff0c;早期存在32位操作系统&#xff0c;相信大家也都有所听闻&#xff0c;其实&#xff0c;在更早之前&#xff0c;还有16位、8位的&#xff0c;这里就不展开…

新手C#string类常用函数的学习2018.08.04

ToLower()用于将字符串变为小写&#xff0c;注意字符串的不可变特性&#xff0c;需要重新赋值给另一个字符串变量。 s s.ToLower();//字符串具有不可变性&#xff0c;转换后需要重新赋值&#xff0c;不可仅有s.ToLower(); 这可以使用户的输入不区分大小写&#xff0c;例如验证…

开始使用博客了,改变从这里开始。

开始使用博客了&#xff0c;改变从这里开始。 开始使用博客了&#xff0c;改变从这里开始。 开始使用博客了&#xff0c;改变从这里开始。转载于:https://www.cnblogs.com/hello001/p/6367259.html

php 贝瑟尔曲线,贝塞尔曲线的应用详解

简介贝塞尔曲线是可以做出很多复杂的效果来的&#xff0c;比如弹跳球的复杂动画效果&#xff0c;首先加速下降&#xff0c;停止&#xff0c;然后弹起时逐渐减速的效果。使用贝塞尔曲线常用的两个网址如下&#xff1a;缓动函数&#xff1a;cubic-bezier&#xff1a;如何用贝塞尔…

区别 eks_sport 和 exercise 有什么区别?看完你就清楚了!

说到“运动”sport 这个单词应该是不少人看到“运动”的第一反应吧sport /spɔ:t/ n.体育运动例如&#xff1a;Id say football is my favourite sport.我最喜欢的运动要数足球了。习语&#xff1a;be a sport 讲交情例如&#xff1a;Shes a good sport.她很讲交情。sport通常指…

java gps时间转换工具_java 时间戳和时间互转工具 和 时间偏移量计算

时间互转代码片段&#xff1a;* 时间戳 转 时间 ** param beginDate* return* see [类、类#方法、类#成员]*/public static String timeStampToTime(String beginDate){SimpleDateFormat sdf new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");Date date new Date(Long…

tcp 状态转换.

命令行:rootubuntu:/home/linson# netstat -apt | grep 3030 server,listen 服务端根据端口生成一个socket.用于监听连接.也就是监听3次握手,当3次握手成功,建立一个连接接放入队列中. 也就是说执行了listen,会自动应答3次握手,如果不执行listen,没有api会帮你处理3次握手. 所以…

增加、修改、删除

第一;,models.py建表 from django.db import models# Create your models here.class Book(models.Model): #必须继承models.Model这个类&#xff0c;jango才能识别Book是一张表namemodels.CharField(max_length20)#charfield字符串类型&#xff0c;长度20#pricemodels.FloatFi…

java ee 笔试题目,JSP经典笔试@题目(含答案)

JSP经典笔试题目(含答案)更新时间&#xff1a;2017/2/5 19:25:00 浏览量&#xff1a;557 手机版JSP综合测试笔试1)在Java EE中&#xff0c;Servlet是在服务器端运行&#xff0c;以处理客户端请求而做出的响应的程序&#xff0c;下列选项中属于Servlet生命周期阶段的是( )A.加…

句法依存分析_[NLP学习笔记]句法分析

句法分析任务简介成分句法分析&#xff08;Constituency Parsing&#xff09;&#xff1a;分析句子的成分&#xff0c;给出一棵树由终结符和非终结符构成的句法树。依存句法分析&#xff08;Dependency Parsing&#xff09;&#xff1a;分析句子中词与词之间的依存关系&#xf…

modifiers在JAVA中_Java Modifier.classModifiers方法代碼示例

import java.lang.reflect.Modifier; //導入方法依賴的package包/類/*** Returns a string describing this {code Class}, including* information about modifiers and type parameters.** The string is formatted as a list of type modifiers, if any,* followed by the k…

华为笔试题---明明的随机数

题目 明明想在学校中请一些同学一起做一项问卷调查&#xff0c;为了实验的客观性&#xff0c;他先用计算机生成了N个1到1000之间的随机整数&#xff08;N≤1000&#xff09;&#xff0c;对于其中重复的数字&#xff0c;只保留一个&#xff0c;把其余相同的数去掉&#xff0c;不…

扩展城市信道etu模型matlab仿真,LTE System Toolbox:无线通信系统的仿真、分析和测试...

LTE System Toolbox 提供用于设计、仿真和验证 LTE 和 LTE-Advanced 通信系统且符合标准的函数和应用程序。该系统工具箱加速了 LTE 算法和物理层 (PHY) 部署&#xff0c;支持黄金参考验证和一致性测试&#xff0c;并能够生成测试波形。借助该系统工具箱&#xff0c;您可以配置…

i/o多路复用笔记

1、用户空间和内核空间 操作系统的核心是内核&#xff0c;独立于普通的应用程序&#xff0c;可以访问受保护的内存空间&#xff0c;也可以访问底层硬件设备。为了保护用户进程不能直接操作内核&#xff0c;保证内核的安全&#xff0c;操作系统将虚拟空间划分为两部分&#xff0…

接口有个电池标志_USB接口上的小标签有啥用?从“+”号到闪电的奥秘

你有注意过自己PC&#xff0c;尤其是笔记本USB接口上面的小符号了吗&#xff1f;从“”号到闪电&#xff0c;小狮子前几天移动硬盘接驳始终没反应的时候&#xff0c;各种切换完毕发现这似乎是一个平时很少注意的细节啊……从“”号开始谈起仔细端详PC USB接口的时候会发现&…

java arraylist优点_Java中各种集合的特点总结

1:集合&#xff1a;(1) Collection(单列集合)List(有序,可重复)ArrayList底层数据结构是数组,查询快,增删慢线程不安全,效率高Vector底层数据结构是数组,查询快,增删慢线程安全,效率低LinkedList底层数据结构是链表,查询慢,增删快线程不安全,效率高Set(无序,唯一)HashSet底层数…

mysql主从结构主数据库_mysql主从结构主数据库

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":4,"count":4}]},"card":[{"des":"阿里云数据库专家保驾护航&#xff0c;为用户…

JZOJ 5461 购物 —— 贪心

题目&#xff1a;https://jzoj.net/senior/#main/show/5461 贪心&#xff0c;原来想了个思路&#xff0c;优先选优惠价最小的 K 个&#xff0c;然后其他按原价排序遍历&#xff1b; 如果当前物品没选过&#xff0c;原价选上&#xff0c;如果选过&#xff0c;考虑把它换成原价&a…

matlab中的expotest,提高Fortran矩阵指数性能(Expokit比Matlab、Python慢)

我正在进行一个模拟&#xff0c;其中的瓶颈是执行大量复杂的双精度矩阵指数运算&#xff0c;我发现Fortran(Expokit)对于小矩阵很好&#xff0c;但对于较大的矩阵&#xff0c;它的性能比Matlab或Python差。在我在下面包含了一个显示类似行为的模型程序&#xff0c;尽管它需要更…

Win7下使用Putty代替超级终端通过COM串口连接开发板方法

1、如果电脑&#xff08;笔记本&#xff09;没有串口接口&#xff0c;则需要使用一个 USB-Serial 转换线&#xff0c;这里使用 prolific usb-serial USB--串口转换线&#xff0c;首先需要在win7上安装对应的 USB--串口转换线 驱动程序&#xff0c;PL2303_Prolific 驱动程序下载…

java内部类 缺点_Java中的内部类及其优势

Java中提供了定义内部类的选择&#xff0c;这一机制使得代码的书写更为方便和优雅(功能上相关的代码被紧密的组织在了一起)。需要注意的是&#xff0c;内部类和传统的组合(即将一个类的实体定义为另一个类的成员)是完全不同的&#xff0c;其主要特性表现在以下的一些方面&#…

php webapi验签,Asp.netCore3.0 WebApi从0到1手摸手教你写【5】增加接口参数签名验证...

通过前几个教程的学习&#xff0c;对webapi的编写基本上就可以入门了&#xff0c;可以做项目了&#xff0c;今天我们再给接口加个参数签名认证&#xff0c;之前的接口相当于赤果果的暴露在了网络上&#xff0c;只要知道接口地址、接口调用方式和传参就可以畅所欲为的调用接口了…

点击TableView任一行跳转详情页面会跳转两次的解决办法

在做TableView跳转的时候&#xff0c;发现实际上生成了两个detail view。我 navigate back 的时候&#xff0c;也是先看到一次detail view&#xff0c;然后才回到tableView的。 这是因为&#xff1a;performSegue(withIdentifier: , sender: ) 和 prepare(for segue: , sender:…

dos环境下mysql的访问_MYSQL dos环境下使用

有很多朋友虽然安装好了mysql但却不知如何使用它。在这篇文章中我们就从连接MYSQL、修改密码、增加用户等方面来学习一些MYSQL的常用命令。一、连接MYSQL。格式&#xff1a; mysql -h主机地址 -u用户名 &#xff0d;p用户密码1、例1&#xff1a;连接到本机上的MYSQL。首先在打开…

jemeter监听器的使用

打开jemeter&#xff0c;新建线程组&#xff0c;添加http请求&#xff0c;在请求下添加监听器&#xff1a; 一、添加一个jpgc - PerfMon Metrics Collector监听器&#xff1a; 服务器性能监测控件&#xff0c;包括CPU,memory&#xff08;内存&#xff09;,network&#xff29;/…

java 抛异常给上级_java异常处理机制(示例代码)

Exception 类的层次java中所有的异常类是从 java.lang.Exception 类继承的子类。而Exception 类是 Throwable (可抛出的)类的子类。除了Exception类外&#xff0c;Throwable还有一个子类Error 。Java 程序通常不捕获错误。错误一般发生在严重故障时&#xff0c;它们在Java程序处…

前端开发之JavaScript基础篇一

主要内容&#xff1a; 1、JavaScript介绍 2、JavaScript的引入方法和输出及注释 3、javaScript变量和命名规则 4、五种基本数据类型 5、运算符 6、字符串处理 7、数据类型转换 一、JavaScript介绍 1、JavaScript是什么&#xff1f;     javaScript是一种web前端的描述语言&…

v9php 碎片信息,phpcms v9碎片管理及调用技巧分享

今天在这里将分享下Phpcms V9碎片管理及调用技巧。这是关于模板数据自定义、方便客户在后台管理数据调用的一个技巧。在给客户定制模板的时候&#xff0c;往往会涉及到的一个问题就是&#xff1a;有些数据(图片文字&#xff0c;比如LOGO、侧栏的联系方式、首页的幻灯片切换Bann…

iterm2 主题_【超级实用】Iterm2 + ohmyzsh 打造强大的终端编辑器

作者&#xff1a;AndrewHR 地址&#xff1a;http://mrw.so/4D1n7B最终的效果图如下所示&#xff1a;使用iterm2配合oh-my-zsh的命令行&#xff0c;拥有语法高亮、命令自动补全、自动提示符、显示git仓库状态等功能整个配置流程1、安装iterm2首先我们下载的 iterm2 这个软件&…