这在javascript中被称为什么？({name,value})=> <span> </ span>

Question

(在javascript中)在这种情况下: const component = ({ name, value }) => <span></span>

其中箭头函数的第一个参数与其成员分开.props=>({ name, value })

这个叫什么？我见过有些人用巴贝尔这样做,但不知道正确的用语是什么.

Answer 1

其中箭头函数的第一个参数与其成员分开.props => ({ name, value })... 这个叫什么？

它被称为参数解构(有时是参数解构,它是重要的解构部分).传递函数的是一个对象,但函数接收的是对象的属性.也就是说,它们已被从结构(对象)中取出并制成不同的东西(因此,"解构"):

const adams = ({question, answer}) => {
  console.log(question);
  console.log(answer);
};
adams({question: "Life, the Unverse, and Everything!", answer: 42});

JavaScript在一些地方进行了解构,包括上面的函数参数列表.您也可以使用作业完成:

const o = {question: "Life, the Unverse, and Everything!", answer: 42};
const {answer, question} = o;
console.log(question);
console.log(answer);

ES2018及更高版本中有一个相关的功能(但是JSX代码多年来一直通过tranpiling支持它):能够将属性的"其余"作为对象获取:

// ES2018+
const adams = ({question, answer, ...rest}) => {
  console.log(question);
  console.log(answer);
  console.log(rest);
};
adams({
  question: "Life, the Unverse, and Everything!",
  answer: 42,
  legend: true,
  missed: true
});

这...rest里面的{}参数列表创建具有属性"休息"的对象(那些不被捕获作为离散的参数).这是JavaScript的"休息参数"的解构版本.您也可以在作业中执行此操作:

// ES2018+
const o = {
  question: "Life, the Unverse, and Everything!",
  answer: 42,
  legend: true,
  missed: true
};
const {question, answer, ...rest} = o;
console.log(question);
console.log(answer);
console.log(rest);

ES2015规范将其用于阵列,ES2018将其添加到对象属性中.