javascript 常用函数(一)

部分也是自己常用的,但是部分还需要实际验证
1、Array类型函数:
array.concat(item…)
函数功能:关联数组,实现数组相加功能,但并不影响原先数组,concat返回新数组。

JS常用的标准函数

array.join(separator)

函数功能:将array中的每个元素用separator为分隔符构造成字符串,默认的separator是逗号,当然你可以自己指定separator

事实上join方法最常用的地方在字符串相加,用过js的人都知道js的字符串相加是特别慢且性能特别差的,把大量片段字符串放在一个数组中并用join方法连接比用+连接要快得多。

JS常用的标准函数

array.pop()

pop和push方法使数组array像堆栈一样工作。

函数功能:pop方法移除array中的最后一个元素并返回该元素。

如果array是空的,则返回undefined;

JS常用的标准函数

array.push(item…)

函数功能:push方法将一个或多个item参数附加到array尾部。但是它不像concat方法那样,push方法不会修改item参数,如果参数item是一个数组,它会将参数数组作为单个元素整个添加到数组中,它返回array的新长度

JS常用的标准函数

array.reverse()

函数功能:反转array中元素的顺序,返回当前array

array.shift()

函数功能:移除array中的第一个元素并返回该元素,如果array是空的,它会返回undefined。

shift比pop要慢很多

array.slice(start,end)

函数功能:对array中的一段做浅复制。end参数是可选的,默认值为数组的长度array.length。

如果两个参数中任何一个是负数,array.length将和它们相加来试图将它们成为非负数。

如果start大于等于array.length,得到的结果将是一个新的空数组

JS常用的标准函数

array.sort(compareFn)

函数功能:对array中的内容进行排序。

var n = [4, 8, 15, 16, 23, 43];
n.sort(function (a, b) {
       return a - b;
});
console.log(n); //[4, 8, 15, 16, 23, 43]
 

var m = ['aa', 'bb', 'a', 4, 8, 15, 16, 23, 43];
m.sort(function (a, b) {
if (a === b) {
    return 0;
}
if (typeof a === typeof b) {
    return a < b ? -1 : 1;
}
return typeof a < typeof b ? -1 : 1;
});
console.log(m); //[4, 8, 15, 16, 23, 43, "a", "aa", "bb"]
var compare = function(name) {
    return function(o, p) {
        var a, b;
        if (typeof o === 'object' && typeof p === 'object' && o && p) {
            a = o[name];
            b = p[name];
            if (a === b) {
                return 0;
            }
            if (typeof a === typeof b) {
                return a < b ? -1 : 1;
            }
            return typeof a < typeof b ? -1 : 1;
        } else {
            throw {
                name : "Error",
                message : 'Expected an object when sorting by ' + name
            };
        }
    };
};
var s = [ {
    first : 'Joe',
    last : 'Felix'
}, {
    first : 'Moe',
    last : 'Besser'
}, {
    first : 'Joe',
    last : 'Howard'
}, {
    first : 'Shemp',
    last : 'DeRita'
}, {
    first : 'Larry',
    last : 'Howard'
}, {
    first : 'Curly',
    last : 'Fine'
}, {
    first : 'Shirly',
    last : 'Angela'
}

];

s.sort(compare('first'));
/*
 * s = [ { first: 'Curly', last: 'Fine' }, { first: 'Joe', last: 'Felix' }, {
 * first: 'Joe', last: 'Howard' }, { first: 'Larry', last: 'Howard' }, { first:
 * 'Moe', last: 'Besser' }, { first: 'Shemp', last: 'DeRita' }, { first:
 * 'Shirly', last: 'Angela' } ];
 */
array.splice(start,deleteCount,item…)

函数功能:从array中移除1个或多个元素,并用新的item替换它们。返回一个包含移除元素的数组。

array.unshift(item…)

函数功能:将item插入到array的开始部位。返回array的新长度值。

2、Function类型函数

function.apply(thisArg,argArray)

Function.prototype.bind = function(that) {
    // 返回一个函数,调用这个函数就像它是那个对象的方法一样
    var method = this, slice = Array.prototype.slice, args = slice.apply(
            arguments, [ 1 ]);
    return function() {
        return method.apply(that, args.concat(slice.apply(arguments, [ 0 ])));
    };
};
var x = function() {
    return this.value;
}.bind({
    value : 666
});
console.log(x());// 666
3、Number类型函数

number.toExponential(fractionDigits)

函数功能:把number转换成一个指数形式的字符串。可选参数fractionDigits控制其小数点后的数字位数,它的值必须在0到20之间。

