有return语句并且什么都不返回

Question

我是 react(javascript) 的初学者，正在做 todo 应用程序，有一个与在 if 语句中返回但不返回任何内容相关的问题（如果用户什么都不写并按 Enter 则不算数），但是当我采取它离开它会影响 todo 应用程序的行为。我的问题是这部分代码是什么意思 if (!value) { return }
如果没有价值，它将返回什么？为什么拿走“回报”会改变 todo 应用程序的行为？ 这是代码：

import React, { useState } from 'react';
import './App.css';

function Todo({ tod, index }) {
  return <div className="todo">{tod.text}</div>
}
function TodoForm({ addTodo }) {
  const [value, setValue] = useState('');
  console.log(value)

  const handleSubmit = e => {
    e.preventDefault();
    if (!value) {
      return
    }
    addTodo(value);
    setValue('');

  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        className="input"
        value={value}
        placeholder="Add Todo..."
        onChange={e => setValue(e.target.value)}

      />

    </form>
  )
}

function App() {
  const [todos, setTodos] = useState([
    {
      text: ' Learn by doing',
      isCompleted: false
    }
  ]);

  const addTodo = text => {
    const newTodos = [...todos, { text }];
    setTodos(newTodos);
  }

  return (
    <div className="app">
      <div className="todo-List">
        {todos.map((todo, index) =>
          <Todo key={index} index={index} tod={todo} />
        )}
        <TodoForm addTodo={addTodo} />
      </div>
    </div>
  )

}
export default App;

这里我有 javascript 代码，我试图使用与上面代码相​​同的语句 (if(!text){ return }) 在这里，我是否有“返回”都没有关系，两种方式都是一样的（为什么在前面的例子中它是不同的？） ：

function myFunction(text) {
var text=document.getElementById('text').value

event.preventDefault();
console.log(text);

if(!text){
return 
}
else{
document.getElementById('demo').innerHTML = "Text typed: "+text; // if nothing
}}

<form onsubmit="myFunction()">
<input  type="text" id="text" >
</form>

<p id="demo"></p>

英语不是我的母语，如有错误请见谅。

Answer 1

在此处复制有问题的代码：

const handleSubmit = e => {
    e.preventDefault();
    if (!value) {
      return
    }
    addTodo(value);
    setValue('');

  }

这被视为null 检查。您在该函数内部所说的实际上是“如果此变量为真，则不要继续执行该函数的其余部分并以未定义的形式返回”。如果您的 value 变量等于 Javascript 中的 null or undefined 值（附加链接转到关于 null 和 undefined 之间差异的 SO 答案），那么您的 !运算符将再次为 if 语句返回 true（如上所述）不运行函数的其余部分并返回 undefined。

在此处查看此代码笔，如果您在 true 和 false 之间切换变量“shouldRun”，您将在返回后获得控制台日志，或者返回未定义：https://codepen.io/kjscott27/pen/wvMbKJb?editors=1111

编辑：我觉得有必要为 null 和 undefined 之间的差异添加额外的来源。此外，此资源直接从 ECMA 脚本和进一步阅读中对这两个术语的定义提供了答案，here in this other SO answer。

Answer 2

添加到 kjs0 的答案中，

在 Javascript 中，不返回任何值将是 undefined。示例：

function myFunc() {
  return;
}

myFunc() // the returned value is undefined