使用此語法時是否可以動態設定鍵，如本例所示？
在此示例中，該changeValue函式更改頂部顯示的狀態物件。該changeValue函式采用字串鍵陣列作為動態設定值的一種方式。
此代碼不起作用，我不是在尋找替代方法：（在合理的交替范圍內）
const state = {
profile: {
isFollowing: false,
},
person: {
characteristics: {
gender: "male"
}
}
}
console.log(state.profile.isFollowing) //false
console.log(state.person.characteristics.gender) //male
function changeValue(keys, value){
state[keys] = value
}
console.log(state.profile.isFollowing) //true
console.log(state.person.characteristics.gender) //female
changeValue(["profile", "isFollowing"], true) //<-- using an array of strings
//AFTER STATE CHANGE
//const state = {
// profile: {
// isFollowing: true,
// },
// person: {
// characteristics: {
// gender: "male"
// }
// }
//}
changeValue(["person", "characteristics", "gender"], "female") //<-- using an array of strings
//AFTER STATE CHANGE
//const state = {
// profile: {
// isFollowing: true,
// },
// person: {
// characteristics: {
// gender: "female"
// }
// }
//}我不想[keys]在函式內手動定義changeValue。
這可能嗎？
uj5u.com熱心網友回復：
不，你不能只用陣列索引一個物件并讓它自動分層下降。您可以安裝一些模塊來做類似的事情；例如，查看lodash的set方法。您必須將陣列加入到單個.分隔的鍵路徑字串中，但這基本上就是您要查找的內容。
但是，在 vanilla JS 中自己使用回圈也很容易：
function changeValue(keyPath, newValue) {
let target = state
let key = keyPath[0]
for (let i=1; i<keyPath.length; i) {
target = target[key]
key = keyPath[i]
}
target[key] = newValue;
}
這是在行動：
const state = {
profile: {
isFollowing: false,
},
person: {
characteristics: {
gender: "male"
}
}
}
function changeValue(keyPath, newValue) {
let target = state
let key = keyPath[0]
for (let i=1; i<keyPath.length; i) {
target = target[key]
key = keyPath[i]
}
target[key] = newValue;
}
changeValue(["profile", "isFollowing"], true);
changeValue(["person", "characteristics", "gender"], "female")
console.log(state);uj5u.com熱心網友回復：
肯定的事。像這樣的輔助函式應該可以解決問題。
const state = {
profile: {
isFollowing: false,
},
person: {
characteristics: {
gender: "male"
}
}
}
function changeValue(target, path, value) {
for(let i = 0; i < path.length - 1; i ) {
target = target[path[i]];
}
target[path[path.length - 1]] = value;
}
console.log(JSON.stringify(state));
changeValue(state, ["profile", "isFollowing"], true);
console.log(JSON.stringify(state));
changeValue(state, ["person", "characteristics", "gender"], "female");
console.log(JSON.stringify(state));uj5u.com熱心網友回復：
另一種方法是使用 reduce 來處理物件，直到到達最后一項，然后設定它的值。
const state = { profile: { isFollowing: false, }, person: { characteristics: { gender: "male" } } }
function changeValue(keys, value){
keys.slice(0,-1).reduce((acc, k) => acc[k], state)[keys.slice(-1)] = value
}
changeValue(["profile", "isFollowing"], true);
console.log(state);
changeValue(["person", "characteristics", "gender"], "female");
console.log(state);轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/459205.html
標籤：javascript
上一篇：聚合操作后取消分組熊貓資料框