JavaScript中的回调功能和高阶功能之间的区别
#javascript #网络开发人员 #react #功能

JavaScript中的函数是一个独立的代码TAT执行给定的任务。大多数JavaScript访谈推迟了潜在的员工,在回调功能和高阶功能之间有所不同。

这两个概念是javaScript和Node.js的工作马的强大力量;理解它们不仅是编写代码可扩展和可维护的应用程序的关键,而且对JS语言的工作原理有全面的了解。

让我们首先查看JS功能的类型。

JavaScript中有3种函数:

  1. 函数声明是从功能关键字开始的函数,然后是可选的名称,括号和身体由卷曲括号所包围的。

function myFunc(){}

  1. 函数表达式是一个函数声明,没有名称声明,但分配给了变量。喜欢

const myFunc=function(){}

  1. 箭头函数是具有整洁和清洁语法的函数表达式;为变量分配了一个括号,遵循箭头标志和一个带有卷曲括号的身体。

const myFunc=()=>{}

回调函数和高阶功能是JavaScript函数的功能; A 回调是一个作为参数传递给另一个函数的函数,而A 高阶函数是一个将另一个函数作为参数(回调)和/或返回函数的函数。它们是同时使用的;如果有一个回调,则有一个高阶功能,反之亦然。

让我们看一个示例:

// call back
const PopulateDom = () => {
  console.log("Call back invoked");
};

function mainFunction(callback) {
  // assume you want to perform an asunchronous operation; say data fetching from the server...

  // then when data arrives, just call callback function to handle
  callback();
}
// then invoke main function and pass PopulateDoM function as argument without invoking it

mainFunction(PopulateDom);


上面的 mainfunction 采用一个称为回调的参数,该参数是指将在调用期间传递的函数。 /p>

匿名函数只是一个没有名称的函数声明;它们通常被用作回调,并用在调用时将其作为参数接收的函数定义。

/** Invoke main function with an anonymous arrow function */
mainFunction(() => {
  console.log("Call back invoked");
});
/** Invoke main function with an anonymous function declaration */
mainFunction(function () {
  console.log("Call back invoked");
});

上面的主要功能是高阶函数。当它收到回调时。 JavaScript具有许多内置的高级功能,可以接收函数作为参数。

数组方法:map,filter,reduce,find,some,every,forEach etc是具有回调功能并执行一些给定的操作的高阶数组函数。

数组地图

映射方法循环虽然数组中的每个项目,但进行回调,然后返回整个数组。

// lets get  the powers of two of array elements above
const nums = [3, 4, 6, 7, 8, 10];
const powersOfNums = nums.map((num) => num ** 2);
// alternative 1
const _powersOfNums = nums.map(function (num) {
  return num ** 2;
});
// alternative 2
function getPowers(num) {
  return num ** 2;
}
const __powersOfNums = nums.map(getPowers); // another alternative

数组过滤器

过滤方法根据给定的条件过滤阵列中的项目。

const nums = [3, 4, 6, 7, 8, 10];
// lets get numbers divisible by 2 from the array above

const divisibleByTwo = nums.filter((num) => num % 2 === 0);
// alt 1
const _divisibleByTwo = nums.filter(function (num) {
  return num % 2 === 0;
});

// alt 2
const getDivisibles = (num) => {
  return num % 2 === 0;
};

const __divisibleByTwo = nums.filter(getDivisibles);

阵列减少

减少数组方法需要2个参数;回调函数和可选的初始值,然后通过一系列元素迭代;如果其数字或串联如果字符串或A返回对象,则执行总和。

const nums = [3, 4, 6, 7, 8, 10];
// lets get them sum  all numbers in the array above
const initial = 0;
const sumNums = nums.reduce((a, b) => a + b, initial);

javascript settimeout setInterval addeventListener 也是内置的高阶函数; settimeout和setInterval函数在给定的时期内执行给定的函数时间;

settimeout在setInterval在给定时间连续执行时在给定超时执行一次;他们提出了2个论点;回调功能和时间以毫秒为单位。注意这些函数返回一个可用于从执行中取消它们的值。

const time = 5000;

const timeoutFunction = () => {
  console.log(`I only run once after ${time} seconds.`);
};

const intervalFunction = () => {
  console.log(`I run after every ${time} seconds.`);
};

setTimeout(timeoutFunction, time);

setInterval(intervalFunction, time);

addeventListener 是一个用于附加事件处理程序的函数,以收听DOM元素上的事件。它采用3个参数:事件类型(字符串),回调函数和可选的布尔值作为第三个参数,默认为false。

const element=document.getElementById("someElement")
function handleClick(e){
// perform some action}

if(element) element.addEventListener("click",handleClick)

react,一个JavaScript UI库,也不断地使用回调和高阶功能。

React useState Hook在您想跟踪下一个值依赖上一个值的变量状态时使用的可选回调。

function CounterComponent() {
  const [counter, setCounter] = React.useState(0);
  const handleClick = () => {
    // set counter takes a callback that uses the previous value to calculate the next value
    setCounter((prev) => {
      const next = prev + 1;
      return next;
    });
  };

  return (
    <div>
      <p>
        {" "}
        The count is: <b>{counter}</b>
      </p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

React useEffect Hook是一个高阶函数,可以采用回调和一个选项依赖项数组来观察可变更改。回调返回可选功能。
钩子在组件渲染并在卸载之前清理动作后执行副作用动作。

function CounterComponent() {
  const [counter, setCounter] = React.useState(0);
  const handleClick = () => {
    // set counter takes a callback that uses the previous value to calculate the next value
    setCounter((prev) => {
      const next = prev + 1;
      return next;
    });
  };

  /** for reseting the counter to zero when component unmounts */
  const cleanUpFunction = () => {
    setCounter(0);
  };
  // run after a component mounts and before a component unmounts;
  React.useEffect(() => {
    if (counter === 100) {
      setCounter(0);
    }

    return cleanUpFunction;
  }, [counter]);

  return (
    <div>
      <p>
        {" "}
        The count is: <b>{counter}</b>
      </p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

了解回调和高阶功能是功能编程范式中无尽可能性的门户。