http响应中的角度异常行为

Question

I'm calling my api that returning a json in the response. I'm calling as below:

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;
    })
}

Then I add this code to the end:

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

Then in console log I get 2 indexes (0,1). Why does this happen? (I know the built in console.log has some problems but really can not understand this)

Finally my code is:

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

This happens because javascript copy references, not values. Something like pointers on C language.

Example:

var a = [];
var b = a;

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

The same occurs with your code.

To clone an array on Javascript, you can do:

1. slice()

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

2. Spread operator (ES6 only)

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

This option will work only on ES6 compatible browsers (95.25% of users according to caniuse.com ]