プッシュなしで配列に項目を追加する

Question

配列を既存の配列にプッシュする不変の方法を試みていますが、何とか私のコードが機能していません。

function insertItem(array, action) { 
    return [ 
    ...array.slice(0, action.index), 
    action.item, 
    ...array.slice(action.index) 
    ] 
} 

const ori_arr = [{ 
    id: 1, 
    name: 'james', 
    age: 10 
}, { 
    id: 2, 
    name: 'terrance', 
    age: 20 
}] 

console.log(insertItem(ori_arr, { 
    action: { 
    index: 1, 
    item: { 
     id: 3, 
     name: 'she', 
     age: 44 
    } 
    } 
})) 

おそらくインデックス部分で間違っています。

Answer 1

追加するオブジェクトにネストされたプロパティactionがあるため、actionキーを取得するには、inserItemの引数としてdestructuringを使用します。

const insertItem = (array, { action }) => [ 
 
    ...array.slice(0, action.index), 
 
    action.item, 
 
    ...array.slice(action.index), 
 
]; 
 

 
const ori_arr = [{ 
 
    id: 1, 
 
    name: 'james', 
 
    age: 10 
 
}, { 
 
    id: 2, 
 
    name: 'terrance', 
 
    age: 20 
 
}] 
 

 
console.log(insertItem(ori_arr, { 
 
    action: { 
 
    index: 1, 
 
    item: { 
 
     id: 3, 
 
     name: 'she', 
 
     age: 44 
 
    } 
 
    } 
 
}))

Hoveverあなたがdestructuringを避けるために好むならば、ちょうど例えばためinsertItem機能であなたの第二引数の名前を変更しますobjその後、ちょうどあなたの関数内のすべてのaction.index前objを追加します。

const insertItem = (array, obj) => [ 
    ...array.slice(0, obj.action.index), 
    obj.action.item, 
    ...array.slice(obj.action.index), 
]; 

Answer 2

あなたは間違ってパラメータを渡している：

console.log(insertItem(ori_arr, { 
    index: 1, 
    item: { 
     id: 3, 
     name: 'she', 
     age: 44 
    } 
})) 

：

console.log(insertItem(ori_arr, { 
    action: { 
    index: 1, 
    item: { 
     id: 3, 
     name: 'she', 
     age: 44 
    } 
    } 
})) 

ではなくactionオブジェクトずにそれを渡しますあなたがログを記録しようとすると、あなたの関数の中にそれが見えるでしょうinsertItemあなたはparam呼び出しを持っていますエドactionは、それは（あなたがそれを呼び出すとき）あなたはaction.itemにアクセスしようとすると、それが存在しない

action = { action: { index: 1, item: { id: 3, name: 'she', age: 44 }}}

ある値です。ない -

別の解決策は、

function insertItem(array, action) { 
    return [ 
    ...array.slice(0, action.action.index), 
    action.action.item, 
    ...array.slice(action.action.index) 
    ] 
}