心流笔记

主题

Wilson2025-03-15 04:26:35前端js
2389
8.9m

JavaScript 语法基础 ​

注释 ​

  • 单行注释（快捷键 Ctrl + /）
js
// 单行注释
  • 多行注释（快捷键 Shift + Alt + A）
js
/*
   多行注释  
*/

结束符 ​

使用英文分号;代表语句结束。在实际开发中，大多数情况下可以省略，浏览器可以自动推断语句结束位置，回车会被解析为;

少数需要手动加分号的情况有：以括号、方括号、正则开头的斜杆、加号、减号作为行首时。

输入输出 ​

这里的输入输出，不是其他语言中的 I/O，只单指与浏览器进行交互

js
// 输入
prompt('输入内容')

// 输出
document.write('要输出的内容') // 向body内输出内容，可以解析标签
document.writeln('要输出的内容')
alert('要输出的内容') // 页面弹出警告对话框
console.log('要输出的内容') // 控制台打印

alert() 和 prompt() 它们会跳过页面渲染先被执行

字面量 ​

字面量是指在代码中直接表示值的特殊语法结构。字面量是 JavaScript 中创建数据的一种简单方式，它允许你直接在代码中定义一些基本的数据结构，而不是通过调用函数或构造器。如：

  • 3000：数字字面量
  • 'hello world'： 字符串字面量
  • true： 布尔字面量
  • {}：对象字面量
  • []：数组字面量
  • /ab+c/i：正则表达式字面量
  • function fn() {}、() => {}：函数字面量

字面量永远不能出现在等号的左边，等号的左边只能是变量

变量 ​

JavaScript 中，变量指的是一个可以改变的量。可以把变量看成存储数据的容器，本质上是程序在内存中申请的一块用来存放数据的小空间

image-20240115195407655

变量名只能包含字母、数字、下划线、$，且不能以数字开头，此外不能使用关键字且严格区分大小写。在命名变量的过程中，要尽可能的让变量具有意义，一个变量包含多个单词时，使用小驼峰命名法（如userName）

与很多语言一样，JS 也可以同时声明多个变量并赋值，不过 JS 具有变量没有类型而值有类型的特点（弱类型）声明变量使用let、var，无需声明类型

js
var a // es6之后不推荐使用var
let b

// 可以多变量声明，一般都是分开声明
let age = 18,uname = 'moss'

其他变量相关知识点，如变量提升、块级作用域等，见JavaScript进阶部分

常量 ​

使用const声明的变量称为常量，当某个变量永远不会改变的时候，就可以使用const来声明

  • 常量无法修改，强制修改会报错

  • 常量必须要初始化，定义的时候必须要进行赋值

  • 对于值常量（固定值），常量名推荐全大写，单词间以_分割，如：UPPER_SNAKE_CASE

  • const 声明并不会真的保护数据不被改变。 为了确保数据不被改变，JavaScript 提供了一个函数 Object.freeze，任何更改对象的尝试都将被拒绝，如果脚本在严格模式下运行，将抛出错误

javascript
"use strict"
const obj = {
  name: "FreeCodeCamp",
  review: "Awesome"
};
Object.freeze(obj);
obj.review = "bad"; // 报错
obj.newProp = "Test"; // 报错
console.log(obj); // { name: "FreeCodeCamp", review: "Awesome" }

严格模式 ​

严格模式可以帮开发者及早发现错误，使代码更安全规范，推荐在代码中一直保持严格模式运行

基本差异 ​

  • 变量必须使用关键词声明，未声明的变量不允许赋值
js
"use strict"
url = 'www.baidu.com' // url is not defined
  • 关键词不允许做变量使用
js
"use strict"
var public = 'hello' // Unexpected strict mode reserved word
  • 变量参数不允许重复定义
js
"use strict"
function fn(name, name) {}
  • 可以单独为函数设置严格模式
js
function strict(){
  "use strict"
  return "严格模式"
}
function notStrict() {
  return "正常模式"
}
  • 为了在多文件合并时，防止全局设置严格模式对其他没使用严格模式文件的影响，将脚本放在一个执行函数中
js
(function () {
  "use strict"
  function fn(name, name) {}
})();

解构差异 ​

  • 如果解构赋值中的变量未事先声明，会抛出ReferenceError
js
// 严格模式
'use strict';
const [a, b] = [1, 2] // 如果没有声明过a和b，会抛出ReferenceError
  • 在函数参数中，解构赋值不会影响外层作用域的同名变量
js
// 严格模式
function example({x}) {
  x = 2 // 这里会抛出TypeError，因为参数不能被赋值
}

流程控制 ​

