当前位置:首页 > JavaScript

js实现函数

2026-03-14 15:41:25JavaScript

JavaScript 实现函数的基本方法

在 JavaScript 中,函数可以通过多种方式定义和实现。以下是几种常见的函数定义方法:

函数声明 使用 function 关键字直接声明函数:

function greet(name) {
    return `Hello, ${name}!`;
}

函数表达式 将函数赋值给变量:

const greet = function(name) {
    return `Hello, ${name}!`;
};

箭头函数 ES6 引入的简洁语法:

const greet = (name) => `Hello, ${name}!`;

函数参数处理

JavaScript 函数支持默认参数和剩余参数:

默认参数 为参数提供默认值:

function greet(name = 'Guest') {
    return `Hello, ${name}!`;
}

剩余参数 使用 ... 收集多个参数:

function sum(...numbers) {
    return numbers.reduce((a, b) => a + b, 0);
}

高阶函数

函数可以作为参数传递或作为返回值:

作为参数

function operate(a, b, operation) {
    return operation(a, b);
}
const result = operate(5, 3, (x, y) => x * y);

作为返回值

function multiplier(factor) {
    return x => x * factor;
}
const double = multiplier(2);

立即执行函数

定义后立即执行的函数表达式:

(function() {
    console.log('This runs immediately');
})();

生成器函数

使用 function* 定义的可以暂停执行的函数:

function* idGenerator() {
    let id = 1;
    while(true) {
        yield id++;
    }
}
const gen = idGenerator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2

异步函数

使用 async/await 处理异步操作:

async function fetchData(url) {
    const response = await fetch(url);
    return await response.json();
}

函数绑定

使用 bind 方法设置函数上下文:

const person = {
    name: 'Alice',
    greet: function() {
        console.log(`Hello, ${this.name}`);
    }
};
const greet = person.greet.bind(person);
greet(); // Hello, Alice

函数柯里化

将多参数函数转换为一系列单参数函数:

js实现函数

function curry(fn) {
    return function curried(...args) {
        if(args.length >= fn.length) {
            return fn.apply(this, args);
        } else {
            return function(...args2) {
                return curried.apply(this, args.concat(args2));
            }
        }
    };
}
const sum = (a, b, c) => a + b + c;
const curriedSum = curry(sum);
console.log(curriedSum(1)(2)(3)); // 6

标签: 函数js
分享给朋友:

相关文章

js实现vue

js实现vue

Vue.js 简介 Vue.js 是一个渐进式 JavaScript 框架,用于构建用户界面。其核心库专注于视图层,易于与其他库或现有项目整合。 实现 Vue.js 的基本步骤 安装 Vue.j…

js实现选项卡

js实现选项卡

实现选项卡的基本思路 选项卡通常由一组标签和对应的内容面板组成。点击标签时,显示对应的内容面板,隐藏其他面板。实现这一效果需要结合HTML结构、CSS样式和JavaScript交互逻辑。 HTML结…

js实现图片预览

js实现图片预览

使用FileReader API实现图片预览 通过FileReader对象读取用户选择的图片文件并显示预览: const input = document.getElementById('image…

js实现验证

js实现验证

验证表单输入 使用JavaScript验证表单输入是常见的需求。可以通过监听表单提交事件,检查输入字段是否符合要求。 document.getElementById('myForm').addEve…

js实现换肤

js实现换肤

使用CSS变量实现换肤 通过CSS变量可以轻松实现主题切换功能。CSS变量在根元素中定义,通过JavaScript动态修改这些变量值。 :root { --primary-color: #349…

js 实现链表

js 实现链表

链表的基本概念 链表是一种线性数据结构,由一系列节点组成,每个节点包含数据和指向下一个节点的指针。与数组不同,链表在内存中是非连续存储的,插入和删除操作效率较高。 链表的实现 在 JavaScrip…