1. for in、Object.keys 和 Object.getOwnPropertyNames 对属性遍历有什么区别?
for in
会遍历自身
及原型链
上的可枚举属性
Object.keys
会将对象自身的可枚举属性
的key
输出
会将自身所有
的属性的key
输出
ECMAScript 将对象的属性分为两种
数据属性
和访问器属性
for in
Object.keys
Object.getOwnPropertyNames
2.iframe 跨域通信和不跨域通信
不跨域通信
- 主页面要是想要调取子页面的showalert方法
myIframe.window.showalert();
- 子页面要掉主页面的fullscreen方法
window.parent.fullScreens();
- js在iframe子页面获取父页面元素
window.parent.document.getElementById("元素id");
- js在父页面获取 iframe 子页面元素代码
window.frames["iframe_ID"].document.getElementById("元素id");
跨域通信
使用
postMessage
(官方用法)
- 子页面
window.parent.postMessage("hello", "http://127.0.0.1:8089");
- 父页面接收
window.addEventListener("message", function(event) {
alert(123);24.如何判断一个对象是否为数组
第一种方法:使用 instanceof 操作符。第二种方法:使用 ECMAScript 5 新增的 Array.isArray()方法。第三种方法:使用使用 Object.prototype 上的原生 toString()方法判断。
});
3.H5 与 Native 如何交互
jsBridge
4.如何判断一个对象是否为数组
- 使用
instanceof
操作符 - 使用
ES5
新增的Array.isArray()
方法 - 使用使用
Object.prototype
上的原生toString()
方法判断
4. 什么是面向对象?
面向对象
是把构成问题事务分解成各个对象
,建立对象的目的
不是为了完成一个步骤,而是为了描叙
某个事物在整个解决问题的步骤中的行为
面向对象和面向过程的异同
面向过程
就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候一个一个依次调用
面向对象
是把构成问题事务
分解成各个对象
,建立对象
的目的不是为了完成一个步骤,而是为了描叙某个事物在整个解决问题
的步骤中的行为
5. 对松散类型的理解
JavaScript
中的变量
为松散类型
所谓松散类型
就是指当一个变量
被申明
出来就可以保存任意类型的值
,就是不像 SQL
一样申明某个键值为int
就只能保存整型数值
,申明varchar
只能保存字符串
;一个变量所保存值的类型
也可以改变,这在JavaScript
中是完全有效
的,只是不推荐;相比较于将变量理解为"盒子",《JavaScript编程精解中提到应该将变量
理解为"触手"
,它不保存值
,而是抓取值
。这一点在当变量保存引用类型
值时更加明显。JavaScript
中变量可能包含两种不同的数据类型的值:基本类型
和引用类型
;基本类型
是指简单的数据段,而引用类型
指那些可能包含多个值的对象
6. JS 单线程还是多线程,如何显示异步操作
JS
本身是单线程
的,他是依靠浏览器
完成的异步操作
主线程
执行js
中所有的代码主线程
在执行过程中发现了需要异步
的任务任务后扔给浏览器
(浏览器创建多个线程执行),并在callback queque
中创建对应的回调函数
(回调函数是一个对象,包含该函数是否执行完毕等)主线程
已经执行完毕所有同步代码
开始监听callback queque
一旦浏览器
中某个线程任务完成将会改变回调函数
的状态;主线程
查看到某个函数的状态为已完成
,就会执行
该函数。
7. JavaScript 数组的函数 map/forEach/reduce/filter
8. JS块级作用域,变量提升
块级作用域
JS
中作用域
有:全局作用域,函数作用域,没有块作用域
的概念;
ES6
中新增
了块级作用域
块作用域由{}包括,if
语句和for
语句里面的{}
也属于块作用域
变量提升
如果
变量声明
在函数里面
,则将变量声明提升
到函数
的开头
如果变量声明
是一个全局变量
,则将变量声明提升到全局作用域
的开头
9. var、let、const 的区别
-
var
定义的变量
,没有块
的概念,可以跨块
访问, 不能跨函数
访问。 -
let
定义的变量
,只能在块作用域
里访问,不能跨块
访问,也不能跨函数
访问。 -
const
用来定义常量
,使用时必须初始化
(即必须赋值),只能在块作用域
里访问,而且不能修改
。 - 同一个
变量
只能使用一种方式
声明,不然会报错
10. null/undefined 的区别
null: Null 类型,代表"空值",代表一个
空对象指针
,使用typeof
运算得到"object"
,是一个特殊的对象值
undefined:
Undefined
类型,当一个声明了一个变量未初始化
时,得到的就是undefined
11. 重排与重绘的区别,什么情况下会触发?
简述重排的概念
浏览器
下载完页面中的所有组件
(HTML、JavaScript、CSS、图片)之后会解析
生成两个内部数据结构
(DOM 树和渲染树),DOM 树
表示页面结构
,渲染树
表示DOM节点
如何显示;
重排
是DOM 元素
的几何属性
变化,DOM 树
的结构
变化,渲染树
需要重新计算
简述重绘的概念
重绘
是一个元素外观
的改变所触发的浏览器行为
,例如改变visibility
,outline
,背景色
等属性;浏览器
会根据元素的新属性重新绘制
,使元素呈现新的外观
;由于浏览器的流布局
,对渲染树
的计算通常只需要遍历一次
就可以完成
简述重绘和重排的关系
重绘
不会引起重排
,但重排
一定会引起重绘
,一个元素的重排
通常会带来一系列的反应,甚至触发整个文档
的重排
和重绘
,性能代价
是高昂的
什么情况下会触发重排?
页面渲染
初始化
时;(这个无法避免)
浏览器窗口
改变尺寸;
元素尺寸
改变时;
元素位置
改变时;
元素内容
改变时;
添加
或删除
可见的DOM
元素时。
12. 发布订阅设计模式
发布/订阅
模式(Publish Subscribe Pattern)属于设计模式
中的行为
(Behavioral Patterns)
13. jsonp 优缺点?
1). 优点
jsonp
不像XMLHttpRequest
对象实现的Ajax请求
那样受到同源策略
的限制,jsonp
可以跨越同源策略;
jsonp
的兼容性
更好,在更加古老的浏览器
中都可以运行,不需要XMLHttpRequest
或ActiveX
的支持;
- 在
请求完毕
后可以通过调用callback
的方式回传结果;将回调方法
的权限给了调用方
;这个就相当于将controller层
和view层
终于分开了;如果有两个页面
需要渲染同一份数据
,你们只需要有不同的渲染逻辑
就可以了,逻辑都可以使用同 一个jsonp
服务。
2). 缺点
jsonp
只支持GET请求
而不支持POST
等其它类型的HTTP 请求
jsonp
只支持跨域 HTTP请求
这种情况,不能解决不同域
的两个页面之间如何进行JavaScript
调用的问题
jsonp
在调用失败
的时候不会
返回各种HTTP状态码
- 安全性。万一假如提供
jsonp
的服务存在页面注入漏洞
,即它返回的javascript
的内容是被人控制的;那么所有调用这个jsonp
的网站都会存在漏洞
。于是无法把危险控制在一个域名下,所以在使用jsonp
的时候必须要保证
使用的jsonp
服务必须是安全可信
的
14. 兼容各种浏览器版本的事件绑定
15. typescript 遇到过什么坑
main.js 报错
: (Cannot find module './App.vue'.)
原因
:typescript
不能识别.vue
文件
解决办法
: 引入vue
的typescript declare
库
16. Ajax 是什么?如何创建一个 Ajax?
Ajax
全称是asychronous javascript and xml
,可以说是已有技术的组合,主要用来实现客户端
与服务器端
的异步交互
,实现页面的局部刷新
基本步骤: 创建对象、建立连接、发送数据、接收数据
17. 同步和异步的区别?
同步:阻塞的
浏览器
向服务器
请求数据,服务器比较忙,浏览器
一直等着(页面白屏),直到服务器返回数据
,浏览器
才能显示页面
异步:非阻塞的
浏览器
向服务器
请求数据,服务器比较忙,浏览器如常显示页面,服务器返回数据的时候通知浏览器
一声,浏览器把返回的数据
再渲染
到页面,局部更新
18. 如何解决跨域问题?
-
jsonp
,允许script
加载第三方资源
-
反向代理
(nginx 服务内部配置 Access-Control-Allow-Origin *) -
cors
前后端协作设置请求头部
,Access-Control-Allow-Origin等头部信息 -
iframe
嵌套通讯,postmessage
19. 页面编码和被请求的资源编码如果不一致如何处理?
get
请求中的中文需要encodeURIComponent
编码处理,post
请求不需要
进行编码
20. 创建 ajax 过程
- 创建
XMLHttpRequest
对象,也就是创建一个异步调用
对象 - 创建一个新的
HTTP 请求
,并指定
该HTTP请求的方法
、URL
及验证信息
- 设置响应
HTTP请求
状态变化的函数 - 发送
HTTP请求
-
获取
异步调用返回的数据
- 使用
JavaScript
和DOM
实现局部刷新