JS题目（实战采坑归纳篇）

1. js数据类型判断  ref使用场景   父子组件更新  hooks性能优化  路由模式区别  fibber   强缓协缓 

2. 一个div 内三个子div  纯css实现高度对齐

   React useEffect依赖项如何实现初始化不加载

   Sass/Less语法及编译

   Git  stash 命令使用

   TS中 type 和 instanceof   泛型

   BigFish 框架

   Js精度丢失问题在银行业务场景下的处理0.1+0.2
    

3. 手写代码
   拍平数组

   //拍平数组
   const arr= [1,[2,[3]]]
   const result = arr.myFlat()
   console.log(result)

   const arr = [{a:'2'},{a:'3'},{a:'5'},{a:'7'}]
   filter, Map, Reduce 
   return :'257'

4. IE标准下有哪些兼容性写法

    解答：

   var ev = ev || window.event;
   
   var target = ev.target || ev.srcElement;
   
   var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;

5. add(1,2,3,4)
    

   function add(){
       var sum = 0,
       length = arguments.length;
       for(let i=0; i<length; i++){
           sum += arguments[i];
       }
       return sum;
   }
   
   add();
   add(1);
   add(1,2,3,4);

6. 用户在输入框中任意输入数字，请将其转换成美元格式进行展示，例如，输入数字为8734231，对应显示结果为$8,734,231。

   function AutoFormat() {
     var strNum = this.document.getElementById("money").value;
     var strTemp = 0;
     var newStrNum = "";
     for (i = 0; i < strNum.length; i++) {
       if (strNum.substr(i, 1) != ",") {
         newStrNum = newStrNum + strNum.substr(i, 1);
       }
     }
     //alert(newStrNum);
     strNum = newStrNum;
     var tag = true;
     //if input is not a num then clear the input box and reinput again
     if (test(strNum)) {
       alert('Only integer is allowed');
       this.document.getElementById("money").value = '';
       tag = false;
     }
     var length = strNum.length;
     var mod = length % 3;
     var temp = "";
     if (length >= 4 && tag) { //only the length > 4 then run this process
       if (mod == 1) {
         temp = strNum.substr(0, 1) + ",";
         length = length - 1;
         newStrNum = strNum.substr(1, length); // get the other numbers
       }
       if (mod == 2) {
         temp = strNum.substr(0, 2) + ",";
         length = length - 2;
         newStrNum = strNum.substr(2, length); // get the other numbers
       }
       if (mod == 0) {
         newStrNum = strNum;
       }
       for (i = 0; i < length; i = i + 3) {
         temp += newStrNum.substr(i, 3) + ",";
       }
       temp = temp.substr(0, temp.length - 1);
       this.document.getElementById("money").value = temp;
       //alert(temp);
     }
   }

7. 以下代码输出结果

   function A(){
       this.m = 1;
   }
   A.prototype.m = 2;
   
   var a = new A();
   console.log(a.m);

   结果：1

8. 输出

   console.log('asd'?true:false)   //true
   console.log('asd'==true)  //  隐式转换=>NaN == 1  输出 false   
   

   当**Equal Operator**两边的操作数类型不同的时候，JavaScript就会把他们convert成相同类型，然后使用**Strict Comparison**。规则如下：
   如果有一个操作数是Boolean时，就把他convert成Number。
   如果有一个操作数是String，另一个是number，就把前者转换成后者。
   如果有一个操作符是Object，另一个不是，则调用`valueOf()`, 把Object转换成Primitive Value， 然后按照前面的规则进行比较。
   
   JavaScript中的false，包括：0、-0、null、""、false、undefined 和 NaN。
    

9. 以下输出结果

   console.log(typeof a)
   console.log(typeof b)
   console.log(typeof c)
   var a = function(){return true}
   console.log(a()&&b()&&c())
   
   function c(){return true}
   
   var o={
       a:1,
       f:function(){
           return this.a;
       }
   }
   
   console.log(o.f())
   
   var o1=o;
   console.log(o1.f());

   //结果
   undefined
   undefined
   function
   Uncaught ReferenceError: b is not defined  at <anonymous>:5:13
   1
   1

   
    

10. 如何使a满足以下条件执行sucess?

    var a;
    if(a==1&a==2&a==3){
        console.log('sucess')
    }

    方案一：

    let a = [1, 2, 3];
    a.toString = a.shift;
    if (a == 1 && a == 2 && a == 3) {
    　console.log('yes!')
    }

    let a = [1,2,3];
    a. valueOf  = a.shift;
    console.log(a == 1 && a == 2 && a == 3); // true

