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 元素的事件,有几种方法?请列举
参考答案:直接在标签里添加;在元素上添加、使用事件注册函数添加
参与互动
151.列举浏览器对象模型 BOM 里常用的至少 4 个对象,并列举 window 对象的常用方法至少 5 个
参考答案:
对象:Window document location screen history navigator
方法:Alert() confirm() prompt() open() close()
参与互动
152.事件绑定的方式
参考答案:
参与互动
153.事件循环
参考答案:事件循环是一个单线程循环,用于监视调用堆栈并检查是否有工作即将在任务队列中完成。如果调用堆栈为空并且任务队列中有回调函数,则将回调函数出队并推送到调用堆栈中执行。
参与互动
154.事件模型
参考答案:
解析:参考
参与互动
155.如何自定义事件
参考答案:
1.原生提供了 3 个方法实现自定义事件 2.createEvent,设置事件类型,是 html 事件还是 鼠标事件 3.initEvent 初始化事件,事件名称,是否允许冒泡,是否阻止自定义事件 4.dispatchEvent 触发事件
MDN
参与互动
156.target 和 currentTarget 区别
参考答案:
参与互动
157.prototype 和__proto__的关系是什么
参考答案:
所有的对象都拥有__proto__属性,它指向对象构造函数的 prototype 属性
所有的函数都同时拥有__proto__和 protytpe 属性 函数的__proto__指向自己的函数实现 函数的 protytpe 是一个对象 所以函数的 prototype 也有__proto__属性 指向 Object.prototype
Object.prototype.__proto__指向 null
参与互动
158.什么是原型属性?
参考答案:从构造函数的prototype属性出发找到原型,这时候就把原型称之为构造函数的原型属性
参与互动
159.什么是原型对象?
参考答案:从实例的__proto__出发,找到原型,这时候就把原型称之为实例的原型对象。
参与互动
160.使用 let、var 和 const 创建变量有什么区别
参考答案:
let 和 const 的区别在于:let 允许多次赋值,而 const 只允许一次。
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 继承的方式和优缺点
参考答案:六种方式