JavaScript 基础——1. 基本概念

一、HTML 中的 JavaScript

• 内联 JavaScript

<script>
/**
* 这里是内联 JavaScript 代码
*/

</script>

• 外部 JavaScript
  • <script src="javascrpt_src.js" async defer></script>
  • async
    • 普通脚本：被并行请求，并尽快解析和执行
    • 模块脚本：脚本及其所有依赖都会在延缓队列中执行，都会被并行请求，并尽快解析和执行

 二、JavaScript 语法

1. 标识符

和其他语言的标识符规范相同，不要出现奇奇怪怪的字符一般就没问题

2. 注释

• // 行内注释
• /* 块级注释 */

3. 严格模式

• ES5 的概念
• "use strict"

4. 作用域

概念：执行代码的上下文。

4.1 全局作用域

• 位于最顶层的作用域，即执行代码的最外层的上下文

4.2 函数作用域

• 定义一个函数，函数内的区域即为函数作用域

4.3 块级作用域

• 以花括号为界限的一个独立区域
• 其他语言中的作用域，通常都是块级的

{
  // 这里是块级作用域内部
}

4.4 作用域链

• 一个作用域内包含了另一个作用域，即形成了作用域的嵌套
• 作用域的嵌套关系，即形成了作用域链

5. 变量

• JavaScript 中，变量的声明使用关键字 var/let/const
• JavaScript 中，函数的声明使用关键字 function
• JavaScript 中，变量的数据类型是动态的
• JavaScript 中，只有值的数据类型才是固定的

5.1 变量声明

• var  variableName = value
  • 变量的作用域：函数作用域
  • 特性：变量声明提升
  • 如果定义在全局作用域，且为非严格模式，则变量会被添加到全局对象上，作为全局对象的属性
• let variableName = value
  • 变量的作用域：块级作用域
  • 特性：
    • 暂时性死区
    • 不可重复声明相同标识符的变量
  • 即使定义在全局作用域，任何模式下，都不会被添加到全局对象上
• const variableName = value
  • 变量的作用域：块级作用域
  • 特性：
    • 暂时性死区
    • 不可重复声明相同标识符的变量
    • 声明时必须为变量赋值，且赋值后不可重新赋值
  • 即使定义在全局作用域，任何模式下，都不会被添加到全局对象上
• 最佳实践：优先使用 const 声明变量，其次是 let，尽可能不要使用 var

5.2 数据类型

• 基本类型
  • undefined
  • null
  • boolean
  • number
  • string
  • symbol (ES6 新增)
  • bigint (es2020 新增)
• 复杂类型
  • object
• 复杂数据类型其实只有 object 一种，常用的 Map、Set、Array 等最终都继承自 Object

5.3 值类型

• 原始值
  • 按字面值访问
  • 基本数据类型的字面量值都是原始值
  • 值复制时，直接复制字面量值的拷贝
  • 没有任何属性和方法
• 引用值
  • 按引用访问
  • 任何继承自 Object 的对象实例的值，都是引用值
  • 值复制时，直接复制引用，复制之后，这两个引用指向同一个实例
  • 可添加、删除、修改、获取引用值的属性和方法

6. 操作符

• JavaScript 中的操作符和其他语言的操作符大同小异，下面仅列举一些特殊的操作符
• 逻辑操作符
  • &&：逻辑与，具有短路的效果，返回两个操作数中的某一个
    • 第一个操作数的结果为假时，返回第一个操作数，否则返回第二个操作数
  • ||：逻辑或，具有短路的效果，返回操作数中的某一个
    • 第一个操作数为真时，返回第一个操作数，否则返回第二个操作数
  • 注意：这两个操作符返回的结果不一定是 true/false，而是返回操作数中的某一个！
• 指数操作符：a ** b，即 a 的 b 次幂
• 一元加/减：+/-，常用于将其他数据类型的值转为 number 类型
• 比较操作符：==/!=，===/!==
  • ==/!= 在比较过程中可能会发生操作数的数据类型转换
  • ===/!== 两个操作数的数据类型不同时，一定结果一定为 false/true，比较时不会发生数据类型转换
• 类型操作符：typeof
  • typeof undefined => undefined
  • typeof true/false => boolean
  • typeof 任意数字 => number
  • typeof 字符串字面量 => string
  • typeof 任意 symbol 值 => symbol
  • typeof null => object
  • typeof 任意对象 => object
  • 注意：typeof null => object，是因为 null 在底层表示时前三位为 0，而JavaScript 在底层表示对象时，前三位均为 0
• 引用操作符 instanceof
  • obj instanceof anotherObj
  • 在原型链上查找，如果原型链上有 anotherObj，则返回 true
• 属性删除操作符：delete
  • 不推荐使用，性能低
  • 通常直接将 key 对应的 value 指定为 undefined 来替代删除属性的操作

7. 流程控制

7.1 条件语句

• if (exp)
• if (exp) { /**/ } else { /**/ }
• if (exp) { /**/ } else if (exp2) { /**/ }
• switch...case

7.2 循环语句

• while
• do...while
• for
• for...in：迭代遍历对象的非 symbol key
• for...of：迭代变量对象的 value

7.3 标签语句

• 标签通常是被放到循环语句代码块前面
• 标签也可以放到普通的代码块前面
• 通常与 contine/break 联合使用

7.4 with 语句

• 不推荐使用