Angular странное поведение в ответе http

Question

Я называю мой API, который возвращает JSON в ответе.Я звоню как показано ниже:

getAllLearn() {
    this.learnService.getAllLearn().subscribe(res =>{
        // in result of log is I have res.featured which has only one index (0)
        console.log(res);
        this.myvar = res.featured;
    })
}

Затем я добавляю этот код в конец:

this.myvar[1] = res.featured[0];

Затем в логе консоли я получаю 2 индекса (0,1).Почему это происходит?(Я знаю, что во встроенном console.log есть некоторые проблемы, но на самом деле не могу этого понять)

Наконец, мой код:

getAllLearn() {
    this.learnService.getAllLearn().subscribe(res =>{
        // ---- Now it contains two indexes in my res.featured ----- 
        console.log(res);
        this.featured2 = res.featured;
        this.featured2[1] = res.featured[0];
    })
}

Answer 1

Это происходит потому, что javascript копирует ссылки, а не значения. Что-то вроде указателей на C языке.

Пример:

var a = [];
var b = a;

console.log(a.length); // 0
b.push('something');
console.log(a.length, b.length); // 1, 1

То же самое происходит с вашим кодом.

Чтобы клонировать массив в Javascript, вы можете сделать:

1. slice()

var a = [];
var b = a.slice();

2. Оператор спреда (только ES6)

var a = [];
var b = [...a];

Эта опция будет работать только в браузерах, совместимых с ES6 (95,25% пользователей в соответствии с caniuse.com ]