Свойство `ReadonlyArray` в машинописи не работает правильно?

Question

У меня есть код:

let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;
a[0] = 8;

console.log(ro); //expext to be [1,2,3,4] not ok
console.log(a);//expext to be [8,2,3,4] ok

, когда я изменяю массив a, меняется ли readonlyArray ro? почему?

Answer 1

Поскольку вы создаете ro из a, и ro, и a будут иметь одну и ту же ссылку в памяти, поэтому каждый раз, когда вы изменяете одно из них, другое вступает в силу другого.

Как создать массив друг от друга, не передавая ссылку?

• Можно использовать .slice()

let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a.slice();
a[0] = 8;

console.log(ro); //expext to be [1,2,3,4] ok
console.log(a);//expext to be [8,2,3,4] ok

• Можно передать это по распространенному синтаксису.

let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = [...a];
a[0] = 8;

console.log(ro); //expext to be [1,2,3,4] ok
console.log(a);//expext to be [8,2,3,4] ok

• Вы можете использовать метод Array.from(), который делает поверхностную копию существующего массива

let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = Array.from(a);
a[0] = 8;

console.log(ro); //expext to be [1,2,3,4] ok
console.log(a);//expext to be [8,2,3,4] ok

Answer 2

Создание копии с использованием Array.from() или оператора Spread

let a = [1, 2, 3, 4];
let ro = Array.from(a); // [...a]
a[0] = 8;

console.log(ro);
console.log(a);

Для чтения только попробуйте использовать Object.freeze()

let a = [1, 2, 3, 4];
let ro = [...a];

Object.freeze(ro);

a[0] = 8;
ro[0] = 8;

console.log(a);
console.log(ro);