我有以下輸入欄位：
<input name='223' type='number' class='form-control score' value='70'>
<input name='224' type='number' class='form-control score' value='65'>
<input name='225' type='number' class='form-control score' value='87'>
我想要的是將“名稱”屬性作為 JavaScript 中每個“值”的索引，用于 ajax 發布。即獲取值作為單個陣列，將名稱映射為陣列索引
Something like this:
array (
[223] => 70
[224] => 65
[225] => 87
)
uj5u.com熱心網友回復：
您可以使用reduce方法將輸入值和名稱累積到一個物件，其中鍵作為輸入名稱，值作為輸入值。
const result = [...document.querySelectorAll('input[type="number"]')].reduce((acc, i) => ({...acc, [i.name]: i.value}), {})
console.log(result)<input name='223' type='number' class='form-control score' value='70'>
<input name='224' type='number' class='form-control score' value='65'>
<input name='225' type='number' class='form-control score' value='87'>將帶有鍵的資料結構用作亂數是一種不好的做法array，該陣列被設計為具有從 0 開始的鍵序列
let array = [];
// It's a bad practice to use random index as a key for an array.
// this will create a 222 item with undefined as a value and the item number 223 with 222
array["222"] = 222;
console.log(array)以這種方式使用 Array 會導致記憶體泄漏。
uj5u.com熱心網友回復：
您可能需要一個物件陣列，其中每個元素具有key: value對應的屬性name和score屬性。實作這一目標的一種方法是array.map()
const inputs = Array.from(document.querySelectorAll(".score"))
const indexes = inputs.map(item => ({[item.name]: item.value}))
console.log(indexes)<input name='223' type='number' class='form-control score' value='70'>
<input name='224' type='number' class='form-control score' value='65'>
<input name='225' type='number' class='form-control score' value='87'>uj5u.com熱心網友回復：
您可以使用陣列或物件來實作
如果為此使用陣列，它將創建多個空值，因為 html 中的名稱從223
var res = []
document.querySelectorAll('.score').forEach(d=>{
res[d.name] = d.value
})
console.log(res[223]) // 70
console.log(res[224]) // 65
// The res value will looks like [,,,,,,,,,,,70,65,87]
您也可以使用物件實作相同的目標
var res1 = {}
document.querySelectorAll('.score').forEach(d=>{
res1[d.name] = d.value
})
console.log(res1[223]) // 70
console.log(res1[224]) // 65
// The sample res1 value looks like {'223':70,'224':65,'225':87}
uj5u.com熱心網友回復：
而不是一個陣列，我建議使用一個物件作為陣列上的數字索引將在該索引處創建一個陣列條目，從而導致一個非常稀疏、大部分為空但非常大的陣列。
一種方法如下：
// helper utitilies, largely to reduce typing in larger projects;
// caching a reference to document:
const D = document,
// an alias for querySelectorAll() that accepts an Element as
// a context within which to search for the supplied selector,
// defaulting to document:
get = (sel, ctx = D) => ctx.querySelector(sel),
// similar to the above, but an alias for querySelectorAll(),
// and here we convert the NodeList returned from querySelectorAll()
// into an Array in order to use Array methods:
getAll = (sel, ctx = D) => [...ctx.querySelectorAll(sel)],
// simple function to take a selector, retrieves the elements
// matching that selector and then iterates over the Array of
// Element Nodes:
collate = (sel) => getAll(sel).map(
// using an Arrow function along with destructuring assignment to
// retrieve the 'name' and 'value' properties of the Element, and
// passing those into the function body:
({
name,
value
}) => {
// here we return the Object formed from the name variable,
// and supplying the value property of the Element as the
// property-value:
return {
[name]: value
}
}),
// calling the function on all <input> elements (adjust the selector
// for more precise control):
nameAndValues = collate('input'),
// this could also benefit from being converted into JSON:
nameAndValuesJSON = JSON.stringify(nameAndValues);
console.log(nameAndValues);
console.log(nameAndValuesJSON);<input name='223' type='number' class='form-control score' value='70'>
<input name='224' type='number' class='form-control score' value='65'>
<input name='225' type='number' class='form-control score' value='87'>JS 小提琴演示。
參考：
Array.prototype.map().- 箭頭函式。
- 解構賦值。
document.querySelector().document.querySelectorAll().Element.querySelector().Element.querySelectorAll().Object initializer.
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/503868.html
標籤：javascript 数组 阿贾克斯
上一篇：如果在Laravel上的Ajax中滿足條件，有誰知道如何列印訊息/值？
下一篇：來自點擊事件問題的Ajax呼叫