js案例分析

名字取的高大上，其实只是我平时上网浏览遇到的一些我感觉还不错的小题目，再加上我或者是我在网上找到的一些理解，就保存到这里了。

2019/4/2  最新开了个新坑，是一个javascipt30的一些案例，地址： https://www.cnblogs.com/wangxi01/p/10641115.html

1.

window.$ = HTMLElement.prototype.$ = function(selector) {
      var elems = (this == window ? document : this).querySelectorAll(selector);
      return elems == null ? null : elems.length == 1 ? elems[0] :elems;
}

这里，首先HTMLElement.prototype.$这是原型继承中添加了一个$的属性，然后把他赋值给一个全局变量$;

后面这个匿名函数将来就是$的值，比如：写$('#id')其实就是相当于function('#id'),就是调用这个函数。

前面的我们就理解了，那个函数里面这一长串写的什么东西呢？

这是三元运算符，不过确实是有点长了，这个function里面是在调用js的querySelectorAll方法。判断先是document.querySelectorAll还是dom.querySelectorAll。

后面返回值是说如果查询出来是null则返回null，如果是一个dom，则返回这一个，如果是多个，则返回dom数组。

2.

console.log(([])?true:false);
console.log(([]==false?true:false));
console.log(({}==false)?true:false)

此题考察类型转换，三元运算符先“分清是非”，再决定今后该走哪条路，“==”运算符比较“喜欢”Number类型。（我就不严谨地这么一说，若要刨根问底，请看《JavaScript权威指南》）

下面是题目的类型转换结果：

Boolean([]); //true
Number([]); //
Number({}); // NaN
Number(false); //

因此：

console.log(([])?true:fasle);// => console.log((true)?true:false);
console.log([]==false?true:false); // => console.log(0==0?true:false);
console.log(({}==false)?true:false); // => console.log((NaN==0)?true:false);

《JavaScript权威指南》的部分相关知识点

---

“==”运算符（两个操作数的类型不相同时）

• 如果一个值是null，另一个值是undefined，则它们相等

• 如果一个值是数字，另一个值是字符串，先将字符串转换为数学，然后使用转换后的值进行比较。

• 如果其中一个值是true，则将其转换为1再进行比较。如果其中的一个值是false，则将其转换为0再进行比较。

• 如果一个值是对象，另一个值是数字或字符串，则将对象转换为原始值，再进行比较。

---

对象到数字的转换

• 如果对象具有valueOf()方法，后者返回一个原始值，则JavaScript将这个原始值转换为数字（如果需要的话）并返回一个数字。

• 否则，如果对象具有toString()方法，后者返回一个原始值，则JavaScript将其转换并返回。（对象的toString()方法返回一个字符串直接量（作者所说的原始值），JavaScript将这个字符串转换为数字类型，并返回这个数字）。

• 否则，JavaScript抛出一个类型错误异常。

---

空数组转换为数字0

• 数组继承了默认的valueOf()方法，这个方法返回一个对象而不是一个原始值，因此，数组到数学的转换则调用toString()方法。空数组转换为空字符串，空字符串转换为数字0.