前端学习日志 —— JavaScript 基础知识(2)

5 阅读2分钟

四、变量(Variable)


1️⃣ 基本概念

变量是用于存储数据的容器

👉 使用 let 声明变量:

let message;

message = 'Hello';

alert(message);

👉 简写:

let message = 'Hello';

2️⃣ var 与 let

(1)相同点
  • 都用于声明变量
  • 都可以赋值
  • 值都可以修改

(2)不同点(重点 ⭐)
特性varlet
作用域函数作用域块级作用域
重复声明✅ 可以❌ 不可以
变量提升提升且为 undefined提升但存在“暂时性死区”

(3)变量提升对比

👉 var

console.log(a); // undefined
var a = 5;

👉 相当于:

var a;
console.log(a);
a = 5;

👉 let

console.log(b); // ❌ 报错
let b = 5;

📌 原因:存在暂时性死区(TDZ)


3️⃣ 总结

  • 推荐使用:let
  • 避免使用:var
  • 理解重点:作用域 + 提升 + TDZ

五、类型转换(Type Conversion)


1️⃣ 字符串转换

👉 当需要字符串时自动发生:

String(123); // "123"

2️⃣ 数字转换

👉 常见方式:

Number("123"); // 123

📌 转换规则
转换结果
undefinedNaN
null0
true / false1 / 0
字符串去空格后解析数字,否则 NaN

📌 示例
Number("   123   "); // 123
Number("123z");      // NaN
Number(true);        // 1
Number(false);       // 0

3️⃣ 布尔转换

👉 使用:

Boolean(value);

📌 转换规则

👉 以下为 false

  • 0
  • ""(空字符串)
  • null
  • undefined
  • NaN

👉 其他都为 true


📌 特别注意(易错点 ⚠️)
Boolean("0"); // true
Boolean(" "); // true

👉 结论:只要是非空字符串就是 true


4️⃣ 总结

  • 类型转换分为:字符串 / 数字 / 布尔
  • 注意:NaN"0"、空字符串

六、基础运算符(Operators)


1️⃣ 数学运算

  • +
  • -
  • *
  • /
  • 取余 %
  • 幂运算 **

2️⃣ 取余 %

5 % 2 // 1
8 % 3 // 2

👉 表示“余数”,不是百分比


3️⃣ 幂运算 **

2 ** 3 // 8
4 ** (1/2) // 2(平方根)

4️⃣ 加号 +(重点 ⚠️)

👉 两种作用:

(1)数字 → 加法
1 + 2 // 3
(2)字符串 → 拼接
'1' + 2 // "12"
2 + '1' // "21"

📌 规则:
👉 只要有一个是字符串 → 全部转字符串


5️⃣ 自增 / 自减(++ / --)


(1)基本用法
let a = 1;
a++; // 2
a--; // 1

(2)前置 vs 后置(重点 ⭐)
写法返回值
++a新值
a++旧值

👉 示例:

let a = 1;
let b = ++a; // b = 2
let a = 1;
let b = a++; // b = 1

📌 记忆口诀:

👉 “前加加,先加再用;后加加,先用再加”


6️⃣ 逗号运算符 ,

👉 作用:执行多个表达式,返回最后一个结果

let a = (1 + 2, 3 + 4);
console.log(a); // 7

📌 注意:

  • 优先级很低(比 = 还低)
  • 必须加括号

7️⃣ 总结

  • 运算符重点:

    • +(字符串拼接)
    • ++/--(前置 vs 后置)
    • %(取余)
  • 逗号运算符很少用,但要认识


✅ 总体总结(这一部分)

  • 变量核心:let + 作用域 + 提升
  • 类型转换:记住 false 的五种情况
  • 运算符重点:+++%