JS常用的标准函数

number.toFixed(fractionDigits)

函数功能:把number转换成一个十进制形式的字符串。可选参数fractionDigits控制其小数点后的数字位数,它的值必须在0到20之间。默认为0。

JS常用的标准函数

number.toPrecision(precision)

函数功能:把number转换成一个十进制形式的字符串。可选参数fractionDigits控制其小数点后的数字位数,它的值必须在1到21之间。

JS常用的标准函数

number.toString(radix)

函数功能:把number转换成一个字符串。可靠参数radix控制基数,它的值必须在2和36之间,默认为10

JS常用的标准函数

4、Object类型函数

object.hasOwnProperty(name)

函数功能:如果object包含名为name的属性,hasOwnProperty方法将返回true,原型链中的同名属性是不会被检查的。

for (name in obj) {
      if (obj.hasOwnProperty(name)) {
          console.log(obj[name]);
      }
}
5、Regexp类型函数

regexp.exec(string)

函数功能:成功匹配regexp和字符串,返回一个数组。

数组中下标为0的元素包含正则表达式regexp匹配的子字符串

下标为1的元素是分组1捕获的文本,下标为2的元素是分组2捕获的文本,依此类推。如果匹配失败,就返回null。

如果regexp带有一个g(全局)标志,查找不是从这个字符串起始位置开始,而是从regexp.lastIndex(它的初始值为0)位置开始,如果匹配成功,那么regexp.lastIndex将被设置为该匹配后第一个字符的位置。 不成功的匹配会重置regexp.lastIndex为0

regexp.test(string)

函数功能:如果regexp匹配string,返回true 否则返回false

6、String类型函数

string.charAt(pos)

函数功能:返回在string中pos位置处的字符。

如果pos小于0或者大于string.length,将返回空字符串

string.charCodeAt(pos)

函数功能:返回在string中pos位置处的字符的字符编码。

string.concat(string…)

函数功能:连接字符串(不过很少被使用,因为用运算符+也能实现这个功能)

string.indexOf(searchString,position)

函数功能:在string内查找另一个字符串searchString,如果找到则返回第一个匹配字符的位置,否则返回-1。

可选参数position可设置从string的某个位置开始查找。

string.lastIndexOf(searchString,position)

函数功能:跟indexOf方法类似,区别是从字符串的末尾开始查找而不是从开头。

string.localCompare(that)

函数功能:比较两个字符串

string.match(regexp)

函数功能:匹配一个字符串和一个正则表达式。

如果没有g标识,string.match(regexp)和regexp.exec(string)结果相同。

如果有g标识,返回一个包含除捕获分组之处的所有匹配的数组。

string.replace(searchValue,replaceValue)

函数功能:对string进行查找和替换操作,并返回一个新的字符串。

var oldAreaCode = /\((\d{3})\)/g;
var p = '(555)(666)-1212'.replace(oldAreaCode, '$1-');
console.log(p);//555-666--1212
string.search(regexp)

函数功能:和indexOf方法类似,只是它接受一个正则表达式作为参数而不是一个字符串,如果找到匹配返回第一个匹配的首字符位置,如果没有找到匹配,则返回-1string.slice(start,end)

函数功能:复制string的一部分来构造一个新的字符串。

如果start参数是负数,它将与string.length相加。end参数是可选的,并且它的默认值是string.length。如果end参数是负数,它将与string.length相加。end参数是一个比最末一个字符的位置值还大的数。

string.split(separator,limit)

函数功能:把string分割成片段来创建一个字符串数组。可选参数limit可以限制被分割的片段数量。

var digits = '0123456789';
var a = digits.split('', 5); //["0", "1", "2", "3", "4"]
string.substring(start,end)

函数功能:substring的用法和slice方法一样,只是它不能处理负数参数,一般性的用slice替代它。

string.toLocalLowerCase()

函数功能:用本地化的规则把string中的所有字母转换为小写格式。

string.toLocalUpperCase()

函数功能:用本地化的规则把string中的所有字母转换为大写格式。

string.toLowerCase()

函数功能: 把string中的所有字母都转化为小写格式。

string.toUpperCase()

函数功能: 把string中的所有字母都转化为大格式。

string.fromCharCode(char…)

函数功能:从一串数字中返回一个字符串。

var a = String.fromCharCode(67, 97, 116);
console.log(a);//Cat;

/**
 *javascript按字节进行截取
 *
 * param str 要截取的字符串
 * param L 要截取的字节长度,注意是字节不是字符,一个汉字两个字节
 * return 截取后的字符串
 */
