JS循环赋值为什么最后结果不对？

Question

var style = { fontsize: 12, left: 0 };
var style_array = new Array();

function tt(){
    ss();
    for(var j=0;j<12;j++){
        console.error(style_array[j].left + " "+ j+" " + style_array[j].fontsize);
    }
}

function ss(){
for (var i = 0; i < 12; i++) {
    style.fontsize = parseInt((Math.random() * 1 + 1) * 12);
    style.left = parseInt(300 * Math.random() * 0.8);
    style_array[i] = style;
  }
  console.log(style_array);
}
tt();

最后输出的都是style[12]的值，说明赋值的时候只保留了最后一个，这是为什么？

---

刚刚测试一下，发现只要跳出ss()里面的for循环，style_array[]就全部变成了同样的值

var style = { fontsize: 12, left: 0 };
var style_array = new Array();
function ss(){
for (var i = 0; i < 12; i++) {
    style.fontsize = parseInt((Math.random() * 1 + 1) * 12);
    style.left = parseInt(300 * Math.random() * 0.8);
    style_array[i] = style;
    if(i>=1) console.log(style_array[i-1]);
  }
  console.log(style_array);
}
ss();

问题可以简化了，上面的为什么输出的值都一样了？

---

解决了

var style = { fontsize: 12, left: 0 };
var style_array = new Array();

function ss(){
for (var i = 0; i < 12; i++) {
    style={};//***********重点**************
    style.fontsize = parseInt((Math.random() * 1 + 1) * 12);
    style.left = parseInt(300 * Math.random() * 0.8);
    style_array[i] = style;
  }
  console.log(style_array);
}
ss();

Answer 1

style 一直是一个对象，修改了，存到数组中的也会修改。
因为数组中的数据指向的都是一个内存地址。对象在进行赋值时，深拷贝一下。
var s = JSON.parse(JSON.stringify(style));
在循环中修改 s 对象的值，就 OK 了