<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>
深入javaScript--一些有趣的技巧、閉包
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章