1、JS包括哪些数据类型，请分别编写3种以上类型的判断函数

数据类型：基本类型和引用数据类型

基本类型：Number String Boolean Null Undefined Symbol(ES6新增，表示独一无二的值) BigInt(es10新增)

引用类型：Array Object Function

判断方式：

1、typeof可以判断Number String Boolean Undefined Symbol BigInt,其它的不行

    console.log(typeof 1) //number
    console.log(typeof "1") //string
    console.log(typeof true) //boolean
    console.log(typeof Symbol()) //symbol
    console.log(typeof undefined) //undefined
    console.log(typeof 10n) //bigint

2、constructor可以判断数据的类型,尤其是typeof无法检测出来的数据类型

    console.log(null === null) //true
    console.log(([]).constructor === Array) //true
    console.log(({}).constructor === Object) //true

3、最实用的一种判断数据类型的方法，就是利用原型

    console.log(Object.prototype.toString.call(1).split(" ")[1].replace(']','')) //Number
    console.log(Object.prototype.toString.call('1').split(" ")[1].replace(']','')) //String
    console.log(Object.prototype.toString.call(true).split(" ")[1].replace(']','')) //Boolean
    console.log(Object.prototype.toString.call(null).split(" ")[1].replace(']','')) //Null
    console.log(Object.prototype.toString.call(undefined).split(" ")[1].replace(']','')) //Undefined
    console.log(Object.prototype.toString.call(10n).split(" ")[1].replace(']','')) //BigInt
    console.log(Object.prototype.toString.call(Symbol()).split(" ")[1].replace(']','')) //Symbol
    console.log(Object.prototype.toString.call([]).split(" ")[1].replace(']','')) //Array
    console.log(Object.prototype.toString.call({}).split(" ")[1].replace(']','')) //Object
    console.log(Object.prototype.toString.call(function(){}).split(" ")[1].replace(']','')) //Function

2、编写一个JS函数，实时显示当前时间，格式：“年-月-日时:分:秒”

        // 格式:年-月-日 时：分：秒
        const currentTime = ()=>{
        const date = new Date()
        const y = date.getFullYear()
        const m = date.getMonth() + 1  //注意月份要加1才正确
        const d = date.getDate()
        const h = date.getHours()
        const min = date.getMinutes()
        const seconds = date.getSeconds()
        return `${y}年-${m}月-${d}日 ${h}时:${min}分:${seconds}秒`
    }
    console.log(currentTime())

3、如何显示隐藏一个DOM元素

不能点击，不占据空间，DOM可访问，资源会加载:display:none
不能点击，占据空间，DOM可访问，资源会加载:visibility:hidden
能点击，占据空间，DOM可访问：opacity:0
能点击，不占据空间，DOM可访问:opacity:0;position:absolute;
不能点击，占据空间，DOM可访问:position:relative;z-index:-1;
不能点击，不占据空间，DOM可访问:position:absolute;z-index:-1;

4、如何添加html元素的事件处理，有几种方法

    // 1.在html结构中，给元素添加一个属性，属性名为：'on' + 事件名。比如onclick
    <div onclick="alert('飞飞最棒')">aaaaaaa</div>
    // 2.获取到DOM元素，添加点击事件
    <div id="second">第二种方法</div>
    document.getElementById("second").onclick = function(){
        alert("第二种方法")
    }
    // 3.W3C监听方式,事件监听
    <div id="third">第三种方法</div>
    var third = document.getElementById("third")
    third.addEventListener("click",()=>{
        alert("third")
    },false)

5、如何控制alert中的换行

alert("这是\n国庆节，\n但是我在学习")通过\n控制换行

6、判断一个字符串中出现次数最多的字符，统计这个次数

    function aa(s){
        const map = new Map()
        var max = 1
        for(let i=0;i<s.length;i++){
            if(!map.has(s[i])){
                map.set(s[i],1)
            }else{
                map.set(s[i],map.get(s[i])+1)
            }
        }
        map.forEach((value,item) => {
            if(value > max){
                max = value
            }
        })
        return max
    }
    console.log(aa("aaasssssssssdddd2"))//9

