【前端领域高频笔试面试】—— JavaScript相关(二)1

简介: 【前端领域高频笔试面试】—— JavaScript相关(二)1

1.写出简单描述html标签(不带属性的开始标签和结束标签)的正则表达式,并将字符串中html标签去掉

var str = “<div>这里是div<p>里面的段落</p></div>”;
<script type=”text/javascript”>
  var reg = /<\/?\w+\/?>/gi;
  var str = “<div>这里是div<p>里面的段落</p></div>”;
  alert(str.replace(reg,”"));
</script>

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

<body>
  <img id=”pic”src=”img1.jpg”width=”200″ height=”200″ />
  <br />
  <select id=”sel”>
    <option value=”img1“>城市生活</option>
    <option value=”img2“>都市早报</option>
    <option value=”img3“>青山绿水</option>
  </select>
</body>
<script>
  function showImg(oSel) {
    //在此处添加代码 
    var str = oSel.value;
    document.getElementById(“pic”).src = str + ”.jpg”;
  }
</script>

3.列举浏览器对象模型BOM里常用对象,并列举window对象的常用方法


对象:window、document、location、screen、history、navigator

方法:alert()、confirm()、prompt()、open()、close()


4.列举文档对象模型DOM里document的常用的查找访问节点方法


Document.getElementById 根据元素id查找元素

Document.getElementByName 根据元素name查找元素

Document.getElementTagName 根据指定的元素名查找元素


5.希望获取到页面中所有的checkbox,应该怎么做

<script>
  var domList = document.getElementsByTagName(‘input’)
  var checkBoxList = [];
  var len = domList.length; //缓存到局部变量
  while (len--) { //使用while的效率会比for循环更高
    if (domList[len].type == ‘checkbox’) {
      checkBoxList.push(domList[len]);
    }
  }
</script>

6.简述创建函数的几种方式

<script>
  //第一种(函数声明): 
  function sum1(num1, num2) {
    return num1 + num2;
  }
  //第二种(函数表达式):
  var sum2 = function (num1, num2) {
    return num1 + num2;
  }
  //第三种(函数对象方式):
  var sum3 = new Function("num1", "num2", "return num1+num2");
</script>

7.Javascript如何实现继承?


(1)构造继承法;

(2)原型继承法;

(3)实例继承法。


8.Javascript创建对象的几种方式

<script>
  //1.使用json创建对象
  var obj = {};
  obj.name = '张三';
  obj.action = function () {
    alert('吃饭');
  };
  //2.使用Object创建对象
  var obj = new Object();
  obj.name = '张三';
  obj.action = function () {
    alert('吃饭');
  };
  //3.通过函数创建对象。
  //(1)使用this关键字
  var obj = function () {
    this.name = '张三';
    this.age = 19;
    this.action = function () {
      alert('吃饭');
    };
  }
  //(2)使用prototype关键字
  function obj() {}
  obj.prototype.name = '张三';
  obj.prototype.action = function () {
    alert('吃饭');
  };
  //4.通过Window创建对象
  window.name = '张三';
  window.age = 19;
  window.action = function () {
    alert('吃饭');
  };
  //5.使用内置对象创建对象
  var str = new String("实例初始化String");
  var str1 = "直接赋值的String";
  var func = new Function("x", "alert(x)"); //示例初始化func
  var obj = new Object(); //示例初始化一个Object
</script>

9.iframe的优缺点

优点:

(1)解决加载缓慢的第三方内容如图标和广告等的加载问题;

(2)Security sandbox;

(3)并行加载脚本。


缺点:

(1)iframe会阻塞主页面的Onload事件;

(2)即时内容为空,加载也需要时间;

(3)没有语意。


10.请你谈谈Cookie的弊端

(1)Cookie数量和长度的限制。每个domain最多只能有20条cookie,每个cookie长度不能超过4KB,否则会被截掉。


(2)安全性问题。如果cookie被人拦截了,拦截者就可以取得所有的session信息,即使加密也与事无补,因为拦截者并不需要知道cookie的意义,他只要原样转发cookie就可以达到目的了。


(3)有些状态不可能保存在客户端。例如为了防止重复提交表单,我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端,那么它起不到任何作用。


11.js延迟加载的方式有哪些?

(1)defer和async;

(2)动态创建DOM方式(创建script,插入到DOM中,加载完毕后callBack);

(3)按需异步载入js。


12.documen.write和 innerHTML 的区别是什么?

document.write 只能重绘整个页面;


innerHTML 可以重绘页面的一部分。


13.哪些操作会造成内存泄漏?

内存泄漏指任何对象在不再拥有或需要它之后仍然存在。


(1)setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏;

(2)闭包;

(3)控制台日志;

(4)循环,在两个对象彼此引用且彼此保留时,就会产生一个循环。


14.判断一个字符串中出现次数最多的字符并统计这个次数

<script>
  var str = 'asdfssaaasasasasaa';
  var json = {};
  for (var i = 0; i < str.length; i++) {
    if (!json[str.charAt(i)]) {
      json[str.charAt(i)] = 1;
    } else {
      json[str.charAt(i)]++;
    }
  };
  var iMax = 0;
  var iIndex = '';
  for (var i in json) {
    if (json[i] > iMax) {
      iMax = json[i];
      iIndex = i;
    }
  }
  alert('出现次数最多的是:' + iIndex + '出现' + iMax + '次');
</script>

15.事件委托是什么?

让利用事件冒泡的原理,让自己的所触发的事件的父元素代替执行。

16.闭包是什么,有什么特性,对页面有什么影响?

       闭包就是能够读取其他函数内部变量的函数,在本质上闭包就是将函数内部和函数外部连接起来的一座桥梁。


17.解释jsonp的原理,以及为什么不是真正的ajax

jsonp就是动态创建script标签,回调函数;

Ajax是页面无刷新请求数据操作。


18.javascript的本地对象,内置对象和宿主对象各有什么?

本地对象:array、obj、regexp等可以new实例化的;

内置对象:gload、Math等不可以实例化的;

宿主对象:浏览器自带的document、window等。


19.将数字12345678转化成RMB形式:12,345,678

<script>
  //思路:先将数字转为字符, str= str + '' ;
  //利用反转函数,每三位字符加一个 ','最后一位不加; re()是自定义的反转函数,最后再反转回去!
  function re(str) {
    str += '';
    return str.split("").reverse().join("");
  }
  function toRMB(num) {
    var tmp = '';
    for (var i = 1; i <= re(num).length; i++) {
      tmp += re(num)[i - 1];
      if (i % 3 == 0 && i != re(num).length) {
        tmp += ',';
      }
    }
    return re(tmp);
  }
</script>

20.生成5个不同的随机数

<script>
  //思路:5个不同的数,每生成一次就和前面的所有数字相比较,如果有相同的,则放弃当前生成的数字!
  var num1 = [];
  for (var i = 0; i < 5; i++) {
    num1[i] = Math.floor(Math.random() * 10) + 1; //范围是 [1, 10]
    for (var j = 0; j < i; j++) {
      if (num1[i] == num1[j]) {
        i--;
        //重新覆盖第i( 重复) 个值, 可以将其删除或是重新的生成这个i值就会替换掉这个重复的值
      }
    }
  }
</script>


相关文章
|
26天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
23天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
25天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
38 5
|
23天前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
59 1
|
27天前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
33 4
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
103 1
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
33 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
26天前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
25 1
JavaScript中的原型 保姆级文章一文搞懂
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
103 2
|
22天前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
17 0