常用的javascript处理方法

例题1.获取地址栏参数
采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!)
function GetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
}


// 调用方法
alert(GetQueryString("参数名1"));

例题2.[CSS问题]元素垂直居中问题
1.若父容器下只有一个元素,且父元素设置了高度,则只需要使用相对定位即可    
parentElement{
    height:xxx;
}
.childElement {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
 
2.父元素的高度未知,让左边的一列随右边的一列高度变化而垂直居中
parentElement {
    position: relative;
}
childElement {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

例题3.[Javascript问题]随机产生0-100之内的10个不重复的数字
function getRandom() {
    //利用一个对象和一个数组
    var obj = {},array = [];
    while (array.length < 10) {
        var num = Math.floor(Math.random() * 100);
        if (!obj[num]) {
            obj[num] = num;
            array.push(num);
        }
    };
    return array;
}

1.生成n-m的随机数
公式:Math.round(Math.random()*(m-n)+n) 或者 Math.ceil(Math.random()*(m-n)+n)
 
2.双重非位运算简写
Math.floor(4.9) === 4 //true
简写
~~4.9 === 4 //true
 
3.打乱数组的顺序
arr.sort(function(){
return Math.random()-0.5
});
 
4.简单数组自定义排序
var arrSimple2=new Array(1,8,7,6);
arrSimple2.sort(function(a,b){return b-a});
解释:
a,b表示数组中的任意两个元素,若return > 0 b前a后;
reutrn < 0 a前b后;a=b时存在浏览器兼容简化一下:a-b输出从小到大排序,b-a输出从大到小排序。
 
 
5.加号的用途
 
1)使用+将字符串转换成数字,这个只适用于字符串数据,否则将返回NaN
var aa = '123';alert(+aa) == Number(aa)
 
2)+号同样适用于日期,将返回的是时间戳数字
var aa = new Date();alert(+aa) == aa.getTimes()
 
6.截断数组方法
 
数组截断,可以通过array.length = 5来截断数组
var array = [1,2,3,4,5];array.length = 3;alert(array)//[1,2,3]
还可以通过length来清空数组
arrar.length = 0
 
7.高效的for循环
for(var i=arr.length;i--;){
alert(arr[i])
}
 
8.合并两个数组
把数组2合并到数组1中,使得数组1改变,返回的是数组的长度
console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];
 
9.将NodeList转换成数组
var elements = document.querySelectorAll("p"); 
var arrayElements = Array.from([].slice.call(elements));
 
10.获取数组中最小或最大的数字
var a=[1,2,3,5];
alert(Math.max.apply(Math, a));//最大值
alert(Math.min.apply(Math, a));//最小值

猜你喜欢

转载自blog.csdn.net/u012934763/article/details/80302429