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

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

21.去掉数组中重复的数字

<script>
  //思路:每遍历一次就和之前的所有做比较,不相等则放入新的数组中
  Array.prototype.unique = function () {
    var len = this.length,
      newArr = [],
      flag = 1;
    for (var i = 0; i < len; i++, flag = 1) {
      for (var j = 0; j < i; j++) {
        if (this[i] == this[j]) {
          flag = 0; //找到相同的数字后,不执行添加数据
        }
      }
      //For 循环会遍历完所有的条件值才会跳出for循环, 除非有一个跳出循环的语句才会提前终止循环
      flag ? newArr.push(this[i]) : '';
    }
    return newArr;
  }
</script>

22.javascript中的垃圾回收机制是指?

       在Javascript中,如果一个对象不再被引用,那么这个对象就会被回收。


       如果两个对象互相引用,而不再被第3者所引用,那么这两个互相引用的对象也会被回收。


       函数a被b引用,b又被a外的c引用,这样函数a执行后就不会被回收。


23.解释以下代码

<script>
  function f1() {
    var tmp = 1;
    this.x = 3;
    console.log(tmp); //代码A
    console.log(this.x); //代码B
  }
  var obj = new f1(); //代码1
  console.log(obj.x) //代码2
  console.log(f1()); //代码3
</script>

       这道题让我重新认识了对象和函数,首先代码1实例化了f1这个类,相当于执行了f1函数;所以这个时候 A 会输出1,而代码B这个时候的this代表的是实例化的当前对象obj,B输出3;代码2毋庸置疑会输出3;而代码3这里将不再是一个类,只是一个函数,所以A输出1,代码B的this代表的其实就是window对象,那么this.x 就是一个全局变量,相当于在外部的一个全局变量,所以B输出3。最后代由于f1没有返回值所以将会返回underfined。


       答案:1, 3, 3, 1, 3, underfined 。


24.以下代码输出结果为

var o1 = new Object();

var o2 = o1;

o2.name = "CSSer";

console.log(o1.name);

       js中有两种数据类型,分别是基本数据类型和引用数据类型(object Array);对于保存基本类型值的变量变量是按值访问的,因为实际操作的是变量实际保存的值;对于保存引用类型值的变量,变量是按引用访问的,我们操作的是变量值所引用(指向)的对象。


       答案:CSSer;


25.JS的继承性

<script>
  window.color = 'red';
  var o = {
    color: 'blue'
  };
  function sayColor() {
    alert(this.color);
  }
  sayColor(); //red
  sayColor.call(this); //red,this指向window对象
  sayColor.call(window); //red
  sayColor.call(o); //blue
</script>

26.加减运算

alert('5'+3);    //53 string

alert('5'+'3');  //53 string

alert('5'-3);    //2 number

alert('5'-'3');  //2 number


27.什么是同源策略?

同协议、端口和域名的安全策略,由王景公司提出来的安全协议。


28.声明对象,添加属性,输出属性

<script>
  var obj = {
    name: 'leipeng',
    showName: function () {
      alert(this.name);
    }
  }
  obj.showName();
</script>

29.匹配输入的字符:第一个必须是字母或下划线开头,长度5-20

<script>
  var reg = /^[a-zA-Z_][a-zA-Z0-9_]{5,20}/,
    name1 = 'leipeng',
    name2 = '0leipeng',
    name3 = '你好leipeng',
    name4 = 'hi';
  alert(reg.test(name1)); //true
  alert(reg.test(name2)); //false
  alert(reg.test(name3)); //false
  alert(reg.test(name4)); //false
</script>


30.如何在HTML中添加事件,几种方法?

(1)标签之中直接添加,οnclick="fun()";


(2)JS添加,obj.onclick = method;


(3)现代事件


       IE: obj.attachEvent('onclick', method);

       FF: obj.addEventListener('click', method, false);


31.BOM对象有哪些,列举window对象

(1)window对象 ,是JS的最顶层对象,其他的BOM对象都是window对象的属性;

(2)document对象,文档对象;

(3)location对象,浏览器当前URL信息;

(4)navigator对象,浏览器本身信息;

(5)screen对象,客户端屏幕信息;

(6)history对象,浏览器访问历史信息;


32.bind(), live(), delegate()的区别

       bind: 绑定事件,对新添加的事件不起作用,方法用于将一个处理程序附加到每个匹配元素的事件上并返回jQuery对象。


       live: 将一个事件处理程序附加到与当前选择器匹配的所有元素(包含现有的或将来添加的)的指定事件上并返回jQuery对象。


       delegate: 方法基于一组特定的根元素将处理程序附加到匹配选择器的所有元素(现有的或将来的)的一个或多个事件上。  


33.在Javascript中什么是伪数组?如何将伪数组转化为标准数组?

       伪数组(类数组):无法直接调用数组方法或期望length属性有什么特殊的行为,但仍可以像对真正数组遍历一样来遍历它们。典型的是函数的argument参数,还有像调用getElementsByTagName、document.childNodes之类的,它们都返回NodeList对象且都属于伪数组。


       可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。


34.如何优化自己的代码?

(1)代码重用;


(2)避免全局变量(命名空间,封闭空间,模块化mvc..);


(3)拆分函数避免函数过于臃肿;


(4)注释。


35.怎样实现两栏等高?

<div id="container" style="display: table;width: 100%;">
    <div id="left" style="background-color: red;display: table-cell;">
      内容<br />
      内容<br />
      内容<br />
      内容<br />
      内容<br />
      内容<br />
    </div>
    <div style="display:table-cell;"></div>
    <div id="right" style="background-color: blue;display: table-cell">
      内容
    </div>
  </div>


36.简述readyonly与disabled的区别

       ReadOnly和Disabled的作用是使用户不能够更改表单域中的内容;但是二者还是有着一些区别的:


       Readonly只针对input(text/password)和textarea有效,而disabled对于所有的表单元素有效,包括select,radio,checkbox,button等。


       在表单元素使用了disabled后,我们将表单以POST或者GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去。


37.尽可能详尽的解释ajax的工作原理

       Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。


       简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理,我们必须对XMLHttpRequest有所了解。


38.为什么扩展javascript内置对象不是好的做法?

       因为并不知道哪一天浏览器或javascript本身就会实现这个方法,而且和你扩展的实现很可能有不一致的表现。到时候你的javascript代码可能已经在无数个页面中执行了数年,而浏览器的实现则会导致所有使用扩展原型的代码都崩溃。


39.浏览器标准模式和怪异模式之间的区别是什么?

       所谓的标准模式是指,浏览器按W3C标准解析执行代码;怪异模式则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式。


40.下列关于IE的window对象表述正确的有

A. window.opener属性本身就是指向window对象 √

B. window.reload()方法可以用来刷新当前页面  应该是location.reload或者window.location.reload

C. window.location=”a.html”和window.location.href=”a.html”的作用都是把当前页面替换成a.html页面 √

D. 定义了全局变量g;可以用window.g的方式来存取该变量 √


相关文章
|
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)手写【网易游戏】页面特效
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
171 2
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
46 0
|
2月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。