正文

轻松掌握JS函数编写技巧：从基础到实战，让你的代码更高效！

/0 浏览量
0527

函数定义与调用

JavaScript 中的函数是构建复杂程序的基础。首先，让我们从最基础的函数定义开始。

1. 函数声明

function sayHello() {
  console.log('Hello, World!');
}

在这个例子中，我们使用 function 关键字声明了一个名为 sayHello 的函数。当你调用这个函数时，它会打印出 “Hello, World!“。

2. 函数表达式

const sayHello = function() {
  console.log('Hello, World!');
};

函数表达式与函数声明类似，但它可以存储在变量中，这使得它在某些情况下更加灵活。

3. 箭头函数

ES6 引入了箭头函数，这是一种更简洁的函数声明方式。

const sayHello = () => {
  console.log('Hello, World!');
};

箭头函数没有自己的 this，它继承自其所在上下文的 this。

参数与返回值

函数可以接受参数，并返回值。

1. 参数

function add(a, b) {
  return a + b;
}

在这个例子中，add 函数接受两个参数 a 和 b，并返回它们的和。

2. 默认参数

如果你想让函数的某个参数有默认值，可以使用默认参数。

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

如果没有提供 name 参数，它将默认为 'Guest'。

3. 剩余参数

如果你不知道会有多少参数传递给函数，可以使用剩余参数。

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

在这个例子中，numbers 是一个数组，包含所有传递给 sum 的参数。

高阶函数

高阶函数是接受函数作为参数或返回函数的函数。

1. 函数作为参数

function doSomething(fn) {
  fn();
}

doSomething(() => console.log('This is a callback function!'));

在这个例子中，doSomething 函数接受一个函数作为参数，并调用它。

2. 函数作为返回值

function createGreeting(name) {
  return (greeting) => {
    console.log(`${greeting}, ${name}!`);
  };
}

const greetAlice = createGreeting('Alice');
greetAlice('Hello');

在这个例子中，createGreeting 函数返回一个箭头函数，它接受一个 greeting 参数。

实战案例

现在，让我们通过一个实际的案例来应用这些技巧。

1. 创建一个计算器

const calculator = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
  multiply: (a, b) => a * b,
  divide: (a, b) => a / b
};

console.log(calculator.add(5, 3)); // 8
console.log(calculator.subtract(5, 3)); // 2
console.log(calculator.multiply(5, 3)); // 15
console.log(calculator.divide(5, 3)); // 1.666...

2. 创建一个函数，返回另一个函数

function createCounter() {
  let count = 0;
  return function() {
    return count++;
  };
}

const counter = createCounter();
console.log(counter()); // 0
console.log(counter()); // 1
console.log(counter()); // 2

通过这些技巧，你可以编写更高效、更灵活的 JavaScript 代码。希望这篇文章能帮助你更好地理解 JavaScript 函数的编写。

-- 展开阅读全文 --