每天10个前端小知识【Day4】

1. js中如何判断一个值是否是数组类型&＃xff1f;

instanceof

const arr&＃61; [];
arr instanceof Array; // true


Array.isArray

const arr &＃61; [];
Array.isArray(arr) // true
const obj &＃61; {};
Array.isArray(obj) // false


Object.prototype.isPrototypeOf
使用Object的原型方法isPrototypeOf&＃xff0c;判断两个对象的原型是否一样, isPrototypeOf() 方法用于测试一个对象是否存在于另一个对象的原型链上。

const arr &＃61; [];
Object.prototype.isPrototypeOf(arr, Array.prototype); // true


Object.getPrototypeOf
Object.getPrototypeOf() 方法返回指定对象的原型&＃xff08;内部[[Prototype]]属性的值&＃xff09;。


const arr &＃61; [];
Object.getPrototypeOf(arr) &＃61;&＃61;&＃61; Array.prototype // true


Object.prototype.toString
借用Object原型的call或者apply方法&＃xff0c;调用toString()是否为[object Array]

const arr &＃61; [];
Object.prototype.toString.call(arr) &＃61;&＃61;&＃61; &＃39;[object Array]&＃39; // true
const obj &＃61; {};
Object.prototype.toString.call(obj) // "[object Object]"


2. 浏览器为什么要有跨域限制&＃xff1f;

因为存在浏览器同源策略&＃xff0c;所以才会有跨域问题。那么浏览器是出于何种原因会有跨域的限制呢。其实不难想到&＃xff0c;跨域限制主要的目的就是为了用户的上网安全。 如果浏览器没有同源策略&＃xff0c;会存在什么样的安全问题呢。下面从 DOM 同源策略和 XMLHttpRequest 同源策略来举例说明&＃xff1a;

如果没有 DOM 同源策略&＃xff0c;也就是说不同域的 iframe 之间可以相互访问&＃xff0c;那么黑客可以这样进行攻击&＃xff1a; 做一个假网站&＃xff0c;里面用 iframe 嵌套一个银行网站 mybank.com。 把 iframe 宽高啥的调整到页面全部&＃xff0c;这样用户进来除了域名&＃xff0c;别的部分和银行的网站没有任何差别。 这时如果用户输入账号密码&＃xff0c;我们的主网站可以跨域访问到 mybank.com 的 dom 节点&＃xff0c;就可以拿到用户的账户密码了。

如果没有 XMLHttpRequest 同源策略&＃xff0c;那么黑客可以进行 CSRF&＃xff08;跨站请求伪造&＃xff09; 攻击&＃xff1a; 用户登录了自己的银行页面 mybank.com&＃xff0c;http://mybank.com 向用户的 COOKIE 中添加用户标识。 用户浏览了恶意页面 evil.com, 执行了页面中的恶意 AJAX 请求代码。 evil.com 向 mybank.com 发起 AJAX HTTP 请求&＃xff0c;请求会默认把 mybank.com 对应 COOKIE 也同时发送过去。 银行页面从发送的 COOKIE 中提取用户标识&＃xff0c;验证用户无误&＃xff0c;response 中返回请求数据。此时数据就泄露了。 而且由于 Ajax 在后台执行&＃xff0c;用户无法感知这一过程。 因此&＃xff0c;有了浏览器同源策略&＃xff0c;我们才能更安全的上网。

3. xml和json有什么区别&＃xff1f;

1、JSON是Javascript Object Notation&＃xff1b;XML是可扩展标记语言。

2、JSON是基于Javascript语言&＃xff1b;XML源自SGML。

3、JSON是一种表示对象的方式&＃xff1b;XML是一种标记语言&＃xff0c;使用标记结构来表示数据项。

4、JSON不提供对命名空间的任何支持&＃xff1b;XML支持名称空间。

5、JSON支持数组&＃xff1b;XML不支持数组。

6、XML的文件相对难以阅读和解释&＃xff1b;与XML相比&＃xff0c;JSON的文件非常易于阅读。

7、JSON不使用结束标记&＃xff1b;XML有开始和结束标签。

8、JSON的安全性较低&＃xff1b;XML比JSON更安全。

9、JSON不支持注释&＃xff1b;XML支持注释。

10、JSON仅支持UTF-8编码&＃xff1b;XML支持各种编码。

4. 为什么Javascript是单线程&＃xff1f;

