js基础-2

2020-04-06  本文已影响0人  南崽

1. for in、Object.keys 和 Object.getOwnPropertyNames 对属性遍历有什么区别？

for in会遍历自身及原型链上的可枚举属性
Object.keys会将对象自身的可枚举属性的key输出
会将自身所有的属性的key输出

ECMAScript 将对象的属性分为两种数据属性和访问器属性

for in

for in

Object.keys

Object.keys

Object.getOwnPropertyNames

Object.getOwnPropertyNames

2.iframe 跨域通信和不跨域通信

不跨域通信

iframe主页面 子页面 
myIframe.window.showalert();

window.parent.fullScreens();

window.parent.document.getElementById("元素id");

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.如何判断一个对象是否为数组

4. 什么是面向对象？

面向对象是把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为

面向对象和面向过程的异同

面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用

面向对象是把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为

5. 对松散类型的理解

JavaScript中的变量为松散类型

所谓松散类型就是指当一个变量被申明出来就可以保存任意类型的值，就是不像 SQL一样申明某个键值为int就只能保存整型数值，申明varchar只能保存字符串；一个变量所保存值的类型也可以改变，这在JavaScript中是完全有效的，只是不推荐；相比较于将变量理解为"盒子"，《JavaScript编程精解中提到应该将变量理解为"触手"，它不保存值，而是抓取值。这一点在当变量保存引用类型值时更加明显。JavaScript中变量可能包含两种不同的数据类型的值：基本类型和引用类型；基本类型是指简单的数据段，而引用类型指那些可能包含多个值的对象

6. JS 单线程还是多线程，如何显示异步操作

JS本身是单线程的，他是依靠浏览器完成的异步操作

  1. 主线程执行js中所有的代码
  2. 主线程在执行过程中发现了需要异步的任务任务后扔给浏览器(浏览器创建多个线程执行)，并在callback queque中创建对应的回调函数(回调函数是一个对象，包含该函数是否执行完毕等)
  3. 主线程已经执行完毕所有同步代码
    开始监听callback queque一旦浏览器中某个线程任务完成将会改变回调函数的状态；主线程查看到某个函数的状态为已完成，就会执行该函数。

7. JavaScript 数组的函数 map/forEach/reduce/filter

map/forEach/reduce/filter
输出结果

8. JS块级作用域，变量提升

块级作用域

JS中作用域有:全局作用域，函数作用域，没有块作用域的概念；

ES6中新增了块级作用域
块作用域由{}包括，if语句和for语句里面的{}也属于块作用域

变量提升

如果变量声明在函数里面，则将变量声明提升到函数的开头
如果变量声明是一个全局变量，则将变量声明提升到全局作用域的开头


输出结果

9. 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). 优点

  1. jsonp不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制，jsonp可以跨越同源策略；
  1. jsonp的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；
  1. 在请求完毕后可以通过调用callback的方式回传结果；将回调方法的权限给了调用方；这个就相当于将controller层和view层终于分开了；如果有两个页面需要渲染同一份数据，你们只需要有不同的渲染逻辑就可以了，逻辑都可以使用同 一个jsonp服务。

2). 缺点

  1. jsonp只支持GET请求而不支持POST等其它类型的HTTP 请求
  1. jsonp只支持跨域 HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题
  1. jsonp在调用失败的时候不会返回各种HTTP状态码
  1. 安全性。万一假如提供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，可以说是已有技术的组合，主要用来实现客户端与服务器端的异步交互，实现页面的局部刷新

基本步骤: 创建对象、建立连接、发送数据、接收数据

ajax

17. 同步和异步的区别?

同步：阻塞的

浏览器向服务器请求数据，服务器比较忙，浏览器一直等着(页面白屏)，直到服务器返回数据，浏览器才能显示页面

异步：非阻塞的

浏览器向服务器请求数据，服务器比较忙，浏览器如常显示页面，服务器返回数据的时候通知浏览器一声，浏览器把返回的数据再渲染到页面，局部更新

18. 如何解决跨域问题?

19. 页面编码和被请求的资源编码如果不一致如何处理？

get请求中的中文需要encodeURIComponent编码处理，post 请求不需要进行编码

20. 创建 ajax 过程

上一篇 下一篇

猜你喜欢

热点阅读