1.var、let、const的区别?
let 为 ES6 新添加申明变量的命令,它类似于 var,但是有以下不同:
var声明变量可以重复声明,而let不可以重复声明
var是不受限于块级的,而let是受限于块级
var会与window相映射(会挂一个属性),而let不与window相映射
var可以在声明的上面访问变量,而let有暂存死区,在声明的上面访问变量会报错
const声明之后必须赋值,否则会报错
const定义不可变的量,改变了就会报错
const和let一样不会与window相映射、支持块级作用域、在声明的上面访问变量会报错
2.js基础数据类型和引用类型分别是什么?(包含ES6新增)
1.基本数据类型(自身不可拆分的):Undefined、Null、Boolean、Number、String、symbol
2.引用数据类型(对象):Object (Array,Date,RegExp,Function)
3. jsonp原理,jquery是怎么实现的,这样实现有什么好处和坏处。
在同源策略下;在某个服务器下的页面是无法获取到该服务器以外的数据的;Jquery中ajax 的核心是通过 XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加 script标签来调用服务器提供的 js脚本
当我们正常地请求一个JSON数据的时候,服务端返回的是一串 JSON类型的数据,而我们使用 JSONP模式来请求数据的时候服务端返回的是一段可执行的 JavaScript代码。因为jsonp 跨域的原理就是用的动态加载 <script>的src ,所以我们只能把参数通过 url的方式传递, 所以jsonp的 type类型只能是get !1
2
3
4
5
6
7
8
9
10
11$.ajax({
url: 'http://192.168.1.114/yii/demos/test.php', //不同的域
type: 'GET', // jsonp模式只有GET 是合法的
data: { 'action': 'aaron'
},
dataType: 'jsonp', // 数据类型
jsonp: 'backfunc', // 指定回调函数名,与服务器端接收的一致,并回传回来})
其实jquery 内部会转化成
http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron然后动态加载
<script type="text/javascript"src="http://192.168.1.114/yii/demos/test.php?backfunc=>
然后后端就会执行backfunc(传递参数 ),把数据通过实参的形式发送出去。
在jquery 源码中, jsonp的实现方式是动态添加<script>标签来调用服务器提供的 js脚本。jquery 会在window对象中加载一个全局的函数,当<script>代码插入时函数执行,执行完毕后就<script>会被移除。同时jquery还对非跨域的请求进行了优化,如果这个请求是在同一个域名下那么他就会像正常的 Ajax请求一样工作。
4.理解web安全吗?都有哪几种,介绍以及如何预防?
1.XSS,也就是跨站脚本注入
攻击方法:
1. 手动攻击:
编写注入脚本,比如”/><script>alert(document.cookie());</script><!--等,
手动测试目标网站上有的input, textarea等所有可能输入文本信息的区域
2. 自动攻击
利用工具扫描目标网站所有的网页并自动测试写好的注入脚本,比如:Burpsuite等
防御方法:
1. 将cookie等敏感信息设置为httponly,禁止Javascript通过document.cookie获得
2. 对所有的输入做严格的校验尤其是在服务器端,过滤掉任何不合法的输入,比如手机号必须是数字,通常可以采用正则表达式
3. 净化和过滤掉不必要的html标签,比如:<iframe>, alt,<script> 等
4. 净化和过滤掉不必要的Javascript的事件标签,比如:onclick, onfocus等
5. 转义单引号,双引号,尖括号等特殊字符,可以采用htmlencode编码 或者过滤掉这些特殊字符
6. 设置浏览器的安全设置来防范典型的XSS注入
2.SQL注入
攻击方法:
编写恶意字符串,比如‘ or 1=1--等,
手动测试目标网站上所有涉及数据库操作的地方
防御方法:1. 禁止目标网站利用动态拼接字符串的方式访问数据库2. 减少不必要的数据库抛出的错误信息3. 对数据库的操作赋予严格的权限控制4. 净化和过滤掉不必要的SQL保留字,比如:where, or, exec 等5. 转义单引号,上引号,尖括号等特殊字符,可以采用htmlencode编码 或者过滤掉这些特殊字符
3.CSRF,也就是跨站请求伪造
就是攻击者冒用用户的名义,向目标站点发送请求
防范方法:1. 在客户端进行cookie的hashing,并在服务端进行hash认证
2.提交请求是需要填写验证码
3.使用One-Time Tokens为不同的表单创建不同的伪随机值
5.call()和apply()有什么区别?
它们各自的定义:
apply:应用某一对象的一个方法,用另一个对象替换当前对象。
call:调用一个对象的一个方法,以另一个对象替换当前对象。
它们的共同之处:
都“可以用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。”
它们的不同之处:
apply:
最多只能有两个参数——新this对象和一个数组 argArray。如果给该方法传递多个参数,则把参数都写进这个数组里面,当然,即使只有一个参数,也要写进数组里面。如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj,并且无法被传递任何参数。
call:
则是直接的参数列表,主要用在js对象各方法互相调用的时候,使当前this实例指针保持一致,或在特殊情况下需要改变this指针。如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
更简单地说,apply和call功能一样,只是传入的参数列表形式不同:如 func.call(func1,var1,var2,var3) 对应的apply写法为:func.apply(func1,[var1,var2,var3])
也就是说:call调用的为单个,apply调用的参数为数组。
6.js中原型和原型链是什么?
原型是什么?
在JavaScript中原型是一个prototype对象,用于表示类型之间的关系。
原型链是什么?
JavaScript万物都是对象,对象和对象之间也有关系,并不是孤立存在的。对象之间的继承关系,在JavaScript中是通过prototype对象指向父类对象,直到指向Object对象为止,这样就形成了一个原型指向的链条,专业术语称之为原型链。
7.Set 和 Map 数据结构
ES6 提供了新的数据结构 Set 它类似于数组,但是成员的值都是唯一的,没有重复的值。
ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说, Object 结构提供了“字符串—值”的对应, Map 结构提供了“值—值”的对应,是一种更完善的 Hash结构实现。
8.谈谈你对JSON的理解?
JSON是一种键值对的集合格式,每个键对应一个值
JSON中可以存储数组元素
JSON中可以存储无限个键值对数据
理论上,JSON可以进行无限次的嵌套
9.JSON.parse() 和 eval()的区别
在代码中使用eval()是非常危险的,因为eval()在解析字符串时,会执行该字符串中的代码,特别是用它执行第三方JSON字符串时,可能包含有恶意代码。而JSON.parse()方法解析字符串本身。使用JSON.parse()可以捕捉JSON中的语法错误。
10.什么是promise?promise的优缺点。
Promise是异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合合理、强大。所谓Promise,简单来说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promies是一个对象,从它可以获取异步操作的消息。Promise提供统一的API,各种异步操作都可以用同样的方法进行处理。
Promise的两个特点
1、Promise对象的状态不受外界影响
1)pending 初始状态
2)fulfilled 成功状态
3)rejected 失败状态
Promise 有以上三种状态,只有异步操作的结果可以决定当前是哪一种状态,其他任何操作都无法改变这个状态
2、Promise的状态一旦改变,就不会再变,任何时候都可以得到这个结果,状态不可以逆,只能由 pending变成fulfilled或者由pending变成rejected
11.WeakMap 和 Map 的区别?
WeakMap 结构与 Map 结构基本类似,唯一的区别是它只接受对象作为键名( null 除外),不接受其他类型的值作为键名,而且键名所指向的对象,不计入垃圾回收机制。
WeakMap 最大的好处是可以避免内存泄漏。一个仅被 WeakMap 作为 key 而引用的对象,会被垃圾回收器回收掉。
WeakMap 拥有和 Map 类似的 set(key, value) 、 get(key)、has(key)、 delete(key) 和 clear() 方法, 没有任何与迭代有关的属性和方法。
12.浏览器缓存
浏览器缓存分为强缓存和协商缓存。当客户端请求某个资源时,获取缓存的流程如下:
先根据这个资源的一些 http header 判断它是否命中强缓存,如果命中,则直接从本地获取缓存资源,不会发请求到服务器;
当强缓存没有命中时,客户端会发送请求到服务器,服务器通过另一些 request header验证这个资源是否命中协商缓存,称为 http再验证,如果命中,服务器将请求返回,但不返回资源,而是告诉客户端直接从缓存中获取,客户端收到返回后就会从缓存中获取资源;
强缓存和协商缓存共同之处在于,如果命中缓存,服务器都不会返回资源;
区别是,强缓存不对发送请求到服务器,但协商缓存会。
当协商缓存也没命中时,服务器就会将资源发送回客户端。
当 ctrl+f5 强制刷新网页时,直接从服务器加载,跳过强缓存和协商缓存;
当 f5 刷新网页时,跳过强缓存,但是会检查协商缓存;
强缓存
Expires(该字段是 http1.0 时的规范,值为一个绝对时间的 GMT 格式的时间字符串,代表缓存资源的过期时间)
Cache-Control:max-age(该字段是 http1.1 的规范,强缓存利用其 max-age 值来判断缓存资源的最大生命周期,它的值单位为秒)
协商缓存
Last-Modified(值为资源最后更新时间,随服务器response返回)
If-Modified-Since(通过比较两个时间来判断资源在两次请求期间是否有过修改,如果没有修改,则命中协商缓存)
ETag(表示资源内容的唯一标识,随服务器response返回)
If-None-Match(服务器通过比较请求头部的If-None-Match与当前资源的ETag是否一致来判断资源是否在两次请求之间有过修改,如果没有修改,则命中协商缓存)
13.一行代码实现数组去重?
1 | [...new Set([1,2,3,1,'a',1,'a'])] |
14.CommonJS 中的 require/exports 和 ES6 中的 import/export 区别?
CommonJS 模块的重要特性是加载时执行,即脚本代码在 require 的时候,就会全部执行。一旦出现某个模块被”循环加载”,就只输出已经执行的部分,还未执行的部分不会输出。
ES6 模块是动态引用,如果使用 import 从一个模块加载变量,那些变量不会被缓存,而是成为一个指向被加载模块的引用,需要开发者自己保证,真正取值的时候能够取到值。
import/export 最终都是编译为 require/exports 来执行的。
CommonJS 规范规定,每个模块内部, module 变量代表当前模块。这个变量是一个对象,它的 exports 属性(即module.exports )是对外的接口。加载某个模块,其实是加载该模块的 module.exports 属性。
export 命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。
15.使用js实现一个持续的动画效果。
1 | var e = document.getElementById('e') |
16.什么是闭包?闭包的优缺点。
闭包是指有权访问另一个函数作用域的变量的函数。–《javascript高级程序设计》
书上的概念就这么一句话,其实闭包就是像这句话定义的一样简单。如果有一个函数fun2,它可以访问在其它函数如fun1中的局部变量,那么它(fun2)就是闭包。创建闭包的简单方式,就在在函数内部创建另一个函数,下面例子创建了个简单的闭包1
2
3
4
5
6
7function fun1 () {
var a = 0;
function fun2 () {
console.log(a); // 在这个函数fun2中可以访问另一个函数中的变量a,所以fun2()就是一个闭包。
}
fun2();
}
闭包的优点:1.能够读取函数内部的变量 2.让这些变量一直存在于内存中,不会在调用结束后,被垃圾回收机制回收
闭包的缺点:正所谓物极必反,由于闭包会使函数中的变量保存在内存中,内存消耗很大,所以不能滥用闭包,解决办法是,退出函数之前,将不使用的局部变量删除。
17.JS为什么需要垃圾回收?
由于字符串、对象和数组没有固定大小,所有当他们的大小已知时,才能对他们进行动态的存储分配。JavaScript程序每次创建字符串、数组或对象时,解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存,最终都要释放这些内存以便他们能够被再用,否则,JavaScript的解释器将会消耗完系统中所有可用的内存,造成系统崩溃。
18.立即回收的方式有哪些?
标记清除
js中最常用的垃圾回收方式就是标记清除。当变量进入环境时,例如,在函数中声明一个变量,就将这个变量标记为“进入环境”。从逻辑上讲,永远不能释放进入环境的变量所占用的内存,因为只要执行流进入相应的环境,就可能会用到它们。而当变量离开环境时,则将其标记为“离开环境”。
垃圾回收器在运行的时候会给存储在内存中的所有变量都加上标记(当然,可以使用任何标记方式)。然后,它会去掉环境中的变量以及被环境中的变量引用的变量的标记(闭包)。而在此之后再被加上标记的变量将被视为准备删除的变量,原因是环境中的变量已经无法访问到这些变量了。最后,垃圾回收器完成内存清除工作,销毁那些带标记的值并回收它们所占用的内存空间。
到目前为止,IE、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或类似的策略,只不过垃圾收集的时间间隔互不相同。
引用计数
引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型值赋给该变量时,则这个值的引用次数就是1。如果同一个值又被赋给另一个变量,则该值的引用次数加1。相反,如果包含对这个值引用的变量又取得了另外一个值,则这个值的引用次数减1。当这个值的引用次数变成0时,则说明没有办法再访问这个值了,因而就可以将其占用的内存空间回收回来。这样,当垃圾回收器下次再运行时,它就会释放那些引用次数为0的值所占用的内存。
19.什么情况会引起内存泄漏?
- 意外的全局变量引起的内存泄漏。
原因:全局变量,不会被回收。
解决:使用严格模式避免。 - 闭包引起的内存泄漏
原因:闭包可以维持函数内局部变量,使其得不到释放。
解决:将事件处理函数定义在外部,解除闭包,或者在定义事件处理函数的外部函数中,删除对dom的引用。 - 没有清理的DOM元素引用
原因:虽然别的地方删除了,但是对象中还存在对dom的引用
解决:手动删除。 - 被遗忘的定时器或者回调
原因:定时器中有dom的引用,即使dom删除了,但是定时器还在,所以内存中还是有这个dom。
解决:手动删除定时器和dom。 - 子元素存在引用引起的内存泄漏
原因:div中的ul li 得到这个div,会间接引用某个得到的li,那么此时因为div间接引用li,即使li被清空,也还是在内存中,并且只要li不被删除,他的父元素都不会被删除。
解决:手动删除清空。
20.为什么使用严格模式?
消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;
- 消除代码运行的一些不安全之处,保证代码运行的安全;
- 提高编译器效率,增加运行速度;
- 为未来新版本的Javascript做好铺垫。
“严格模式”体现了Javascript更合理、更安全、更严谨的发展方向,包括IE 10在内的主流浏览器,都已经支持它,许多大项目已经开始全面拥抱它。
另一方面,同样的代码,在”严格模式”中,可能会有不一样的运行结果;一些在”正常模式”下可以运行的语句,在”严格模式”下将不能运行。掌握这些内容,有助于更细致深入地理解Javascript,让你变成一个更好的程序员。
21.严格模式和非严格模式的区别。
严格模式下, delete运算符后跟随非法标识符(即delete 不存在的标识符),会抛出语法错误; 非严格模式下,会静默失败并返回false
严格模式中,对象直接量中定义同名属性会抛出语法错误; 非严格模式不会报错
严格模式中,函数形参存在同名的,抛出错误; 非严格模式不会
严格模式不允许八进制整数直接量(如:023)
严格模式中,arguments对象是传入函数内实参列表的静态副本;非严格模式下,arguments对象里的元素和对应的实参是指向同一个值的引用
严格模式中 eval和arguments当做关键字,它们不能被赋值和用作变量声明
严格模式会限制对调用栈的检测能力,访问arguments.callee.caller会抛出异常
严格模式 变量必须先声明,直接给变量赋值,不会隐式创建全局变量,不能用with,
严格模式中 call apply传入null undefined保持原样不被转换为window
22.filter() 和 map() 的异同。
- 相同点:filter 和 map 都是对数组的操作,均返回一个新的数组,均不会改变原数组
- 不同点:filter是满足条件的留下,是对原数组的过滤;map则是对原数组的加工,映射成一一映射的新数组