鉴于以下 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}'`);
});
常规解构有效,其余的则无效
尝试解构
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>