js基础面试题1-10道

2023-02-18 16:53:01JavaScript099

js基础面试题1-10道,第1张

1.document load 和 document ready 的区别

参考答案：文档解析过程中，ready在加载图片等外部资源前触发，load在之后触发。如果页面中要是没有图片之类的媒体文件的话ready与load是差不多的，但是页面中有文件就不一样了，所以还是推荐大家在工作中用ready

解析：

DOM文档解析：

页面加载完成有两种事件

1.load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数

缺点：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响

代码形式：

2.$(document).ready()是当DOM文档树加载完成后执行一个函数（不包含图片，css等）所以会比load较快执行

在原生的jS中不包括ready()这个方法，Jquery才有，jquery中有 $().ready(function)。

代码形式为：

参与互动

2.JavaScript 中如何检测一个变量是一个 String 类型？

参考答案：三种方法（typeof、constructor、Object.prototype.toString.call()）

解析：

参与互动

3.请用 js 去除字符串空格？

参考答案：replace 正则匹配方法、str.trim()方法、JQ 方法：$.trim(str)方法

解析：

方法一：replace 正则匹配方法

去除字符串内所有的空格：str = str.replace(/s*/g, "")

去除字符串内两头的空格：str = str.replace(/^s*|s*$/g, "")

去除字符串内左侧的空格：str = str.replace(/^s*/, "")

去除字符串内右侧的空格：str = str.replace(/(s*$)/g, "")

示例：

方法二：str.trim()方法

trim()方法是用来删除字符串两端的空白字符并返回，trim 方法并不影响原来的字符串本身，它返回的是一个新的字符串。

缺陷：只能去除字符串两端的空格，不能去除中间的空格

示例：

方法三：JQ 方法：$.trim(str)方法

$.trim() 函数用于去除字符串两端的空白字符。

注意：$.trim()函数会移除字符串开始和末尾处的所有换行符，空格(包括连续的空格)和制表符。如果这些空白字符在字符串中间时，它们将被保留，不会被移除。

示例：

参与互动

4.js 是一门怎样的语言，它有什么特点

参考答案：

1.脚本语言。JavaScript 是一种解释型的脚本语言, C、C++等语言先编译后执行, 而 JavaScript 是在程序的运行过程中逐行进行解释。

2.基于对象。JavaScript 是一种基于对象的脚本语言, 它不仅可以创建对象, 也能使用现有的对象。

3.简单。JavaScript 语言中采用的是弱类型的变量类型, 对使用的数据类型未做出严格的要求, 是基于 Java 基本语句和控制的脚本语言, 其设计简单紧凑。

4.动态性。JavaScript 是一种采用事件驱动的脚本语言, 它不需要经过 Web 服务器就可以对用户的输入做出响应。

5.跨平台性。JavaScript 脚本语言不依赖于操作系统, 仅需要浏览器的支持。

参与互动

5.== 和 === 的不同

参考答案： == 是抽象相等运算符，而 === 是严格相等运算符。 == 运算符是在进行必要的类型转换后，再比较。 === 运算符不会进行类型转换，所以如果两个值不是相同的类型，会直接返回 false 。使用 == 时，可能发生一些特别的事情，例如：

如果你对 == 和 === 的概念不是特别了解，建议大多数情况下使用 ===

参与互动

6.怎样添加、移除、移动、复制、创建和查找节点？

参考答案：

1）创建新节点

2）添加、移除、替换、插入

3）查找

参与互动

7.事件委托是什么

参考答案：利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

解析：

1、那什么样的事件可以用事件委托，什么样的事件不可以用呢？

2、为什么要用事件委托

3、事件冒泡与事件委托的对比

4、事件委托怎么取索引？

拓展：

参考

参与互动

8.require 与 import 的区别

参考答案：两者的加载方式不同、规范不同

第一、两者的加载方式不同，require 是在运行时加载，而 import 是在编译时加载

require('./a')()// a 模块是一个函数，立即执行 a 模块函数

var data = require('./a').data// a 模块导出的是一个对象

var a = require('./a')[0]// a 模块导出的是一个数组 ======>哪都行

import $ from 'jquery'

import * as _ from '_'

import {a, b, c} from './a'

import {default as alias, a as a_a, b, c} from './a'======>用在开头

第二、规范不同，require 是 CommonJS/AMD 规范，import 是 ESMAScript6+规范

第三、require 特点：社区方案，提供了服务器/浏览器的模块加载方案。非语言层面的标准。只能在运行时确定模块的依赖关系及输入/输出的变量，无法进行静态优化。

import 特点：语言规格层面支持模块功能。支持编译时静态分析，便于 JS 引入宏和类型检验。动态绑定。

参与互动

9.javascript 对象的几种创建方式

参考答案：

第一种：Object 构造函数创建

这行代码创建了 Object 引用类型的一个新实例，然后把实例保存在变量 Person 中。

第二种：使用对象字面量表示法

对象字面量是对象定义的一种简写形式，目的在于简化创建包含大量属性的对象的过程。也就是说，第一种和第二种方式创建对象的方法其实都是一样的，只是写法上的区别不同

