前端面试02-JavaScript

2022-09-09 16:38:48 浏览数 (1)

1.null，undefined的区别？

  • Undefined类型只有一个值，即undefined。当声明的变量还未被初始化时，变量的默认值为undefined。
  • Null类型也只有一个值，即null。
  • null是javascript的关键字，可以认为是对象类型，它是一个空对象指针，和其他语言一样都代表“空值”，不过undefined却是javascript才有的。undefined是在ECMAScript第三版引入的，为了区分指针对象和未初始化的变量，它是一个预定义的全局变量。没有返回值的函数返回为undefined，没有实参的形参也是undefined。
  • javascript权威指南：null 和 undefined 都表示 “值的空缺”，你可以认为 undefined 是表示系统级的、出乎意料的或类似错误的值的空缺，而null是表示程序级的、正常的或在意料之中的值的空缺。
  • javascript高级程序设计：在使用var声明变量但未对其加以初始化时，这个变量的值就是undefined。null值则是表示空对象指针。

2.逻辑运算符：或、与、非

|| : 只要其中有一个为true，整体结果是true； && : 只要有一个是false，整体结果是false； !：取反 （比较：转布尔，在取反）

3."=="和"==="的不同

答案：前者会自动转换类型,再判断是否相等 后者不会自动类型转换，直接去比较

4.总结String 对象操作方法

方法

描述

charAt()

返回在指定位置的字符。

charCodeAt()

返回在指定的位置的字符的 Unicode 编码。

concat()

连接两个或更多字符串，并返回新的字符串。

fromCharCode()

将 Unicode 编码转为字符。

indexOf()

返回某个指定的字符串值在字符串中首次出现的位置。

includes()

查找字符串中是否包含指定的子字符串。

lastIndexOf()

从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。

search()

查找与正则表达式相匹配的值。

slice()

提取字符串的片断，并在新的字符串中返回被提取的部分。不包含结束的索引

split()

把字符串分割为字符串数组。

substr()

从起始索引号提取字符串中指定数目的字符。

substring()

提取字符串中两个指定的索引号之间的字符。

toLowerCase()

把字符串转换为小写。

toUpperCase()

把字符串转换为大写。

trim()

去除字符串两边的空白

toString()

返回一个字符串。

5.函数声明与函数表达式的区别？

在Javscript中，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非是一视同仁的，解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问），至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解析执行。

6.javascript的typeof返回哪些数据类型.

答案：string,boolean,number,undefined,function,object

7.什么是作用域和作用域链，js有几种作用域分别是？

作用域（scope）

作用域是指程序源代码中定义变量的区域，简单来说，一段程序代码中所用到的变量并不总是有效的，而限定这个变量的可用性的代码范围就是这个变量的作用域。

js有三种:

  • 全局作用域 全局作用域是最外围的一个作用域。根据 ECMAScript 实现所在的宿主环境不同，表示全局作用域的对象也不一样。在浏览器中，全局作用域就是window对象，node则是global对象。
  • 局部作用域 和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，最常见的是函数内部。
  • 块级作用域 ES5本身是没有块级作用域，ES6 引入了块级作用域，让变量的生命周期更加可控，使用let和const声明的变量在指定块（简单理解就是一对花括号）的作用域外无法被访问。

作用域链（scope chain）

一般情况下，变量取值到创建这个变量的函数的作用域中取值。但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。

8.new操作符具体干了什么呢?

  1. 创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
  2. 属性和方法被加入到 this 引用的对象中。
  3. 新创建的对象由 this 所引用，并且最后隐式的返回 this 。

9.请说出你熟悉的数组的操作方法并说出如何使用?

代码语言：javascript复制
//改变原数组方法:
var arr = []
arr.push()  //数组末尾添加
arr.pop()   //数组末尾删除
arr.unshift()  //数组头部添加
arr.shift()         //数组头部删除
arr.splice()        //方法向/从数组中添加/删除项目，然后返回被删除的项目。
arr.reverse()       //方法用于颠倒数组中元素的顺序。
arr.sort()          //方法用于对数组的元素进行排序。
//不改变原数组方法:
var arr = []
arr.includes();  // 方法用于判断字符串是否包含指定的子字符串。如果找到匹配的字符串则返回 true，否则返回 false。
arr.indexOf();      //方法可返回某个指定的字符串值在字符串中首次出现的位置。
arr.lastIndexOf();  //方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
arr.slice();            //方法可从已有的数组中返回选定的元素。
arr.join();             //方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
arr.toString(); 
arr.concat();       //方法用于连接两个或多个数组。