Javascript的单线程&＃xff0c;与它的用途有关。作为浏览器脚本语言&＃xff0c;Javascript的主要用途是与用户互动&＃xff0c;以及操作DOM。这决定了它只能是单线程&＃xff0c;否则会带来很复杂的同步问题。比如&＃xff0c;假定Javascript同时有两个线程&＃xff0c;一个线程在某个DOM节点上添加内容&＃xff0c;另一个线程删除了这个节点&＃xff0c;这时浏览器应该以哪个线程为准&＃xff1f;所以&＃xff0c;为了避免复杂性&＃xff0c;从一诞生&＃xff0c;Javascript就是单线程&＃xff0c;这已经成了这门语言的核心特征&＃xff0c;将来也不会改变。

5. “严格模式”是什么&＃xff1f;

除了正常运行模式&＃xff0c;ECMAscript 5添加了第二种运行模式&＃xff1a;“严格模式”&＃xff08;strict mode&＃xff09;。顾名思义&＃xff0c;这种模式使得Javascript在更严格的条件下运行。 设立"严格模式"的目的&＃xff0c;主要有以下几个&＃xff1a;

消除Javascript语法的一些不合理、不严谨之处&＃xff0c;减少一些怪异行为;
消除代码运行的一些不安全之处&＃xff0c;保证代码运行的安全&＃xff1b;
提高编译器效率&＃xff0c;增加运行速度&＃xff1b;
为未来新版本的Javascript做好铺垫。
"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向&＃xff0c;包括IE 10在内的主流浏览器&＃xff0c;都已经支持它&＃xff0c;许多大项目已经开始全面拥抱它。

6. 说说你对以下几个页面生命周期事件的理解&＃xff1a;DOMContentLoaded&＃xff0c;load&＃xff0c;beforeunload&＃xff0c;unload

HTML 页面的生命周期包含三个重要事件&＃xff1a;

DOMContentLoaded —— 浏览器已完全加载 HTML&＃xff0c;并构建了 DOM 树&＃xff0c;但像 和样式表之类的外部资源可能尚未加载完成。

load —— 浏览器不仅加载完成了 HTML&＃xff0c;还加载完成了所有外部资源&＃xff1a;图片&＃xff0c;样式等。

beforeunload/unload —— 当用户正在离开页面时。

每个事件都是有用的&＃xff1a;

DOMContentLoaded 事件 —— DOM 已经就绪&＃xff0c;因此处理程序可以查找 DOM 节点&＃xff0c;并初始化接口。

load 事件 —— 外部资源已加载完成&＃xff0c;样式已被应用&＃xff0c;图片大小也已知了。

beforeunload 事件 —— 用户正在离开&＃xff1a;我们可以检查用户是否保存了更改&＃xff0c;并询问他是否真的要离开。

unload 事件 —— 用户几乎已经离开了&＃xff0c;但是我们仍然可以启动一些操作&＃xff0c;例如发送统计数据。

页面生命周期事件&＃xff1a;

当 DOM 准备就绪时&＃xff0c;document 上的 DOMContentLoaded 事件就会被触发。在这个阶段&＃xff0c;我们可以将 Javascript 应用于元素。 诸如 或 之类的脚本会阻塞 DOMContentLoaded&＃xff0c;浏览器将等待它们执行结束。 图片和其他资源仍然可以继续被加载。 当页面和所有资源都加载完成时&＃xff0c;window 上的 load 事件就会被触发。我们很少使用它&＃xff0c;因为通常无需等待那么长时间。 当用户想要离开页面时&＃xff0c;window 上的 beforeunload 事件就会被触发。如果我们取消这个事件&＃xff0c;浏览器就会询问我们是否真的要离开&＃xff08;例如&＃xff0c;我们有未保存的更改&＃xff09;。 当用户最终离开时&＃xff0c;window 上的 unload 事件就会被触发。在处理程序中&＃xff0c;我们只能执行不涉及延迟或询问用户的简单操作。正是由于这个限制&＃xff0c;它很少被使用。我们可以使用 navigator.sendBeacon 来发送网络请求。

7. 什么是变量提升

函数在运行的时候&＃xff0c;会首先创建执行上下文&＃xff0c;然后将执行上下文入栈&＃xff0c;然后当此执行上下文处于栈顶时&＃xff0c;开始运行执行上下文。 在创建执行上下文的过程中会做三件事&＃xff1a;创建变量对象&＃xff0c;创建作用域链&＃xff0c;确定 this 指向&＃xff0c;其中创建变量对象的过程中&＃xff0c;首先会为 arguments 创建一个属性&＃xff0c;值为 arguments&＃xff0c;然后会扫码 function 函数声明&＃xff0c;创建一个同名属性&＃xff0c;值为函数的引用&＃xff0c;接着会扫码 var 变量声明&＃xff0c;创建一个同名属性&＃xff0c;值为 undefined&＃xff0c;这就是变量提升。