在JavaScript中，共有三种流程控制方式：顺序结构、选择结构、循环结构

  • 顺序结构：代码按照从上到下、从左到右的顺序执行

    image-20230510070920011

  • 选择结构：根据条件判断来决定使用哪一段代码。包括单向选择、双向选择、多向选择。无论是哪一种，都只执行其中的一个分支

    image-20230510071223590

  • 循环结构：根据条件来判断是否重复执行某一段程序。若条件为 true，则继续循环；若条件为 false，则退出循环

    image-20230510071314677

分支语句 ​

if分支语句

  • if语句分为：单分支、双分支、多分支
  • 括号内的结果不是布尔类型时，会发生隐式类型转换，转换为布尔值
  • if语句中只有一行时，可以省略{}
js
// 单分支
if (条件) {
  // 满足条件要执行的代码
}

// 双分支
if (条件) {
  // 满足条件要执行的代码
} else {
  // 不满足条件要执行的代码
}

// 多分支
if (条件1) {
  // 代码1
} else if (条件2) {
  // 代码2       
} else if (条件3) {
  // 代码3
} else {
  // 代码n
}
// 先判断条件1，若满足条件1就执行代码1，其他不执行
// 若条件1不满足则向下判断条件2，满足条件2执行代码2，其他不执行
// 若依然不满足继续往下判断，依次类推
// 若以上条件都不满足，执行else里的代码n

Switch语句

  • 找到跟括号里数据全等的 case 值，并执行里面对应的代码，若没有全等 === 的则执行default内的代码
  • switch case语句一般用于等值判断，不适合于区间判断
  • switch case一般需要配合break关键字使用，没有break会造成case穿透
js
switch (数据) {
  case 值1:
    代码1
    break;
  case 值2:
    代码2
    break;
  default:
    代码n
    break;
}

循环语句 ​

while循环

js
// 符合条件，一直循环，否则跳出循环体
while (循环条件) {
  要重复执行的代码(循环体)
}

while 循环三要素：

  • 循环变量初始化
  • 循环条件（判断条件是否成立，成立执行循环体代码，不成立，循环结束）
  • 变量更新（自增或自减）
js
//变量初始化
let i = 1
//循环条件
while (i <= 3) {
   document.write(`我会循环三次<br>`)
   //变量更新
   i++ 
}

do...while 循环：不论什么情况，都会执行 do循环里的代码，然后当 while条件被评估为 true的时，继续运行循环

for循环

  • 初始化语句只会在执行循环开始之前执行一次，通常用于定义和设置循环变量
  • 循环条件语句会在每一轮循环的开始前执行，条件为 true时执行循环。这意味着，如果条件在一开始就为 false，这个循环将不会执行
  • 终止循环表达式在每次循环迭代结束， 在下一个条件检查之前时执行，通常用来递增或递减循环计数
js
for (初始化语句; 循环条件语句; 终止循环表达式) {
  //循环体
}

循环退出：continue（中止本次循环，开始下次循环）、break（中止整个循环）

无限循环：while(true) 、for(;;)。都需使用break退出循环

异常处理 ​

异常处理是指预估代码执行过程中可能发生的错误，最大程度避免错误的发生

主要包含三个部分：

  • throw：抛出异常信息，程序终止执行用于在try中手动抛出错误，立即触发对应的catch块
  • Error：内置对象，配合throw使用，能够设置更详细的错误信息
  • try...catch...finally：捕获错误信息。try代码块为可能发生错误的代码、catch代码块对应错误发生后执行的代码、finally代码块为最终且一定执行的代码
js
function divide(a, b) {
  try {
    // 可能发生错误的代码
    if (b === 0) {
      // 如果除数为0，抛出异常
      throw new Error("Division by zero is not allowed.")
    }
    return a / b
  } catch (e) {
    // 捕获错误信息并处理
    console.error("An error occurred: ", e.message)
    // 可以选择返回一个默认值或执行其他错误恢复操作
    return null
  } finally {
    // 无论是否发生错误，都会执行的代码
    console.log("Execution of the divide function is complete.")
  }
}

// 使用这个函数
var result = divide(10, 2) // 正常情况，期望得到 5
console.log(result) // 输出: 5

result = divide(10, 0) // 异常情况，除数为0
console.log(result) // 输出: null

try...catch 并不是异步操作，不影响 JavaScript 的单线程执行模型。异步操作中使用 try...catch 需要注意错误可能在Promise的.then()或.catch()中被捕获，或在使用async/await时通过try...catch包裹异步函数内部的代码来捕获错误

可以用debugger来打断点调试，不过一般用的比较少，了解即可

最近更新