【JavaScript】Js 常见面试题

1. 什么是对象? 面向对象的三大特性?

对象是属性和方法的集合,面向对象的三大特性是封装,继承,多态

2. 对象的创建的方式有哪些?,访问属性的方式有哪些?

常见的有

  1. 字面量创建的方式 比如 let obj = {name:1,age:100};
  2. 实例化对象的方式 let obj = new Object();
  3. 构造函数方式
  4. 工厂模式创建对象

3. 对象的属性怎么访问,有什么区别?

对象的属性可以通过.或者[]来访问,他们有以下区别:

  • ..访问的属性名必须符合标识符命名规范,.后面不能跟变量,属性名不能跟引号
  • [] 访问的属性名可以不符合标识符规范,可以使用变量,比如for循环中
  • [] 访问的属性名可以不符合标识符规范,可以使用变量,比如for

4. 改变this指针指向的方法有哪些?

call,apply, bind方法都可以改变函数的this指向

  • call方法apply调用后函数会立即执行,bind方法不会立即执行函数
  • call方法和bind方法后面跟的是参数列表,apply的参数据是一个数组

5. 什么是原型?

每一个构造函数都有一个prototype属性,这个属性称之为函数的显示原型。

构造函数实例化后或者对象都有一个__proto__属性,称之为对象的隐式原型,后续原型链就是通过proto查找属性的。

6. 什么是原型链?

当我们访问对象的某个属性时,会先从当前对象中查找,如果没有找到的则继续去对象的proto隐士原型中去查找,,如果还没找到则继续向上级对象的原型中查找,直到找到顶层Object对象,如果没有找到返回undefined,这种通过对象的__proto__隐式原型查找属性的链条关系就称之为原型链。

7. prototype,proto,constructor 三者之间的关系?

每个构造函数都有一个Prototype属性,prototype有一个constructor指向构造函数本身

当构造函数实例化以后,有proto属性,proto指向构造函数的prototype属性。

8. ES5继承的方法有哪些?

原型链继承,把父方法的实例化对象赋给字方法的原型,不仅可以使用父方法自身的属性,也可以使用父方法原型中的属性,不能传参

构造函数继承,在字方法使用call或者apply关键字通过改变this指向继承,可以传递参数,不能使用父方法原型中的属性

9. 简单说一下ES6的class类?

ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已, 他的本质还是函数,可以用typeof检测

10. 简单说一下class类相关的关键字? 

class类名关键字,
constructor class类的构造函数
this 关键字则代表当前实例对象
extends 类继承的关键字
super 调用父类方法的构造函数

11. JS的常见模块化规范有哪些?

AMD异步模块加载规范

commonJS规范

ES新增的Moudle规范

12. export和export default 有什么不同?

export default 抛出一整个对象,不需要加{ } 引入不需要{} 可以跟抛出的对象名字不一致
export 抛出跟一个{} 引入的时候需要使用{}引入,名字必须跟抛出的名字一致,可以选择部分引入

13. 原生Ajax创建的步骤

  1. 实例化一个xmlhttpRequst对象信息
  2. 使用open方法创建连接,指定请求数据的方式
  3. 如果是post请求使用setRequestHeader设置请求头信息
  4. 使用onreadystatechange事件监听请求状态的改变回调
  5. send发送请求数据

14. jquery的ajax的参数有哪些?

$.ajax({
  url: "url地址",
  type:"请求方式get/或者post",
  data:"传递数据",
  dataType:"传送数据类型",
  async: "true异步,false同步,默认同步",
  success:function(res){
  //成功事件回调
  },
  error:function(error){
  //失败的事件回调
}
}}

15. Promise的概念,Promise有几种状态?

Promise是ES6中的新增的异步处理方法,主要是用于解决ES5中使用回调函数产生的地狱回调的问题
Promise有三种状态,pedding准备中,fullfiilled已完成, rejected失败,状态只能有准备中=>已完成 或 准备中=>失败

16. Promise有哪些参数? 

参数两个: resolve和reject 执行resolve参数方法会调用then方法,执行reject参数方法调用catch方法

17. Promise的常见方法? 

then方法执行成功后调用的方法
catch方法执行失败调用的方法
all() 参数是个数组,执行多个Promise对象,必须所有的对象状态执行完后才会变成已完成的状态
race()方法 执行多个Promise对象,只要有一个对象状态是已完成,对象的状态就是已完成。

18. set常用的方法有哪些? 

