逻辑与（&&）、逻辑或（||）

除去正常的使用逻辑关系外，更复杂的应用：

1
2
3
4

var o={x:1};
var p=null;
o && o.x // =>1: 因为逻辑运算符的左侧是真值，所以继续计算运算符的右侧的值并返回该值
p && p.x // =>null: 因为运算符的左侧p是假值，所以直接返回p，不会继续计算右侧的p.x

巧妙使用的好处：

1
2
3
4
5
6
7
8
9

// 普通的方法
var len=undefined;
if(book){
    if(book.subtitle){
        len=book.subtitle.length;
    }
}
// 使用逻辑运算符，更加简洁
 var len=book && book.subtitle && book.subtitle.length;

使用逻辑或（||）来设置默认值：

1
2

// 先判断逻辑运算符的左侧的max_width是否是真值。是真值，直接返回该值，不是真值，则继续计算逻辑运算符的右侧
var max = max_width || preferences.max_width || 500;

JS事件触发的流程

JS事件触发的流程

DOM2事件流分为三个阶段：事件捕获–》事件目标–》事件冒泡 （IE8及更早版本不支持事件流。。）。

DOM0、DOM2(没有DOM1级)、DOM3

HTML事件处理程序:

1

<input type="button" name="" id="btn" onclick="alert('hello world~');">

DOM0级事件处理程序：

常见的web请求中使用到的http请求方法：get、post、put、delete

发生的场景：

公司新项目实现前后端分离后，某天调试页面一个数据请求接口，一直报403的错误。用fiddler抓包分析，发现该接口竟然是Options请求（请求方法中使用的是get谓词），却没有真正的发送期待中的get请求。 Options是什么鬼？之前开发一直没有遇到过。。后来问了下同事，说是这是由于跨域请求引起的。。

查找资料获得：

HTTP权威指南对Options方法的解释：

OPTIONS方法请求web服务器告知其支持的各种功能。可以询问服务器通常支持哪些方法，或者对某些特殊资源支持哪些方法。（有些服务器可能只支持对一些特殊类型的对象使用特定的操作）

W3C规范中，跨域请求分为简单请求和复杂请求。简单请求不需要发送Options嗅探请求，但是只能发送简单的get/head/post请求，且不能自定义http的headers。复杂请求包含preflighted请求和preflighted认证请求。复杂请求在发送真正的请求前会提前发送一次Options请求（嗅探、预检请求），XHR会根据返回的Access-Control-*等头信息判断是否有对指定站点的访问权限，检查该请求是否是可靠安全的。如果options获得的回应是拒绝性质的（或者没有权限），会停止发送实际请求信息。

处理方法：

一般来说这个是后台需要处理的，开放所有的或者预料中的请求方法权限。

正则表达式具有特殊含义的标点符号

^ $ . * + ? = ! : | \ / ( ) [ ] { }
想直接使用上面这些标点符号直接量，则必须使用前缀 \ 。

正则表达式的字符类

基于Node.js的爬虫项目

实现的最终结果：通过爬取https://www.cnblogs.com/里面的文章获取对应作者的相关信息。
目的：学习node搭建服务器、分析网页请求并模拟请求、熟悉http协议相关、node写入文件等功能

项目文件结构说明

index.js：项目的启动（入口）文件
server.js：主文件
package.json：模块依赖文件及相关配置

搭建node服务器

默认开始本步骤前已经安装好node环境

server.js：

引入node内置的http模块：

数组去重方法

参考

使用最基本的两个数组嵌套循环遍历 ：

….

使用数组的filter()方法 ：

1
2
3

array.filter(function(currentValue,index,arr), thisValue);
// index表示currentValue在数组对象中的索引值
// arr表示currentValue所属的数组对象

浏览器、HTML、CSS、JS

浏览器

1. IE，内核：Trident(IE内核)
2. Goole，内核：webkit
3. Firefox, 内核：Gecko

cookies，sessionStorage 和 localStorage

1. 都是保存在浏览器端，用来存储数据。
2. cookie可以在浏览器和服务器端来回传递，存储大小不能超高4k。
3. sessionStorage 和 localStorage在浏览器端存储数据，数据仅在本地保存。存储数据可以很大，达到5M或更多
4. localStorage可以永久在客户端存储数据，关闭浏览器，数据不会丢失。
5. sessionStorage关闭浏览器，数据丢失。

javascript基本数据类型？javascript的typeof返回哪些数据类型

javascript基本数据类型（六种）：null、undefined、object、string、number、boolean

javascript的typeof返回哪些数据类型(六种)：undefined、string、number、boolean、object、function

1
2

console.log(typeof function(){})          // 返回字符串"function" 
console.log(typeof null)          // 返回字符串"object"

强制类型转换和隐式类型转换

强制类型转换：parseInt、parseFloat、Number()、String()、Boolean()

隐式类型转换：参考资料

JavaScript的浅拷贝和深拷贝

浅拷贝：浅拷贝是拷贝引用，拷贝后的引用都是指向同一个对象的实例，彼此之间的操作会互相影响。
深拷贝：在堆中重新分配内存，并且把源对象所有属性都进行新建拷贝，以保证深拷贝的对象的引用不包含任何原有对象或对象上任何对象，拷贝后的对象与原来的对象完全隔离，互不影响。

浅拷贝和深拷贝是针对变量类型为引用类型来说的。其实质区别是是否真正的获取到要复制对象的实体。

javascript中的变量分为基本类型和引用类型，基本类型就是保存在栈内存中的简单数据段，引用类型指的是那些保存在堆内存中的对象。

栈内存：存放基本类型。堆内存：存放引用类型(在栈内存中存一个基本类型值保存对象在堆内存中的地址，用于引用这个存放在堆内存中的对象)

1. 基本类型：undefined、null、boolean、number和string。这些类型在内存中分别占有固定大小的空间，他们的值保存在栈空间，我们通过按值来访问。
2. 引用类型：值的大小不固定，栈内存中存放的是地址来指向堆内存中的对象。是按引用访问的。栈内存中存放的只是该对象的访问地址，在堆内存中为这个值分配空间。由于这种值的大小不固定，因此不能把他们保存到栈内存中，但由于内存地址大小是固定的，因此可以将内存地址保存到栈内存中。这样，当查询引用类型的变量时，先从栈中读取内存地址，然后再通过内存地址找到堆内存中的值。对于这种，我们叫做按引用访问。
3. 基本类型在当前执行环境结束时销毁，而引用类型不会随执行环境结束而销毁，只有当所有引用它的变量不存在时，这个对象才被垃圾回收机制回收。

JavaScript函数去抖与函数节流

实际碰到的场景一：

之前公司网站上有个需求：鼠标划出二级菜单则收缩一二级菜单，然后内容主体部分展示区域变大（动画实现效果）。当时做的时候自己也只是很简单的加了个鼠标事件，结果在实际使用中发现，当你来回移动鼠标很快的时候，动画事件会一直持续，造成页面显示卡顿，这个对用户体验很差。

实际遇到的场景二：

有个页面的输入框要实现根据用户的持续不断的输入动态显示几个下拉选项供用户挑选（类似百度搜索的效果），这种情况下应该不应该每输入一个字就进行ajax调用，而应该实现一段时间内执行一次。

具体可能的应用场景：

1. window对象的resize、scroll事件
2. 拖拽时的事件
3. 鼠标移入移出事件
4. 输入框文字输入事件