使用 ES6 Rest 时无法从 DOM 元素解构值

问题描述 投票:0回答:1

鉴于以下 JSBIN,为什么 A 未定义?

https://jsbin.com/bisomevivu/edit?html,js,控制台,输出

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input data-custom="CUST" data-standard="STD" id="input">
  <button id="button">Test</test>
</body>
</html>

JS:

const [button, input] = ["button", "input"].map(id=> document.getElementById(id));

button.addEventListener("click", ()=>{
  
  const {dataset: {custom}, ...props} = input;
  const {value: A} = props;
  const {dataset: {standard}, value: B} = input;
  
  
  console.info(`A: '${A}' - B: '${B}'`);
  
});

常规解构有效,其余的则无效

javascript destructuring
1个回答
0
投票

尝试解构

attributes
而不是
props
并从其第 0 个元素推断出值:

const [button, input] = ["button", "input"].map(id=> document.getElementById(id));

button.addEventListener("click", ()=>{
  
  const {dataset: {custom}, attributes: [...props]} = input;
  const {value: A} = props[0];
  const {dataset: {standard}, value: B} = input;
  
  
  console.info(`A: '${A}' - B: '${B}'`);
  
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input data-custom="CUST" data-standard="STD" id="input">
  <button id="button">Test</test>
</body>
</html>

© www.soinside.com 2019 - 2024. All rights reserved.