10.讲几个常见的js内置对象？

Object 是 JavaScript 中所有对象的父对象 数据封装类对象：Object、Array、Boolean、Number 和 String 其他对象：Function、Arguments、Math、Date、RegExp

11.请说出至少三种减低页面加载时间的方法？

  1. 压缩css、js文件
  2. 合并js、css文件，减少http请求
  3. 外部js、css文件放在最底下
  4. 减少dom操作，尽可能用变量替代不必要的dom操作

12.简单数据类型和复杂数据类型

 简单类型（基本数据类型、值类型）：在存储时变量中存储的是值本身，包括String ，Number，Boolean，Undefined，Null    复杂数据类型（引用类型）：在存储时变量中存储的仅仅是地址（引用），通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等；

13.添加 删除 替换 插入到某个接点的方法？

代码语言：javascript复制
1.创建新节点
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点

2.添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
remove()//删除所有的子元素

3.查找
getElementsByTagName() //通过标签名称
getElementsByClassName() //通过元素的class属性的值
getElementById() //通过元素Id，唯一性

14.DOM 事件流是什么?如何阻止事件冒泡？

  • 事件流：从页面中接收事件的顺序。也就是说当一个事件产生时，这个事件的传播过程，就是事件流。 事件流包括三个阶段事件捕获,目标阶段,事件冒泡。
  • 事件捕获 目标阶段 事件冒泡
  • 阻止事件冒泡:event.stopPropagation()

15.Javascript的事件流模型都有什么?

“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡。

JS事件流最早要从IE和网景公司的浏览器大战说起，IE提出的是冒泡流，而网景提出的是捕获流，后来在W3C组织的统一之下，JS支持了冒泡流和捕获流，但是目前低版本的IE浏览器还是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流)，所以为了能够兼容更多的浏览器，建议大家使用冒泡流。

16.什么是事件委托?说一说事件代理,优缺点是什么?

事件委托又叫事件代理,利用事件冒泡的原理，原本绑定在子元素身上的事件，现在绑定在父元素身上，由父元素监听事件的行为。 优点: 1.可以减少事件注册,节省大量内存占用 2.可以将事件应用于动态添加的子元素上 缺点: 使用不当会造成事件在不应该触发时触发

17.说一下你对this的理解？

this 的指向，是当我们调用函数的时候确定的。调用方式的不同决定了this 的指向不同

  1. 普通函数this在非严格模式下指向window，严格模式下指向undefined
  2. 构造函数this指向实例对象，原型对象里面的方法也指向实例对象
  3. 对象方法中的this指向该方法所属的对象
  4. 事件绑定方法中的this指向绑定该事件的对象
  5. 定时器函数的this指向window
  6. 立即执行函数中的this指向window

18.BOM 和 DOM 的关系

BOM全称Browser Object Model，即浏览器对象模型，主要处理浏览器窗口和框架。

DOM全称Document Object Model，即文档对象模型，是 HTML 和XML 的应用程序接口（API），遵循W3C 的标准，所有浏览器公共遵守的标准。

可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。

19.如何编写高性能的JavaScript,(前端如何优化)

  • 将js脚本放在页面底部，加快渲染页面;
  • 将js脚本成组打包，减少请求;
  • 使用非阻塞方式下载js脚本;
  • 尽量使用局部变量来保存全局变量;
  • 尽量减少使用闭包;
  • 使用window对象属性方法时省略window;
  • 尽量减少对象成员嵌套;
  • 缓存DOM节点的访问;
  • 通过避免使用eval和function()构造器;
  • 给setTimeout()和setInterval()传递函数而不是字符作为参数;
  • 尽量使用直接量创建对象和数组;
  • 最小化重绘(repaint)和回流(reflow);

20.eval是做什么的？

它的功能是把对应的字符串解析成JS代码并运行； 应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。 　　

21.简述window对象除 document以外的一些常用子对象，并描述其作用？

window对象有很多子对象，除了 document以外，还有如下常用子对象：

  • screen对象：此对象包含有关客户端显示屏幕的信息
  • history对象：此对象包含用户访问过的 URL；
  • location对象：此对象包含有关当前 URL的信息
  • navigator对象：此对象包含有关浏览器的信息
  • event对象：任何事件触发后将会产生一个 event对象
编程算法 javascript ecmascript java

0 人点赞