类数组转数组
- 类数组:
- arguments: 用来接收实参的
- HTMLcollection: 获取元素集合
- 类数组转数组
- Array.prototype.slice.call(arguments) --> 完全兼容
- HTMLcollection 不兼容
- 浏览器异常捕获
- 工作中：不用finally，因为无论成功或失败，finally都会执行
- 使用场景：解决 -> 报错后，程序无法执行的问题
- 如果在try...catch...中还希望阻断程序执行：throw new Error(‘报错’);
try{
//标准浏览器
}catch(e){
// IE浏览器
}fanally{
// 无论是否成功都能执行
}
JSON
- window.JSON 有两个属性
- JSON.parse(): 把JSON格式的字符串转为JSON对象
- JSON.stringify(): 把JSON对象转为JSON格式的字符串
如何判断浏览器是否兼容
- try...catch...
- 属性判断：window.JSON
- in: 'json' in window
DOM映射：指的是HTML页面结构和获取到的元素之间，存在一一对应的关系
排序 3 步骤
- 类数组转数组
- sort排序
- 把排好序的数组，重新朝如页面
ajax请求数据 4 步骤
- 创建一个对象
- var xml = new XMLHttpRequest()
- 打开地址
- xml.open('GET','请求地址','是否异步')
- 响应请求
xml.onreadystatechange=function(){
if(xml.readyState === 4 && /^2\d{2}$/.test(xml.status)){
var data = xml.responseText();
}
}
- 发送请求
- xml.send();
绑定数据，常用的有两种
- 字符串拼接: 简单、快捷
- 缺点：如果页面中，有的元素身上有事件，那么，通过字符串拼接之后，所有的事件都没了(可以忽略)
makeArray() : 类数组转数组
- 浏览器异常捕获
makeArray:function(arg){
var ary = [];
try{
ary = Array.prototype.slice.call(arg);
/* 或者写成
* ary = [].slice.call(arg);
*/
}catch(e){
for(var i=0;i<arg.length;i++){
ary.push(ary[i]);
}
}
return ary;
}
JSON格式的字符串转JSON对象
- "json" in window -> true
- JSON.parse()
- JSON.stringify()
jsonParse:function(jsonStr){
return 'json' in window ? JSON.parse(jsonStr) : eval('('+jsonStr+')')
}
排序 3 步走
- 类数组转数组
- sort排序
- 把排好序的数组，重新插入页面
求平均值
- 类数组转数组
- sort排序
- 掐头去尾
- (eval + join)+toFixed
// 求平均值：去掉一个最高分，去掉一个最低分，其他累加/个数
function average(){
var ary = [];
for(var i=0;i<arguments.length;i++){
ary.push(arguments[i]);
}
ary.sort(function(a,b){
return a-b;
}
ary.shift();
ary.pop();
return (eval(ary.join('+'))/ary.length).toFixed
}
var res = average(1.77777,8.77777,3.77777,9.7777,2.7777)
ajax数据请求
- 创建对象
- var xml = new XMLHttpRequest()
- 打开地址
- xml.open("GET","请求地址","是否异步")
- 响应请求
- 准备好了 xml.readyState === 4
- 响应成功 /^2\d{2}$/.test(xml.status)
- 发送请求 --- get请求
- xml.send() / xml.send(null);
var xml = new XMLHttpRequest();
xml.open('GET','data.txt',false);
xml.onreadystatechange = function(){
if(xml.readyState === 4 && /^2\d{2}$/.test(xml.status)){
var data = utils.jsonParse(xml.responseText);
}
}
xml.send();
http状态码
- 2XX：成功
- 3XX：重定向
- 4XX：请求错误
- 5XX：服务器的错误
绑定数据
- 字符串拼接
function bind(){
var str = '';
for(var i=0; i<data.length; i++){
str += '<li>\
<a href="#">\
<em>'+(i+1)+'</em>'+data[i].title+'</a>\
</li>';
}
oUl.innerHTML=str;
}
bind();
- 动态创建 --> 文档碎片
function bind(){
var frg = document.createDocumentFragment();
for(var i=0; i<data.length; i++){
var oLi=document.createElement('li');
oLi.innerHTML='<a href="#">\
<em>'+(i+1)+'</em>'+data[i].title+'</a>';
frg.appendChild(oLi);
}
oUl.appendChild(frg);
frg = null;
}
bind()