set通过new实例化常用的方法有:

  • 为集合添加数据 add方法 : set.add(元素)
  • 获取集合数组的属性 size 使用 : set.size
  • delete()删除数据 : set.delete(元素)
  • has()判断集合中是否含有某个数据 : set.has(56)
  • clear() 清空集合 set.clear()

19. map常用的方法有哪些?

map通过new Map创建一个对象:

  • map.set("name","zs").set("age",18) -- 添加数据
  • map.has("key") -- 判断是否含有某个数据 根据键操作(返回布尔值)
  • map.delete("key") -- 删除数据 根据键
  • map.clear() -- 清空集合

20. ES6的新特性有哪些?

  • let const 定义块级作用域
  • 箭头函数
  • 解构赋值
  • 扩展运算符
  • 常见的数组的方法,伪数组
  • 模板字符串
  • class类
  • 参数设置默认值
  • promise
  • for...of for...in

21. vue中常见的指令和含义

  • v-text 渲染内容到节点中,不解析html
    v-html 渲染内容到绑定的节点中,解析html
    v-if 通过条件判断节点是否显示
    v-show 通过条件判断节点是否显示
    v-on 绑定事件,可以简写为@
    v-bind 绑定属性 可以简写:
    v-for 循环列表指令
    v-model 表单双向绑定指令

22. v-if和v-show的区别?

当条件改变的时候v-if是通过DOM节点的添加和删除 控制结点的显示隐藏,v-show是通过css样式控制结点的显示隐藏,
v-if的切换成本比较高,v-show的渲染成本比较高,所以当切换的频繁的时候建议使用v-show,如果初次渲染数据比较多,建议使用v-if

23. vue中key的作用是?

唯一标识DOM结点,可以提高vue的渲染效率,也可以避免因DOM结点的插入而导致DOM更新错误的问题。

24. Vue中常见的修饰符及含义

.stop 阻止事件冒泡
.capture 设置事件捕获
.prevent 阻止默认事件
.self 之间作用在本身触发
.once 事件只触发一次
.navtive 组件触发的是原生的js事件
键盘修饰符操作
.enter, .space, .....等
.number 修饰符可以将 输入的值转化为Number类型
.trim 修饰符会自动过滤掉输入的首尾空格
.lazy 把v-model改为失去焦点触发

25. Vue中过滤器定义

过滤器分为全局过滤器和局部过滤器,全局过滤器可以在任何页面调用,局部过滤器只能在当前组件调用,过滤器使用管道符|调用,可以串联使用
全局过滤器定义: Vue.filter("过滤器名字",()=>{});
局部过滤器 filters:{过滤器名字}

26. vue中生命周期

创建阶段

  • beforeCreate() 创建前阶段,这个时候还不能使用data中的数据
  • created() 创建完成 最早可以使用data中的数据
    挂载阶段
  • beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。
  • mounted: 挂载完成, DOM节点挂载到实例上去之后调用该钩子。
    更新阶段
  • beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
  • updated:数据更新完成并且DOM更新完成后调用
    销毁阶段
  • beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
  • destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定

27. 什么是虚拟DOM

Vue中不推荐使用DOM操作,为了提高渲染效率使用虚拟DOM,虚拟DOM就是用js对象来表示真实的DOM结构,当数据发生变化的时候重新创建一个新的DOM树结构,比较新旧DOM树的差异, 最终更新的真实的DOM节点中去。

28. 怎么理解MVVM架构模式

M 数据模型,负责逻辑
V 视图 负责页面渲染
Vmodel底层操作,负责视图和数据的交互,当数据发生变化通知视图修改

29. 如何理解Vue中双向绑定原理

vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;
VUE双向数据绑定,其核心是 Object.defineProperty()方法,给Vue中的数据绑定get和set方法,当获取数据的时候,调用get方法,修改data中的数据的时候调用set方法,通过watcher监听器去更新视图,完成数据的双向绑定。

30. v-bind如何绑定class和style

v-bind通常用来绑定属性的,动态地绑定一些 class 类名或 style 样式

变量形式: v-bind:class = "变量",变量形式 ,这里的变量的值,通常是在css定义好的类名

数组语法:v-bind:class= "[变量1,变量2]" ,数组形式,其实跟上面差不多,只不过可以同时绑定多个class名;

对象语法:v-bind:class = {classname1:boolean,classname2:boolean},对象形式,这里的boolean通常是一个变量,也可以是常量、计算属性等,表达式为真的时候显示对应的class名字

用v-bind同样可以绑定style, key是属性,value对应属性对应的值m, vue会把驼峰命名法自动转换为-小写字母,如fontSize会转换为font-size

