如何获取 JavaScript 中的第一个非空/未定义参数？

在很多情况下，我们会找出传递给函数的第一个非空或非未定义参数。这称为合并。

方法 1：我们可以在 pre-ES6 JavaScript 中通过循环参数并检查哪些参数等于 NULL 来实现合并。然后我们立即返回不为 NULL 的参数。

例子：

Javascript

function coalesce() {
  for (let i = 0; i < arguments.length; i++) {
    if (arguments[i] != null) {
      return arguments[i];
    }
  }
}
  
console.log(
  coalesce(null, undefined, "First",
           1, 2, 3, null)
);

输出：

First

方法2：我们可以使用ES6替代上述方法来达到类似的效果。在 ES6 中使用 Rest 参数，我们收集args可迭代的所有参数。我们将一个胖箭头函数作为回调传递给 find 方法，该函数遍历args的每个元素。我们使用 _ 标识符中的一次性变量作为 find 方法回调中的元素标识符。最后，我们使用includes()方法检查回调中由 _ 标识的元素是否属于null或undefined 。第一个不符合测试的元素是我们的输出。

例子：

Javascript

const coalesceES6 = (...args) =>
  args.find(_ => ![null,undefined].includes(_)
);
  
console.log(
  coalesceES6(null, undefined, "Value One",
              1, 2, 3, null)
);

输出：

Value One

合并的用例

现在我们已经了解了如何实现 Coalesce，让我们讨论一下它的一些用例。

用例 1：填充对象数组中的空值/未定义值

示例：假设您有一个包含大量产品列表的产品目录。每个产品都有描述和摘要。您希望通过从该数据库中提取数据来显示描述和摘要。在这种情况下，您可以使用 Coalescing 和两个参数，即摘要值和截断的描述值，以在摘要不存在时进行填充。

Javascript

let products = [
  {
    id: 1,
    desc: `The best in class toaster that has 140
    watt power consumption with nice features that
    roast your bread just fine. Also comes bundled 
    in a nice cute case.`,
    summ: `Get world class breakfasts`,
  },
  {
    id: 2,
    desc: `A massager that relieves all your pains 
    without the hassles of charging it daily 
    or even hourly as it comes packed with Li-Ion
    batteries that last upto 8 hrs.`,
    summ: "Warm comfort for your back",
  },
  {
    id: 3,
    desc: `An air conditioner with a difference that
    not only cools your room to the best temperatures 
    but also provides cleanliness and disinfection at
    best in class standards`,
    summ: null,
  },
];
  
const coalesceES6 = (...args) =>
  args.find((_) => ![null, undefined].includes(_));
  
function displayProdCat(products) {
  for (let product of products) {
    console.log(`ID = ${product.id}`);
    console.log(`Description = ${product.desc}`);
    let summProd =
      coalesceES6(product.summ,
                  product.desc.slice(0, 50) + "...");
    console.log(`Summary = ${summProd}`);
  }
}
  
displayProdCat(products);

输出：使用合并，如果摘要的值存在，它将被显示。如果 缺少摘要（null 或未定义），合并函数将选择第二个参数并在摘要字段中显示截断的描述。

ID = 1
Description = The best in class toaster that has 140
    watt power consumption with nice features that
    roast your bread just fine. Also comes bundled
    in a nice cute case.
Summary = Get world class breakfasts
ID = 2
Description = A massager that relieves all your pains
    without the hassles of charging it daily
    or even hourly as it comes packed with Li-Ion
    batteries that last upto 8 hrs.
Summary = Warm comfort for your back
ID = 3
Description = An air conditioner with a difference that
    not only cools your room to the best temperatures
    but also provides cleanliness and disinfection at
    best in class standards
Summary = An air conditioner with a difference that
    not ...

用例 2：在表达式中缺少数值的情况下填充值以执行计算

示例：假设您有一组一年的月收入，其中有一些缺失值。现在，您要查找总年收入，您决定用 1000 的基本默认值代替缺少数据的月份。我们在每月数据数组上应用 reduce 方法。我们将每次迭代的总和稍微存储在累加器中。我们申请合并当前项目并将月收入（如果存在）或默认值（如果月收入为空或未定义）添加到累加器。

Javascript

const incomeFigures = {
  default: 1000,
  monthWise: [1200, , 600, 2100, , 329,
              1490, , 780, 980, , 1210],
};
  
const coalesceES6 = (...args) =>
  args.find((_) => ![null, undefined].includes(_));
  
function yearlyIncome(incomeFig) {
  return incomeFig.monthWise.reduce(
    (total, inc) => total +
      coalesceES6(inc, incomeFig.default)
  );
}
  
console.log(
  `Yearly income equals 
  ${yearlyIncome(incomeFigures)}`
);

输出：

Yearly income equals 8689