Javascript 扩展运算符简单示例

Javascript 扩展运算符简单示例,javascript,deep-copy,spread,Javascript,Deep Copy,Spread,复制可以通过三种方式实现: Object.assign 洛达斯图书馆 用于“排列(运算符)”和“静止(参数)”两种 我需要有关“排列(运算符)”和“静止(参数)”的简单用法的示例有关“排列(运算符)”和“静止(参数)”的简单用法的示例 var a = {b: 'b', c: ['c1', 'c2'], d: {d1: 'd1', d2: 'd2'}} a.log -> {b: "b", c: ["c1", "c2"], d

复制可以通过三种方式实现:

  • Object.assign
  • 洛达斯图书馆
  • 用于“排列(运算符)”和“静止(参数)”两种

  • 我需要有关“排列(运算符)”和“静止(参数)”的简单用法的示例

    有关“排列(运算符)”和“静止(参数)”的简单用法的示例

    var a = {b: 'b', c: ['c1', 'c2'], d: {d1: 'd1', d2: 'd2'}}
        a.log -> {b: "b", c: ["c1", "c2"], d: {d1: "d1", d2: "d2"}}
        //////////////////////////////////////////////////////////////////////////////
        // Copy a and update c to empty array
        var a1 = {...a, c: []}
        a1.log -> {b: "b", c: [], d: {d1: "d1", d2: "d2"}}
        
        a.d === a1.d   // same object
        true
    //////////////////////////////////////////////////////////////////////////////
        // Copy a and copy c 
        var a1 = {...a, c: [...a.c]}
        a1.log -> {b: "b", c: ["c1", "c2"], d: {d1: "d1", d2: "d2"}}
        a.c === a1.c    // different object
        false
        a.d === a1.d   // same object
        true
        
        //////////////////////////////////////////////////////////////////////////////
        // Copy a and copy c. Remove element 'c1' add element 'c4'
        var a1 = {...a, c: [...a.c.filter(e => e !== 'c1'), 'c4']}
        a1.log -> {b: "b", c: ["c2", "c4"], d: {d1: "d1", d2: "d2"}}
        
        //////////////////////////////////////////////////////////////////////////////
        // Copy a . replace element d
        var a1 = {...a, d: {}}
        a1.log -> {b: "b", c: ["c1", "c2"], d: {}}
        
        //////////////////////////////////////////////////////////////////////////////
        // Copy a and copy element d 
        var a1 = {...a, d: {...a.d}}
        a1.log -> {b: "b", c: ["c1", "c2"], d: {d1: "d1", d2: "d2"}}
        a.d === a1.d   // different object
        false
        
        //////////////////////////////////////////////////////////////////////////////
        // Copy a and copy element d and replace d1
        var a1 = {...a, d: {...a.d, d1: 'd3'}}
        a1.log -> {b: "b", c: ["c1", "c2"], d: {d1: "d3", d2: "d2"}}
        
        //////////////////////////////////////////////////////////////////////////////
        // Copy a and copy element d and replace d1 add d4
        var a1 = {...a, d: {...a.d, d1: 'd3', d4: 'd4'}}
        
        a1.log -> {b: "b", c: ["c1", "c2"], d: {d1: "d3", d2: "d2", d4: "d4"}}
        
        //////////////////////////////////////////////////////////////////////////////
        // Deep copy for a
        var d = {}
        var d = {...a, c: [...a.c], d: {...a.d}}
        // because element b is enumerable element we do not need to deep copy b
        d.b === a.b
        true
        a.b = 'b1'
        "b1"
        d.b
        "b"
    

    这回答了你的问题吗?无法使用Object.assign/spread/rest完成深度复制。只有第一级。对于深度复制,您需要实现递归解决方案或使用lodash.cloneDeep。这不是重复。“最好的方法是什么…”与“扩展运算符简单示例”之间没有关系。无法使用Object.assign/Spread/rest进行深度复制。只有第一级。对于深度复制,您需要实现递归解决方案或使用lodash.cloneDeep.as@stavalfi提到的方法