分配給可變切片數組允許修改原始數組

Question

我們有一個帶有私有數組的類。

class BookService{
   private booksList: Book[];

   constructor (){
      this.booksList = [
         new Book('Tales', true),
         new Book('Novels', false),
         new Book('Dictionary', false)
      ];
   }

   getBooks(){
      return this.booksList;
   }

}

class Book{
   constructor ( public name: string, public isRead: boolean ){}
}

export const bookService =  new BookService();

我們也有一個實現。

import {bookService} from './book-service';

//get copy of original array which is not by reference
let books: any = bookService.getBooks().slice(0);
//log local array
console.log(books);

// modify local array
books[1].isRead = true;

//log original array
console.log(bookService.getBooks());

我們得到了原始數組的副本。 然后，我們修改了本地數組（原始數組的副本）。 我們獲得了已修改的原點數組。

我不明白為什么原始私有數組已被修改？

如果我將getBooks修改為

  getBooks(){
     return this.booksList.slice(0);
  }

它沒有幫助。

如果我使用lodash方法_.cloneDeep 方法描述來修改getBooks

  getBooks(){
     return _.cloneDeep(this.booksList);
  }

原始數組不會被修改。 為什么？ 如何避免與這種情況有關的錯誤？

Answer 1

用slice克隆數組時，內部的對象保持不變。

如果在數組arr具有三個對象a ， b和c並將其克隆，則新數組仍將包含對a ， b和c引用，而不是看起來相同的新對象。

var arr = [ a, b, c ];
var arr2 = arr.slice(0); // [ a, b, c ];

arr === arr2; // false - they are not the same array

arr[0] === arr2[0]; // true - they contain the same a object

這意味着，如果您從arr2獲得a ，則它與arr a對象相同-因此，修改一個對象將同時修改兩個對象。