js基础

1：null和undefined的区别
null转换成数字 == 0
undefined转换成数字 == NAN
undefined的应用场景

• （1）变量被声明了，但没有赋值时，就等于undefined。
• （2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
• （3）对象没有赋值的属性，该属性的值为undefined。

• （4）函数没有返回值时，默认返回undefined。
  null的应用场景
  document.getElementById(“a”).getAttribute(“title”) //null

  2:js window对象

window,
top,
self,
parent

窗口位置
window.screenLeft，
window.screenX,
window.screenTop,
window,screenY
window.moveTo(),
window.moveBy()

窗口大小
window.resizeTo(),
window,resizeBy(),
window.innerWidth,
window.innerHeight,
window.outerWidth,
window.outerHeight

打开和关闭窗口
window.open(),
window.close(),
var wroxWin = window.open(“http://www.baidu.com“,”wroxWin”.”width=100,height=100,top=100,left=200,resizable=yes”);
wroxWin.closed
wroxWin.opener

window.setInterval,window.clearInterval,window.setTimeout,window.clearTimeout
function a(){
alert(123);
}
var setIntervalId = setInterval(a,1000);
调用setInterval之后会返回一个超时调用Id
clearInterval(setIntervalId);
或者
setInterval(“alert(123)”,1000);//不赞成使用，可能导致性能损失
同理类似setTimeout,clearTimeout

系统对话框
window.prompt,
window.confirm,
window.alert,
window.print,
window.find

3：js location对象
window.location和document.location引用的是用一个对象
location.hash
location.host
location.hostname
location.href
location.pathname
location.port
location.protacal
location.search
location.assign(“http://write.blog.csdn.net/mdeditor#!postId=52056962“)会在浏览器的历史记录中生成一条新的记录
location.replace()//不会生成历史记录
location.reload()//有可能从缓存加载
location.reload(true)//从服务器重新加载

4：js string
参考大犀牛书的参考手册中的string方法

5:js中call，apply和bind方法的异同
相同点：通过函数调用来实现用另一个对象替换当前对象，也即使this指向函数中传递的第一个参数。
不同点：call和apply函数都是立即调用函数，call函数的第二个参数是一个用逗号（，）分割的参数列表。apply的第二个参数是一个参数数组;bind方法返回的是对当前函数的引用，可以随时调用该函数。

6:定义变量的方式
var m = 1;
function f(){
var x = 1;//私有变量
this.y = 1;
}
f.z = 1;
f.prototype.m = 1;

7：insertAdjacentHTML，insertAdjacentText，insertAdjacentElement方法总结
js中最基本的插入元素的方法只有appendChild和insertBefore方法，其他的方法都是从这两个方法中延伸出来的。为了解决这个问题延伸出了今天要介绍的上面三个方法
语法：
element.insertAdjacentHTML(position, html);
element.insertAdjacentText(position, text);
element.insertAdjacentElement(position, element);
position的值有
beforeBegin： 在元素的开始标签之前插入
afterBegin： 在元素的开始标签之后插入
beforeBegin： 在元素的结束标签之前插入
beforeEnd： 在元素的结束标签之后插入

8:终止正在进行的ajax请求
XMLHttpRequest对象的abort方法。
jQuery的ajax方法可以设置timeout参数达到。
9：js中获取元素位置的方法总结
dom.scrollTop/dom.scrollLeft 获取滚动条相对于元素顶部/左边的偏移，也即是滚动条滚动过元素的高度/宽度。
dom.scrollHeight/dom.scrollWidth元素的实际高度/宽度（包括padding，返回值140）
dom.clientWidth/dom.clientHeight 元素的宽度/高度(包括padding，返回值140)
dom.offsetWidth/dom.offsetHeight元素的宽度/高度（包括padding，返回值140）
dom.offsetLeft/dom.offsetTop元素距离包含元素的左边和上边的距离。
dom.clientTop/dom.clientLeft
window.getComputeStyle(dom).width/height//元素的宽度/高度（不包括padding,返回值100px）
dom.getBoundingClientRect().left包括padding
$(dom).position().left不包括padding$（dom）.width()不包括padding
10:js事件处理函数中event对象的属性总结(chrome浏览器中)
event.target 触发事件的对象
event.currentTarget 事件绑定的对象
event.relatedTarget 与事件的目标节点相关的节点
event.bubbles 指定事件是否是冒泡事件类型
event.cancelable 指定事件是否可以取消默认动作
event.clientX 鼠标指针相对于当前视口的水平位置
event.clientY鼠标指针相对于当前视口的垂直位置
event.screenX鼠标指针位置相对于用户屏幕的 x 坐标。
event.screenY 鼠标指针位置相对于用户屏幕的 y坐标。
offsetX 鼠标指针位置相对于触发事件的对象的 x 坐标。
offsetY 鼠标指针位置相对于触发事件的对象的 y 坐标。
event.button当事件被触发时哪个鼠标按键被点击
0 鼠标左键
1鼠标中键
2鼠标右键
event.which 事件触发时哪个键盘键或鼠标按钮被按下
1鼠标左键
2鼠标中键
3鼠标右键
event.timestamp系统启动至今的时间戳（毫秒数）
event.type 事件类型
event.eventPhase 事件传播的当前阶段
1捕获阶段
2正常派发阶段
3冒泡阶段
11:js中自定义事件
function dispatch(eventObj, eventType, detail) {
var evt;
if (window.CustomEvent) {
evt = new window.CustomEvent(eventType, {
bubbles: true,//事件是否可以冒泡
cancelable: true,//是否可以事件的默认行为
detail: msg || {}//细节参数,可以在事件处理函数中e.detail获取
});
} else {
evt = document.createEvent(‘CustomEvent’);
evt.initCustomEvent(eventType, true, true, msg || {});
}
eventObj.target.dispatchEvent(evt);
}
dispatch(document.querySelector(‘.test’),‘test’, {
a:1,
b:2
});
//然后定义监控test的事件处理程序
document.body.addEventListener(‘test’, function(e){
console.log(e.detail.a + e.detail.b);//1+2=3
});

12 创建日期的5种方式

new Date(yyyy,mth,dd,hh,mm,ss);
new Date(123456677);//时间戳，距离1970年1月1日
new Date(yyyy,mth,dd);
new Date(“mth dd,yyyy hh:mm:ss”);
new Date(“mth dd,yyyy”);
13:js中的节流函数和函数防抖
函数节流原理：用定时器，当触发一个事件时，先setTimout让这个事件延迟一会再执行，如果在这个时间间隔内又触发了事件，那我们就clear掉原来的定时器，再setTimeout一个新的定时器延迟一会执行。也就是在规定的时间间隔内如果多次触发了某个事件，那么只执行一次函数调用。
节流函数的实现：

// 针对chromium内核优化,https://github.com/GoogleChrome/devtools-docs/issues/53
function setArgs(newArgs, oldArgs) {
  for (var i = 0, ii = oldArgs.length; i < ii; i++) {
    newArgs.push(oldArgs[i]);
  }
}
function throttle(fn, time, immediately) {
  var timer;
  var context;
  var args = [];
  var _arguments;
  return function() {
    context = this;
    if(immediately && !timer) {
      setArgs(args, arguments);
      fn.apply(context, args);
      args = [];
    }
    if(!timer) {
      _arguments = arguments;
      timer = setTimeout(function() {
        setArgs(args, _arguments);
        !immediately && fn.apply(context, args);
        args = [];
        timer = null;
      }, time);
    }
  };
}

函数防抖：
函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车。

function debounce(fn, delay) {
  var timer;
  var tTimer;
  var context;
  var args = [];
  var _argumentsr;
  return function () {
    context = this;
    _argumentsr = arguments;
      clearTimeout(timer);
      timer = setTimeout(function () {
        // 针对chromium内核优化,https://github.com/GoogleChrome/devtools-docs/issues/53
        for (var i = 0, ii = _argumentsr.length; i < ii; i++) {
          args.push(_argumentsr[i]);
        }
        fn.apply(context, args);
        args = [];
      }, delay);
    }
  };
}

14：监听页面是否停止滚动（利用事件防抖）

window.scrollStop = true;
var scrollStop = function(contain) {
    evt = new CustomEvent('scrollStop', {
      bubbles: true,
      cancelable: true
    });
    contain.scrollStop = true;
    contain.dispatchEvent(evt);
  };
  var debounceScrollStop = debounce(scrollStop, 64);
  window.addEventListener('scroll', function() {
    window.scrollStop = false;
    debounceScrollStop(window);
  }, {
    passive:true
  });

15:js获取元素的样式
style
currentStyle
getComputedStyle
16:实现数组去重：（zepto中实现）
function uniq(array) {
return array.filter(function(item, index) {
return array.indexof(item) == index;
})
}
17:字符串的replace方法
var s = ‘I like studying javascript’;
s.repalce(regExp, replacement);
regExp: 字符串/正则表达式
replacement: 字符串或者函数。function有四个参数，第一个是匹配到的子串，第二个是圆括号内的子表达式，第三个参数是匹配到的子串的位置，第四个参数是string本身。
s.replace(‘like’, ‘love’);
s.replace(/javascript/i, ‘Javascript’);
s.repalce(/(\b\w+\b)/, function(s1, $1,$2, index, string){
return s1.substring(0, 1).toUpperCase() +s1 .substring(1);
});