JavaScript高级程序设计读书笔记

JavaScript高级程序设计读书笔记，更新到读完书吃透为止。计算机专业同学福利！总结了6年的JavaScript 高级程序设计思维导图，非常全面非常细致。需要拿去！Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点。

JavaScript高级程序设计

• 1. 什么是JavaScript
  • 1.1. JavaScript实现
    • 1.1.1. 核心（ECMAScript）
      • ECMAScript
        • 描述这门语言的如下部分
          • 语法
          • 类型
          • 语句
          • 关键字
          • 保留字
          • 操作符
          • 全局对象
    • 1.1.2. 文档对象模型（DOM）
      • Document Object Model
      • DOM视图
      • DOM事件
      • DOM样式
      • DOM遍历和范围
    • 1.1.3. 浏览器对象模型（BOM）
      • Browser Object Model
      • 弹出新浏览窗口的能力
      • 移动、缩放和关闭浏览器的能力
      • navigator对象，提供关于浏览器的详细信息
      • location对象，提供浏览器加载页面的详尽信息
      • screen对象，提供关于用户屏幕分辨率的详尽信息
      • performance对象，提供浏览器内存占用、导航行为和事件统计的详尽信息
      • 对cookie的支持
      • 其他自定义对象，如XMLHttpRequest和IE的ActiveXObject
• 2. HTML中的javaScript
  • 2.1. <script>元素
    • 2.1.1. 属性
      • src
        • 可选。表示包含要执行的代码的外部文件。
      • async
        • 不推荐
        • 可选。表示应该立即下载脚本，但不阻止其他页面动作。只对外部脚本有效。
        • 异步脚本不应该在加载期间修改DOM
      • charset
        • 可选。使用src属性制定的代码字符集。很少用。
      • crossorigin
        • 可选。配置相关请求的CORS设置。默认不实用CORS。
        • crossorigin="anonymous"配置文件请求不必设置凭据标志。
        • crossorigin="use-credentials"设置凭据标志，意味着出站请求会包含凭据。
      • defer
        • 可选。表示脚本可以延迟到文档完全被解析和显示后执行。只对外部文件有效。
        • 建议把推迟执行的脚本放在页面底部。
      • integrity
        • 可选。允许比对接收到的资源和执行的加密签名以验证子资源完整性。
        • 这个属性可以用于确保CDN不回提供恶意内容。
      • language
        • 废弃
      • type
        • 可选。代替language。一般为"text/javascript"
    • 2.1.2. 引入方式
      • 直接在网页中潜入JavaScript代码。或者在网页中包含外部JavaScript文件。
    • 2.1.3. 注意
      • js代码中不能出现字符串</script>。需要用转义字符 \ 转义。
      • 使用了src属性的script标签内部不能写js代码。
      • 浏览器会按照顺序依次解释引入的script标签，前提是他们没有defer和async属性。第二个script元素的代码必须在第一个script元素的代码解释完毕才能开始执行。
    • 2.1.4. 动态加载脚本
      • 文档头部显示声明动态请求文件
        • <link rel="preload" href="gibberish.js"
      • 设置同步动态加载
        • let script = document.createElement('script'); script.src = 'gibberish.js'; script.async = false; document.head.appendChild(script);
    • 2.1.5. <noscript>元素
      • 当 浏览器不支持脚本 或 浏览器对脚本的支持被关闭 时渲染<noscript>中的内容
