怎样添加、 移除、 移动、 复制、 创建和查找节点?
1) 创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2) 添加、 移除、 替换、 插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3) 查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id,唯一性
实现一个函数clone, 可以对JavaScript中的5种主要的数据类型( 包括Number、 String、 Object、 Array、 Boolean) 进行值复制。
/** * 对象克隆 * 支持基本数据类型及对象 * 递归方法 */
function clone(obj) {
var o;
switch(typeof obj) {
case "undefined":
break;
case "string":
o = obj + "";
break;
case "number":
o = obj - 0;
break;
case "boolean":
o = obj;
break;
case "object": // object 分为两种情况 对象(Object)或数组(Array)
if(obj === null) {
o = null;
} else {
if(Object.prototype.toString.call(obj).slice(8, -1) === "Array") {
o = [];
for(var i = 0; i < obj.length; i++) {
o.push(clone(obj[i]));
}
} else {
o = {};
for(var k in obj) {
o[k] = clone(obj[k]);
}
}
}
break;
default:
o = obj;
break;
}
return o;
}
var arr1 =[1,2,2,2,3,3,3,4,5,6],
arr2 = [];
for(var i = 0, len = arr1.length; i < len; i++) {
if(arr2.indexOf(arr1[i]) < 0) {
arr2.push(arr1[i]);
}
}
document.write(arr2); // 1,2,3,4,5,6
伪数组( 类数组): 无法直接调用数组方法或期望length属性有什么特殊的行为, 但仍可以对真正数组遍历方法来遍历它们。 典型的是函数的argument参数, 还有像调用getElementsByTagName, document.childNodes之类的, 它们都返回NodeList对象都属于伪数组。 可以使用Array.prototype.slice.call(fakeArray) 将数组转化为真正的Array对象。
//将数组转换为类数组对象
var arr = ["a","v","sk","fd"];
var obj = {};
Array.prototype.push.apply(obj,arr);
console.log(obj);//{"0":"a","1":"v","2":"sk","3":"fd","length":4}
//将类数组对象转换为数组
var arr1 = Array.prototype.slice.call(obj);
console.log(arr1);//["a", "v", "sk", "fd"]
caller是返回一个对函数的引用, 该函数调用了当前函数;
callee是返回正在被执行的function函数, 也就是所指定的function对象的正文。
请描述一下cookies, sessionStorage和localStorage的区别
sessionStorage用于本地存储一个会话( session) 中的数据, 这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。 因此sessionStorage不是一种持久化的本地存储, 仅仅是会话级别的存储。 而localStorage用于持久化的本地存储, 除非主动删除数据, 否则数据是永远不会过期的。
web storage和cookie的区别
Web Storage的概念和cookie相似, 区别是它是为了更大容量存储设计的。 Cookie的大小是受限的, 并且每次你请求一个新的页面的时候Cookie都会被发送过去, 这样无形中浪费了带宽, 另外cookie还需要指定作用域, 不可以跨域调用。
除此之外, Web Storage拥有setItem, getItem, removeItem, clear等方法, 不像cookie需要前端开发者自己封装setCookie, getCookie。 但是Cookie也是不可以或缺的: Cookie的作用是与服务器进行交互, 作为HTTP规范的一部分而存在, 而Web Storage仅仅是为了在本地“ 存储” 数据而生。
统计字符串中字母个数或统计最多字母数。
var str = "aaaabbbccccddfgh";
var obj = {};
for(var i = 0; i < str.length; i++) {
var v = str.charAt(i);
if(obj[v] && obj[v].value == v) {
obj[v].count = ++obj[v].count;
} else {
obj[v] = {};
obj[v].count = 1;
obj[v].value = v;
}
}
for(key in obj) {
document.write(obj[key].value + '=' + obj[key].count + ' '); // a=4 b=3 c=4 d=2 f=1 g=1 h=1
}
基本流程:
a.域名解析
b.发起TCP的3次握手
c.建立TCP连接后发起http请求
d.服务器端响应http请求, 浏览器得到html代码
e.浏览器解析html代码, 并请求html代码中的资源
f.浏览器对页面进行渲染呈现给用户
算法相关手写数组快速排序
关于快排算法的详细说明, 可以参考阮一峰老师的文章快速排序"快速排序"的思想很简单, 整个排序过程只需要三步:
( 1) 在数据集之中, 选择一个元素作为 "基准"(pivot)。
( 2) 所有小于 "基准"的元素, 都移到 "基准"的左边; 所有大于 "基准"的元素, 都移到 "基准"的右边。
( 3) 对 "基准"左边和右边的两个子集, 不断重复第一步和第二步, 直到所有子集只剩下一个元素为止。
参考代码:
var quickSort = function(arr) {
if(arr.length <= 1) {
return arr;
}
var pivotIndex = Math.floor(arr.length / 2);
var pivot = arr.splice(pivotIndex, 1)[0];
var left = [];
var right = [];
for(var i = 0; i < arr.length; i++) {
if(arr[i] < pivot) {
left.push(arr[i]);
} else {
right.push(arr[i]);
}
}
return quickSort(left).concat([pivot], quickSort(right));
};
二分法查找, 也称折半查找, 是一种在有序数组中查找特定元素的搜索算法。 查找过程可以分为以下步骤:( 1) 首先, 从有序数组的中间的元素开始搜索, 如果该元素正好是目标元素( 即要查找的元素), 则搜索过程结束, 否则进行下一步。( 2) 如果目标元素大于或者小于中间元素, 则在数组大于或小于中间元素的那一半区域查找, 然后重复第一步的操作。( 3) 如果某一步数组为空, 则表示找不到目标元素。
参考代码:
// 非递归算法
function binary_search(arr, key) {
var low = 0,
high = arr.length - 1;
while(low <= high) {
var mid = parseInt((high + low) / 2);
if(key == arr[mid]) {
return mid;
} else if(key > arr[mid]) {
low = mid + 1;
} else if(key < arr[mid]) {
high = mid - 1;
} else {
return -1;
}
}
};
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23, 44, 86];
var result = binary_search(arr, 10);
alert(result); // 9 返回目标元素的索引值
// 递归算法
function binary_search(arr, low, high, key) {
if(low > high) {
return -1;
}
var mid = parseInt((high + low) / 2);
if(arr[mid] == key) {
return mid;
} else if(arr[mid] > key) {
high = mid - 1;
return binary_search(arr, low, high, key);
} else if(arr[mid] < key) {
low = mid + 1;
return binary_search(arr, low, high, key);
}
};
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23, 44, 86];
var result = binary_search(arr, 0, 13, 10);
alert(result); // 9 返回目标元素的索引值