Question

学习Javascript函数，并解决下面的问题。

修改此函数，以便在使用1或0参数调用它时，它将返回null。

function divide(num1, num2) {
    return num1 / num2;
}
let num1 = null;
let num2 = null;
let answer = divide(1,1)
console.log(answer);

Answer 1

TL; DR

假设我们只需要应用直接修改，我会避免过多的语法糖并且只是这样写：

＆＃13;

function divide(num1, num2) {
  if (arguments.length < 2) {
    return null;
  }
  return num1/num2;
}

＆＃13;

如果我们想让它简单而优雅，我会这样写（需要ES6功能）：

＆＃13;

const divide = (...args) => args.length < 2 ? null : args[0] / args[1];

＆＃13;

说明

香草JS（ES5及之前版）的改进步骤

Using function arguments ：这只是一个像对象一样的数组，它会神奇地出现在你的函数中，其中包含你传递给函数的参数。

＆＃13;

function divide(num1, num2) {
  if (arguments.length < 2) {
    return null;
  }
  return num1/num2;
}

＆＃13;

虽然这是一个很好的解决方案，但它有一个缺点，如果你想切换到箭头功能arguments对象没有出现。

** Using ternary operator **您可以使用最适合简单?语句的三元if来进一步减少代码

＆＃13;

function divide(num1,num2) {
  return arguments.length < 2 ? null : num1 / num2;
}

＆＃13;

ES6中的改进步骤

Using spread (in this case it is actually called rest) ：...可用于将项目收集到名为rest的数组中，或展开称为spread的数组。

＆＃13;

function divide(...args) {
  return args.length < 2 ? null : args[0] / args[1];
}

＆＃13;

JavaScript将收集传递给函数的所有参数并将它们放入一个名为args的数组中，我更喜欢这个，因为读者可以看到args定义的位置。

using arrow function ：箭头和普通函数之间有很多区别，但是很多人更喜欢它，因为它更短，因为我们有一个单行函数，为什么不使用它。 / LI>

＆＃13;

const divide = (...args) => args.length < 2 ? null : args[0] / args[1];

＆＃13;

最后说明所有以前的解决方案都有一个缺点，我们只检查参数的长度而不是参数的内容，让我们假设有人将undefined发送到前两个参数之一，你＆＃39 ; ll有两个参数，但其中一个有点缺失，你会得到NaN，因为参数的数量是2。

＆＃13;

function divide(num1, num2) {
	  if (num1 === undefined || num2 === undefined) {
return null;
  }
  return num1/num2;
}

＆＃13;

演示

＆＃13;

function divide1(num1, num2) {
	  if (arguments.length < 2) {
	    return null;
	  }
	  return num1/num2;
	}
	
function divide2(num1,num2) {
	  return arguments.length < 2 ? null : num1 / num2;
	}
	
	
function divide3(...args) {
	  return args.length < 2 ? null : args[0] / args[1];
	}


const divide4 = (...args) => args.length < 2 ? null : args[0] / args[1];


const test = (cb) => {
  console.log("-------->" + cb.name)
  console.log(cb());
  console.log(cb(1));
  console.log(cb(1, 2));
  console.log(cb(1, undefined));
  console.log(cb(1, null));
  console.log(cb(1, 2, 3));
};

test(divide1);
test(divide2);
test(divide3);
test(divide4);

＆＃13;

Answer 2

Peep this.

function divide(num1, num2) {
    if(arguments.length < 2) return null;
    return num1 / num2;
}

arguments对象在所有（非箭头）函数中都可用，并表示传递给函数的所有参数。它有一个length属性，告诉你有多少个参数。

Answer 3

技术上传入null将使用两个参数调用它，因此您的示例无论如何都不能完全表示。如果你想要一个对箭头函数安全的答案（它们没有arguments对象）你可以检查第二个参数是否是一个数字。这会抓住很多。

function divide(num1, num2) {
    if (typeof num2 !== 'number') return null;
    return num1 / num2;
}

如果你想处理第一个传递参数未定义的边缘情况，你可以检查两个参数。

function divide(num1, num2) {
    if (typeof num1 !== 'number' || typeof num2 !== 'number') return null;
    return num1 / num2;
}

如果你想得到它可能是一行箭头：

const divide = (num1, num2) => typeof num2 !== 'number' ? null : num1 / num 2;

如何在Javascript函数

3 个答案:

TL; DR

说明

香草JS（ES5及之前版）的改进步骤

ES6中的改进步骤