您的位置：首页 > Web前端 > JavaScript
深入javaScript--一些有趣的技巧、闭包

2016-12-07 22:54 295 查看
<html>
<head>
<title>js的一些技巧性代码整理</title>
</head>
<body>
<div id="content"></div>
<div>
<ul id="myUl">
</ul>
</div>
</body>
<script>
//1.遍历一个obj的属性到数组
(function foo1(){
var arr = [];
var obj = {
"1":"test1",
"2":"test2",
"3":"test3"
};
for(arr[arr.length] in obj);//for in循环遍历的是对象的key值，遍历之后放进了数组中
console.log(arr); // [1,2,3]
return arr;
})()

//2.重复字符串(abc=>abcabc)
//二分法(效率最高)
function reapt(str,num){
var s = str,total = "";
while(num>0){
if(num % 2 == 1){ //如果是奇数的情况
total += s;
}
if(num == 1){ //如果只有1个长度
break;
}
s += s;
num = num >> 1;
}
return total;
}
console.log(reapt("abc",4));
//闭包
var repeat = (function(){ //IIFE 闭包
join = Array.prototype.join,obj={};
return function(str,num){
obj.length = num + 1;
return join.call(obj,str);//js中 call apply bind 都可以改变this指向。具体用法需仔细研究
//数组的join方法是把数组类的元素以某标识链接成字符串
//这里就是把str作为链接的标识符，数组的长度树num+1,那么链接处刚好就是num个
}
})()
console.log(repeat("abc",10));

//3. 变量转换
var str = '3.1415';
str = "" + str; // to string
console.log(typeof(~~str)); // to number
console.log(typeof(1*str));// to number
console.log(typeof(!!str));// to boolean

//4. 使用document.createDocumentFragment()
//您可能需要动态地追加多个元素到文档中。然而，直接将它们插入到文档中会导致这个文档每次都需要重新布局一个，
//相反的，你应该使用文档碎片，建成后只追加一次
(function(){
var list = ["1","2","3","4","5","6"];
var frag = document.createDocumentFragment();
while (list.length) {
var li = document.createElement("li");
li.appendChild(document.createTextNode(list.shift()));
frag.appendChild(li);
}
document.getElementById('myUl').appendChild(frag);
})()
//5. 而传递一个对象总是比传递一堆的参数更方便
//   function doSomething() {
// 　　// Leaves the function if nothing is passed
// 　　if (!arguments[0]) {
// 　　return false;
// 　　}
// 　　var oArgs   = arguments[0]
// 　　arg0    = oArgs.arg0 || "",
// 　　arg1    = oArgs.arg1 || "",
// 　　arg2    = oArgs.arg2 || 0,
// 　　arg3    = oArgs.arg3 || [],
// 　　arg4    = oArgs.arg4 || false;
//     }
//     doSomething({
//     　　arg1    : "foo",
//     　　arg2    : 5,
//     　　arg4    : false
//   });
// 6.闭包的一个有趣的案列
for(var i = 1 ; i<=5 ;i++){
setTimeout(function(){
console.log(i);
},i*1000);
} //间隔1秒输出6

for(var i = 1 ; i<=5 ;i++){
(function(j){
setTimeout(function(){
console.log(j);
},i*1000);
})(i);
} //正常输出12345

for(let i = 1 ; i<=5 ;i++){
setTimeout(function(){
console.log(i);
},i*1000);
} //正常输出12345
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航