深入javaScript--一些有趣的技巧、闭包_js中一些有趣的方法-CSDN博客

本文链接：https://blog.csdn.net/javaexploreroooo/article/details/53511616

<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>