function cutStr(str,L){    
    var result = '',
        strlen = str.length, // 字符串长度
        chrlen = str.replace(/[^\x00-\xff]/g,'**').length; // 字节长度

    if(chrlen<=L){return str;}
    
    for(var i=0,j=0;i<strlen;i++){
        var chr = str.charAt(i);
        if(/[\x00-\xff]/.test(chr)){
            j++; // ascii码为0-255,一个字符就是一个字节的长度
        }else{
            j+=2; // ascii码为0-255以外,一个字符就是两个字节的长度
        }
        if(j<=L /* || j==L+1 */){ // 当加上当前字符以后,如果总字节长度小于等于L,则将当前字符真实的+在result后
            result += chr;
        }else{ // 反之则说明result已经是不拆分字符的情况下最接近L的值了,直接返回
            return result;
        }
    }
}

// 用例
alert(cutStr("abc中英文混合",10));



 

//获取firstchild
function firstChild(elem)
{
    var node = elem.firstChild ? elem.firstChild : null;
    while(node && node.nodeType != 1)
    {
        node = node.nextSibling;
    }
    return node;
}

//获取下一个同辈元素(ie下回忽略空白文节点)
function next(elem)
{
    var node = elem.nextSibling ? elem.nextSibling : null;
    while(node && node.nodeType != 1 )
    {
        node = node.nextSibling;
    }
    
    return node;
}

//获取上一个同辈元素(ie下回忽略空白文节点)
function prev(elem)
{
    var node = elem.previousSibling ? elem.previousSibling : null;
    while(node && node.nodeType != 1 )
    {
        node = node.previousSibling;
    }
    
    return node;
}
 

/**
 * 获取指定类名的父元素
 * @param elem
 * @param className
 * @returns
 */
function parents(elem, className)
{
    //检测自身是否满足条件
    if(elem.className.indexOf(className) != -1)
    {
        return elem;
    }    
    
    var parent = null;
    while((parent = elem.parentNode) &&  parent.nodeType == 1 && !!className)
    {
        if(parent.className.indexOf(className) != -1)
        {
            break;
        }
        elem = parent;
    }
    return parent;
}
 

 

//输入html代码,输出转换后的代码
function htmlEncode( html )
{
    //使用div来模拟
    var div = document.createElement("div");
        
    if(typeof div.innerText != 'undefined')
    {
        div.innerText  = html;
    }else{
        div.textContent = html;
    }

    var html_encode = div.innerHTML;
    div = null;
    
    return html_encode;
}
function htmlDecode( html )
{
    //使用div来模拟
    var text, div = document.createElement("div");
    div.innerHTML = html;    
        
    if(typeof div.innerText != 'undefined')
    {
         text = div.innerText;
    }else{
        text = div.textContent;
    }
    
    return text;
}



