js面试——js的输出内容

上一篇讲了js的立即执行函数，现在做一点应用：
一、立即执行函数应用

       var a = 10;                       //1
        (function() {
            console.log(a);              //2
            a = 5;                       //3
            console.log(window.a);       //4
            var a = 20;                  //5
            console.log(a);
        })()

执行结果是：？？

1. 行标2处：输出结果 undefined;
   通过定义一个匿名函数，创建了一个新的函数作用域，相当于创建了一个“私有”的命名空间，该命名空间的变量和方法，不会破坏污染全局的命名空间。
   若是想访问全局对象，将全局对象以参数形式传进去即可

    (function(a) {}(10)

为什么不是20？ 这块由于变量提升的原因，立即执行函数的代码变成：

(function() {
           var a=undefined;
            console.log(a);              //2
            a = 5;                       //3
            console.log(window.a);       //4
            a = 20;                  //5
            console.log(a);
        })()

2. 行标4 处打印 :10
   行标1处通过var全局声明a=10，如果全局的标量通过var 声明则会挂载到window上面
   3） 行标6处 打印 ：20；

二、 对象中

var obj = {
    '2': 3,
    '3': 4,
    'length': 2,
    'splice': Array.prototype.splice,
    'push': Array.prototype.push
}
obj.push(1)
obj.push(2)
console.log(obj)

输出的结果是什么？？
先了解一个概念：类数组

类数组: -不是数组

1.可以利用属性名模拟数组的特性，不具有数组所具有的方法

2.可以动态的增长length属性，拥有length属性，其它属性（索引）为非负整数(对象中的索引会被当做字符串来处理，这里你可以当做是个非负整数串来理解)

3.如果强行让类数组调用push方法，则会根据length属性值得位置进行属性的扩充。

将类数组转成数组：

const div = document.querySelectorAll('div')
Array.from(div)
[...div]
Array.prototype.slice.call(div,0)

push 方法
在数组末尾插入给定值，数组长度＋1；

const arr = []
// 输出  0 []
console.log(arr.length, arr)
arr.push(1)
// 输出  1 [1]
console.log(arr.length, arr)

可以看到push方法会将数组的length + 1, 然后将值放在索引为length - 1的位置即arr[0] = 1；

在MDN上面对push的方法的解释是:

push 方法具有通用性。该方法和 call() 或 apply() 一起使用时，可应用在类似数组的对象上。push 方法根据 length 属性来决定从哪里开始插入给定的值。如果 length 不能被转成一个数值，则插入的元素索引为 0，包括 length 不存在时。当 length 不存在时，将会创建它。
再看obj.push(1), 因为obj.length = 2, 所以会将length + 1就变成了3, 这时候 索引值时obj[3 - 1] = 1 即obj[2] = 1, 同理 obj.push(2) 也一样的。

当console.log(obj)的时候，因为数组未设置索引为0,1的值，所以值时empty, 然后索引 2,3都有值。
nodejs与chrome控制台的不同
在nodejs中，上面的代码会输出：

{ '2': 1,
  '3': 2,
  length: 4,
  splice: [Function: splice],
  push: [Function: push] }
  
但 chrome中，输出
[empty × 2, 1, 2, splice: ƒ, push: ƒ]

可以看到一个是对象，一个是数组，这一块有一个隐藏的知识点，其实通过push为类数组添加数据并不会将类数组变成数组，所以nodejs输出的还是一个对象，但是对于chrome控制台，它会通过判断数据上面是否有length和splice属性来判断将数据展现为对象格式还是数组格式，可以控制台试试下面代码

console.log({splice:function(){},length:1})
console.log({slice:function(){},length:1})