js常见面试题总结

1.介绍js有哪些常用内置对象。

    1.String(字符串),
    2.Number,
    3.Boolean(布尔对象),
    4.Function(函数对象),
    5. Array(数组),
    6. Math,
    7. Object,
    8. RegExp(正则表达式对象),
    9.Date(日期对象),
    10.Error(异常对象)

2.bom对象

    1.window(核心)
    2.document对象
    3.location对象(当前页面地址)
    4.navigation对象(浏览器本身相关信息)
    5.screen对象(屏幕相关)
    6.history对象(浏览器历史相关)

3.JavaScrip的一些编写原则

    1、不要在同一行声明多个变量
    2、使用===或!==来比较
    3、使用字面量的方式来创建对象、数组,替代new Array这种形式
    4、switch语句必须要带default分支
    5、fon-in循环中的变量,用var关键字说明作用域,防止变量污染
    6、三元表达式可以替代if语句
    7、比较数据类型以下6中情况是false,其他都是true------false、""、0、null、undefined、NaN
    8、数据类型检测用typeof,对象类型检测用instanceof 9、异步加载第三方的内容 10、单行注释//,多行注释/**/
    …

4.dom对象与jQuery对象转换

    4.1 dom转jQuery dom对象如下:
    var $dom = $(dom);
    4.2 jQuery对象转dom对象
    var dom = $dom[0];
    var dom = $dom.get(0);

5正则相关[i不区分大小写,g匹配全部数据]

var str = "Hello word!  I think word is good.";

    1

5.1替换str中的word为‘javascript’

    str = str.replace(/word/ig, “javascript”);

5.2判断str中是否包含word

    /word/ig.test(str)

5.2获取str中的所有word

    str.match(/weaver/ig)

6 js选择器
6.1选择select的值【假定select的id为slt】

    $("#weaver option:selected").val()获取value $("#weaver
    option:selected").text()//获取文本值

6.2选择id为test的元素的文本内容

    $("#test").val(); // jQuery("#test").val();
    docunment.getElementById("test)

7 jq的$(function(){})与window.onload的区别

    $(function(){})不会被覆盖,而window.onload会被覆盖(页面资源全部加载完毕后执行)
    $(function(){})在window.onload执行前执行的

DOM文档加载步骤:

    1.解析HTML结构
    2.加载外部的脚本和样式文件
    3.解析并执行脚本代码
    4.构造HTML DOM模型//执行ready
    5.加载图片等二进制资源
    6.页面加载完毕,执行window.onload

8闭包问题
8.1输出下列结果

    for (var j = 0; j < 2; j++) {
        function f(){
            console.log(j)
        };
        f();
        setTimeout(()=>{
            console.log(j);
        }, j);
    }

    0 1 2 2

8.2 请填写下列运行结果

    var weaver = "to ccsb???";
    var obj = {
        weaver:"to ccsb!!!",
        fnobj:function(){
            fnobj1 = () => {
                console.log(this.weaver);
                fnobj2();
            }
            fnobj1();
            function fnobj2() {
                console.log(this.weaver)
            }
        }
    }
    obj.fnobj();
    //结果:
    to ccsb!!!
    to ccsb???

9 给数组去重

    var arrays = [1,2,3,2,4,6,5,7]
    function unique (arrray) {
        var result=[]
        //请编程实现数组去重
        return result;
    }    

    //1.利用es6的set对象
         result = [...new Set(array)];/[...new  Set (array)]
    //2.利用对象属性的唯一性
        let obj = {};
        for (let i of array) {
               if (!obj[i]) {
                   result.push(i);
                   obj[i]=1;
            }
        }
    //3.利用sort方法排序去重
        var newarray = array.sort();
        result = [newarray[0]];
        var length = newarray.length;
        for( var i = 1 ;i<length; i++) {
            newarray[i] !== newarray[i-1] && result.push(newarray[i]);
        }    
    //4.利用for...of+includes()循环
        for(var i of array) {
               !result.includes(i) && result.push(i);
        }
    //5.用filter结合indexOf
         result = array;
        return result.filter((item, index)=> {
            return result.indexOf(item) === index
        })
    //6.利用双层for循环(6分)类似
        var length = array.length;
        for(var i =0; i<length; i++) {
            var only = true;
            for(var j =i+1; j<length; j++){
                if(!only) continue;
                if(array[i] == array[j])  only = false;
            }
               if(only) result.push(array[i]);
        }

10 统计字符串中字母个数

    var str = "I think javascript is good";
    //解:方法不唯一        
    str = str.toLowerCase();
    var result = {};
    for(var i in str) {
        if(str[i] in result) {
            result[str[i]]++;
        } else {
            result[str[i]] = 1;;
        }
    }

11 数据交互

原生数据交互,post方法【可能用到方法或对象XMLHttpRequest、ActiveXObject、onreadystatechange、setRequestHeader】

        var xhr = null;
        try{
            xhr=new XMLHttpRequest();
        }catch(e){
            xhr=new ActiveXObject("Microsoft.XMLHTTP");
        }
         xhr.open("post", url, true);
        //POST提交设置的协议头(GET方式省略)
        //这里需要通过服务器设置响应头解决跨域问题
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    console.log("success!!");
                }else{
                    console.log("error code "+xhr.status)
                }
            }
        }
           //发送请求,post设置请求参数,get方式直接调用方法无需参数
        xhr.send("username="+name+"&age="+age);

Ajax

$.ajax({
    type:'POST', // 规定请求的类型(GET 或 POST)
    url:uploadV, // 请求的url地址
    dataType:'json', //预期的服务器响应的数据类型
    data:{},//规定要发送到服务器的数据
    beforeSend:function(){ //发送请求前运行的函数(发送之前就会进入这个函数)
    },
    success: function(result){ // 当请求成功时运行的函数
    },
    error:function(result){ //失败的函数
    },
    complete:function(){ //请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后,不管成功还是失败 都会进这个函数)
    }
});

fetch调用fetch函数,传入接口url,然后返回一个promise(response)

    fetch('https://www.baidu.com')
      .then(function(res) {
           成功
      },function(){
        失败
    });

猜你喜欢

转载自blog.csdn.net/jvhbi/article/details/106250931