web前端入门到精通--前端经常会用到的JavaScript方法封装
小职 2022-01-26 来源 : 阅读 924 评论 0

摘要:本篇介绍了web前端入门到精通--前端经常会用到的JavaScript方法封装,通过具体的内容展现分享,希望对大家前端Javascript的学习有所帮助。

本篇介绍了web前端入门到精通--前端经常会用到的JavaScript方法封装,通过具体的内容展现分享,希望对大家前端Javascript的学习有所帮助。

web前端入门到精通--前端经常会用到的JavaScript方法封装


前端经常会用到的JavaScript方法封装都有哪些呢?我们一起来看一下吧!

 

 1.数组去重

 

function unique1(arr) {

    return [...new Set(arr)]

}

 

function unique2(arr) {

    var obj = {};

    return arr.filter(ele => {

        if (!obj[ele]) {

            obj[ele] = true;

            return true;

        }

    })

}

 

function unique3(arr) {

    var result = [];

    arr.forEach(ele => {

        if (result.indexOf(ele) == -1) {

            result.push(ele)

        }

    })

    return result;

}

 

2.字符串去重


String.prototype.unique = function () {

    var obj = {},

        str = '',

        len = this.length;

    for (var i = 0; i < len; i++) {

        if (!obj[this[i]]) {

            str += this[i];

            obj[this[i]] = true;

        }

    }

    return str;

}

 

###### //去除连续的字符串  

function uniq(str) {

    return str.replace(/(\w)\1+/g, '$1')

}


 

3.输入一个值,返回其数据类型


function type(para) {

    return Object.prototype.toString.call(para)

}


 

4.找出字符串中第一次只出现一次的字母

 


String.prototype.firstAppear = function () {

    var obj = {},

        len = this.length;

    for (var i = 0; i < len; i++) {

        if (obj[this[i]]) {

            obj[this[i]]++;

        } else {

            obj[this[i]] = 1;

        }

    }

    for (var prop in obj) {

       if (obj[prop] == 1) {

         return prop;

       }

    }

}


 

5.深拷贝 浅拷贝


//深克隆(深克隆不考虑函数)

function deepClone(obj, result) {

    var result = result || {};

    for (var prop in obj) {

        if (obj.hasOwnProperty(prop)) {

            if (typeof obj[prop] == 'object' && obj[prop] !== null) {

                // 引用值(obj/array)且不为null

                if (Object.prototype.toString.call(obj[prop]) == '[object Object]') {

                    // 对象

                    result[prop] = {};

                } else {

                    // 数组

                    result[prop] = [];

                }

                deepClone(obj[prop], result[prop])

    } else {

        // 原始值或func

        result[prop] = obj[prop]

    }

  }

}

return result;

}

 

// 深浅克隆是针对引用值

function deepClone(target) {

    if (typeof (target) !== 'object') {

        return target;

    }

    var result;

    if (Object.prototype.toString.call(target) == '[object Array]') {

        // 数组

        result = []

    } else {

        // 对象

        result = {};

    }

    for (var prop in target) {

        if (target.hasOwnProperty(prop)) {

            result[prop] = deepClone(target[prop])

        }

    }

    return result;

}

// 无法复制函数

var o1 = jsON.parse(jsON.stringify(obj1));


6.判断元素有没有子元素


function hasChildren(e) {

    var children = e.childNodes,

        len = children.length;

    for (var i = 0; i < len; i++) {

        if (children[i].nodeType === 1) {

            return true;

        }

    }

    return false;

}


 

7.返回当前的时间(年月日时分秒)


function getDateTime() {

    var date = new Date(),

        year = date.getFullYear(),

        month = date.getMonth() + 1,

        day = date.getDate(),

        hour = date.getHours() + 1,

        minute = date.getMinutes(),

        second = date.getSeconds();

        month = checkTime(month);

        day = checkTime(day);

        hour = checkTime(hour);

        minute = checkTime(minute);

        second = checkTime(second);

     function checkTime(i) {

        if (i < 10) {

                i = "0" + i;

       }

      return i;

    }

    return "" + year + "年" + month + "月" + day + "日" + hour + "时" + minute + "分" + second + "秒"

}


 

 

8.兼容getElementsByClassName方法

 

