《JavaScript高等程序设计》笔记：基本概念

2019年9月1日 141次阅读 来源: 薄荷

一、写在前面

近来重读《JavaScript高等程序设计》，总结下来，查漏补缺。

二、JS简介

2.1 JS构成

  • ECMAscript：以ECMA-262为基础的言语，由浏览器支撑
  • DOM：编程接口（API）, 将页面映射成节点组织（文档树），供应操纵要领
  • BOM：浏览器对象模子，处置惩罚浏览器窗口和框架交互（部份扩大）

2.2 <script>

  • 实如今HTML中插进去JS
  • 内嵌，外联（优点：可保护，可缓存，顺应将来）
  • 引荐放在body中、内容后，收缩内容显现时候（浏览器碰到body显现内容）

参数：

  1. async: 马上下载剧本（外部文件），异步实行

    • 不保证按涌现递次实行
    • 多个async时，保证互不依靠，发起无修正DOM操纵
    • 在页面load前实行，不一定在DOMContentLoaded事宜触发前实行
  2. charset: 指定代码字符集（很罕用，部份浏览器疏忽该参数）

  3. defer: 下载后耽误实行，文档完整剖析显现后实行

    • 耽误剧本，耽误到</html>后实行，页面load前实行
    • 最好只要一个耽误剧本（HTML5请求按涌现递次实行，但现实不一定按递次实行，也不一定会在DOMContentLoaded事宜触发前实行）
  4. language: 标明编写言语（烧毁）

  5. src: 外部文件及地点链接

    • src、标签间嵌入内容同时存在，src下载实行，嵌入内容不被剖析

  6. type: 标明内容范例（MIME范例），默许text/javascript

    • 其他application/x-javascript，application/javascript，application/ecmascript

2.3 文档形式

  • 混淆形式
  • 规范形式

2.4 <noscript>

初期浏览器不支撑剧本/剧本被禁用时显现，运用noscript安稳退步

<body>
    <noscript>您的浏览器不支撑剧本/剧本被禁用</noscript>
</body>

2.5 PS：

1. async和defer辨别？

《《JavaScript高等程序设计》笔记：基本概念》

蓝色线代表收集读取，赤色线代表实行时候，均针对剧本；绿色线代表 HTML 剖析。

  • 默许，同步，递次剖析，剖析到马上加载，加载完马上实行。
  • defer，异步，同时加载，html剖析完成后实行（多个，不一定按递次实行，实用外链剧本）（HTML5请求按涌现递次实行，但现实不一定，不一定会在DOMContentLoaded事宜触发前实行）
  • async，异步，同时加载，加载完马上实行（多个，乱序实行）

2. XHTML和HTML重要差别？

  • 元素必正确嵌套，防备<a><b></a></b>
  • 单标签< />、双标签<> </>闭合
  • 标署名、属性大小写敏感
  • 必须有根元素

三、基础概念

3.1 ECMAScript语法

辨别大小写

  1. 标识符：

    • 参数，变量，属性，函数名
    • 以字母、下划线_、$开首
    • 通例为驼峰
    • 称号不能为关键字

  2. 解释：

    • 单行解释 / /
    • 块级解释 /* */
  3. 严厉形式： 编译指导” user strict “

  4. 语句：

    • 引荐以分号；末端
    • if( ) 可省略代码块{ }直接誊写语句，但引荐不省略

  5. 关键字：

    • break case catch continue debugger default delete
    • do else finally for function if in
    • instanceof new return switch this throw try
    • typeof var void while with

  6. 保存字：

    • abstract boolean byte char class const debugger double
    • enum export extends final float goto implements import
    • int interface long native package private protected public
    • short static super synchronized throws transient volatile
    • 外加let、yield、eval、arguments

3.2数据范例

变量：松懈范例（可修正值的范例），var建立时有作用域

  • 只定义未初始化，值为undefined
  • 不引荐在部分中定义全局变量

数据范例：

  • 简朴（基础）数据范例：number，string，Boolean，undef，null
  • 庞杂数据范例：Object

typeof操纵符:

  • 值：number，string，boolean，undefined，null，object，function
  • 特殊状况： typeof null —> object 被认为是空对象指针

对象：

  • 空对象，初始化时obj = null 经由过程 obj != null 来看是不是保存对象援用
  • 新建对象：new Object( ) 或 new Object

布尔：

  • true false 辨别大小写

数值：

  • 八进制（严厉形式下失效），0开首，后续值凌驾7则 079无效，剖析为79
  • 十六进制，不辨别大小写，0x开首欧，后续0-9、A-F
  • 科学计数法，123e7或123e-7，浮点数最大精度17位小数
  • 浮点数举行盘算，效果不正确
  • 数值局限Number.MIN_VALUE 5e-324 ~ Number.MAX_VALUE 1.7976931348623157e+308，超越对应±infinity
  • NaN，返回不为数值，也为数值范例，不影响代码实行，操纵NaN都返回NaN，与任何值都不相称

字符串：

  • 0或多个16位unicode字符构成
  • 单双引号无辨别
  • 字符字面量：\n \t \b \r \f \\ \’ \” \x \u 及6位unicode字符
  • 一旦建立，值不可转变，只能—->新的建立，烧毁本来的(旧版浏览器实行速度慢)

3.3 要领

数值

  • isNaN( )隐式转换数值
  • Number( )，null —-> 0，undefined —> NaN，八进制前导0失效，十六进制转换为十进制整数
  • parseInt( )，直到不是数字，保存整数，辨认八进制、十六进制，可指定第二个参数parseInt（a，8）指定八进制
  • parseFloat( )，不剖析前导0，可用于：科学计数法转完整展现

