这是什么叫javascript？ （{name，value}）=> <跨度>< /跨度> [英] What is this called in javascript? ({name, value}) => <span></span>

问题描述

（在javascript中）
在此上下文中：
const component =（{name，value}）=> < span>< / span>

箭头函数的第一个参数与其成员分隔。 道具 => （{name，value}）

这是什么叫？我已经看到有些人用巴贝尔这样做，但不知道什么是正确的术语。

解决方案

箭头函数的第一个参数被分隔成其成员。 props => （{name，value}） ...这叫什么？

参数解构（有时参数解构，这是重要的解构部分）。传递函数的是一个对象，但是函数接收的是属性。也就是说，它们被从结构（对象）中删除，并被划分为不同的东西（因此，破坏）：

  const adams =（{question，answer}）=> {console.log（question）; console.log（answer）;}; adams（{question：Life，the Unverse，and Everything！，answer：42}）;  

/ div>

JavaScript在几个地方有破解，包括上述的功能参数列表。你也可以使用分配：

  const o = {question：生活，统治和一切！，答案：42}; const {answer，question} = o; console.log（question）; console.log（answer）;  

---

看起来你正在使用JSX，所以我只是请注意，在JSX代码的批次中，您将看到一个功能，JavaScript不会正式使用 ¹ ，但很快（ish）：获取rest属性作为一个对象：

  //这是'在ES2015或ES2016中，可能在ES2017或ES2018const adams =（{question，ans wer，... rest}）=> {console.log（question）;的console.log（回答）; console.log（rest）;}; adams（{question：Life，the Unverse，and Everything！，answer：42，legend：true，missed：true}）;  

...休息参数列表中的c> {} 告诉JSX创建一个具有rest属性的对象（那些不被作为离散参数捕获的对象）。这是JavaScript的休息参数的解构版本。你也可以在作业中做：

  //这不是在ES2015或ES2016中，可能在ES2017或ES2018const o = {问题：生命，和平与一切！，答案：42，传奇：真，错过：真的}; const {问题，答案，... rest} = o; console.log（question）; console.log（answer）; console.log（rest）;  

p>

规范（ES2015）具有阵列解构的功能，但不适用于对象。然而， ¹

---

¹ 有一个第3阶段提案，其中意味着它完全定义并等待现场至少两个实现和实施方面的重要现场经验。所以即将来临。

(in javascript) In this context: const component = ({ name, value }) => <span></span>

Where the first argument of the arrow function is separated to its members. props => ({ name, value })

What is this called? I've seen some people doing this with babel but don't know what the proper term is.

解决方案

Where the first argument of the arrow function is separated to its members. props => ({ name, value }) ... What is this called?

It's called parameter destructuring (sometimes argument destructuring, it's the destructuring part that's important). What you pass the function is an object, but what the function receives are properties from the object. That is, they've been taken out of the structure (the object) and made into distinct things (hence, "destructuring"):

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

JavaScript has destructuring in a few places, including function parameter lists as above. You can also do it with assignments:

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

---

It looks like you're using JSX, so I'll just note that in a lot of JSX code, you'll see a feature that JavaScript doesn't officially have yet¹ but will soon(ish): The ability to get the "rest" of the properties as an object:

// This isn't in ES2015 or ES2016, likely to be in ES2017 or 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
});

That ...rest inside the {} in the parameter list tells JSX to create an object with the "rest" of the properties (those not captured as discrete arguments). It's the destructuring version of JavaScript's "rest params." You can do it in assignments, too:

// This isn't in ES2015 or ES2016, likely to be in ES2017 or 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);

The spec (as of ES2015) has that for array destructuring, but not for objects. Yet.¹

---

¹ There's a Stage 3 proposal for it, which means it's completely defined and waiting for at least two implementations in the field and significant in-the-field experience with implementations. So it's coming quite soon.

这篇关于这是什么叫javascript？ （{name，value}）=> <跨度>< /跨度>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！