js数组当中的length问题

Question

如下代码

        let arr = [1,2,3,4];
        arr[name] = "aaa";
        console.log(arr[length]); //1
        console.log(arr.length); //4
        console.log(arr[""]); //aaa

Array的原型里length属性默认为0，所以在arr里面是找不到length这个属性所以才到原型里去找，
那么这个点语法和方括号法又有什么区别呢？用了点语法之后是进行运算了吗。。
数组既然是个对象，那么为什么我给数组添加一个name属性显示出来的key为空？
搞不清数组和对象的本质区别了- -

Answer 1

首先arr[length]不是你说的Array的原型里的length属性默认为0，从而得到arr[0] = 1.
原因是length变量在之前的代码中未定义，然后作用域链里找上了window对象，而window.length = 0;
所以得到arr[length] = arr[0] = 1;

其次arr[name] = 'aaa';你也没有往arr上添加name属性，中括号内的东西会当变量运算，然后再转化成string。这里同length一样在之前的代码里没有出现，从作用域链又找上了window对象，而window.name = '';
所以arr[name] = arr[''] = 'aaa'; 你往arr上添加了一个空字符串为key的属性。
所以最后你用arr['']时能得到'aaa';

Answer 2

先纠正一点吧。应该是arr['name'] = 'aaa';
等会再补充别的。
[]这种形式，会去计算[]内的值的。字符串需要加引号。其他用法向楼上说的。
其实我们一般写对象的key。点运算符后就是个字符串，只是不需要你写。
包括对象用字面量形式声明也有这种写法，如：

var obj1 = {a:1};
var obj2 = {'a  a':2};

针对你的原型那句话再补充一点：
赋值操作的最后一步是不会去原型链里找的。
比如a.b = 1，不会去a的原型链里找b;
a.b.c = 1则是，会去a的原型链里找b(找不到会报错，对应上一个的找不到a会报错)，但是不会去a.b中b的原型链里找c(在b上找不到c则直接创建c属性)
/////////////
let arr = [1,2,3,4];

    arr[name] = "aaa";

上面这个为什么key存成了空串我也不懂，等其他人解释

    console.log(arr[length]); //1

这个其实是arr[window.length],然后window.length = 1;
那么就是arr[1];我这里测试结果是2,你那里是1不清楚原因。

    console.log(arr.length); //4

length是根据最大的数字索引变的
console.log(arr[""]); //aaa

Answer 3

中括号运算符总是能代替点运算符。但点运算符却不一定能全部代替中括号运算符。

中括号运算符可以用字符串变量的内容作为属性名。点运算符不能。

中括号运算符可以用纯数字为属性名。点运算符不能。

中括号运算符可以用js的关键字和保留字作为属性名。点运算符不能

Answer 4

其实可以这样举例，数组正常情况下我们都是用下标访问的，比如：
var a1 = [1, 2 ,3]; 我们可以用 a1[1], a1[2]来访问每一个元素， 但是假如这个下标"不正常"呢？
比如：

 var a2 = []; 
 a2['name'] = 'aaa';
 a2['name_2'] = 'bbb';
 a2['name.index'] = 'ccc';

这种情况下的“索引”，你还能期望用之前的 a2[name]， a2[name_2], a2[name.index]来获取对应的元素吗，当然就不行了， 这个时候可以这样理解，a1叫做 数组， 而 a2这种就叫做 图组，这个时候,你要在 a2获取对应的元素的时候， 当然要把 name，name_2, name.index 看做一个整体， 那么当然就是要用引号包起来了，当然， 你设值的时候，也得这样设置