类型分类​

具体类型​

功能速记​

极简案例​

原始值（栈）​

Number​

数字（含 NaN、Infinity）​

let num = 10; let nan = NaN;​

​

String​

字符串（单 / 双引、模板符）​

let str = "abc"; let str2 = ${str}123;​

​

Boolean​

布尔值（true/false）​

let isOk = true; let isNo = false;​

​

Undefined​

未赋值（默认）​

let a; console.log(a); // undefined​

​

Null​

空对象指针​

let obj = null;​

​

Symbol（ES6）​

唯一值（避免冲突）​

let s1 = Symbol(); let s2 = Symbol(); s1 !== s2;​

​

BigInt（ES10）​

大整数（突破 Number 限制）​

let big = 123n; let max = 9007199254740991n + 1n;​

引用值（堆）​

Object（含 Array、Function 等）​

复杂数据（地址指向堆）​

let obj = {name: 'Tom'}; let arr = [1,2,3];​

创建方式​

功能速记​

极简案例​

字面量​

简洁直观（最常用）​

const obj = { name: 'Tom', age: 20 };​

构造函数​

new Object () 实例化​

const obj = new Object(); obj.name = 'Tom';​

工厂函数​

函数封装，批量创建​

function createObj(name){ return {name}; } const obj = createObj('Tom');​

原型链​

基于原型创建（Object.create）​

const proto = { say: ()=>alert('hi') }; const obj = Object.create(proto);​

定义方式​

功能速记​

关键特性​

极简案例​

声明式​

function 关键字定义​

函数提升（可先调用后定义）​

function fn(){ console.log('hi'); } fn();​

表达式​

赋值给变量 / 常量​

无提升（需先定义后调用）​

const fn = function(){ console.log('hi'); }; fn();​

箭头函数​

ES6 简写（=>）​

无 this 绑定、无 arguments 对象​

const fn = ()=>console.log('hi'); fn();​

BOM 对象​

核心功能​

极简案例​

window​

全局对象（弹窗、定时器）​

window.alert('hi'); // 弹窗；setTimeout(()=>{},1000); // 定时器​

location​

URL 读写与页面跳转​

console.log(location.href); // 读URL；location.href = 'https://baidu.com'; // 跳转​

navigator​

浏览器信息（平台 / 版本）​

console.log(navigator.userAgent); // 浏览器标识；console.log(navigator.platform); // 设备平台​

history​

历史记录（前进 / 后退）​

history.back(); // 后退；history.forward(); // 前进；history.pushState({},'','/page'); // 新增历史​

screen​

屏幕信息（宽高 / 色深）​

console.log(screen.width); // 屏幕宽；console.log(screen.height); // 屏幕高​

localStorage​

本地持久存储（永久）​

localStorage.setItem('name','Tom'); // 存；console.log(localStorage.getItem('name')); // 取​

sessionStorage​

会话存储（关闭页消失）​

sessionStorage.setItem('age',20); // 存；sessionStorage.removeItem('age'); // 删​

DOM 对象 / 功能​

核心功能​

极简案例​

document​

文档根节点（查 / 创元素）​

const div = document.getElementById('box'); // 查元素；const p = document.createElement('p'); // 创元素​

Element​

元素操作（增删改）​

div.appendChild(p); // 增子元素；div.removeChild(p); // 删子元素；div.setAttribute('class','red'); // 改属性​

NodeList​

类数组（需转真数组）​

const lis = document.querySelectorAll('li'); // 类数组；const arr = Array.from(lis); // 转真数组​

Event​

事件绑定（监听 / 触发）​

div.addEventListener('click',()=>alert('点击')); // 绑定点击事件​

选择器​

元素查询（常用 3 种）​

document.getElementById('box'); // ID查；document.querySelector('.box'); // 选第一个；document.querySelectorAll('div'); // 选所有​