31. 组件中引入的步骤?

  1. import 导入子组件的路径,定义组件的名字
  2. components中注册子组件,不能是内置标签名字
  3. 父组件中挂载子组件的标签

32. 父传子组件通信? 

  1. 父组件中子组件的标签上定义一个自定义的属性
  2. 子组件中通过props接受父组件传递过来的数据内容,props可以是数组也可以是对象,
  3. props可以校验数据类型: String,Boolean,Number, Object, Array, Function Symbol
  4. default 设置默认值的内容

33. 子传父组件通信

  1. 子组件中绑定事件,调用自定义的方法,方法中this.$emit()向父组件传递数据
  2. $emit() 有两个参数,第一个参数自定义事件名,第二个要传递的数据
  3. 父组件的子组件标签绑定自定义事件,调用方法,方法的参数就是子组件传递过来的数据

34. props可以校验的数据类型

number数字,string字符串,boolean布尔值,Array, function symbol, object对象

35. 兄弟组件通信的流程?

  1. 借助共同的父组件传递数据,先子传父,在父传子
  2. eventBus总线程方式
  3. 定义一个eventBus.js对象抛出一个空的Vue对象
  4. 传递数据的组件中导入bus文件,通过bus.$emit()传递数据
  5. 接受数据的组件导入bus文件,通过bus.$on接受传递的数据

36.渲染过程中遇到 JS 文件怎么处理

JavaScript的加载、解析与执行会阻塞文档的解析,也就是说,在构造DOM时,HTML解析器若是遇到了JavaScript,那么它会暂停文档的解析,将控制权交给JavaScript引擎,等JavaScript引擎运行完毕,浏览器再从中断的地方恢复继续解析文档。

也就是说,如果我们想首屏渲染的越快,就越不应该在首屏就加载js文件,这也是建议将script标签放在body标签底部的原因。

当然,并不说script标签必需放在底部,因为可以给script标签添加defer或者async属性。

CSS 阻塞文档解析

理论上,既然样式表不改变 DOM 树,也就没有必要停下文档的解析等待它们,
然而,存在一个问题,JavaScript 脚本执行时可能在文档的解析过程中请求样式信息,
如果样式还没有加载和解析,脚本将得到错误的值,显然这将会导致很多问题。
 
所以如果浏览器尚未完成 CSSOM 的下载和构建,
而我们却想在此时运行脚本,那么浏览器将延迟 JavaScript 脚本执行和文档的解析,直至其完成 CSSOM 的下载和构建。
也就是说,在这种情况下,浏览器会先下载和构建 CSSOM,然后再执行 JavaScript,最后再继续文档的解析。


为什么js放在底部,css放在顶部?

浏览器会在下载完成全部css之后才对整个页面进行渲染,因此最好的方式是将css放在页面最上面,让浏览器尽快启动下载css。

JavaScript则相反,浏览器在加载JavaScript后立即执行,有可能会阻塞整个页面,造成页面显示缓慢,因此JavaScript最好放在页面最下面。但如果页面解析时就需要用到JavaScript,这是放在最底部就不合适了。

CSS和JS引入位置说明?

1、CSS资源尽量放在head部分

因为CSS解析和DOM解析可以同时进行,所以CSS资源放在头部不会影响DOM解析,而且放在头部也会优先开始加载CSS样式,在渲染DOM的时候也已经知道了自己的样式,所以一次就可渲染成功。如果将CSS放在底部,那么会优先渲染DOM,而浏览器为了更好的用户体验,渲染引擎会尝试尽快在屏幕上显示内容,也就是说渲染引擎会边解析、边渲染、边布局显示,已尽快减少白屏时间,所以随着CSS规则树的构建,还需要对之前渲染树重新渲染,可能会导致回流和页面跳动。

2、JS资源尽量放在body结束标签之前

JS放在body标签结束之前,首先可以确保能取到需要操作的DOM对象,也可缩短因JS阻塞而造成的白屏时间,提升用户体验。因为如果把JS放在head部分,JS运行会阻塞DOM树和CSS树构建,导致白屏时间延长,影响用户体验。

3、CSS资源尽量优先于JS资源引入

因为JS在运行时,如果需要操作CSS,但该CSS还没有下载和构建,则首先会阻塞JS线程,然后开启新线程去下载解析构建CSS规则树,再执行JS代码。
 

37.js操作DOM的方法总结整理

DOM(Document Object Model)文档对象模型。

DOM为HTML提供了结构化表示方法,定义了访问和处理文档结构的方法规范。

