【前端领域高频笔试面试】—— 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>


相关文章
|
6天前
|
JavaScript 前端开发 API
详解队列在前端的应用,深剖JS中的事件循环Eventloop,再了解微任务和宏任务
该文章详细讲解了队列数据结构在前端开发中的应用,并深入探讨了JavaScript的事件循环机制,区分了宏任务和微任务的执行顺序及其对前端性能的影响。
|
4天前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
7天前
|
前端开发 JavaScript
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
本文介绍了JavaScript中的循环语句,包括for循环、for-in循环、for-of循环、while循环、do-while循环以及break和continue的使用。
26 1
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
|
7天前
|
存储 前端开发 JavaScript
前端基础(三)_JavaScript数据类型(基本数据类型、复杂数据类型)
本文详细介绍了JavaScript中的数据类型,包括基本数据类型(Number、String、Boolean、Undefined、Null)和复杂数据类型(Object),并解释了如何使用`typeof`操作符来识别变量的数据类型。同时,还讨论了对象、函数和数组等复杂数据类型的使用方式。
13 2
|
6天前
|
JavaScript 前端开发 开发者
深入浅出 Vue.js:构建响应式前端应用
Vue.js 是一个流行的前端框架,以其简洁、高效和易学著称。它采用响应式和组件化设计,简化了交互式用户界面的构建。本文详细介绍 Vue.js 的核心概念、基本用法及如何构建响应式前端应用,包括实例、模板、响应式数据和组件等关键要素,并介绍了项目结构、Vue CLI、路由管理和状态管理等内容,帮助开发者高效地开发现代化前端应用。
|
6天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
7天前
|
前端开发 JavaScript
前端JS控制网页复制粘贴
前端JS控制网页复制粘贴
|
7天前
|
前端开发 JavaScript
前端JS截取url上的参数
文章介绍了两种前端JS获取URL参数的方法:手动截取封装和使用URLSearchParams。
20 0
|
20天前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
2月前
|
存储 前端开发 JavaScript
前端语言串讲 | 青训营笔记
前端语言串讲 | 青训营笔记
29 0
下一篇
无影云桌面