【问题标题】:Why does ({"word"}) return its length?为什么 ({"word"}) 返回它的长度?
【发布时间】:2020-03-08 17:32:54
【问题描述】:

我对这种查找字符串长度的解决方案感到困惑:

const getLength = ({length}) => length

我熟悉对象和数组解构,但找不到任何关于字符串解构(?)或如何返回长度的信息。在函数参数中添加花括号的概念对我来说也很陌生。

【问题讨论】:

  • 1) String 的实例也是 Object(通过扩展)。 2) String 实例具有 length 属性。 3)你正在看的是参数解构
  • 这个也值得一读~Dot operator in javascript

标签: javascript string-length


【解决方案1】:

const getLength =

开始为 getLength 常量赋值,然后

({length})

destructuring assignment MDN 接受输入参数并解包长度属性值,最后

=> length

箭头函数返回引用的长度值。


const getLength = ({length}) => length;

document.querySelector("#b").onclick = function(){
 document.querySelector("#d").innerText = getLength(document.querySelector("#i").value);
};
<input id="i" /><input type="button" id="b" value="Try Me" /><br>
<div id="d"></div>

【讨论】:

  • 这是一个解构参数声明。没有作业可看:-)
  • @Bergi - 不同意。 “解构参数声明”只是社区行话。存在允许隐藏进程的语法糖,但在幕后,参数是解构赋值的目标。事实上,所有的解构都涉及到赋值。换句话说,幕后的语法是 let {length} = "hello" 用于箭头函数的参数,因此长度为 5。同样,我没有看到任何使用 ecma 规范中的短语解构参数定义的语法。也许您可以为您的主张提供引文。
  • 形式上,它是 BindingPatternBindingInitialization。我想将这些变量初始化(也可以在 let 等变量声明中找到)与赋值表达式区分开来——它们也在规范中使用单独的(如果相似的话)算法。但是当然我们需要比这更好的行话(没有人使用“绑定”这个词)。规范散文区分“解构分配”和更通用的“解构模式”。准确地说:它是一种形式参数解构模式,而不是解构赋值。
【解决方案2】:

您正在创建一个函数,该函数请求将对象参数解构为它的“长度”属性。当您传递一个字符串时,该字符串将被强制转换为一个 String 实例,以便您获得函数返回的“length”属性值。

看看当你尝试这个时会发生什么:

console.log(getLength({ length: "Hello world" }));

【讨论】:

  • 另一种阅读方式是const getLength = (obj) =&gt; { return obj.length } {} 正如@Pointy 所指出的那样正在破坏。
  • console.log(getLength({ length: "Hello world" }));你不是在解构,只是传递一个对象作为 getLength 的参数。然后 getLength 解构该对象的长度属性。可能很明显,但它让我有点困惑。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2016-05-12
  • 2021-01-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-04-26
相关资源
最近更新 更多