您的位置:首页 > Web前端 > JavaScript

[置顶] Js个人总结

2017-12-04 21:29 351 查看
以下所述,纯碎是个人的总结,可能有很多不对。如果有人看到疑问或错误的地方请评价指出。
基础部分

1、js基础类型undifined null number string object,值存储于栈内存中

js引用类型:Object Function Array RegExp ,通过栈中引用操作存储于堆内存中值对象

es6新增了symbol类型

2、数组遍历

for: for(var i = 0, len = array.length; i < len ; i++){}
先获取数组长度,可以优化运行

for in: for(var i in array){} 遍历时间长,因为会遍历原型上属性。

forEach: array.forEach(function(value,index){}) 使用时注意匿名函数内的参数

for of: for(var i in array){} es新增遍历

3、数组常用方法

push: 数组末尾添加元素

unshift:数组首位添加元素

pop:数组删除末尾元素

shift:数组首位删除元素

filter:array.filter(function(value,index){}),返回新的过滤true的数组

reverse sort indexOf lastIndexOf

slice :取数组中的元素

splice:对数组删除或者添加更改元素

4、html文档结构dom:

根结点document文档,

<!--注释节点-->

<元素节点 属性节点> 文本节点</元素节点>

使用opener调用父级页面中元素对象
5、js事件 一般是监听的鼠标或者键盘发生改变,对应的函数进入事件队列中,等待运行。

事件类型:

onclick onmouseover(鼠标移入) onmouseout(鼠标移出)
onkeyup(键盘按下并抬起)

onkeydown(键盘按下)
onchange onblur(失去焦点) onfocus获得焦点) onsubmit

dom2事件设置:

对象.addEventListener(事件类型,function(){}) ||对象.attachEvent(事件类型,function(){})

对象.removeEventListener(事件类型,function(){}) ||对象.detachEvent(事件类型,function(){})

这里,提一下,假如遇到了浏览器中的事件流(冒泡流),可以使用对象.addEventListener(事件类型,function(){},false)。

或者对浏览器设置 event.stopPropagation();

6、常见for(var i =0;i < 5; i++){ array[i] = function(){console.log(i); }

然后array[1]();array[2]();array[3]();array[3]();我们输出会发现都是输出5。

因为在for作用域范围内i值变化。 但是在全局范围内的i值是5,所以这里需要闭包,添加匿名函数。

for(var i =0;i < 5; i++){
array[i] = function(i){
function f2(){
console.log(i);
};
return f2();
}
}


在函数作用域内同名变量情况下: 局部变量 > 内部函数 > 形参变量 > 外部变量(全局变量)

7、js中的继承是基于protype继承,继承对象时,如果先在原型上添加个函数时或者已经继承某个对象了,再继承新对象后,
新对象会覆盖原型上的继承。也就是单一继承。

8、对象的遍历:


9、继承对象时,我们一般会对extends进行扩展。请看示例:



10、js中的异常一旦发生,就会造成后面的代码无法执行。针对这种情况我们需要对可能发生异常的代码加上
try{...}catch(e){ console.log(e.message);
}finally{...}
11、js的’+’可以用来做字符连接,也可以用来做一元相加,而‘-’只能做一元计算。
var a=10;
var b=’20’;
var c=a+b; //输出1020
var d=a+(+b);输出30
var f=a+ +b);输出30
var e=a++ b;//err
12、== 等于,只看变量的值, ===绝对等于,看变量的值和类型
13、逻辑中 &&、||、!多用,减少if使用
14、条件判断效率:switch > if >while >for(;;) >for(in)
12、一般表单提交默认都是get请求,所以type=’button’时的提交可以加’post’请求
13、只能通过父节点删除节点
<demo1>
<demo2/>
</demo1>
方法一:
var parent= document.getElementById(‘demo1’);
var child= document.getElementById(‘demo2’);
parent.removeChild(child);
方法二:
child.parentNode.removeChild(child);
方法三:
parent.innerHTML=’’;
14、typeof判定 变量的基础类型number、boolean、string、object、undefined、function、symbol
typeof(null) ;//object
typeof(array);//object

15、if(a){}
当a 属于区间[0,-0,null,undefined,false,NaN,’’]的任何一值都表示false]
16、js正则声明
var a= new RegExp(‘\d+’);
var a= /\d+/;
a.exec(‘case1’) //2
a.test(‘case2’) // true
16、创建cookie
document.cookie=’username = nicknailo ;expires= 31 Dec 2017 GMT;path=/’;
读取cookie
var a=document.cookie;
如果设置cookie的key相同,则老数据会被覆盖

demo技巧
1、连接多个字符串(逼格更高)
var aa=[];
for(var i=0;i<100;i++){
aa.push(‘’+i);
}
var all=aa.join(‘’);
2、声明运行更快
var aa=[];var bb= {};var cc=/\d+/;
代替
var aa=new Array();var bb=new Object;var cc=new RegExp();
3、虽然目前在JS中单引号’’与双引号””没有大的区别,但是尽量还是用双引号。避免出错。等我后面找到实例,我会更新。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: