JavaScript 高级函数实例详解

发布时间：2026-05-15 18:22
6次浏览
分类： JS

📘 JavaScript 高级函数实例详解

数组迭代 · 函数式工具 · 异步控制 · 元编程 · 常用工具

📋 1. 数组迭代与变换方法

map()

映射：每元素乘2，返回新数组

                [1,2,3].map(x => x * 2)

                // [2, 4, 6]

filter()

筛选：只保留大于2的元素

                [1,3,5].filter(x => x > 2)

                // [3, 5]

reduce()

归约：求和，初始值0

                [1,2,3].reduce((a,b) => a+b, 0)

                // 6

forEach()

遍历：打印每个值，无返回值

                ['a','b'].forEach(x => console.log(x))
            

find()

查找：第一个大于2的元素

                [1,3,5].find(x => x > 2)

                // 3

findIndex()

查找索引：第一个大于2的位置

                [1,3,5].findIndex(x => x > 2)

                // 1

some()

断言：是否存在大于2的元素

                [1,3,5].some(x => x > 2)

                // true

every()

断言：是否全部大于2

                [3,5].every(x => x > 2)

                // true

flatMap()

先映射后展平：每个字符复制一次

                ['a','b'].flatMap(c => [c, c])

                // ['a','a','b','b']

🧬 2. 函数式编程核心工具

闭包 (Closure)

内部函数记住外部变量（count）

                function createCounter(){

                  let count = 0;

                  return () => ++count;

                }

                const counter = createCounter();

                counter(); // 1

柯里化 (curry)

将多参函数转为单参链

                const add = a => b => a + b;

                const add5 = add(5);

                add5(3); // 8

组合 (compose)

右向左执行：先乘2再加1

                const compose = (f,g) => x => f(g(x));

                const add1 = x => x+1;

                const double = x => x*2;

                compose(add1, double)(5) // 11

偏函数 (partial)

固定部分参数，生成新函数

                const multiply = (a,b) => a*b;

                const double = multiply.bind(null, 2);

                double(5); // 10

记忆化 (memoize)

缓存纯函数结果，避免重复计算

                const memoize = fn => {

                  const cache = {};

                  return x => cache[x] ??= fn(x);

                }

⏱️ 3. 异步控制流高级函数

Promise 构造函数

封装异步操作，延迟获取结果

                const p = new Promise((resolve) => {

                  setTimeout(() => resolve('done'), 1000);

                });

                p.then(v => console.log(v));

Promise.all()

等待全部完成，返回结果数组

                Promise.all([

                  Promise.resolve(1),

                  Promise.resolve(2)

                ]).then(r => console.log(r)) // [1,2]

Promise.race()

竞速：返回第一个落定的结果

                Promise.race([

                  new Promise(r => setTimeout(r,100,'fast')),

                  new Promise(r => setTimeout(r,500,'slow'))

                ]); // 返回 'fast'

Promise.allSettled()

全完成，无论成败，获得状态

                Promise.allSettled([

                  Promise.resolve(1),

                  Promise.reject('error')

                ]); // [{status:'fulfilled',value:1},{status:'rejected',reason:'error'}]

Promise.any()

任意一个成功即返回，全失败才拒绝

                Promise.any([

                  Promise.reject('err'),

                  Promise.resolve(42)

                ]); // 返回 42

async / await

同步风格写异步代码

                async function fetchData(){

                  const res = await fetch(url);

                  const data = await res.json();

                  return data;

                }

🪞 4. 元编程与对象操作

Proxy

拦截对象操作，如读取属性

                const p = new Proxy({}, {

                  get(target, prop) { return prop; }

                });

                p.hello; // 'hello'

Reflect

提供默认操作的函数式版本

                const obj = {x: 10};

                Reflect.get(obj, 'x'); // 10

                Reflect.set(obj, 'y', 20);

Object.defineProperty()

精确控制属性读写行为

                const obj = {};

                Object.defineProperty(obj, 'val', {

                  get() { return 42; },

                  set(v) { console.log(v); }

                });

Symbol

创建唯一键，避免属性冲突

                const id = Symbol('id');

                const obj = { [id]: 123 };

                obj[id]; // 123

生成器 (Generator)

可暂停/恢复的函数，惰性产生值

                function* gen(){

                  yield 1;

                  yield 2;

                }

                const g = gen();

                g.next().value; // 1

迭代器 (Iterator)

使自定义对象可被 for...of 遍历

                const obj = {

                  [Symbol.iterator]() {

                    let i = 0;

                    return { next() { return {value:i++,done:i>3}; }}

                  }

                };

🛠️ 5. 常用工具型高级函数

防抖 (debounce)

连续触发只执行最后一次（如搜索框输入）

                const debounce = (fn, delay) => {

                  let timer;

                  return (...args) => {

                    clearTimeout(timer);

                    timer = setTimeout(() => fn(...args), delay);

                  };

                };

节流 (throttle)

固定间隔只执行一次（如滚动事件）

                const throttle = (fn, interval) => {

                  let last = 0;

                  return (...args) => {

                    const now = Date.now();

                    if (now - last >= interval) {

                      last = now; fn(...args);

                    }

                  };

                };

once()

确保函数只执行一次

                const once = fn => {

                  let called = false;

                  return (...args) => {

                    if (!called) { called=true; return fn(...args); }

                  };

                };

深拷贝 (deepClone)

递归复制对象，脱离原引用

                const deepClone = obj => {

                  return JSON.parse(JSON.stringify(obj));

                }; // 简易版，或使用 structuredClone()

每一个高级函数，都是对“变化”的抽象封装。
它们让我们用声明式的代码，表达复杂的数据变换、时间管理和对象操控。

本站所有文章、数据、图片来源于网络，仅供学习使用，如有侵权，联系删除！