8. Null是对象吗&＃xff1f;为什么&＃xff1f;

null不是对象。 虽然 typeof null 会输出 object&＃xff0c;但是这只是 JS 存在的一个悠久 Bug。在 JS 的最初版本中使用的是 32 位系统&＃xff0c;为了性能考虑使用低位存储变量的类型信息&＃xff0c;000 开头代表是对象然而 null 表示为全零&＃xff0c;所以将它错误的判断为 object 。

9. Javascript本地存储的方式有哪些&＃xff0c;有什么区别&＃xff0c;及有哪些应用场景&＃xff1f;

Javascript本地缓存的方法我们主要讲述以下三种&＃xff1a;

COOKIE

类型为「小型文本文件」&＃xff0c;指某些网站为了辨别用户身份而储存在用户本地终端上的数据。是为了解决 HTTP 无状态导致的问题 作为一段一般不超过 4KB 的小型文本数据&＃xff0c;它由一个名称&＃xff08;Name&＃xff09;、一个值&＃xff08;Value&＃xff09;和其它几个用于控制 COOKIE 有效期、安全性、使用范围的可选属性组成 但是COOKIE在每次请求中都会被发送&＃xff0c;如果不使用 HTTPS 并对其加密&＃xff0c;其保存的信息很容易被窃取&＃xff0c;导致安全风险。举个例子&＃xff0c;在一些使用 COOKIE 保持登录态的网站上&＃xff0c;如果 COOKIE 被窃取&＃xff0c;他人很容易利用你的 COOKIE 来假扮成你登录网站。

sessionStorage

sessionStorage 和 localStorage 使用方法基本一致&＃xff0c;唯一不同的是生命周期&＃xff0c;一旦页面&＃xff08;会话&＃xff09;关闭&＃xff0c;sessionStorage 将会删除数据。

localStorage

生命周期&＃xff1a;持久化的本地存储&＃xff0c;除非主动删除数据&＃xff0c;否则数据是永远不会过期的存储的信息在同一域中是共享的当本页操作&＃xff08;新增、修改、删除&＃xff09;了localStorage的时候&＃xff0c;本页面不会触发storage事件,但是别的页面会触发storage事件。大小&＃xff1a;5M&＃xff08;跟浏览器厂商有关系&＃xff09;localStorage本质上是对字符串的读取&＃xff0c;如果存储内容多的话会消耗内存空间&＃xff0c;会导致页面变卡受同源策略的限制。

区别&＃xff1a; 关于COOKIE、sessionStorage、localStorage三者的区别主要如下&＃xff1a;

• 存储大小&＃xff1a; COOKIE数据大小不能超过4k&＃xff0c;sessionStorage和localStorage 虽然也有存储大小的限制&＃xff0c;但比COOKIE大得多&＃xff0c;可以达到5M或更大。

• 有效时间&＃xff1a;localStorage 存储持久数据&＃xff0c;浏览器关闭后数据不丢失除非主动删除数据&＃xff1b; sessionStorage 数据在当前浏览器窗口关闭后自动删除&＃xff1b;COOKIE设置的COOKIE过期时间之前一直有效&＃xff0c;即使窗口或浏览器关闭。

• 数据与服务器之间的交互方式&＃xff0c; COOKIE的数据会自动的传递到服务器&＃xff0c;服务器端也可以写COOKIE到客户端&＃xff1b; sessionStorage和localStorage不会自动把数据发给服务器&＃xff0c;仅在本地保存。

应用场景

在了解了上述的前端的缓存方式后&＃xff0c;我们可以看看针对不对场景的使用选择&＃xff1a; 标记用户与跟踪用户行为的情况&＃xff0c;推荐使用COOKIE 适合长期保存在本地的数据&＃xff08;令牌&＃xff09;&＃xff0c;推荐使用localStorage 敏感账号一次性登录&＃xff0c;推荐使用sessionStorage 存储大量数据的情况、在线文档&＃xff08;富文本编辑器&＃xff09;保存编辑历史的情况&＃xff0c;推荐使用indexedDB。

10. 谈谈你知道的DOM常见的操作

文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口 它提供了对文档的结构化的表述&＃xff0c;并定义了一种方式可以使从程序中对该结构进行访问&＃xff0c;从而改变文档的结构&＃xff0c;样式和内容 任何 HTML 或XML文档都可以用 DOM 表示为一个由节点构成的层级结构.。
DOM常见的操作&＃xff0c;主要分为&＃xff1a;创建节点&＃xff0c;查询节点&＃xff0c;更新节点&＃xff0c;添加节点&＃xff0c;删除节点。

。