js基础

你的名字 2022-09-24 10:17 186阅读 0赞

**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][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][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);
        }
      };
    }

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

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

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);  
\});

[http_www.baidu.com]: http://www.baidu.com
[http_write.blog.csdn.net_mdeditor_postId_52056962]: http://write.blog.csdn.net/mdeditor#!postId=52056962