• 关于js的笔记


    1.Math.random() * (8) | 0;//随机向下取整

    2.动态加入数组元素

    var timearr=[00, 10, 10, 10, 10, 00, 10, 10, 10, 10, 00, 10, 10, 10, 10, 00, 10, 10, 10, 10,000, 10, 10, 10, 10, 00, 10, 10, 10, 10, 00, 10, 10, 10, 10, 00, 10, 10, 10, 10, 00, 10, 10, 10, 10, 00, 10, 10]
    
    var value=[0.368, 0.378, 0.381, 0.382, 0.384, 0.386, 0.385, 0.381, 0.385, 0.382, 0.384, 0.379, 0.358, 0.344, 0.322, 0.265, 0.262, 0.212, 0.254, 0.239, 0.215, 0.238, 0.252, 0.303, 0.284, 0.286, 0.254, 0.282, 0.271, 0.251, 0.239, 0.281, 0.256, 0.249, 0.258, 0.299, 0.305, 0.259, 0.285, 0.272, 0.293, 0.272, 0.288, 0.262, 0.306, 0.31, 0.326, 0.356]
    
    var newvalue=[];
    value.forEach( function(element, index) {
        newvalue.push([timearr[index],value[index]])
                });

     3.Array.map()方法

    var testObjs=[{"age":1,"name":"张"},{"age":2,"name":"李"},{"age":3,"name":"陈"}],newObj,newObj00;
        //三个参数:
        testObj:当前被遍历的元素;
        i:当前元素的索引;
        array:执行当前map方法的原数组testObjs
        newObj=testObjs.map(function(testObj, i,array) {
            console.log(testObj);
            console.log(array)
            var ageArr= {"age":testObj.age}
            return ageArr;
        })
        console.log(newObj)//[{"age":1},{"age":2},{"age":3}]

       newObj00=testObjs.sort(function (a,b) {
        return a.age-b.age //使按照年龄有小到大排序
       })

     

     4.for-in循环

    有个很重要的hasOwnProperty()方法,当遍历对象属性的时候可以过滤掉从原型链上下来的属性。

    var i, hasOwn = Object.prototype.hasOwnProperty;
    for (i in man) {
        if (hasOwn.call(man, i)) { // 过滤
            console.log(i, ":", man[i]);
        }
    }

     5.

    var pos=[6,8],size={"viewSize":[12,10]},obj;
    function qq(pos,size) {
        obj = {
            top: 10
        };
        obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
        //先判断了小括号内表达式的真假,若为真则返回1,假则返回0。
        //把得到的1或0作为数组['left', 'right']的索引,来确定要把30赋给谁
        return obj;
    }
    qq(pos,size);
    console.log(obj)//object {top: 10, left: 30}

     6.break & continue

    <!DOCTYPE html>
    <html>
    <body>
    
    <p>点击下面的按钮来执行循环,该循环会跳过 i=3 的步进。</p>
    <button onclick="myFunction()">点击这里</button>
    <p id="demo"></p>
    
    <script>
    function myFunction()
    {
    var x="",i=0;
    for (i=0;i<10;i++)
      {
      if (i==3)
        {
        break;//只要满足条件,无论break还是continue,该次循环if后的语句都不会执行。不同之处为,若为break,则此后的循环停止,若为continue,则 i!=3之后的循环将会继续执行
        }
      x=x + "The number is " + i + "<br>";
      }
    document.getElementById("demo").innerHTML=x;
    }
    </script>

     7.style.pixelLeft:
    返回定位元素左边界偏移量的整数像素值.因为属性的非像素值返回的是包含单位的字符串,例如,30px. 利用这个属性可以单独处理以像素为单位的数值.
    通俗点,document.images[0].style.pixelLeft=100
    意思就是images[0]这个对象离 左边 的距离为 100。

    而且你这个对象的CSS样式里也应该有position属性。
    这是JS内置的属性,很有意思,可以做出很多有趣的特效。

    8.pop()方法删除并得到数组最后一个元素,会改变原数组长度,在ajax请求中慎用,可换用slice(-1),slice()方法不会改变原数组

    9.使用正则

    var time = "/Date(1493811611580)/";
    console.log(time.replace(/(/Date()|()/)/g, ''))//对()转义
    time = time.replace(/(/Date()|()/)/g, '') - 0;
    console.log(new Date(time).toLocaleTimeString().replace(/(^D*)|(:d+$)/g, ''));//从 开头开始匹配非数字的部分 或者 结尾处冒号后面有一个或者多个数字的部分

     10.匹配ie

    if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
        new WOW().init();
    };

     11

    //通过设置定时器让连续触发的resize()事件间断执行,优化性能 
    $.resizeWaiter = false; $(window).resize(function() { if (!$.resizeWaiter) {//如果不为真时执行 console.log(1) $.resizeWaiter = true; setTimeout(function() { ChartHistoryData.resize(); $.resizeWaiter = false; }, 500); } });

     12

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    	<script>window.jQuery || document.write('<script src="../js/minified/jquery-1.11.0.min.js"></script>')</script>//当不存在jquery对象时会执行||后
    的语句添加script标签。
    http://blog.csdn.net/qq_34986769/article/details/52160532
    http://blog.csdn.net/jiaolong724/article/details/8532828

      

  • 相关阅读:
    vue-loader
    slot内容分发
    单向数据流
    vue父子组件(1.0)
    vue组件
    vue过渡
    vue之自定义组件
    jquery下拉菜单
    vue之过滤器
    【数学】数学归纳法
  • 原文地址:https://www.cnblogs.com/rage-the-dream/p/6443288.html
Copyright © 2020-2023  润新知