编程是一种应用科学，它和理论不一样，比谁背的多，不是比谁理解的多。
C++
轮子
二维数组：
vector<vector<int>> matrix(M, vector<int>(N, 0));
哈希表/字典：
unordered_map<int, int> m;
m[key] = val;
val = m[key];
if (m.count(key) > 0)
if (m.find(key) != m.end())
m.erase(key);
m.size();
集合：
unordered_set<int> s;
s.insert(val);
if (s.count(val) > 0)
s.erase(val);
s.size();
栈：
stack<int> st;
st.push(val);
st.pop();
val = st.top();
if (st.empty())
队列：
queue<int> q;
q.push(val);
q.pop();
val = q.front();
if (q.empty())
堆：
priority_queue<int> pq;
priority_queue<int, vector<int>, greater<int>> min_pq;
priority_queue<int> pq(vec.begin(), vec.end());
pq.push(val);
pq.pop();
val = pq.top();
Python
轮子
二维数组：
matrix = [[0] * N for _ in range(M)]
哈希表/字典：
d = {}
d[key] = val
val = d[key]
if key in d:
del d[key]
len(d)
集合：
s = set()
s.add(val)
if val in s:
s.remove(val)
len(s)
栈：
st = []
st.append(val)
val = st.pop()
val = st[-1]
if not st:
队列：
q = deque()
q.append(val)
val = q.popleft()
val = q[0]
if not q:
堆：
hp = []
heapq.heapify(hp)
heapq.heappush(hp, val)
val = heapq.heappop(hp)
val = hp[0]
JavaScript
轮子
二维数组：
const matrix = Array.from({ length: M }, () => new Array(N).fill(0));
哈希表/字典：
const m = new Map();
m.set(key, val);
val = m.get(key);
if (m.has(key))
m.delete(key);
m.size;
集合：
const s = new Set();
s.add(val);
if (s.has(val))
s.delete(val);
s.size;
栈：
const st = [];
st.push(val);
val = st.pop();
val = st[st.length - 1];
if (st.length === 0)
Map, Reduce, Filter
这些都是针对Array的，如果不是Array要转换成Array。
const patients = [{ id: 1, name: 'Alice', age: 25, condition: 'Flu', visits: 2 },{ id: 2, name: 'Bob', age: 65, condition: 'Diabetes', visits: 10 },{ id: 3, name: 'Charlie', age: 40, condition: 'Flu', visits: 1 },{ id: 4, name: 'David', age: 72, condition: 'Hypertension', visits: 5 }
];const patientNames = patients.map(p => p.name);
console.log(patientNames); const enrichedPatients = patients.map(p => {return {...p,isSenior: p.age >= 65};
});const seniors = patients.filter(p => p.age > 60);
console.log(seniors.length);const fluPatients = patients.filter(p => p.condition === 'Flu');const totalVisits = patients.reduce((acc, curr) => {return acc + curr.visits;
}, 0); console.log(totalVisits);const patientsByCondition = patients.reduce((acc, curr) => {if (!acc[curr.condition]) {acc[curr.condition] = [];}acc[curr.condition].push(curr.name);return acc;
}, {});console.log(patientsByCondition);
{Flu: ['Alice', 'Charlie'],Diabetes: ['Bob'],Hypertension: ['David']
}const seniorNamesUpper = patients.filter(p => p.age > 60).map(p => p.name).map(name => name.toUpperCase());console.log(seniorNamesUpper);
React
前端的核心是“组件化开发”和“虚拟DOM”。
React是纯前端（另一个框架是Vue），需要有HTML，CSS，JavaScript基础。一般在index.html里包含jsx文件。React用的是jsx，即JavaScript XML。浏览器只能读transpiled JSX，也就是转译成的JS。JS的升级版叫TS/TypeScript，JSX对应的是TSX。
React只能有单一根节点。React操纵的是虚拟DOM，计算完才改变真实DOM。
function Car() {const power = 218;return (<h1>My Car</h1><p>It has power * 1.36 horsepower</p>);
上面的函数（或者叫“React函数组件”）必须在下面的render块中包含才能渲染。
import { createRoot } from 'react-dom/client'createRoot(document.getElementById('sandy')).render(<p>Welcome!</p>
)
React有两种组件，旧的是Class组件（跳过），新的是Function组件（如上文）。Keys对identify elements很有帮助。
function Car(props) {return (<><h2>My {props.carinfo.name} {props.carinfo.model}!</h2><p>It is {props.carinfo.color} and it is from {props.carinfo.year}!</p></>);
}const carInfo = {name: "Ford",model: "Mustang",color: "red",year: 1969
};createRoot(document.getElementById('root')).render(<Car carinfo={carInfo} />
);
这里的<Car carinfo={carInfo} />相当于给函数组件传参数。
JSX默认会给用户输入渲染成text，所以自带一定程度的防注入。
Hook/钩子是一些特殊的JavaScript函数，如useEffect（做渲染之外的工作）和useState（初始化）：
function FavoriteColor() {const [color, setColor] = useState("red");return (<><h1>My favorite color is {color}!</h1><buttontype="button"onClick={() => setColor("blue")}>Blue</button></>)
}createRoot(document.getElementById('root')).render(<FavoriteColor />
);
useEffect每一次render都会执行，所以要加[]，否则每次状态发生变化React都会渲染一次：
function Timer() {const [count, setCount] = useState(0);useEffect(() => {setTimeout(() => {setCount((count) => count + 1);}, 1000);}, []); // <- add empty brackets herereturn <h1>I've rendered {count} times!</h1>;
}createRoot(document.getElementById('root')).render(<Timer />
);