xxx游-前端开发工程师

function quickSort(arr) {
  if (arr.length <= 1) return arr;
  
  const pivot = arr[Math.floor(arr.length / 2)];
  const left = arr.filter(x => x < pivot);
  const middle = arr.filter(x => x === pivot);
  const right = arr.filter(x => x > pivot);
  
  return [...quickSort(left), ...middle, ...quickSort(right)];
}

头 → 节点1 → 节点2 → 节点3 → null

头 → 节点1 → 节点2 → 节点3 → 头（循环）

class Node {
  constructor(data) {
    this.data = data;
    this.next = null;
  }
}
 
class LinkedList {
  constructor() {
    this.head = null;
  }
  
  append(data) {
    const newNode = new Node(data);
    if (!this.head) {
      this.head = newNode;
    } else {
      let current = this.head;
      while (current.next) {
        current = current.next;
      }
      current.next = newNode;
    }
  }
}

class SinglyLinkedList {
  constructor() {
    this.head = null;
    this.size = 0;
  }
  
  append(data) {
    const node = new Node(data);
    if (!this.head) {
      this.head = node;
    } else {
      let current = this.head;
      while (current.next) current = current.next;
      current.next = node;
    }
    this.size++;
  }
  
  insert(data, index) {
    if (index < 0 || index > this.size) return false;
    
    const node = new Node(data);
    if (index === 0) {
      node.next = this.head;
      this.head = node;
    } else {
      let current = this.head;
      let previous;
      let count = 0;
      while (count < index) {
        previous = current;
        current = current.next;
        count++;
      }
      node.next = current;
      previous.next = node;
    }
    this.size++;
    return true;
  }
  
  remove(index) {
    if (index < 0 || index >= this.size) return null;
    
    let current = this.head;
    if (index === 0) {
      this.head = current.next;
    } else {
      let previous;
      let count = 0;
      while (count < index) {
        previous = current;
        current = current.next;
        count++;
      }
      previous.next = current.next;
    }
    this.size--;
    return current.data;
  }
}
 
class Node {
  constructor(data) {
    this.data = data;
    this.next = null;
  }
}

class CircularLinkedList extends SinglyLinkedList {
  append(data) {
    const node = new Node(data);
    if (!this.head) {
      this.head = node;
      node.next = this.head;  // 关键：指向自己
    } else {
      let current = this.head;
      while (current.next !== this.head) {  // 循环条件改变
        current = current.next;
      }
      current.next = node;
      node.next = this.head;  // 新节点指向头
    }
    this.size++;
  }
}

// GET
fetch('/api/users?page=1&limit=10');
 
// POST
fetch('/api/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'John' })
});

客户端          服务器
  |              |
  |-- SYN -->    |     (1) 客户端发送 SYN
  |              |
  |    <-- SYN-ACK --|  (2) 服务器回复 SYN-ACK
  |              |
  |-- ACK -->    |     (3) 客户端发送 ACK
  |              |
  | 连接已建立   |

客户端          服务器
  |              |
  |-- FIN -->    |     (1) 客户端发送 FIN
  |              |
  |    <-- ACK --|     (2) 服务器回复 ACK
  |              |
  |    <-- FIN --|     (3) 服务器发送 FIN
  |              |
  |-- ACK -->    |     (4) 客户端发送 ACK
  |              |
  | 连接已关闭    |

请求行
GET /api/users HTTP/1.1

请求头
Host: example.com
User-Agent: Mozilla/5.0
Content-Type: application/json
Authorization: Bearer token

空行

请求体（可选）
{ "name": "John" }

状态行
HTTP/1.1 200 OK

响应头
Content-Type: application/json
Content-Length: 100
Set-Cookie: xxx=yyy

空行

响应体
{ "id": 1, "name": "John" }

<!-- JS 延迟加载，不阻塞 DOM -->
<script defer src="script.js"></script>
 
<!-- JS 异步加载 -->
<script async src="script.js"></script>

const obj = {};
obj.__proto__ === Object.prototype;
Object.prototype.__proto__ === null;  // 原型链顶端

function Parent() {
  this.x = 1;
}
 
function Child() {
  this.y = 2;
}
 
Child.prototype = new Parent();
const child = new Child();
 
console.log(child.x);  // 1（通过原型链找到）

child.__proto__ = Child.prototype (Parent 实例)
  → Parent.prototype
    → Object.prototype
      → null（最顶端）

const obj = { x: 1 };
Object.setPrototypeOf(obj, { y: 2 });
 
// hasOwnProperty：仅检查自身属性
console.log(obj.hasOwnProperty('x'));   // true
console.log(obj.hasOwnProperty('y'));   // false
 
// in 操作符：检查自身和原型链
console.log('x' in obj);                // true
console.log('y' in obj);                // true

function outer() {
  const x = 1;
  return function inner() {
    return x;
  };
}
 
const fn = outer();
console.log(fn());  // 1

function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}
 
// 使用
const search = debounce((query) => {
  console.log(`搜索: ${query}`);
}, 500);
 
input.addEventListener('input', (e) => {
  search(e.target.value);
});

Promise.resolve()
  .then(() => {
    console.log('1');
    Promise.resolve().then(() => console.log('2'));
  })
  .then(() => {
    console.log('3');
  });
 
// 输出：1 2 3
// 微任务队列不是逐个清除，而是一直执行直到清空

// useState：状态
const [count, setCount] = useState(0);
 
// useEffect：副作用
useEffect(() => {
  // 组件挂载、更新时执行
  return () => {
    // 清理函数
  };
}, [dependencies]);
 
// useContext：上下文
const value = useContext(MyContext);
 
// useReducer：复杂状态管理
const [state, dispatch] = useReducer(reducer, initialState);
 
// useMemo：记忆值
const memoValue = useMemo(() => {
  return computeExpensiveValue(a, b);
}, [a, b]);
 
// useCallback：记忆函数
const memoFn = useCallback(() => {
  doSomething(a, b);
}, [a, b]);
 
// useRef：保持引用
const inputRef = useRef(null);

Promise.all([
  Promise.resolve(1),
  Promise.resolve(2),
  Promise.resolve(3)
]).then(values => {
  console.log(values); // [1, 2, 3]
});
 
// 一个失败，整体失败
Promise.all([
  Promise.resolve(1),
  Promise.reject('error')
]).catch(err => {
  console.log(err); // 'error'
});

Promise.race([
  Promise.resolve(1),
  new Promise(r => setTimeout(() => r(2), 100))
]).then(value => {
  console.log(value); // 1（首个完成）
});

客户端          服务器
  |              |
  |-- ClientHello---|  (1) 发送支持的加密套件
  |              |
  |<-- ServerHello --|  (2) 选择加密套件、发送证书
  |              |
  |<-- Certificate --|  (3) 服务器证书
  |              |
  |<-- ServerKeyExchange --|  (4) 密钥交换
  |              |
  |-- ClientKeyExchange--|  (5) 客户端密钥交换
  |              |
  |-- ChangeCipherSpec--|  (6) 通知改用加密
  |              |
  |-- Finished ---|  (7) 握手完成
  |              |
  |<-- ChangeCipherSpec--|  (8) 服务器通知
  |              |
  |<-- Finished --|  (9) 服务器握手完成
  |              |
  | 加密通信开始   |

Cache-Control: max-age=3600  // 1小时内直接使用
Expires: Wed, 21 Oct 2025 07:28:00 GMT

Last-Modified: Wed, 21 Oct 2024 07:28:00 GMT
If-Modified-Since: Wed, 21 Oct 2024 07:28:00 GMT

ETag: "abc123"
If-None-Match: "abc123"