每天几个前端小知识

简介: 每天几个前端小知识

javascript篇



1.Js 基本数据类型有哪些


数字Number

字符串String

布尔boolean

空null

未定义undefined

对象 Object

数组 Array


2.Ajax 如何使用


一个完整的 AJAX 请求包括五个步骤:

创建 XMLHTTPRequest 对象

使用 open 方法创建 http 请求,并设置请求地址

xhr.open(get/post,url,async,true(异步),false(同步))经常使用前三个参数设置发送的数据,用 send 发送请求注册事件(给 ajax 设置事件)获取响应并更新页面


3.如何判断一个数据是 NaN


NaN 非数字 但是用 typeof 检测是 number 类型

利用 NaN 的定义 用 typeof 判断是否为 number 类型并且判断是否满

足 isnan利用 NaN 是唯一一个不等于任何自身的特点 n!==n

利用 ES6 中提供的 Object.is()方法(判断两个值是否相等) n==nan

Js 中 null 与 undefined 区别

相同点:用 if 判断时,两者都会被转换成 false

不同点:

number 转换的值不同 number(null)为 0 number(undefined)为 NaN

Null 表示一个值被定义了,但是这个值是空值

Undefined 变量声明但未赋值


4.闭包是什么?有什么特性?对页面会有什么影响


闭包可以简单理解成:定义在一个函数内部的函数。其中一个内部函数在包含它们的外部函数之外被调用时,就会形成闭包。


特点:

1.函数嵌套函数。

2.函数内部可以引用外部的参数和变量。

3.参数和变量不会被垃圾回收机制回收。


使用:

1.读取函数内部的变量;

2.这些变量的值始终保持在内存中,不会在外层函数调用后被自动清除。


优点:

1:变量长期驻扎在内存中;

2:避免全局变量的污染;

3:私有成员的存在;


缺点:会造成内存泄露


5.Js中常见的内存泄漏


意外的全局变量

被遗忘的计时器或回调函数

脱离DOM的引用

闭包


6.事件委托是什么?如何确定事件源


Event.target谁调用谁就(是事件源)

JS高程上讲:事件委托就是利用事件冒泡,只制定一个时间处理程序,就可以管理某一类型的所有事件。

事件委托,称事件代理,是js中很常用的绑定事件的技巧,事件委托就是把原本需要绑定在子元素的响应事件委托给父元素,让父元素担当事件监听的职务,事件委托的原理是DOM元素的事件冒泡


7.什么是事件冒泡?


一个事件触发后,会在子元素和父元素之间传播,这种传播分为三个阶段,捕获阶段(从window对象传导到目标节点(从外到里),这个阶段不会响应任何事件),目标阶段,(在目标节点上触发),冒泡阶段(从目标节点传导回window对象(从里到外)),事件委托/事件代理就是利用事件冒泡的机制把里层需要响应的事件绑定到外层


8.本地存储与cookie的区别8.


Cookie是小甜饼的意思。顾名思义,cookie确实非常小,它的大小限制为4KB左右。它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通过在Cookie中存入一段辨别用户身份的数据来实现的。


localStorage

localStorage是HTML5标准中新加入的技术,它并不是什么划时代的新东西。早在IE6时代,就有一个叫userData的东西用于本地存储,而当时考虑到浏览器兼容性,更通用的方案是使用Flash。而如今,localStorage被大多数浏览器所支持,如果你的网站需要支持IE6+,那以userData作为你方案是种不错的选择。


sessionStorage


sessionStorage与localStorage的接口类似,但保存数据的生命周期与localStorage不同。做过后端开发的同学应该知道Session这个词的意思,直译过来是“会话”。而sessionStorage是一个前端的概念,它只是可以将一部分数据在当前会话中保存下来,刷新页面数据依旧存在。但当页面关闭后,sessionStorage中的数据就会被清空。


三者的异同


特性

Cookie

localStorage

sessionStorage


数据的生命期

一般由服务器生成,可设置失效时间。如果在浏览器端生成Cookie,默认是关闭浏览器后失效除非被清除,否则永久保存仅在当前会话下有效,关闭页面或浏览器后被清除存放数据大小4K左右,一般为5MB


与服务器端通信


每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能


问题

仅在客户端(即浏览器)中保存,不参与和服务器的通信


易用性

需要程序员自己封装,源生的Cookie接口不友好

源生接口可以接受,亦可再次封装来对Object和Array有更好的支持


9.ES6新特性


let/const


let和const简而概括就是不一样的变量声明。


let


let表示声明局部变量,相较于之前的var声明,主要有以下几个区别:


1.不存在变量提升

01771bab000ac2653d846796a3e6bf7e.png


2.存在暂时性死区,预编译时不能被访问


3.不允许重复声明,同一作用域内只能声明一次

d2f2dab45156cc1aecb94a8e111d5b97.png


4.存在块级作用域,,作用域之外不能访问里面声明的变量(块级作用域:只要存在花括号就是块级作用域)

c8f262633a7ec933dec40b3438a2cf2a.png


const


const声明常量,其使用规则除了声明之后不能修改之外,其他特性和let一样,另外const 在声明时必须被赋值const和let、模板字符串、箭头函数、函数的参数默认值、对象和数组

解构、for...of和for...in、ES6中的类


10.Let与var与const的区别


Var声明的变量会挂载在window上,而let和const声明的变量不会Var声明的变量存在变量提升,let和const不存在变量提升同一作用域下var可以声明同名变量,let和const、不可以Let和const声明会形成块级作用域Let暂存死区Const一旦声明必须赋值,不能用null占位,声明后不能再修改,如果声明的是复合类型数据,可以修改属性


目录
相关文章
|
6月前
|
移动开发 前端开发 JavaScript
大前端时代
大前端时代
98 1
|
6月前
|
前端开发 JavaScript 测试技术
前端 (3)
前端 (3)
26 0
|
5月前
|
资源调度 前端开发 JavaScript
|
6月前
|
前端开发 程序员 数据处理
关于前端的一些
关于前端的一些
41 1
|
6月前
|
SQL 安全 前端开发
前端安全方面
前端安全方面
49 0
|
编解码 移动开发 前端开发
什么是前端,前端是什么?
什么是前端,前端是什么?
179 0
|
前端开发
前端,理解this
前端,理解this
57 0
|
Web App开发 前端开发 JavaScript
纯前端实现视频混流
随着前端音视频技术的不断成熟越来越多的直播平台开始提供网页开播的直播方式,不需要再使用 OBS 或者各家的直播伴侣。
543 0
|
前端开发 JavaScript UED
关于前端的一些思考
前端开发作为Web前端的重要组成部分,越来越受到关注。为了在竞争激烈的市场中脱颖而出,我们需要不断创新并进行原创性的开发。
99 0
|
Web App开发 JSON 缓存