HTML可以理解为是由DOM节点构成的集合,主要由元素节点、文本节点、属性节点三部分构成。
js操作DOM的方法 ? 

js操作dom主要分对元素节点、文本节点、属性节点的增删改查:判断元素节点类型

新增节点

var newNode=document.createElement("div");  //创建一个元素节点
var textNode=document.createTextNode("hello world!");  //创建一个文本节点
var cloneNode =newNode.cloneNode(true); //克隆一个节点,参数true表示会克隆当前节点以及他的所有子节点,flase表示只克隆当前节点,默认为false
document.createDocumentFragment();//创建文档对象变量,主要用来临时存储节点,大量操纵dom时性能会有很大的提升


删除节点

var deleteNode = parentNode.removeChild(item);//删除指定的子节点,并返回   deleteNode只是在dom树中删除了,但在内存中还可以访问


修改节点

node.appendChild(newNode);// 在指定元素后面新增子节点
parentNode.insertBefore(newNode,node);  //在parentNode的子节点newNode前面插入newNode节点
parentNode.replaceChild(newNode,oldNode);//用oldNode节点替换parentNode的子节点newNode

查找节点

var parentNode=document.getElementById("list");//返回第一个带有指定id的元素
var classList=document.getElementsByClassName("wrapper"); //返回所有带有指定class的元素的集合(返回数组形式)
var tagList=document.getElementsByTagName("li");//返回所有带有指定标签的元素的集合(返回数组形式)   // *表示查找所有标签
var list=document.querySelector(".wrapper");//返回第一个带有指定id或class的元素
var allList=document.querySelectorAll(".wrapper");//返回所有带有指定id或class的元素
通过节点之间的关系来查找元素节点,dom节点之间关系图以及操作方法如下

element.parentNode    //返回该节点的父节点,每个节点都会有一个父节点,Element的父节点可能是Element,Document或DocumentFragment;
element.parentElement    //返回父节点,只有父节点为元素节点时返回,否则返回null
 
element.children    //返回所有元素子节点的集合,仅包含元素节点
element.childNodes    //返回当前元素所有的子节点,包含元素节点,文本节点,属性节点。(注释、空格、换行等也会被当作一个节点)
 
element.firstChild    //返回当前元素的第一个子节点,该子节点可以是任意节点,如果没有则返回null
element.firstElementChild    //返回当前元素的第一个子节点,该子节点只可以是元素节点,如果没有则返回null
element.lastChild    //返回当前元素的最后一个子节点,该子节点可以是任意节点,如果没有则返回null
element.lastElementChild    //返回当前元素的最后一个子节点,该子节点只可以是元素节点,如果没有则返回null
 
element.previousSibling    //返回该节点的前一个兄弟节点
element.previousElementSibling    //返回该节点的前一个元素兄弟节点
element.nextSibling    //返回该节点的后一个兄弟节点
element.nextElementSibling    //返回该节点的后一个元素兄弟节点


修改元素属性

var node =document.getElementById("list");
// classList方法操作元素的class属性
node.classList.add("test"); //给node节点添加一个class
node.classList.remove("test");//删除node节点名为test的class
node.classList.replace("old-class","new-class");//替换node节点的class
var hasClass = node.classList.contains("test");//node节点是否存在给定的class,如果存在则返回 true,否则返回 false。
node.classList.toggle("test")//如果节点已经存在给定的class则删除,如果没有则添加
 
node.setAttribute("id","123");//给node节点设置id=123
var id = node.getAttribute("id");//获取node节点的id属性值
var hasAttr =node.hasAttribute("id");//判断node节点是否存在id属性

// dataset方法获取元素的data- 属性值
var dataId=node.dataset.id; //获取node节点的data-id属性值
var dataName=node.dataset.userName;//类似data-user-name属性必须使用驼峰式来访问
'id' in node.dataset     // 判断node节点是否有data-id属性
 
// style方法修改元素的样式
node.style.color = 'red';   //设置color样式
node.style.setProperty('font-size', '16px');  //设置font-size样式
node.style.removeProperty('color');  //移除color属性

获取元素类型

element.nodeType 

1元素节点
2属性节点 
3文本节点 
4CDATA节点 
5实体引用名称节点 
6实体名称节点
7处理指令节点  
8注释节点  
9文档节点  
10文档类型节点 
11文档片段节点 
12DTD声明节

获取当前节点的文本值

element.innerHtml  //返回当前节点的所有文本包含html
element.innerText //返回当前节点及所有后代节点的文本值,不包含html

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值