未定义字符串与空字符串-示例Javascript

xhv8bpkk  于 2023-01-11  发布在  Java
关注(0)|答案(5)|浏览(158)

我正在尝试查找第一个processed === true并返回value
我的作品似乎工作,但如果没有processed代码变成undefined而不是<empty string>

const values = [{
    value: "bar",
    process: false
  },
  {
    value: "foo",
    process: false
  }
];

const myValue = values.reduce((acc, curr) => {
  if (curr.primary) {
    return curr.value.toLowerCase();
  }
}, '');

console.log("My Value: " + myValue);

我错过了什么?

cnwbcb6i

cnwbcb6i1#

reduce为循环中的每个项目调用一次回调函数。
curr是当前值。acc是上一个函数的返回值(或第一次循环时的第二个参数(''))。
您的代码完全忽略了acc,因此reduce返回的值 * 完全 * 依赖于数组中的最后一个值。
你的函数用curr.primary来测试这个值。如果它是一个真值,那么它就是return curr.value.toLowerCase()。如果它不是一个真值,那么它就到达函数的结尾,而不命中return语句。任何不执行return的函数都将返回undefined
若要查找与条件匹配的第一个值,请使用find而不是reduce
然后做一个测试,如果你没有找到任何东西,就使用一个空字符串。

const match = values.find(value => value.primary === true);
const myValue = match?.value.toLowerCase() ?? "";
hgqdbh6s

hgqdbh6s2#

我试图找到第一个processed === true并返回value [否则为空字符串"" ]。
在找不到值的情况下,可以将Array.prototype.find()optional chaining operator ( ?. )以及nullish coalescing operator ( ?? )一起使用:

const array1 = [
  { value: 'bar', processed: false },
  { value: 'foo', processed: false },
];

const myValue1 = array1.find(o => o.processed)?.value.toLowerCase() ?? '';

console.log('myValue1:', myValue1); // "myValue1:" ""
console.log('type:', typeof myValue1); // "type:" "string"

const array2 = [
  { value: 'BAR', processed: false },
  { value: 'FOO', processed: true },
];

const myValue2 = array2.find(o => o.processed)?.value.toLowerCase() ?? '';

console.log('myValue2:', myValue2); // "myValue2:" "foo"
console.log('type:', typeof myValue2); // "type:" "string"

下面是对第一个值的语法求值的详细说明:

const myValue1 = array1.find(o => o.processed)?.value.toLowerCase() ?? '';
//               11111111111111111111111111111 22222222222222222222 44 55
//               33333333333333333333333333333333333333333333333333
// 1. This evaluates to undefined
// 2. So this part is not evaluated, and...
// 3. the entire left side evaluates to undefined
// 4. Because 3 is nullable (null or undefined), when the ?? operator executes...
// 5. the left side (3) is ignored, and the right side (5) becomes the value

与从第二个数组计算的值相比:

const myValue2 = array2.find(o => o.processed)?.value.toLowerCase() ?? '';
//               11111111111111111111111111111 22222233333333333333 55 66
//               44444444444444444444444444444444444444444444444444
// 1. This evaluates to { value: 'FOO', processed: true }
// 2. So this part is evaluated to "FOO"
// 3. which becomes "foo", and...
// 4. the entire left side evaluates to "foo"
// 5. Because 4 is NOT nullable (null or undefined), when the ?? operator executes...
// 6. the left side (4) becomes the final value, and the right side (6) is ignored
bxpogfeg

bxpogfeg3#

要找到满足条件的第一个元素,您应该使用find method。Reduce将在整个数组上运行,即使在满足条件后也是如此,因为它的目的是将整个数组 reduce 为不同的数据结构(即字符串/对象)。Find方法将在找到满足条件的项后立即退出(如果没有项满足,则在检查整个数组后退出)
至于用空字符串替换undefined,在所附的代码片段中,我使用了or condition(尽管有些人更喜欢conditional operator),因为undefinedfalsey,所以它将插入空字符串。

const values = [{
    value: "bar",
    process: false
  },
  {
    value: "foo",
    process: false
  }
];

const myValue = values.find(curr => curr.process);

console.log("My Value: " + (myValue?.value?.toLowerCase() || ''));

祝你的项目好运:)

n6lpvg4x

n6lpvg4x4#

这应该是所有:

const values = [{
    value: "bar",
    process: false
  },
  {
    value: "foo",
    process: false
  }
];

const myValue = values.reduce((acc, curr) => curr.process ? curr.value.toLowerCase() : '', '');

console.log("My Value: " + myValue);
mepcadol

mepcadol5#

你最好使用foreach循环来完成你要做的事情:

const values = [{
      value: "bar",
      process: false
    },
    {
      value: "foo",
      process: false
    }
  ];
  
  var processedValue = '';
  values.forEach(element => {
    if(element.process && !processedValue)
    processedValue = element.value;
  });
  
  console.log(processedValue);

相关问题