function htmlEncode(str) {
    var s = "";
    if (str.length == 0) return "";
    s = str.replace(/\&/g, "&");
    s = s.replace(/</g, "<");
    s = s.replace(/>/g, ">");
    s = s.replace(/\'/g, "'");
    s = s.replace(/\"/g, """);
    return s;
}
function htmlDecode(str) {
    var s = "";
    if (str.length == 0) return "";
    s = str.replace(/&/g, "&");
    s = s.replace(/</g, "<");
    s = s.replace(/>/g, ">");
    s = s.replace(/'/g, "\'");
    s = s.replace(/"/g, "\"");
    return s;
}



function htmlEncode(html)
{
  var div  = document.createElement("div");
  var text = document.createTextNode("");
  
  div.appendChild(text);
  
  text.nodeValue=html;
  return div.innerHTML;
}

function htmlDecode(str)
{
  var div  = document.createElement("div");
  div.innerHTML = str;
  
  return  div.firstChild.nodeValue;
}

/**
****/
//获取scrolltop
function getScrollTop()
{
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    return     scrollTop;
}

//设置scrolltop
function setScrollTop(top)
{
    document.documentElement.scrollTop = document.body.scrollTop = top;
}
 
 
/**
获取浏览器可视区域的尺寸
*/
function getBrowserSize()
{
    //在标准模式下用 documentElement, 在怪癖模式下用 body
    return {
        width:document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth,
        height:document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight,
    }
} 

/**
获取页面大小
*/
function getPageSize()
{
    //ie下优先取 body
    return {
        width:document.body.scrollWidth ? document.body.scrollWidth : document.documentElement.scrollWidth,
        height: document.body.scrollHeight ? document.body.scrollHeight   : document.documentElement.scrollHeight
    }
}
/**
获取元素到页面顶端的距离(出自jquery源码)
 */
function getCoords(el) {

    if (typeof el == 'string') {
        el = Fid(el);
    }

    var box = el.getBoundingClientRect(),
    doc = el.ownerDocument,
    body = doc.body,
    html = doc.documentElement,
    clientTop = html.clientTop || body.clientTop || 0,
    clientLeft = html.clientLeft || body.clientLeft || 0,
    top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop) - clientTop,
    left = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft
        return {
        'top' : top,
        'left' : left
    };
};

/*
获取元素到页面顶端的
document.documentElement.clientLeft ie6/7 下2px的bodrer
 */
function getAbsPoint(e) {

    if (typeof e == 'string') {
        e = Fid(e);
    }

    var x = e.offsetLeft;
    var y = e.offsetTop;
    var de = document.documentElement;
    while (e = e.offsetParent) { //在IE下offset对象是对当前元素到上一级元素的距离,FF则是正常的
        x += e.offsetLeft;
        y += e.offsetTop;

        //需要加上元素自身的border, offsetTop 本身就包含margin
        if (e && e != de && !Browser.isOpera) {
            x += e.clientLeft;
            y += e.clientTop; //ie6下设置元素宽度后才能到获取他的边框大小,如果不设置则下级取上级的时候会把上级的边框算进去(总体计算还是没有错)
        }
    }
    return {
        "left" : x,
        "top" : y
    };
}
 

//浏览器类型检测
var FBrowser=(function(){
    var ua = navigator.userAgent;
    var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]';
    return {
      isIE:             !!window.attachEvent && window.ActiveXObject && !isOpera,
      isOpera:          isOpera,
      isSafari:         ua.indexOf('AppleWebKit/') > -1,
      isFirefox:        ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') === -1,
      MobileSafari:     /Apple.*Mobile.*Safari/.test(ua),
      isChrome:         !!window.chrome,

    };
})();

FBrowser.isIE6=FBrowser.isIE&&!window.XMLHttpRequest;
FBrowser.isIE7=FBrowser.isIE&&!!window.XMLHttpRequest;
 

//document.documentMode ie8+以上显示浏览器版本
var IE = (function(){
    var ie =  !!window.ActiveXObject;
         e = {
            isIE: !!window.ActiveXObject,
            isIE6: ie && !window.XMLHttpRequest,
            isIE7: ie && window.XMLHttpRequest && document.documentMode == 7,
            isIE8: ie && window.XMLHttpRequest && document.documentMode == 8,
            isIE9: ie && window.XMLHttpRequest && document.documentMode == 9
         }
    return e;
    })();
 

 

/**
获取元素样式
处理透明度、元素浮动样式的获取 ,结果带有单位
*/
function getStyle(elem, name) {
    var nameValue = null;
    if (document.defaultView) {
        var style = document.defaultView.getComputedStyle(elem, null);
        nameValue =  name in style ? style[name] : style.getPropertyValue(name);
    } else {
        var style = elem.style,
        curStyle = elem.currentStyle;
        //透明度 from youa
        if (name == "opacity") {
            if (/alpha\(opacity=(.*)\)/i.test(curStyle.filter)) {
                var opacity = parseFloat(RegExp.$1);
                
                return opacity ? opacity / 100 : 0;
            }
            return 1;
        }
        if (name == "float") {
            name = "styleFloat";
        }
        var ret = curStyle[name] || curStyle[camelize(name)];
        //单位转换 from jqury
        if (!/^-?\d+(?:px)?$/i.test(ret) && /^\-?\d/.test(ret)) {
            var left = style.left,
            rtStyle = elem.runtimeStyle,
            rsLeft = rtStyle.left;

            rtStyle.left = curStyle.left;
            style.left = ret || 0;
            ret = style.pixelLeft + "px";

            style.left = left;
            rtStyle.left = rsLeft;
        }
        
        nameValue = ret;
    }
    
    return nameValue === 'auto' ? '0px' : nameValue;
}

function uncamelize(s) {//将CSS属性名由驼峰式转为普通式
    return s.replace(/[A-Z]/g,function (c) {
        return '-'+c.charAt(0).toLowerCase();
    });
}

function camelize(s) {//将CSS属性名转换成驼峰式
    return s.replace(/-[a-z]/gi,function (c) {
        return c.charAt(1).toUpperCase();
    });
}
 
 

 

posted @ 2016-06-07 11:48  SunsCheung  阅读(268)  评论(0编辑  收藏  举报