7、判断字符串的组成，第一个必须是字母，后面可以是字母、数字、下划线，要求总长度为5-20

    function isStr(ss){
        var reg = /^[a-zA-Z][a-zA-Z0-9_]{4,19}$/
        if(reg.test(ss)){
            console.log("符合规则")
        }else{
            console.log("不符合命名规则")
        }
    }
    isStr("a12324")

8、编写一个函数解析url，将其解析为一个对象，如`var url = 'www.baidu.com?key0=0&key1=1&key2=2'`

    function parseQueryString(url){
        let obj = {}
        var arr = url.split("?")[1].split("&");
        arr.forEach(element => {
            let key = element.split("=")[0]
            let value = element.split("=")[1]
            obj[key] = value
        });
        return obj
    }
    console.log(parseQueryString("www.baidu.com?key0=0&key1=1&key2=2&key3=3"))

9、页面中有如下结构，要求闭包方式写一段js从文本框中取出值，并在span中显示出来

    (function(){
        var input_value = document.getElementById('field').children[0].value
        var allSpan = document.getElementsByTagName('span')
        for(let i=0;i<allSpan.length;i++){
            if(allSpan[i].className === 'red' )
            allSpan[i].innerHTML = input_value 
        }
    })()
    //闭包的原理就是：函数内部的变量用完立即销毁

10、在IE6.0下不支持position:fixed;请写一个JS使其固定在页面的右下角

思路：利用absolute随滚动条一直调整top值

    //html结构
    <div id="box"></div>
    
    //style样式
        html,body {
            height: 2000px;
        }
        #box {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        
    // clientWidth:可视区宽度 offsetWidth:盒模型的宽度
    window.onscroll = window.onresize = window.onload = () => {
        var getDiv = document.getElementById("box");
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        getDiv.style.left = document.documentElement.clientWidth - getDiv.offsetWidth + 'px';
        getDiv.style.top = document.documentElement.clientHeight - getDiv.offsetHeight + scrollTop + 'px';
    }

11、鼠标移到页面中的任意标签，显示出这个标签的基本矩形轮廓

        function mouseBorder(t){
        // 获取t的所有孩子，包括元素节点和文本节点
        var c = t.childNodes
        for(let i=0;i<c.length;i++){
            var d= c[i];
            // nodeType=1代表该节点是元素节点 2为属性节点 3为文本节点
            if(d.nodeType==1){
                d.onmouseover = function(){
                    this.style.border = '1px solid red'
                    this.style.backgroundColor = 'yellow'
                }
                d.onmouseout = function(){
                    this.style.border=""
                    this.style.backgroundColor = 'transparent'
                }
                mouseBorder(d)
            }
        }
    }
    mouseBorder(document.body)

12、js的基础对象有哪些？window和document的常用方法和属性列出来

基本对象：Function Array Boolean Date Math Number String RegExp Global

Window：

方法：setInterval/setTimeout/clearInterval/clearTimeout/alert/confirm/open

属性：name/parent/screenLeft/screenTop/self/top/status

Document:

方法:createElement/execCommand/getElementId/getElementByName/getElementByTagName

属性：cookie/doctype/domain/documentElement/readyState/URL

13、对象深拷贝的方法，手写深拷贝

思路：递归赋值，拷贝各个层级的属性，赋给一个全新的对象

    function deepClone(sourceObj){
        let objClone = Array.isArray(sourceObj) ? [] : {}
        if(sourceObj && typeof sourceObj === 'object'){
            for(key in sourceObj){
                if(sourceObj.hasOwnProperty(key)){
                    // 判断sourceObj的子元素是否为对象
                    if(sourceObj[key] && typeof sourceObj[key] === 'object'){
                        objClone[key] = deepClone(sourceObj[key])
                    }else{
                        objClone[key] = sourceObj[key]
                    }
                }
            }
        }
        return objClone
    }

方法二：利用JSON的stringfy和parse实现，不过有以下几个缺点：

如果obj里面有时间对象，则通过该方法转换后时间知识以字符串的形式存在的。
如果obj里面有正则表达式、Error对象，转换后的结果只是空对象
如果obj里面有函数、undefined，则转换后会把函数或者undefined丢失
如果obj里面有Nan\Infinity\则转换后会是null

