// 极简Vue双向绑定实现class MiniVue {  constructor() {    this.data = { name: '' }    this.observe(this.data)  }  // 数据劫持  observe(obj) {    Object.keys(obj).forEach(key => {      let value = obj[key]      Object.defineProperty(obj, key, {        get() {          return value        },        set(newVal) {          value = newVal          // 数据更新，同步刷新视图          document.getElementById('input').value = newVal          document.getElementById('text').innerText = newVal        }      })    })  }}// 实例化使用const vm = new MiniVue()// 视图变更同步更新数据document.getElementById('input').addEventListener('input', (e) => {  vm.data.name = e.target.value})

// store/index.js Vuex完整配置import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({  state: {    userName: 'Vuex测试用户',    count: 0  },  mutations: {    setCount(state, num) {      state.count = num    },    setUserName(state, name) {      state.userName = name    }  },  actions: {    // 异步模拟接口请求    async getUserInfo({ commit }) {      const res = await Promise.resolve('后端异步获取用户名')      commit('setUserName', res)    }  },  getters: {    userText: (state) => `${state.userName}，当前计数：${state.count}`  },  modules: {}})

// 组件中使用Vuexexport default {  methods: {    // 同步修改状态    changeCount() {      this.$store.commit('setCount', 100)    },    // 异步修改状态    async getUser() {      await this.$store.dispatch('getUserInfo')    }  }}

// stores/user.ts Pinia仓库import { defineStore } from 'pinia'export const useUserStore = defineStore('user', {  // 全局状态  state: () => ({    userName: '前端开发者',    age: 22  }),  // 计算属性  getters: {    userInfo: (state) => `${state.userName}-${state.age}岁`  },  // 同步/异步方法统一存放  actions: {    // 同步修改    setName(name: string) {      this.userName = name    },    // 异步修改    async fetchUser() {      const res = await Promise.resolve('异步请求用户数据')      this.userName = '异步更新用户名'    }  }})

import { useState, useRef } from 'react'// 受控组件function ControlledInput() {  const [value, setValue] = useState('')  return (    <input      value={value}       onChange={(e) => setValue(e.target.value)}       placeholder="受控组件"    />  )}// 非受控组件function UnControlledInput() {  const inputRef = useRef(null)  const getValue = () => {    console.log(inputRef.current.value)  }  return (    <>      <inputref={inputRef}placeholder="非受控组件"/>      <buttononClick={getValue}>获取值</button>    </>  )}

import { useState } from 'react'// 父组件function Parent() {  const [msg, setMsg] = useState('父组件原始数据')  return <Childmsg={msg}changeMsg={setMsg} />}// 子组件function Child({ msg, changeMsg }) {  return (    <div>      <p>接收数据：{msg}</p>      <buttononClick={() => changeMsg('父组件数据已更新')}>修改数据</button>    </div>  )}

import { useState, useEffect } from 'react'// 自定义防抖Hooksexport default function useDebounceValue(value, delay = 500) {  const [debounceVal, setDebounceVal] = useState(value)  useEffect(() => {    const timer = setTimeout(() => {      setDebounceVal(value)    }, delay)    return () => clearTimeout(timer)  }, [value, delay])  return debounceVal}// 业务组件使用function SearchInput() {  const [val, setVal] = useState('')  const debounceVal = useDebounceValue(val)  return <inputvalue={val}onChange={e => setVal(e.target.value)} placeholder="防抖搜索"/>}

let name = 'window'const obj = {  name: 'obj对象',  fn: function() {    console.log(this.name)  },  arrowFn: () => {    console.log(this.name)  }}obj.fn() // 隐式绑定：obj对象const f = obj.fnf() // 默认绑定：windowobj.arrowFn() // 箭头函数：继承外层this = window

function test(a, b) {  console.log(this.name, a, b)}const obj = { name: '测试对象' }test.call(obj, 10, 20)test.apply(obj, [30, 40])const newTest = test.bind(obj, 50, 60)newTest()// 经典妙用：数组取最大值const arr = [1,9,3,7,5]console.log(Math.max.apply(null, arr))

function debounce(fn, delay = 300) {  let timer = null  return function(...args) {    if(timer) clearTimeout(timer)    timer = setTimeout(() => {      fn.apply(this, args)      timer = null    }, delay)  }}

function throttle(fn, interval = 300) {  let flag = false  return function(...args) {    if(flag) return    flag = true    fn.apply(this, args)    setTimeout(() => {      flag = false    }, interval)  }}

// ES6最优最简写法function uniqueArr(arr) {  return [...new Set(arr)]}// 传统遍历兜底写法function uniqueArr2(arr) {  const res = []  arr.forEach(item => {    if(!res.includes(item)) res.push(item)  })  return res}

// 递归手写扁平化function flatArr(arr) {  let res = []  arr.forEach(item => {    Array.isArray(item) ? res = res.concat(flatArr(item)) : res.push(item)  })  return res}// 原生极简APIarr.flat(Infinity)

function deepClone(obj) {  // 基础类型直接返回  if(typeof obj !== 'object' || obj === null) return obj  // 区分数组和对象  const newObj = Array.isArray(obj) ? [] : {}  // 递归遍历拷贝  for(let key in obj) {    if(obj.hasOwnProperty(key)) {      newObj[key] = deepClone(obj[key])    }  }  return newObj}

// 1. 冒泡排序（基础必背）function bubbleSort(arr) {  const len = arr.length  for(let i = 0; i < len - 1; i++) {    for(let j = 0; j < len - 1 - i; j++) {      if(arr[j] > arr[j+1]) {        [arr[j], arr[j+1]] = [arr[j+1], arr[j]]      }    }  }  return arr}// 2. 快速排序（进阶最优排序 O(nlogn)）function quickSort(arr) {  if(arr.length < 2) return arr  const pivot = arr[0]  const left = [], right = []  for(let i = 1; i < arr.length; i++) {    arr[i] < pivot ? left.push(arr[i]) : right.push(arr[i])  }  return quickSort(left).concat(pivot, quickSort(right))}

// interface声明合并interface User { name: string }interface User { age: number }// 最终合并：{name:string, age:number}// type联合类型type Status = 'success' | 'error' | 'loading'

// 基础泛型function getArr<T>(arr: T[]): T[] {  return arr}// 泛型约束：限制必须包含length属性function getLength<T extends {length: number}>(val: T): number {  return val.length}getLength('123') // 合法getLength([1,2,3]) // 合法getLength(123) // 不合法，number类型没有length属性

const obj = { name: '前端' }// 可选链：安全读取深层属性，不报错console.log(obj?.age?.num)// 空值合并：仅null/undefined生效，0、''、false不覆盖const n1 = 0 ?? 100 // 0const n2 = null ?? 100 // 100// 对比||：会误判0、空字符串const n3 = 0 || 100 // 100

// 联合类型type Status = 'success' | 'error'// 交叉类型interface A { name: string }interface B { age: number }type C = A & Bconst person: C = { name: 'test', age: 22 }