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 服务器内部错误

（持续更新）