Element.prototype.getElementsByClassName = Document.prototype.getElementsByClassName = function (_className) {

    var allDomArray = document.getElementsByTagName('*');

    var lastDomArray = [];

    function trimSpace(strClass) {

        var reg = /\s+/g;

        return strClass.replace(reg, ' ').trim()

    }

    for (var i = 0; i < allDomArray.length; i++) {

        var classArray = trimSpace(allDomArray[i].className).split(' ');

        for (var j = 0; j < classArray.length; j++) {

            if (classArray[j] == _className) {

                lastDomArray.push(allDomArray[i]);

                break;

            }

        }

    }

    return lastDomArray;

}


 

9.封装自己的forEach方法


Array.prototype.myForEach = function (func, obj) {

    var len = this.length;

    var _this = arguments[1] ? arguments[1] : window;

    // var _this=arguments[1]||window;

    for (var i = 0; i < len; i++) {

        func.call(_this, this[i], i, this)

    }

}


 

 

10.封装自己的filter方法


Array.prototype.myFilter = function (func, obj) {

    var len = this.length;

    var arr = [];

    var _this = arguments[1] || window;

    for (var i = 0; i < len; i++) {

        func.call(_this, this[i], i, this) && arr.push(this[i]);

    }

    return arr;

}


 

11.封装自己的数组map方法


Array.prototype.myMap = function (func) {

    var arr = [];

    var len = this.length;

    var _this = arguments[1] || window;

    for (var i = 0; i < len; i++) {

        arr.push(func.call(_this, this[i], i, this));

    }

    return arr;

}


 

 

12.封装自己的数组every方法

 

Array.prototype.myEvery = function (func) {

    var flag = true;

    var len = this.length;

    var _this = arguments[1] || window;

    for (var i = 0; i < len; i++) {

        if (func.apply(_this, [this[i], i, this]) == false) {

            flag = false;

            break;

        }

    }

    return flag;

}


 

13.封装自己的数组reduce方法


Array.prototype.myReduce = function (func, initialValue) {

    var len = this.length,

        nextValue,

        i;

    if (!initialValue) {

        // 没有传第二个参数

        nextValue = this[0];

        i = 1;

    } else {

        // 传了第二个参数

        nextValue = initialValue;

        i = 0;

    }

    for (; i < len; i++) {

        nextValue = func(nextValue, this[i], i, this);

    }

    return nextValue;

}


 

14.获取url中的参数


function getWindonHref() {

    var sHref = window.location.href;

    var args = sHref.split('?');

    if (args[0] === sHref) {

        return '';

    }

    var hrefarr = args[1].split('#')[0].split('&');

    var obj = {};

    for (var i = 0; i < hrefarr.length; i++) {

        hrefarr[i] = hrefarr[i].split('=');

        obj[hrefarr[i][0]] = hrefarr[i][1];

    }

    return obj;

}

 

 

15.数组排序


// 快排 [left] + min + [right]

function quickArr(arr) {

    if (arr.length <= 1) {

        return arr;

    }

    var left = [],

        right = [];

    var pIndex = Math.floor(arr.length / 2);

    var p = arr.splice(pIndex, 1)[0];

    for (var i = 0; i < arr.length; i++) {

        if (arr[i] <= p) {

            left.push(arr[i]);

        } else {

            right.push(arr[i]);

        }

    }

    // 递归

    return quickArr(left).concat([p], quickArr(right));

}

 

// 冒泡

function bubbleSort(arr) {

    for (var i = 0; i < arr.length - 1; i++) {

        for (var j = i + 1; j < arr.length; j++) {

            if (arr[i] > arr[j]) {

                var temp = arr[i];

                arr[i] = arr[j];

                arr[j] = temp;

            }

        }

    }

    return arr;

}

 

function bubbleSort(arr) {

    var len = arr.length;

    for (var i = 0; i < len - 1; i++) {

        for (var j = 0; j < len - 1 - i; j++) {

            if (arr[j] > arr[j + 1]) {

                var temp = arr[j];

                arr[j] = arr[j + 1];

                arr[j + 1] = temp;

            }

        }

    }

    return arr; 


208小时视频教程,995份干货资料,扫码领取资料+高薪就业咨询

web前端入门到精通--前端经常会用到的JavaScript方法封装

本文由 @小职 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    ICP许可  沪B2-20190160

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程