• 3. 语言基础
  • 3.1. 语法
    • 3.1.1. 区分大小写
    • 3.1.2. 标识符
      • 标识符就是变量、函数、属性或函数参数的名称。
      • 标识符可以由一或多个下列字符组成：
        • 第一个字符必须是一个字母、下划线（_）或美元符号( $ );
        • 剩下的其他字符可以是字母、下划线、美元符号或数字。
      • 关键字和保留字不能作为标识符
  • 3.2. 关键字与保留字
    • 3.2.1. 关键字
      • break do in typeof case else instanceof var catch export new void class extends return while const finally super with continue for switch yield debugger function this default if throw delete import try
    • 3.2.2. 保留字
      • enum
      • 严格模式
        • implements package public interface protected static let private
      • 模块代码
        • await
  • 3.3. 变量
    • 3.3.1. var
      • var操作符定义的变量会成为包含它的函数的局部变量。
      • 声明的变量会自动提升到函数作用域顶部。
      • 函数作用域
      • 在全局作用域中声明的变量会成为window对象的属性。
    • 3.3.2. let
      • 块级作用域 { }
      • 不能重复声明
      • 暂时性死区
        • let声明的变量不会在作用域中被提升。
      • 在全局作用域中声明的变量不会成为window对象的属性。
    • 3.3.3. const
      • 声明时必须初始化变量。
      • 尝试修改const声明的变量会导致运行错误。
    • 3.3.4. 声明风格及最佳实践
      • 不使用var
      • 优先使用const ，let次之
  • 3.4. 数据类型
    • 3.4.1. typeof
      • 返回值类型
        • undefined
          • 由null派生而来，undefined == null为true
        • boolean
          • 转换为false的值
            • false ' ' 0 NaN null undefined
          • 其他都为true
        • number
          • 浮点值
            • 浮点值内存空间是整数的两倍，所以ECMAScript总是想方设法把值转换为整数。
              • 小数点后没有数字 如 1.
              • 小数点后数字为0 如 2.0
            • ECMAScript会将小数点后至少包含6个零的浮点值转换为科学记数法。
            • 浮点值的京都最高可达17位小数，但在算术计算中远不如整数精确。因此永远不要测试某个特定的浮点值。
          • 值的范围
            • 最小值
              • Number.MIN_VALUE
                • 5e-324
            • 最大值
              • Number.MAX_VALUE
                • 1.797 693 134 862 315 7e+308
            • 无穷
              • Infinity -Infinity
              • isFinite()函数用来判断一个值是不是有限大
          • NaN
            • 0、+0、-0相除会返回NaN
              • 0/0 0/-0 -0/0
            • 分子是其他数，分母是0、-0、+0 返回 Infinity 或 -Infinity
            • NaN不等于包括NaN在内的任何值。
          • 数值转换
            • Number()
              • 规则
                • 布尔值 true转为1 false转为0
                • 数值 直接返回
                • null 返回 0
                • undefined 返回 0
                • 字符串
                  • 如果字符串包含数值字符，包括带+ -，则转换为十进制数值。
                  • 如果字符串包含有效的浮点值格式，则转换为相应的浮点值
                  • 如果字符串包含有效的十六进制格式，则转换为对应的十进制整数值。
                  • 空字符串 返回0
                  • 其他情况 返回NaN
                • 对象
                  • 调用valueof()方法，并按照上述规则转换返回的值。如果转换的结果是NaN，则调用toString()方法，再按照转换字符串的规则转换。
            • parseInt( string，scale)
              • 转换为整数
              • 字符串最前面的空格会被忽略，从第一个非空格字符开始转换。
              • 如果第一个字符不是数字字符、+ 、- 立即返回NaN
              • 第二个参数用于制定进制数。
            • parseFloat()
              • 类似与parseInt的规则
              • 转换为小数
              • 始终忽略开头的 0
              • 只解析十进制，因此不能制定底数。十六进制始终返回0
        • string
          • 字符字面量
            • \n 换行
            • \t 制表
            • \b 退格
            • \r 回车
            • \f 换页
            • \\ 反斜杠\
            • \' 单引号
            • \"双引号
            • \` 反引号
            • \xnn 以十六进制编码nn表示的字符，其中n是十六进制数字0-F，例如\x41等于“A”
            • \unnnn 以十六进制编码nnnn表示的Unicode字符，例如\u03a3
          • 字符串长度可以用 length 属性获取。这个属性返回字符串中16位字符的个数。
          • 转换为字符串
            • toString()
              • 可用于 数值、布尔值、对象、字符串。
              • null和undefined没有此方法。
              • 对数值调用时，可以传参，表示以几进制来输出数值的字符串表示。
                • 10.toString(2) // 1010 10.toString(8) // 12
            • String()
              • 如果不确定一个值是不是null或undefined，可以使用String()。始终返回表示响应类型的字符串
              • 遵循如下规则。
                • 如果值有toString()方法，则调用该方法(不传参数)，并返回结果
                • 如果值为null，返回null
                • 如果值为undefined，返回undefined
            • + ''
              • 给一个值用加号加上空字符串也可以将其转换为字符串。
            • 模板字面量
              • ` `
              • 可以跨行定义字符串
              • 字符串插值
                • ${ }
                • 所有插入的值都会使用toString()强制转换为字符串
                • 插值表达式中可以调用函数和方法
              • 模板字面量标签函数
                • 通过标签函数可以自定义插值行为。标签函数会接受被插值记号分隔后的模板和对每个表达式求值的结果。
                • example
                  • <script> let a = 6; let b = 9; function simpleTag(strings,aValExpression,bValExpression,sumExpression){ console.log(strings); // strings:字符串数组，这个其实就是以${}分分隔符分割得到的数组 console.log(aValExpression); // 模板字符串中第一个${}的值 console.log(bValExpression); // 模板字符串中第二个${}的值 console.log(sumExpression); // 模板字符串中第三个${}的值 return 'foobar'; } let untaggedResult = `${ a } + ${ b } = ${ a + b }`; let taggedResult = simpleTag`${ a } + ${ b } = ${ a + b }`; // ["", " + ", " = ", ""] // 6 // 9 // 15 console.log(untaggedResult); // "6 + 9 = 15" console.log(taggedResult); // "foobar" </script>
              • 原始字符串
                • 使用模版字面量也可以直接获取原始的模版字面量内容(如换行符或Unicode字符)，而不是被转换后的字符表示。为此，可以使用默认的String.raw标签函数
                  • // 原始字符串 console.log(`\u00A9`); // © console.log(String.raw`\u00A9`); // \u00A9 console.log(`first line \n second line`); // first line // second line console.log(String.raw`first line \n second line`); // first line \n second line // 对于实际的换行符来说是不行的 不会被转换成转义序列的形式 console.log(`first line second line`); // first line // second line console.log(String.raw`first line second line`); // first line // second line
                • 另外也可以通过标签函数的第一个参数，即字符串数组的.raw属性取得每个字符串的原始内容
                  • function printRaw(strings){ console.log('Actual characters:'); for (const string of strings) { console.log(string); } console.log('Escaped characters'); for (const rawString of strings.raw){ console.log(rawString); } } printRaw`\u00A9${ 'and' }\n` // Actual characters: // © // // Escaped characters // \u00A9 // \n
        • object
          • 表示值为对象或null
          • null被理解为一个空的对象引用。
        • function
        • symbol
          • ES6新增的数据类型。原始数据类型。唯一、不可变的。