Back to Details

fundamentals

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

JavaScript Fundamentals Skill

JavaScript 核心基础技能

Quick Reference Card

速查手册

Variable Declaration

变量声明

javascript
const PI = 3.14159;     // Immutable binding (preferred)
let count = 0;          // Reassignable
var legacy = "avoid";   // Function-scoped (avoid)
javascript
const PI = 3.14159;     // 不可变绑定（推荐使用）
let count = 0;          // 可重新赋值
var legacy = "avoid";   // 函数作用域（避免使用）

8 Data Types

8种数据类型

TypeExampletypeof
String
"hello"
"string"
Number
42
, 
3.14
, 
NaN
"number"
Boolean
true
, 
false
"boolean"
Null
null
"object"
Undefined
undefined
"undefined"
Symbol
Symbol('id')
"symbol"
BigInt
9007199254740991n
"bigint"
Object
{}
, 
[]
, 
fn
"object"
类型示例typeof
字符串
"hello"
"string"
数字
42
, 
3.14
, 
NaN
"number"
布尔值
true
, 
false
"boolean"
空值
null
"object"
未定义
undefined
"undefined"
Symbol
Symbol('id')
"symbol"
BigInt
9007199254740991n
"bigint"
对象
{}
, 
[]
, 
fn
"object"

Operators Cheat Sheet

运算符速查表

javascript
// Arithmetic
+ - * / % **

// Comparison (always use strict)
=== !== > < >= <=

// Logical
&& || !

// Nullish
?? ?.

// Assignment
= += -= *= /= ??= ||= &&=
javascript
// 算术运算符
+ - * / % **

// 比较运算符（始终使用严格比较）
=== !== > < >= <=

// 逻辑运算符
&& || !

// 空值运算符
?? ?.

// 赋值运算符
= += -= *= /= ??= ||= &&=

Control Flow Patterns

控制流模式

javascript
// Early return (preferred)
function validate(input) {
  if (!input) return { error: 'Required' };
  if (input.length < 3) return { error: 'Too short' };
  return { valid: true };
}

// Switch with exhaustive handling
function getColor(status) {
  switch (status) {
    case 'success': return 'green';
    case 'warning': return 'yellow';
    case 'error': return 'red';
    default: return 'gray';
  }
}
javascript
// 提前返回（推荐使用）
function validate(input) {
  if (!input) return { error: '必填项' };
  if (input.length < 3) return { error: '长度过短' };
  return { valid: true };
}

// 带穷尽处理的Switch语句
function getColor(status) {
  switch (status) {
    case 'success': return 'green';
    case 'warning': return 'yellow';
    case 'error': return 'red';
    default: return 'gray';
  }
}

Type Coercion Rules

类型转换规则

javascript
// Explicit conversion (preferred)
Number('42')     // 42
String(42)       // "42"
Boolean(1)       // true

// Truthy values: non-zero numbers, non-empty strings, objects
// Falsy values: 0, "", null, undefined, NaN, false
javascript
// 显式转换（推荐使用）
Number('42')     // 42
String(42)       // "42"
Boolean(1)       // true

// 真值：非零数字、非空字符串、对象
// 假值：0、""、null、undefined、NaN、false

Modern Operators

现代运算符

javascript
// Nullish coalescing
const name = input ?? 'Guest';     // Only null/undefined

// Optional chaining
const city = user?.address?.city;  // Safe navigation

// Logical assignment
config.debug ??= false;            // Assign if nullish
javascript
// 空值合并运算符
const name = input ?? 'Guest';     // 仅当值为null/undefined时生效

// 可选链运算符
const city = user?.address?.city;  // 安全导航

// 逻辑赋值运算符
config.debug ??= false;            // 仅当值为nullish时赋值

Troubleshooting

问题排查

Common Issues

常见问题

ErrorCauseFix
ReferenceError: x is not defined
Variable not declaredCheck spelling, scope
TypeError: Cannot read property
Accessing null/undefinedUse optional chaining 
?.
NaN
result		Invalid number operationValidate input types
Unexpected 
true
/
false
Loose equality 
==
Use strict 
===
错误原因解决方法
ReferenceError: x is not defined
变量未声明检查拼写和作用域
TypeError: Cannot read property
访问null/undefined值使用可选链运算符 
?.
结果为
NaN
无效的数字运算验证输入类型
意外的
true
/
false
使用了松散相等
==
使用严格相等
===

Debug Checklist

调试检查清单

javascript
// 1. Check type
console.log(typeof variable);

// 2. Check value
console.log(JSON.stringify(variable));

// 3. Check for null/undefined
console.log(variable === null, variable === undefined);

// 4. Use debugger
debugger;
javascript
// 1. 检查类型
console.log(typeof variable);

// 2. 检查值
console.log(JSON.stringify(variable));

// 3. 检查是否为null/undefined
console.log(variable === null, variable === undefined);

// 4. 使用调试器
debugger;

Production Patterns

生产环境模式

Input Validation

输入验证

javascript
function processNumber(value) {
  if (typeof value !== 'number' || Number.isNaN(value)) {
    throw new TypeError('Expected a valid number');
  }
  return value * 2;
}
javascript
function processNumber(value) {
  if (typeof value !== 'number' || Number.isNaN(value)) {
    throw new TypeError('需要有效的数字');
  }
  return value * 2;
}

Safe Property Access

安全属性访问

javascript
const city = user?.address?.city ?? 'Unknown';
const callback = options.onComplete?.();
javascript
const city = user?.address?.city ?? '未知';
const callback = options.onComplete?.();

Related

相关内容

  • Agent 01: JavaScript Fundamentals (detailed learning)
  • Skill: functions: Function patterns
  • Skill: data-structures: Objects and arrays
  • Agent 01: JavaScript核心基础（详细学习）
  • Skill: functions: 函数模式
  • Skill: data-structures: 对象与数组