JavaScript 如何从引用类型（Array Object）创建一个新的对象

Posted 2021-01-04 贝尔塔猫

数组的增删改查

1、新增一项
可以使用concat方法，它不会对原有数组进行改动，而是创建一个新数组

let a = [0, 1, 2]
let b = a.concat([3])
console.log(a, b)

2、删除一项
对于删除某一项的操作，splice也不能满足要求，因为该方法会改变原有数组，相应地我们应该使用slice，并结合es next 新特性。

let array = [1,2,3]
const removeIndex =  (array, index) => {
    return [
        ...array.slice(0, index),
        ...array.slice(index + 1),
    ]    
}
let newArray = removeIndex(array, 1);

3、更新一项

let array = [1, 2, 3];
const updateIndex = (array, index, cb) => {
    return [
        ...array.slice(0, index),
        cb && cb(array[index]),
        ...array.slice(index + 1),
    ]    
}
updateIndex(array, 1, function (data) {
    return data + 1;
});

4、新增也可以使用这种思路，比concat要灵活

let array = [1, 2, 4];
const insertIndex = (array, index, value) => {
    return [
        ...array.slice(0, index),
        value,
        ...array.slice(array.length - 1),
    ]    
}
insertIndex(array, 2, 3);

 

---

 

 

对象的增删改查

1、更新一项

使用ES next新特性的 Object.assign 方法。

第一个参数必须是空对象，因为第一个参数会被改变（接受合并所有参数的值）
我们要更新的值必须放在最后面，因为参数越往后，权限越高。才能覆盖前者重复的内容

let sourceItem = {
    id: 0,
    book: ‘Learn Redux‘,
    avaliable: false
}
Object.assign({}, sourceItem, {
    avaliable: true
})

2、对象操作：新增一项

其实和上面一样，写入新的键值对就算新增嘛

let sourceItem = {
    id: 0,
    book: ‘Learn Redux‘,
    avaliable: false
}

Object.assign({}, sourceItem, {
    fuck: 123
})

3、对象操作：删除一项

let sourceItem = {
    id: 0,
    book: ‘Learn Redux‘,
    avaliable: false,
    fuck: 123
}
let newItem = Object.key(sourceItem).reduce((obj, key) => {
    if (key !== ‘fuck‘) {
        return { ...obj, [key], sourceItem[key] }
    }
    return obj
}, {})