js css 基础知识点和面试题复习

对日常的小知识点，会持续更新

== 对比

特殊原则

1. undefined == null / null == undefined
2. number 和 string/boolean 对比将 string/boolean 转换为数字类型
3. boolean 和 string 对比 将字符串转换为数字
4. String/Number/Symbol 和object 相比 ， toPrimitive(obj) 以后对比
5. 其余都为 false

eg:

console.log([10] == 10);   //true               
console.log('10' == 10);   //true            
console.log([] == 0);     //true      *        
console.log(true == 1);     //true           
console.log([] == false);       //true  *
console.log(![] == false);      // true       
console.log('' == 0);         //将字符串转换为number  对比  true         
console.log('' == false);    // 字符串和boolean对比 字符串转换为数字      true
console.log(null == false);   // false    *     
console.log(!null == true);        //true     
console.log(null == undefined);

ToPrimitive

是js将对象转换为原始类型的一个算法，是js内部的算法

hint 该函数的参数值为 string/numer/default

自定义 toPrimitive

var obj2 = {
  [Symbol.toPrimitive](hint) {
    if (hint == "number") {
      return 10;
    }
    if (hint == "string") {
      return "hello";
    }
    return true;
  }
};
console.log(+obj2);     // 10      -- hint is "number"
console.log(`${obj2}`); // "hello" -- hint is "string"
console.log(obj2 + ""); // "true"  -- hint is "default"

toPrimitive参考

this 指向问题

var lang = 1;

function fn1() {
  console.info(this.lang);
}

var obj = {
  lang: 2,
  method1: function(fn) {
    fn();
    fn.call(this);
    arguments[0]();
  },
  mtehod2:function(fn){
      document.addEventListener('click',function(){
          fn()
      },true)
  }
};

obj.method1(fn1)
obj.mtehod2(fn1)

输出结果是 1 2 undefined 
arguments[0]() 为何输出的是undefined 呢，能够理解为 arguments.0 就是argruments对象调用fn方法 因此this指向的是 arguemnts
点击的时候输出的是 1

变量提高问题

var a = 10;
function test() {
  if (!a) {
    var a = 100;
  }
  console.info(a);
}

test()

输出结果 100

用css 画一个三角形

<div style="border-top: 20px solid red;
        border-right: 20px solid transparent;
        border-left: 20px solid transparent;
        border-bottom: 20px solid transparent;
        width: 0;
        height: 0;">

</div>

变量和函数的提高

console.info(b)
var b = 10
function b () {
}
console.info(b)


输出结果  function b(){}  , 10
缘由 函数提高要比变量提高的优先级要高一些，且不会被变量声明覆盖，可是会被变量赋值以后覆盖。

css + ~

p~ul选择器 p以后出现的全部ul。
两种元素必须拥有相同的父元素，可是 ul没必要直接紧随 p。
h1 + p {margin-top:50px;}
这个选择器读做：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。｝；

script 标签上的 async 和 defer

正常的script标签html 会按照顺序加载并执行脚本会阻塞后续的dom渲染
使用async 和defer 能够解决 阻塞dom渲染的问题

async 和 defer 的区别

1. defer 会异步的加载js代码不影响后续dom 的渲染， 而且会在 DOMContentLoaded事件调用前执行。若是多个设置了defer的script 标签则会按照顺序来执行
2. async 则不会按照顺序执行，而是谁先加载完谁执行，而且跟 DOMContentLoaded事件无关

rem 算法

1rem == 设计图100px
根元素的 font-size = 100*屏幕宽度/设计图宽度

物理像素和逻辑像素

DIP 逻辑像素 px 也是逻辑像素的一种 反映的是css 或者js 程序中的像素点
DPR 设备像素比： 是设备的物理像素和逻辑像素之间的比

Bom 和 Dom

事件委托和事件冒泡

JSONP 跨域

原本是不想了解的 可是面了两次都被人问了仍是了解一下吧

原理：依靠的是script 标签能够跨域请求而且会自动执行的原理

jsonp 处理分为客户端和服务端两部分

客户端

1. 在dom中添加一个script标签，标签的地址是服务端get的地址，地址中传递一个callback 的名字，和其余的参数
2. 定义对应的callback方法方法中接受一个参数 参数就是后端返回的数据

服务端

返回一个字符串，字符串内容是调用callback 方法的js代码，而且吧返回的数据放到callback方法的第一个函数中

HTTP 状态码

1. 信息，服务器收到请求，须要请求者继续执行操做
2. 成功，操做被成功接收并处理
3. 重定向，须要进一步的操做以完成请求
   301 永久移动。
   302 临时移动 重定向
   304 未修改 访问缓存数据
4. 客户端错误，请求包含语法错误或没法完成请求
   401 身份为认证
5. 服务器错误，服务器在处理请求的过程当中发生了错误
   500 服务器内部错误

（持续更新）