之前看过好几遍《JavaScript高级程序设计》这一书,但是始终没有完完整整的看过一遍。从现在开始我会把它完整的啃一遍,每章节都记录笔记,自己的心得,加油! 由于前三章的内容比较简单,因此我会把它们放到一个章节里面记录学习历程。 一、基本概念 1、JavaScrip与ECMAScript的关系 可以理解为JavaScript除了包含ECMAScript外,还包括DOM(文档对象模型),BOM( 浏览器对象模型) 2、标签</p> <ul class=" list-paddingleft-2"><li><p>属性: async defer charset type src </p></li></ul> <blockquote> <p>defer与async的区别:(只适用于外部脚本文件)</p> <p>没有async或defer,<script>标签按先后顺序依次解析。浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 <code>script</code> 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。</p> <p>有async,加载和渲染后续文档元素的过程将和js的加载与执行并行进行(异步);</p> <p>有defer,加载后续文档元素的过程将和js的加载并行进行(异步),但是js的执行要在所有的元素解析完成之后,DOMContentLoaded事件触发之前完成</p> <p><img src="https://img.php.cn/upload/article/000/000/001/edcf103e52eb1199cb96ac9b445dc5a9-1.png" alt=""></p> <p>蓝色线代表网络读取,红色线代表执行时间,这俩都是针对脚本的;绿色线代表 HTML 解析。</p> <p>详细解析可点击 </p> </blockquote> <ul class=" list-paddingleft-2"> <li><p>标签位置:可放在<head>或者<body>元素中内容的后面</p></li> <li><p>文档模式:(可分为混杂模式和标准模式)</p></li> </ul> <blockquote> <p>IE中浏览器模式与文档模式区别:</p> <p>浏览器模式:影响的是浏览器版本以及IE的条件注释</p> <p>文档模式:影响的是IE的排版引擎,DOM的渲染</p> <p>详细解析可点击 </p> </blockquote> <p>3、数据类型</p> <p> 5种简单的数据类型:String、Number、Boolean、Null、Undefined 1种复杂数据类型:Object</p> <p> typeof操作符检测变量的数据类型,返回字符串 <span style="color: #ff00ff"> <span style="color: #ff0000">注意:typeof null 返回 'object',null被认为是一个空的对象引用</span></span></p> <p> 变量未初始化、未声明时typeof都返回undefined</p> <p> ----- Boolean类型</p> <table style="height: 137px; width: 648px; border-color: #6a684d; border-width: 0px; border-style: solid" border="0"><tbody> <tr align="center" valign="middle"> <td style="border-color: #008000; border-style: solid; border-width: 1px">数据类型</td> <td style="border-color: #008000; border-style: solid; border-width: 1px">转换为true的值</td> <td style="border-color: #008000; border-style: solid; border-width: 1px">转换为false的值</td> </tr> <tr align="center" valign="middle"> <td style="border-color: #008000; border-style: solid; border-width: 1px">Boolean</td> <td style="border-color: #008000; border-style: solid; border-width: 1px">true</td> <td style="border-color: #008000; border-style: solid; border-width: 1px">false</td> </tr> <tr align="center" valign="middle"> <td style="border-color: #008000; border-style: solid; border-width: 1px">String</td> <td style="border-color: #008000; border-style: solid; border-width: 1px">非空字符串</td> <td style="border-color: #008000; border-style: solid; border-width: 1px">空字符串</td> </tr> <tr align="center" valign="middle"> <td style="border-color: #008000; border-style: solid; border-width: 1px">Number</td> <td style="border-color: #008000; border-style: solid; border-width: 1px">任何非零数字值(包括无穷大)</td> <td style="border-color: #008000; border-style: solid; border-width: 1px">0和NaN</td> </tr> <tr align="center" valign="middle"> <td style="border-color: #008000; border-style: solid; border-width: 1px">Object</td> <td style="border-color: #008000; border-style: solid; border-width: 1px">任何对象</td> <td style="border-color: #008000; border-style: solid; border-width: 1px">null</td> </tr> <tr align="center" valign="middle"> <td style="border-color: #008000; border-style: solid; border-width: 1px">Undefined</td> <td style="border-color: #008000; border-style: solid; border-width: 1px">不适用</td> <td style="border-color: #008000; border-style: solid; border-width: 1px">undefined</td> </tr> </tbody></table> <p> ----- Number类型</p> <p> <span style="color: #ff0000">js中浮点数的计算不准确,慎用~</span></p> <p> isFinite() 判断一个数是否在最小和最大的数值之间 </p> <p> NaN 非数值,与任何都不相等,包括它本身 isNaN() </p> <p> 非数值转换为数值:Number() Number('') 0 Number(null) 0</p> <p> parseInt() parseFloat() 如果第一个字符不是数字字符或者负号,则返回NaN parseInt('') NaN parseInt(null) NaN</p> <p> ----- String类型</p> <p> 转字符串的方法: toString() 除null和undefined外都有此方法 String()可将任何类型的值转为字符串 加号操作符 +'' </p> <p> ----- Object类型</p> <p> Object的每个实例都具有下列属相和方法</p> <p> Constructor:保存着用于创建当前对象的函数</p> <p> hasOwnProperty(propertyName):属性在当前对象实例中是否存在</p> <p> isPrototypeOf(object):传入的对象是否是另一个对象的原型</p> <p> propertyIsEnumerable(propertyName):属性是否能使用for-in语句来枚举</p> <p> toLocaleString()</p> <p> toString():返回对象的字符串表示</p> <p> valueOf():返回对象的字符串、数值或布尔值表示</p> <p>4、操作符</p> <p> <span style="color: #ff0000">var age = 10; var newAge = ++age; console.log(age); //11 console.log(newAge); //11 ++age先加后赋值,即先age+1,再将值赋给newAge </span></p> <p><span style="color: #ff0000"> var age = 10; var newAge = age++; console.log(age); //11 console.log(newAge); //10 ++age先赋值后加,即先将值赋给newAge ,再age+1</span></p> <p> ----- 位操作符</p> <p> 按位非(~)即操作数的负值减1</p> <p> 按位与(&)两个数值对应位都是1时才返回1 ,任意一位是0,结果都是0 </p> <p> 按位或(|)有一位是1的情况下就返回1</p> <p> 按位异或(^)两个数值对应位上只有一个1时才返回1</p> <p> 左移(<<)将数值的所有位向左移动指定的位数,多出的空位用0填充,不会影响操作数的符号位</p><p> 有符号的右移(>>)用符号位的值来填充空位</p> <p> 无符号的右移(>>>)用0填充空位</p> <p> ----- 布尔操作符</p> <p> 逻辑非(!)</p> <p> 逻辑与(&&)短路操作符,即第一个操作数求值结果为false,就不会对第二个操作数求值 <span style="color: #ff0000">eg:console.log(1 && 2 && 3); //3</span></p> <p> 逻辑或(||)短路操作符,即第一个操作数求值结果为true,就不会对第二个操作数求值 <span style="color: #ff0000">eg:console.log(1 || 2 || 3); //1</span></p> <p> ----- 相等操作符</p> <p> <span style="color: #ff0000">null >= 0 //true null == 0 //false 原因:关系运算符比较时会转成数值 ,相等运算符则不会</span></p> <p> <img src="https://img.php.cn/upload/article/000/000/001/edcf103e52eb1199cb96ac9b445dc5a9-2.png" alt=""></p> <p> null == undefined //true null == 0 //false undefined == 0 //false </p> <p> <span style="color: #ff0000">==只比较值 ===既比较值,又比较类型</span></p> <p><span style="color: #ff0000"> 之前面试被问到的一道题目:var a = 1, b = 1; var c = {a:1}, d = {a:1}; console.log(a == b); console.log(a === b); console.log(c == d); console.log(c === d); //true true false false</span></p> <p><span style="color: #000000"> 逗号表达式用于赋值时,总会返回表达式中的最后一项 eg:var num=(1,2,3); console.log(num); //3</span></p> <p>5、语句</p> <p> do{} while ()语句 while() {}语句 switch语句</p> <p> for-in语句:可用来枚举对象的属性,返回属性的先后次序可能会因浏览器而异</p> <p> break语句:退出循环,执行循环后面的语句 continue:跳出本次循环,执行下次循环</p> <p>6、函数</p> <p> arguments对象可访问参数的数组,参数的值可通过arguments[0]……来获取,有length属性</p> <p> <span style="color: #ff0000">未指定返回值的函数返回undefined值。这就是在chrome console中有时输入一些命令会返回undefined的原因~</span></p> <p> </p> <p style="text-align: left"> </p> <p style="text-align: left"> </p>