11. 以下函数的输出结果

    var a = 'a';
    function A(){
        console.log(a);
        var a = 'b';
        console.log(a)
    }
    A();
    

    //结果
    //undefined
    //b
    
    
    
    变形：

     var a = 'a';
     function A(){
         console.log(a);
         let a = 'b';
         console.log(a);
     }
     A();
    

     // 结果
    //error  第一个console报错 未声明之前不能访问到a
    //第二个console 可以输出 b
    
     
12. 以下函数执行结果

    var obj = {
        name :'obj',
        hello(){
            console.log(this.name)
        },
    }
    var h = obj.hello;
     h()
    

    // 结果
    //空，什么也不输出
    
      变形：

    
    var obj = {
        name:'obj',
        hi(){
            return ()=>{
                console.log(this.name)
            }
        },
    }
    var h2=obj.hi();
    h2()
      

    //结果
    //obj
    
    
     

13. 键值对数组以键排序

    const data= {1001:1,1002:2,1003:4,1004:2,1005:3,1006:1};
    const keys = Object.keys(data);
    keys.sort(function(a,b){
        return data[b]-data[a];
    });
    console.log(keys);
    //js对象的键是字符串需要转换
    const out=keys.map(function(x){
        return parseInt(x);
    });
    
    console.log(out);

    
    
    
     
14. 实现一个 New

    // new 关键字的作用就是执行构造函数，返回实例化对象

    const myNew = (...agrs) => {
        // 1.创建空对像
       const obj = {};
       // 2.获取构造函数
       const Construct = [].shift.call(args);
       // 3.空对象的隐式原型指向构造函数的显式原型
       obj.__proto__ = Construct.prototype;
       // 4.将构造函数的this 指向obj 并执行构造函数
       let ret = Construct.apply(obj,args)
       // 5.根据执行构造函数的返回值判断是返回执行构造函数的返回值还是返回空对象
       return typeof ret === 'object' ? ret : obj
    }

    
     

15. 写一个函数获取非行间样式
    解答：

    var div = document.getElementsByTagName('div')[0];
    function getStyle(obj,attr) {
        if(obj.currentStyle) {
            return obj.currentStyle[attr];  //currentStyle 仅IE有效
        }else{
           return getComputedStyle(obj,null)[attr]  //getComputedStyle 火狐谷歌有效
        }
    }
    console.log(getStyle(div,"width"));

16. 输出结果

    Promise.resolve().then(()=>{
    	console.log(“Promise1”)
           setTimeout(()=>{
             console.log(“setTimeout2”)
           },0)
    })
    
    setTimeout(()=>{
         console.log(“setTimeout1”)
         Promise.resolve().then(()=>{
    	 console.log(“Promise2”)
         })
    },0) 
    

    js是单线程所有主线程的同步任务先执行，然后执行微任务队列的程序，最后执行宏任务队列，秉承先进先出的原则。

    宏任务macrotask有哪些

    script
    setTimeout
    setInterval
    MessageChannel
    postMessage
    setImmediate requestAnimationFrame
    
     

    微任务microtask有哪些

    process.nextTick
    MutationObserver Promise.then

17. 输出结果

    Console.log(a) var a=2; function a(){} 

    var a=2; Console.log(a)  function a(){} 

    Console.log(a) var a=2; var a=function(){}

    以上三段分别输出和下面之后输出的结果分别是

    Console.log(a) var a=2; function a(){} 
    
    var a=2; Console.log(a)  function a(){} 
    
    Console.log(a) var a=2; var a=function(){} 

    结果：

18. 实现交通信号灯（红绿灯）效果

    <ul id="traffic" class="wait">
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
    </ul>

    ul{
        list-style: none;
    }
    #traffic>li{
        display: none;
    }
    #traffic span{
        display: inline-block;
        width: 50px;
        height: 50px;
        background: grey;
        margin: 5px;
        border-radius: 50%;
    }
    #traffic.wait li:nth-child(1) span{
        background-color:#a00;
    }
    #traffic.wait li:nth-child(2) span{
        background-color:#aa0;
    }
    #traffic.wait li:nth-child(3) span{
        background-color:#0a0;
    }

    请补全javascript代码：

    解答：

19. 输出
    
    结果： 196872354