整理前端面试题(六) : JavaScript题目

2017-08-10 本文已影响603人熠辉web3

1. 写出简单描述html标签（不带属性的开始标签和结束标签）的正则表达式，并将以下字符串中的html标签去除掉

var reg = /(<\w+>)|(<\/\w+>)/gi;
var str = '<div>这里是div<p>里面的段落</p></div>';
alert(str.replace(reg,""));

2.完成foo()函数的内容，要求能够弹出对话框提示当前选中的是第几个单选框。

<html>
<head>
    <metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>

<form name="form1">
    <input type="radio" name="radioGroup" />
    <input type="radio" name="radioGroup"/>
    <input type="radio" name="radioGroup"/>
    <input type="radio" name="radioGroup"/>
    <input type="submit"/>
</form>

<script>
    function foo() {
        //在此处添加代码
        
    }
    document.getElementsByTagName("input")[4].onclick = function(e) {
        e.preventDefault();
        foo();
    };
</script>

</body>
</html>

代码如下:

function foo() {
    //在此处添加代码
    var rdo =document.form1.radioGroup;//表单下面的所有的单选框
    for(var i =0 ;i<rdo.length;i++){
        if(rdo[i].checked){
            alert('你选择的是第' + (i + 1) + '个单选框' );
        } 
    }
}

3.完成函数showImg()，要求能够动态根据下拉列表的选项变化，更新图片的显示

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- <link href="css/style.css" rel="stylesheet"> -->
    </head>
    <body>
    <script>
        // <script type=”text/javascript” >
        function showImg (oSel) {
            //在此处添加代码 
            var str = oSel.value;
            document.getElementById("pic").src= str+".jpg";
        }
    </script>

        ![](img1.jpg)
        <br />
        <select id="sel" onchange="showImg(this)">
            <option value="img1">城市生活</option>
            <option value="img2">都市早报</option>
            <option value="img3">青山绿水</option>
        </select>


    </body>
</html>

代码如下:

function showImg (oSel) {
    //在此处添加代码 
    var str = oSel.value;
    document.getElementById("pic").src= str+".jpg";
}

4.截取字符串abcdefg的efg

方法一: 使用String.prototype.slice()方法

var str = "abcdefg";
var newStr = str.slice( 4 );
console.log( newStr );  //efg

方法二: 使用String.prototype.substring()方法

var str = "abcdefg";
var newStr = str.substring( 4 );
console.log( newStr ); //efg

5.列举浏览器对象模型BOM里常用的至少4个对象，并列举window对象的常用方法至少5个
BOM中常用的对象: window, history, document, location, navigator
BOM对象的常用方法: alert(), confirm(), open(), close(), setTimeout(), setInterval(), clearInterval(), clearTimeout

6.Javascript如何实现继承？

第一种: 借用构造函数
第二种: 混入继承
第三种: 组合继承
第四种: 原型式继承

更多信息: http://www.jianshu.com/p/7581af2b450e

7.Javascript创建函数的几种方式？

第一种:函数声明的方式:

function sum( num1, num2 ) {
    return num1 + num2;
}

第二种：函数表达式的方式:

var sum  =function ( num1, num2 ){
    return num1 + num2;
}

第三种：使用Function构造函数

var sum = new Function( "num1", "num2", "return num1 + num2")

8.Javascript创建对象的几种方式？
《JavaScript高级程序设计》一书中共提及了7中创建对象的方式, 分别是:

工厂模式
构造函数模式
原型模式
构造函数和原型模式
动态原型模式
寄生构造模式
稳妥构造模式

更多信息: https://juejin.im/entry/58291447128fe1005cd41c52

9.请你谈谈Cookie的优缺点？

优点：　
1. 通过良好的编程，可控制保存cookie中的session对象的大小
2. 通过加密和安全传输技术(SSL),可减少cookie被破解的可能性
3. 可在cookie中存放不敏感数据.
4. cookie的生命周期可控, 通过控制cookie的声明周期,让其不会永远有效


缺点:
1. cookie的数量和长度有限.每个特定的域名下最多生成20个cookie,每个cookie长度不能超过4kb
2. 额外开销,cookie在每次发起Http请求的时候都会被发送给服务器,会增加开销
3. 安全性问题,cookie不去拿全, 拦截之后会暴露session信息

10.js延迟加载的方式有哪些？

直接将script节点放置在</body>之前, 这样js脚本就会在页面显示出来之后再加载
使用script标签的defer属性, defer属性为延迟加载, 是在页面渲染完成之后再进行加载.但是又写了浏览器不支持
通过监听onload事件,动态加载script节点,google推荐的代码如下:

function downloadJSAtOnload(){
    var element = document.createElement('script');
    element.src = "defer.js";  //此处的js文件是你引入的文件路径
    document.body.appendChild(element);
}
if(window.addEventListener){
    window.addEventListener('load',downloadJSAtOnload,false);
}else if (window.attchEvent) {
    window.attchEvent('onload', downloadJSAtOnload);
}else{
    window.onload = downloadJSAtOnload;
}

通过ajax下载脚本,动态添加script节点

var xhr = new XMLHttpRequest();
xhr.open("get","script.js",true);
xhr.onreadystatechange = function() {
    if(xhr.readyState == 4) {
        if(xhr.status >= 200 && xhr.status<300 || xhr.status==304) {
            var script = document.createElement('script');
            script.type = "text/javascript";
            script.text = xhr.responseText;
            document.body.appendChild(script);
        }
    }
}

整理前端面试题(六) : JavaScript题目

猜你喜欢

热点阅读