关于js的笔记

Posted on 2017-02-25 23:30 Tokyomylove 阅读(134) 评论(0) 编辑收藏举报

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]);
    }
}

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();
};

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

<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

刷新页面返回顶部