前端0：js基础
Posted yuqlblog
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端0：js基础相关的知识，希望对你有一定的参考价值。
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执行时抛出的异常将无能为力"。
以上是关于前端0：js基础的主要内容，如果未能解决你的问题，请参考以下文章