14、JS如何定义class，如何扩张prototype

方法一：构造函数法

function Cat(){
    this.name = '大毛';
}
//生成实例使用new关键字，类的属性和方法定义在构造函数的prototype上
Cat.prototype.makeSound = function(){
    alert("喵喵喵");
}

方法二：Object.create()法，用这个方法，类就是一个对象，不是函数

var Cat = {
    name:'大毛',
    makeSound:function(){
        alert("喵喵喵");
    }
}
//直接用Object.create()生成实例，不需要new
var cat1 = Object.create(Cat)

方法三：极简主义法首先，定义一个类，在这类里面定义一个构造函数，用来生成实例。

var Cat = {
    createNew : function(){
        
    }
}

然后，在createNew()里面定义一个实例对象，把实例对象作为返回值

var Cat = {
    createNew : function(){
        var cat = {};
        cat.name = '大毛';
        cat.makeSound = function(){
            alert("喵喵喵")
        };
        return cat;
    }
}

最后，使用的时候调用Cat的createNew的方法就可以得到实例对象

var cat1 = Cat.createNew();
cat1.makeSound();

15、什么是ajax，ajax的交互模型？同步和异步的区别?如何解决跨域？

1.Ajax是什么？

Ajax是一种使用现有技术集合，技术包括HTML/XHTML/CSS/JS/XMLHTTPRequest,用于浏览器与服务器之间使用异步数据传输，做到局部请求以实现局部刷新。

2.Ajax的作用？

局部刷新页面、页面加载后从服务器请求数据、页面加载后从服务器接收数据、向后台服务器发送数据

3.Ajax交互模型（流程）：

启动，获取XMLHttpRequest对象
open，打开url通道，并设置异步传输
send，发送数据到服务器
服务器接收数据并处理，处理完成后返回结果
客户端接收服务器端返回

function getData(){
    var request = new XMLHttpRequest();
    request.open('get','https://api.muxiaoguo.cn/api/lishijr/')
    request.send()
    request.onreadystatechange = function(){
        if(request.readyState === 4 && request.status === 200){
            var res = JSON.parse(request.responseText);
            console.log(res)
        }
    }
}

4.同步和异步的区别？

同步：阻塞模式，脚本停留并等待服务器发送回复后再继续

异步：非阻塞模式，脚本允许页面继续其进程并处理可能的回复

5.解决跨域的方式？

方法一：JSONP原理

JSONP的优点是兼容性好，但是JSONP请求一定需要对方的服务器支持才可以。缺点是只支持get方法，具有局限性。原理是通过回调的形式实现跨域，通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数。

<script src="jsonp.txt">
    //3.1script标签src不存在跨域,可以引入任意扩展名的文件,如果里面存在js代码,可以直接使用
    // script引入本地的文件,但是没有名字没办法使用
</script> 
//jsonp.txt是自己键的一个文件，里面是数据 
fn(['zhangsan','lisi','wangwu','zhaoliu','sunqi']);
//在另一个文件访问的时候可以通过如下代码
<script>
    function fn(data){
    	console.log(data);//['zhangsan', 'lisi', 'wangwu', 'zhaoliu', 'sunqi'] 
}
</script>

方法二：CORS解决跨域

实现CORS的关键是服务器，只要服务器实现了CORS接口，就可以跨源通信。在响应头添加Access-Control-Allow-Origin属性，指定同源策略的地址。

header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Method:POST,GET');

方法三：Nginx

浏览器在访问受限时，可通过不受限的代理服务器访问目标站点。proxy代理是前端用的最多的解决跨域的方法。即配置一台和浏览器相同端口的服务器，浏览器访问代理服务器，代理服务器向目标服务器发送请求，由于服务器之间不存在跨域问题，代理服务器就可以拿到请求数据，又因为浏览器和代理服务器的端口一致，不存在跨域问题，因此浏览器不会拦截从代理服务器拿到的数据，顺利拿到请求数据。

同花顺前端开发笔试题目