javascript 常用函数

Posted 2020-07-22 SunsCheung

部分也是自己常用的，但是部分还需要实际验证
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方法类似，只是它接受一个正则表达式作为参数而不是一个字符串，如果找到匹配返回第一个匹配的首字符位置，如果没有找到匹配，则返回-1。

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