我想使用 javascript 使用陣列和鍵/值對的某種組合在表中顯示字典條目串列。
到目前為止，這是我要做的作業：
let d = new Map();
d.set('stack', '[n] 1. an orderly pile 2. a list in which the next item to be removed is the most recently stored [v] 1. to arrange in order 2. to arrange in stacks')
d.set('overflow', '[n] 1. a large flow 2. the occurrence of surplus liquid')
;
document.write("<table>");
for (const [key, value] of d.entries()) {
document.write("<tr><td class=\"word\">" key ": " "</td>" "<td class=\"def\">" value "</td>\n");
}
document.write("</table>");table {
border: solid thin;
border-collapse: collapse;
}
td, th {
border-collapse: collapse;
border: 1.5px solid #aaa;
padding: 4px 6px;
}
td.word {
background-color: #cee5ec;
vertical-align: top;
border-right-width: 0px;
}
td.def {
background-color: #eee;
border-left-width: 0px;
}這看起來不錯，但如果我可以將所有條目準備為字串文字并讓腳本決議和重新組織它會更好（更容易鍵入大量條目，并且與語言無關）：
let d = new Map();
let ddata = (`
stack: [n] 1. an orderly pile 2. a list in which the next item to be removed is the most recently stored [v] 1. to arrange in order 2. to arrange in stacks
overflow: [n] 1. a large flow 2. the occurrence of surplus liquid
`).split('\n');
for (let i = 0; i < ddata.length; i ) {
ddata[i].split(': ');
d.set(ddata[i][0]), d.set(ddata[i][1]);
}
document.write("<table>");
for (const [key, value] of d.entries()) {
document.write("<tr><td class=\"word\">" key ": " "</td>" "<td class=\"def\">" value "</td>\n");
}
document.write("</table>");table {
border: solid thin;
border-collapse: collapse;
}
td, th {
border-collapse: collapse;
border: 1px solid #aaa;
padding: 4px 6px;
}
td.word {
background-color: #cee5ec;
vertical-align: top;
border-right-width: 0px;
}
td.def {
background-color: #eee;
border-left-width: 0px;
}在這一點上，瀏覽器的性能并不是一個真正的問題，因為最終結果不會適用于普通觀眾。如果性能確實成為一個問題，我將分部分提供字典。
現在更大的問題是以下代碼根本沒有按預期作業。它不是在 處拆分字串:，而是制作單個字母的陣列：
ddata[i].split(': ');
d.set(ddata[i][0]), d.set(ddata[i][1]);
理想情況下，我想在詞性符號（名詞、動詞等）處創建斷點。我知道這可以用正則運算式來完成，比如(\[\w*\])匹配[n]或[noun]. 然后每個編號后的含義都可以使用\d.匹配1. 2.等來分隔。
這是所需最終結果的粗略靜態 HTML 示例：
table {
border: solid thin;
border-collapse: collapse;
}
td, th {
border-collapse: collapse;
border: 1px solid #aaa;
padding: 4px 6px;
}
td.word {
background-color: #cee5ec;
vertical-align: top;
border-right-width: 0px;
}
td.def {
background-color: #eee;
border-left-width: 0px;
}
.pos {
font-weight: bold;
}
.num {
display: inline-block;
background-color: #fff;
border-radius: 16px;
padding: 1px 0px 0px 4px;
width: 15px;
height: 18px;
font-family: sans-serif;
color: #555;
font-size: 14px;
font-weight: 200;
border: 1px solid #ccc;
}<table>
<tr>
<td class="word">stack:</td><td class="def"><span class="pos">[n]</span> <span class="num">1.</span> an orderly pile <span class="num">2.</span> a list in which the next item to be removed is the most recently stored</br><span class="pos">[v]</span> <span class="num">1.</span> to arrange in order <span class="num">2.</span> to arrange in stacks</td>
</tr>
<tr>
<td class="word">overflow:</td><td class="def"><span class="pos">[n]</span> <span class="num">1.</span> a large flow <span class="num">2.</span> the occurrence of surplus liquid</td>
</tr>
</table>↑ 注意</br>中間[n]和[v]類別，<span>標簽包裝[n]和1.（分別與類pos和num）。
把這一切放在一起變成了一個漫長的試錯程序。任何幫助表示贊賞。
uj5u.com熱心網友回復：
.split在字串上創建一個新陣列，它不會“就地”改變任何東西。
您必須存盤結果：
const [ key, value ] = ddata[i].split(': ');
d.set(key, value);
您可能還想過濾掉空行：
("...").split('\n').filter(s => s.length);
另請注意，您的新方法僅在您的值字串不包含": ". 如果你想確保只有第一個 ": "用于鍵和值之間的拆分，你可以這樣做：
const [ key, ...values ] = ddata[i].split(": ");
d.set(key, values.join(": "));
let d = new Map();
let ddata = (`
stack: [n] 1. an orderly pile 2. a list in which the next item to be removed is the most recently stored [v] 1. to arrange in order 2. to arrange in stacks
overflow: [n] 1. a large flow 2. the occurrence of surplus liquid
`).split('\n').filter(s => s.length);
for (let i = 0; i < ddata.length; i ) {
const [ key, value ] = ddata[i].split(': ');
d.set(key, value);
}
document.write("<table>");
for (const [key, value] of d.entries()) {
document.write("<tr><td class=\"word\">" key ": " "</td>" "<td class=\"def\">" value "</td>\n");
}
document.write("</table>");table {
border: solid thin;
border-collapse: collapse;
}
td, th {
border-collapse: collapse;
border: 1px solid #aaa;
padding: 4px 6px;
}
td.word {
background-color: #cee5ec;
vertical-align: top;
border-right-width: 0px;
}
td.def {
background-color: #eee;
border-left-width: 0px;
}uj5u.com熱心網友回復：
對于你來說，當你在“/n”處吐口水時，它的行是空的，所以你需要將它們過濾掉。這就是我想出的：
let d = new Map();
let ddata = `
stack: [n] 1. an orderly pile 2. a list in which the next item to be removed is the most recently stored [v] 1. to arrange in order 2. to arrange in stacks
overflow: [n] 1. a large flow 2. the occurrence of surplus liquid
`.split('\n') // Spits at newline
.filter(ddata => ddata.length > 0) // Filters every line that is empty
.map(ddata => ddata.split(':')) // Splits at colon
.forEach(ddata => { // For each line adds the word/key and def/value to the map
d.set(ddata[0], ddata[1].trim());
})
document.write("<table>");
for (const [key, value] of d.entries()) {
document.write("<tr><td class=\"word\">" key ": " "</td>" "<td class=\"def\">" value "</td>\n");
}
document.write("</table>");
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/451873.html
標籤：javascript 数组 正则表达式 排序 核心价值