在介绍第三种的创建方法之前，我们应该要明白为什么还要用别的方法来创建对象，也就是第一种，第二种方法的缺点所在：它们都是用了同一个接口创建很多对象，会产生大量的重复代码，就是如果你有 100 个对象，那你要输入 100 次很多相同的代码。那我们有什么方法来避免过多的重复代码呢，就是把创建对象的过程封装在函数体内，通过函数的调用直接生成对象。

第三种：使用工厂模式创建对象

在使用工厂模式创建对象的时候，我们都可以注意到，在 createPerson 函数中，返回的是一个对象。那么我们就无法判断返回的对象究竟是一个什么样的类型。于是就出现了第四种创建对象的模式。

第四种: 使用构造函数创建对象

对比工厂模式，我们可以发现以下区别：

1.没有显示地创建对象

2.直接将属性和方法赋给了 this 对象

3.没有 return 语句

4.终于可以识别的对象的类型。对于检测对象类型，我们应该使用 instanceof 操作符，我们来进行自主检测：

同时我们也应该明白，按照惯例，构造函数始终要应该以一个大写字母开头，而非构造函数则应该以一个小写字母开头。

那么构造函数确实挺好用的，但是它也有它的缺点：

就是每个方法都要在每个实例上重新创建一遍，方法指的就是我们在对象里面定义的函数。如果方法的数量很多，就会占用很多不必要的内存。于是出现了第五种创建对象的方法

第五种：原型创建对象模式

使用原型创建对象的方式，可以让所有对象实例共享它所包含的属性和方法。

如果是使用原型创建对象模式，请看下面代码：

当为对象实例添加一个属性时，这个属性就会屏蔽原型对象中保存的同名属性。

这时候我们就可以使用构造函数模式与原型模式结合的方式，构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性

第六种：组合使用构造函数模式和原型模式

解析：参考

参与互动

10.JavaScript 继承的方式和优缺点

参考答案：六种方式

131.用原生 JavaScript 的实现过什么功能吗？

参考答案：轮播图、手风琴、放大镜、3D动画效果等，切记，所答的一定要知道实现原理！，不知道还不如不说！

参与互动

132.javascript 代码中的"use strict"是什么意思 ? 使用它区别是什么？

参考答案：意思是使用严格模式，使用严格模式，一些不规范的语法将不再支持

参与互动

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

参考答案：

参与互动

134.window.location.search() 返回的是什么？

参考答案：查询(参数)部分。除了给动态语言赋值以外，我们同样可以给静态页面, 并使用 javascript 来获得相信应的参数值返回值：?ver=1.0&id=timlq 也就是问号后面的！

参与互动

135.window.location.hash 返回的是什么？

参考答案：锚点，返回值：#love ；

参与互动

136.window.location.reload() 作用？

参考答案：刷新当前页面

参与互动

137.为什么不能定义 1px 左右的 p 容器？

参考答案： IE6 下这个问题是因为默认的行高造成的，解决的方法也有很多，例如： overflow:hidden | zoom:0.08 | line-height:1px

参与互动

138.BOM 对象有哪些，列举 window 对象？

参考答案：

参与互动

139.简述 readonly 与 disabled 的区别

参考答案：

参与互动

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

参考答案：

参与互动

141.什么是三元表达式？“三元”表示什么意思？

参考答案：三元如名字表示的三元运算符需要三个操作数。

语法是条件 ? 结果1 : 结果2.这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2。满足条件时结果1否则结果2。

参与互动

142.我们给一个 dom 同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会执行几次事件，然后会先执行冒泡还是捕获

参考答案：所有事件的顺序是：其他元素捕获阶段事件 ->本元素代码顺序事件 ->其他元素冒泡阶段事件。

参考

参与互动

144.简述一下 Handlebars 的基本用法？

参考答案：没有用过的话说出它是干什么的即可

参与互动

143.简述一下 Handlerbars 的对模板的基本处理流程，如何编译的？如何缓存的？

参考答案：

参与互动

145.前端 templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?

参考答案：

参与互动

146.知道什么是 webkit 么? 知道怎么用浏览器的各种工具来调试和 debug 代码么?

参考答案：Webkit 是浏览器引擎，包括 html 渲染和 js 解析功能，手机浏览器的主流内核，与之相对应的引擎有 Gecko（Mozilla Firefox 等使用）和 Trident（也称 MSHTML，IE 使用）。对于浏览器的调试工具要熟练使用，主要是页面结构分析，后台请求信息查看，js 调试工具使用，熟练使用这些工具可以快速提高解决问题的效率

参与互动

147.如何测试前端代码? 知道 BDD, TDD, Unit Test 么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?

参考答案：了解 BDD 行为驱动开发与 TDD 测试驱动开发已经单元测试相关概念

参与互动

148.JavaScript 的循环语句有哪些？

参考答案：while for do while forEach

参与互动

149.作用域-编译期执行期以及全局局部作用域问题

参考答案：js 执行主要的两个阶段：预解析和执行期

参与互动

150.如何添加 html 元素的事件，有几种方法？请列举

参考答案：直接在标签里添加；在元素上添加、使用事件注册函数添加