Javascript篇1

1. js的基本数据类型

• 基本的引用数据类型：number、string、Boolean、null、undefined。ES6新增1种：Symbol
• 引用数据类型也就是对象类型：object、array、function、data等。

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

• 闭包：可以理解为定义在一个函数内部的函数。其中一个内部函数在包含它们外部函数之外被调用时，就会形成闭包。
  通俗的讲：就是函数a的内部函数b，被函数a外部的一个变量引用的时候，就创建了一个闭包。
  这样在执行完var c=a()后，变量c实际上是指向了函数b，再执行c()后就会弹出一个窗口显示i的值(第一次为1)。这段代码其实就创建了一个闭包，为什么？因为函数a外的变量c引用了函数a内的函数b

function a() {
var i = 0;
function b() {
alert(++i);
}
return b;
}
var c = a();
c();

• 闭包的特性： ①.封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口； ②.持久性：一般的函数，调用完毕之后，系统自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包结构依然保存在系统中，闭包中的数据依然存在，从而实现对数据的持久使用。

• 优点： ① 减少全局变量 ② 减少传递函数的参数量 ③ 封装

• 缺点：使用闭包会占有内存资源，过多的使用闭包会导致内存溢出等。

3. js中常见的内存泄漏

• 一、不正当的闭包
• 二、隐式全局变量
• 三、游离DOM引用
• 四、遗忘的定时器
• 五、遗忘的事件监听器
• 六、排查问题

4. 什么是事件冒泡？

• 当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件），或者按钮的父级绑定有事件函数，当该点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理。

  页面上有好多事件，也可以多个元素响应一个事件。假如：

上面这段代码一共有三个事件,body，div，a都分别绑定了单击事件。在页面中当单击a标签会连续弹出3个提示框。这就是事件冒泡引起的现象。事件冒 泡的过程是：a --> div --> body 。a冒泡到div冒泡到body。

5. 本地存储与 cookie 的区别

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

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

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

1. cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

2. cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

3. 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

4. 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

6. ES6 新特性

const、let、模板字符串、箭头函数、函数的参数默认值、对象和数组解构、for...of 和 for...in、ES6中的类

7. 数组方法有哪些请简述

• push()从后面添加元素，返回值为添加完后的数组的长度。
• arr.pop()从后面删除元素，只能是一个，返回值是删除的元素。
• arr.shift() 从前面删除元素，只能删除一个 返回值是删除的元素。
• arr.unshift() 从前面添加元素, 返回值是添加完后的数组的长度。
• arr.splice(i,n) 删除从 i(索引值)开始之后的那个元素。返回值是删除的元素。
• arr.concat() 连接两个数组 返回值为连接后的新数组。
• str.split() 将字符串转化为数组。
• arr.sort() 将数组进行排序,返回值是排好的数组，默认是按照最左边的数 字进行排序，不是按照数字大小排序的。
• arr.reverse() 将数组反转,返回值是反转后的数组。
• arr.slice(start,end) 切去索引值start 到索引值 end 的数组，不包含 end 索引的值，返回值是切出来的数组。
• arr.forEach(callback) 遍历数组,无 return 即使有 return，也不会返回 任何值，并且会影响原来的数组。
• arr.map(callback) 映射数组(遍历数组),有 return 返回一个新数组。
• arr.filter(callback) 过滤数组，返回一个满足要求的数组。

8. JS 拖拽功能的实现

• 首先是三个事件，分别是mousedown，mousemove，mouseup当鼠标点击按下的时候，需要一个tag标识此时已经按下，可以执行mousemove里面的具体方法。clientX, clientY标识的是鼠标的坐标，分别标识横坐标和纵坐标，并且我们用offsetX和offsetY来表示元素的初始坐标，移动的举例应该是：鼠标移动时候的坐标-鼠标按下去时候的坐标。也就是说定位信息为：鼠标移动时的坐标-鼠标按下去时候的坐标+元素初始情况下的坐标的offsetLeft。还有一点原理性的东西，也就是拖拽的同时是绝对定位，我们改变的是绝对定位下的left以及top等等值。

• 补充：也可以通过html5的拖放（Drag和Drop）来实现。

寄语：风华正茂当然要落落大方，希望大家都有美好的明天~