前端知识点梳理（一）

  这几天又回顾了一些知识点，发现自己之前理解的很浅很浅。在这里我也整理并记录了下来。

一、javaScript中类型转换问题

  js中的基础类型分为：number、string、boolean、null、undefined、symbol和引用类型object这些，那么当这一块计算的时候改如何进行转换的呢？

  强制类型转换：Number()、parseInt()、parseFloat()、toString()、String()、Boolean()

  隐式类型转换：逻辑运算符(&&、 ||、 !)、运算符(+、-、*、/)、关系操作符

          (>、 <、 <= 、>=)、相等运算符(==)或者 if/while 的条件。

  今天主要讲的就是隐式类型转换的问题，我们在进行计算的时候总会得出一些意料之外的答案?，比如：{}+[] 你认为应该等于什么呢？(后面会有解析)

首先附上一张类型转换表大全?

  从上面的表中可以总结：

  转为false的主要有：0、false、null、undefined、""、NaN
  转为数值类型时需要注意：null => 0、undefined => NaN、数组如果只有一个元素（且可转为number类型）会返回第一个元素值，否则返回NaN。

  说说例题，{}+[] 、[]+{}

  对于[]+{}，调用 [] 的toString => “”，{} => “[object Object]”，结果："[object Object]"
  对于{}+[]，这种情况下{}会被当成代码块来执行无返回结果，而 [] => 0，结果：0

//如果不被当成代码块，可以加个小括号
({})+[]  => "[object Object]"
({}) + 1 =>  "[object Object]1"
[] + 1 => "1"  //[]调用ToPrimitive，返回空字符串

//快速隐式转换
+"123" => 123  //可以把字符串快速的转为数值型
123+"" => "123"  //把数字转为字符串

//null 和 undefined问题
//今天做题有个选择题
undefined==false  //false
//后来搜了下只存在null==undefined，undefind==undefined、null==null,其余都返回false

  例子中的null==0也很好的证明了上面所说的问题，但是null>=0、null<=0是怎样比较的呢？ 其实null>=0是根据null<0来比较的，因为null<0 为false，所以null>=0为true。

二、javaScript中原型问题再次理解

  关于原型最主要也就是理解prototype和__proto__这两个问题的指向。这次主要围绕这张图进行讲解。

1. 对象有__proto__属性，函数有prototype属性；
2. 对象由函数生成;
3. 生成对象时，对象的__proto__属性指向函数的prototype属性；

从上往下顺序来举例子

1、函数

function foo(){} 
var f1=new foo();
f1.__proto__ === foo.prototype; //true
foo.__proto__ === Function.prototype;  //true
foo.prototype.__proto__ === Object.prototype; //true
Function.prototype.__proto__ === Object.prototype;  //true
Object.prototype.__proto__ === null;  //true  null为原型链的终点

2、对象

var obj = {};
obj.__proto__ === Object.prototype ; //true;
Object.__proto__===Function.prototype;  //true

3、Function

Function.prototype===Function.prototype;  //true
Function.__proto__===Function.prototype;  //true

  以上呢就是对原型图的理解，其实对原型的理解还是要回归到真实的题目中去的。大家可以在底下做一下：f1. _ proto_、f1._ proto_._ proto_、f1._ proto_._ proto_._ proto_

三、css选择器权重问题

CSS选择器优先级：内联 > ID选择器 > 类选择器 =属性=伪类> 标签选择器=伪元素>*

  这是针对出现简单的选择器的时候，但是如果当出现多层叠加的情况就会比较懵?

//html
<div class="a b c">
	<p class="d">test</p>
</div>

//css
.a .d{color:green}
p.d{color:yellow}
.a.b p.d{color:red}
.a p.d{color:black}

  大家觉得会是什么颜色呢??

  噔噔噔，是红色 。

  what?? why??

到具体的计算层面，优先级是由 A 、B、C、D 的值来决定的，其中它们值计算规则如下：

1. A 的值等于 1 的前提是存在内联样式, 否则 A = 0;
2. B 的值等于 ID选择器 出现的次数;
3. C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数;
4. D 的值等于 标签选择器 和 伪元素 出现的总次数 。

//在这个题中
1、{0 0 2 0}
2、{0 0 1 1}
3、{0 0 3 1}  //yes
4、{0 0 2 1}

  我们的比较优先级的方式是从A到D去比较值的大小，A、B、C、D权重从左到右，依次减小。判断优先级时，从左到右，一一比较，直到比较出最大值，即可停止。

编程题：实现大数相加

  昨天做笔试的时候有这么一道题，实现两个大数相加。思想就是：把两个数转为字符串，每次相加的数保存到数组中，定义遍历来保存进位的数。

function bigNumberAdd(a,b){
      let arr=(a+'').split("");  
      let brr=(b+'').split(""); //分割成数组来保存每一位
      let result=[];     //用来保存相加之后的每一位和（余数+上一次进位）
      let prefix=0;     //用来表示进位数（商+上一次进位数）
      let aLen=arr.length , bLen=brr.length;
      let cLen=Math.max(aLen,bLen);  //求出最长数字的长度
      for(let i=0;i<cLen;i++){
          let a = aLen-i-1>=0 ? parseInt(arr[aLen-i-1]) : 0;   //获取两位数字，从后向前获取
          let b = bLen-i-1>=0 ? parseInt(brr[bLen-i-1]) : 0;
          result[i] = (a+b+prefix) % 10;
          prefix = Math.floor((a+b+prefix) / 10);
      }
	 return result.reverse().join("")  ;
}

这次呢就先分享到这，下次在和大家继续分享我整理的知识点，每次分享的知识点不多。

如果有错误的地方，欢迎大家指出

如果有更快速理解的方法，也希望留下你的方法，我们共同进步?