字符串：

  • toString（a） 参数可设置进制，数据转换值，有些不能转换（undefined，null）
  • String（）遵照先按toString实行，不成功再按String（）转换（undefined—-> undefined , null —-> null ）

对象：

  • constructor 建立实例的函数（组织函数）
  • hansOwnProperty 搜检当前对象中存在某属性（不查原型）
  • isPrototypeOf 搜检是不是是某对象的原型
  • propertyIsEnumerable 可否运用for-in罗列
  • toLocaleString 返回对象字符串示意
  • toString( ) 对象的字符串示意
  • valueOf( ) 返回对象的字符串、数值或布尔值

3.3 操纵符

算数、位、关联、相称操纵符

一元操纵符（隐式转换）：

  • 只能操纵一个值
  • 前置（副效应：语句被求值前值转变）
  • 后置（语句被求值后值转变）
  • 含对象，实行valueOf( ) 后获得的值举行加减

位操纵符：

  • 转换为32位整数，31位二进制数+ 1位标记位（0正1负）
  • 按位非 ~ 获得值的负值 – 1（底层操纵，比 – a – 1 快）
  • 按位与 & 二进制每位相与得出二进制值
  • 按位或 | 二进制每位相或得出二进制值
  • 按位异或^ 两位相异则为1，不然为0
  • 左移 << 挪动后补0，不影响标记位
  • 右移 >> 保存标记位，挪动后补0
  • 无标记右移 >>> 不保存标记位，负数平常右移后很大

布尔操纵符：

  • 非 ！
  • 与 && 短路操纵（有 false 则不往下实行），null 返回null，NaN返回NaN ，undefined返回undefined
  • 或 || 短路操纵（有true 则不往下实行 ）

乘性操纵符：

  • 隐式转换为数值后盘算，/ 除法 ，% 取余

加性操纵符：

  • + 加法， – 减法

关联操纵符：

  • < 、 >、 <=、 >=
  • 都为字符串时，比较字符串字符编码值
  • 有对象，转valueOf( )，不成则toString（ ）
  • 字符串比较，大写小于小写，如需比较可全转小写
  • 都为字符串的数字，则按编码比
  • 一个数字一个字符串，会转为数值
  • 转换出NaN，则效果false

相称操纵符：

  • 强迫转换规则：有布尔转为数值、有数有字符串转为数值
  • 只要一个对象，根据valueOf（）转换后比较
  • null == undefined，null !== undefined
  • 两个对象，比较是不是指向统一对象

前提操纵符：前提？‘真，取值’：‘假，取值’
赋值操纵符：

  • =、 +=、 *=、 /=、 %=、 <<=、 >>=、 >>>=（简化誊写，不影响机能）

逗号操纵符：

  • 分开多个操纵
  • a =（1,2,3,4）,a值为末了一个4

3.4 PS:

1. valueOf与toString

2. 负数的二进制示意：

  • 绝对值的二进制码，按位取反，加1，获得

3. 按位非运算符 ~ 

function fast() {
    let s = 2222222222; 
    let start1 = Date.now();
    for (var i = 1; i<10000000000;i++) { s = ~ s }; 
    console.log('fast',Date.now() - start1); 
 }; 
 function slow() {
    let s = 2222222222; 
    let start2 = Date.now();
    for (var i = 1; i<10000000000;i++) { s = - (s + 1) }; 
    console.log('slow',Date.now() - start2); 
 };
 fast();
 slow();

相差4-5秒左右，底层运算更快

4. && || 操纵
let d = { name: ‘aa’ } ,??代表某参数

  • d && ?? 返回??
  • ?? && d ??为true返回d，不然返回??
  • 有null NaN undefined 返回 对应null NaN undefined
  • d || ?? 返回 d
  • ?? || d ??为false返回d
  • d || e 返回 d
  • 都是null NaN undefined 返回 对应null NaN undefined

3.5 语句

  • if （前提） { 代码块 }
  • do-while 后测试轮回语句，while中满足则实行
  • while 前测试轮回语句
  • for ：while做不到，for也做不到、for( ; ; )三参数可选
  • for-in 轮回对象属性，递次不可展望
  • label 名字：语句，连系for轮回，轻易continue 名字 实行该操纵，break 名字 中缀名字操纵
  • break continue
  • with 将代码作用域设置到特定对象中，影响机能，不发起运用
with（location） { 
    var t = search.name;
    var w = hostname;
}
// 等同于
var t = location.seatch.name;
var w = location.hostname;
  • switch 全等比较（不举行范例转换），能够兼并状况，case可为变量、表达式，
switch (i) {
    case 25: 
        /* 兼并两种情况 */
    case 35: 
        alert("25 or 35");
        break;
    ...
}

3.6 函数

function （参数） {函数体}

  • 定义的参数个数能够≠传入参数个数，实用传参个数不定实行差别操纵
  • 可function acc（a）传acc( ) 或function acc（）传acc(1,2)
  • 内部可用arguments来接见参数，假如a对应arguments[0]，两值内存空间自力，但相互同步
  • 没有重载：函数没有署名，同名函数后定义的见效

读取这两个值会接见雷同的内存空间；它们的内存空间是自力的，但它们的值会同步。但这类影响是单向的：
修正定名参数不会转变arguments中对应的值。别的还要记着，假如只传入了一个参数，那末为arguments[1]设置的值不会反应到定名参数中。这是由于arguments对象的长度是由传入的参数个数决议的，不是由定义函数时的定名参数的个数决议的。

书中：修正定名参数不会转变arguments中对应的值。 现实转变arguments[0]会同步a ，转变a也会同步argumenets[0]

    原文作者：薄荷
    原文地址: https://segmentfault.com/a/1190000019396626
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