1.js是按顺序执行的,故把 <script> 内容放到 <head> 里,或放到 <body> 内容之前,与<script> 内容放到 <body> 内容之后 执行的效果会有所不同。经常会遇到:
①<head><script> 里修改图片路径 obj.src 失败,由于未加载 window.onload。
2.节点处理
由于浏览器兼容性差异,各标签之间的空白也算为节点,index 随之变化。
3.查询字符串:JS与服务器的通信,避免URL等数据格式不正确即未经编码,导致通信错误。
1 function addQueryStringArg(url,name,value){ 2 if(url.index("?")==-1){ 3 url+="?"; 4 }else{ 5 url+="&"; 6 } 7 url+=encodeURLComponent(name)+"="+encodeURLComponent(value); 8 return url; 9 }
4.数组处理:
arr=null 数组删除
arr.pop 去尾,返回尾巴
arr.join(‘.‘) 数组转字符串,以 . 分开,一般配合 split
arr.reduce(fn) 接收一个函数进行两两迭代,数组中的每个值(从左到右)开始合并,最终计算为一个值。
arr.map(fn,cb) 参数为函数表达式及回调,fn(a,b,c) 参数默认为当前数组值,当前数组值索引,etc
arr.shift() 删除头,返回头
arr.unshift(‘a‘) 加头,返回length
arr.push 加尾,返回length
arr.splice(index,howmany,...itemn) 添加删除,返回原arr,index表示操作位置,index初始为0;howmany表示删除个数,howmany=0为不删除,改插入,插入index-1位置;...itemn为加入的参数若干,非纯函数,输出改变
var xs = [1,2,3,4,5]; // 不纯的 xs.splice(0,3); //=> [1,2,3] xs.splice(0,3); //=> [4,5] xs.splice(0,3); //=> []
纯函数:arr.slice(start,end) 提取,返回子arr,内容是从 start 处到 end-1,参数可负,原arr不变,纯函数输出不变
Array.prototype.slice.apply(arguments) 类数组转数组 e.g.call
字符串处理:
str.substring(start,end) 提取,返回子str,内容是从 start 处到 end-1,if (start<0) start=0,原str不变
str.split() 分割,返回数组arr,若需要进一步split,注意:分割后为数组,故用for循环split
str.parse() 转成json,注意:字符串中的属性要严格加上引号
str.substr(start,length) 返回子str,注意:不建议使用
字符串的部分修改可以使用replace 或者拼接
5.underscore对象处理:
underscore 待整理
if ( ‘a‘ in obj ) 判断对象 (json)obj 中是否有 a,注意 ‘a‘ 的 ‘‘,同样 obj 可以替换为 arr,但此时只能寻找下标 0,1,2...
json处理:
json.stringify() 转成str
json 转 url string:for in 遍历,push( = ) 存入数组,join(‘&‘) 转成 str,补套接字
json.parse() 将字符串转换成 json
遍历用 for in 后存入 push 数组
6.
7.switch(true){case 80<n:document.write(‘优秀‘);break;}//当表达式为比较时,参数为布尔值。
8.Math.floor/Math.ceil/Math.round//要上下兼顾建议floor,使用Math.floor(Math.random()*(max-min+1)+min)
9.页面所获取的内容都是字符串,eg:typeof getElementById(ID).value
10.URL-encode处理避免读取错误请求 url: encodeURLComponent()
e.g. encodeURLComponent("MTAuMTA4LjUyLjM2O2FkbWluO2ExMjM0NTY3OzgwMDA=") //MTAuMTA4LjUyLjM2O2FkbWluO2ExMjM0NTY3OzgwMDA%3D
11.<button onclick=‘func(event)‘></button>//event必须通过实际参数形式传递给函数func(e),考虑是否需要全局window
{alert(e.target.value);}
12.javascript 是单线程的,但浏览器内部不是单线程的。你的一些 I/O 操作,定时器的计时和事件监听(click,keydown...)等都是由浏览器提供的其他线程来完成的。
改变 this 指向:将 this 添加到指定环境中,若环境为 null,则指向 window。
.call(环境,参数1,参数2)
.apply(环境,[参数1,参数2])
.bind(环境,参数1,参数2...)
总结:call和apply都是改变上下文中的this并立即执行这个函数,bind方法可以让对应的函数想什么时候调就什么时候调用,并且可以将参数在执行的时候添加。
e.g.
var a = { user:"追梦子", fn:function(e,d,f){ console.log(this.user); //追梦子 console.log(e,d,f); //10 1 2 } } var b = a.fn; var c = b.bind(a,10); //或者 var d = b.bind(a,10,1,2); 或者 var e = b.bind(a) c(1,2);
13.动态创建的dom元素
在此基础上添加监听事件,需要全局方法 <dom onclick=‘window.fn()‘ /> 或查询相关资料。
14.禁止使用 遍历节点添加事件绑定
解决方法:父级监听事件委托/代理 addEventListener(‘events‘, fn, false);
15.try catch 异步编程中
try 代码块中避免使用赋值逻辑,并结合类型检查 typeof
朴灵曾提到:异步编程的难点之一是异常处理,书中描述 "尝试对异步方法进行try/catch操作只能捕获当次事件循环内的异常,对call back执行时抛出的异常将无能为力"。
原文地址:https://www.cnblogs.com/yuqlblog/p/11179989.html