Fork me on GitHub

常用方法库

发表于 | 更新于: | 分类于
字数统计: 1,384 | 阅读时长 ≈ 7
常用的Array、String、Object、Number等处理方法，常用正则表达式写法，浏览器方法的兼容写法，获取各种浏览器数据方法，包括ES6写法等

CSS

多行最后一行 ···

1
2
3
4
5
6
7
8
9
10
11
.answer-body {
  font-size: 16px;
  line-height: 30px;
  text-align: left;
  height: 60px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

BOM

获取设备像素比

1
window.devicePixelRatio

获取浏览器信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/**
* 关于事件参数对象的工具的代码
*/
evtTools = {
    //事件参数
    evt: function (e) {
        return window.event ? window.event : e;
    },
    //页面向左卷曲出去的距离
    left: function () {
        return window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0;
    },
    //页面向上卷曲出去的距离
    top: function () {
        return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0;
    },
    //事件参数对象中的属性封装---可视区域的横坐标
    clientX: function (e) {
        return this.evt(e).clientX;
    },
    //事件参数对象中的属性封装---可视区域的纵坐标
    clientY: function (e) {
        return this.evt(e).clientY;
    },
    pageX: function (e) {
        return this.evt(e).pageX ? this.evt(e).pageX : this.left() + this.clientX(e);
    },
    pageY: function (e) {
        return this.evt(e).pageY ? this.evt(e).pageY : this.top() + this.clientY(e);
    }
};

/**
* 当浏览器的宽度发生变化,就获取浏览器(页面可视区域的宽度)
*/
getClient = () => {
    return {
        width: window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth || 0,
        height: window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight || 0
    }
}

DOM

获取元素的样式属性

1
2
3
4
5
6
7
8
9
10
11
/**
  * 获取元素的样式属性
  */
getStyle = (element, attr) => {
    var result = element.currentStyle ? element.currentStyle[attr] : window.getComputedStyle(element, null)[attr];
    if (result == "auto") {
        return 0;
    } else {
        return result;
    }
};

绑定解绑事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/**
  * 为元素绑定多个属性的兼容代码
  */
addEventListener = (element, type, fn) => {
    if (typeof (element.addEventListener) != "undefined") {
        element.addEventListener(type, fn, false);
    } else if (typeof (element.attachEvent) != "undefined") {
        element.attachEvent("on" + type, fn)
    } else {
        element["on" + type] = fn;
    }
};

/**
  * 解绑兼容函数
  */
removeEventListener = (element, type, fn) => {
    if (typeof (element.removeEventListener) != "undefined") {
        element.removeEventListener(type, fn)
    } else if (typeof (element.detachEvent) != "undefined") {
        element.detachEvent("on" + type, fn)
    } else {
        element["on" + click] = null;
    }
};

数据类型校验

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function isArray (o) {
  return Object.prototype.toString.call(o) === '[object Array]'
}

function isObject (o) {
  return Object.prototype.toString.call(o) === '[object Object]'
}

function isString (o) {
  return Object.prototype.toString.call(o) === '[object String]'
}

function isNumber (o) {
  return Object.prototype.toString.call(o) === '[object Number]'
}

function isDate (o) {
  return Object.prototype.toString.call(o) === '[object Date]'
}

function isRegExp (o) {
  return Object.prototype.toString.call(o) === '[object RegExp]'
}

String

去掉最后一个字符

1
s=s.substring(0,s.length-1)

获取路由路径

1
location.hash.match(/#(\S*)\?[\S]*/)[1]

VSCode

正则查找所有console

1
console.log((.*))

ESlint配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
{
    "extensions.ignoreRecommendations": true,
    "vetur.validation.template": false,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatterOptions": {
        "wrap_attributes": "force-aligned",
        "prettyhtml": {
            "printWidth": 100,
            "singleQuote": false,
            "wrapAttributes": false,
            "sortAttributes": false
        }
    },
    "files.associations": {
        "*.vue": "vue",
        "*.less": "less",
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript",
        "*.js": "javascript",
        "*.swig": "html",
        "*.styl": "css"
    },
    "git.enableSmartCommit": true,
    "workbench.startupEditor": "newUntitledFile",
    "breadcrumbs.enabled": true,
    "explorer.confirmDelete": false,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "emmet.includeLanguages": {
        "wxml": "html",
        "javascript": "javascriptreact"
    },
    "minapp-vscode.disableAutoConfig": true,
    "[javascript]": {},
    "editor.fontSize": 15,
    "editor.fontWeight": "100",
    "editor.tabSize": 2,
    "git.confirmSync": false,
    "window.zoomLevel": 0,
    // "editor.renderWhitespace": "boundary",
    // "editor.cursorBlinking": "smooth",
    "editor.minimap.enabled": true,
    "editor.minimap.renderCharacters": false,
    "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
    // "editor.codeLens": true,
    // 配置文件关联，以便启用对应的提示
    // 配置emmet是否启用tab展开缩写
    "emmet.triggerExpansionOnTab": true,
    // 配置emmet对文件类型的支持
    "emmet.syntaxProfiles": {
        "javascript": "jsx",
        "vue": "html",
        "vue-html": "html"
    },
    // 是否开启eslint检测
    "eslint.enable": true,
    // 文件保存时是否根据eslint进行格式化
    "eslint.autoFixOnSave": true,
    // eslint配置文件
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue"
        ]
    },
    // eslint能够识别的文件后缀类型
    "eslint.validate": [
        "javascript",
        {
            "language": "vue",
            "autoFix": true
        },
        "html",
        "vue",
        "jsx"
    ],
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/dist": true
    },
    "workbench.colorTheme": "Solarized Dark",
    // 格式化快捷键（默认）：Shift+Alt+F
    // prettier进行格式化时，开启eslint支持
    // "prettier.eslintIntegration": true,
    // // 是否使用单引号
    // "prettier.singleQuote": true,
    "line-counter.excludes": [
        "**/build/**",
        "**/.vscode/**",
        "**/node_modules/**"
    ],
    "terminal.integrated.rendererType": "dom",
    "search.followSymlinks": false,
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatter.ts": "vscode-typescript"
}

Array

数组去重

1
2
Array.from(new Set([1,2,3,3,4,4])) //[1,2,3,4]
[...new Set([1,2,3,3,4,4])] //[1,2,3,4]

是否包含某值

1
2
3
4
[1,2,3].includes(4) //false
[1,2,3].indexOf(4) //-1 如果存在换回索引
[1, 2, 3].find((item)=>item===3)) //3 如果数组中无值返回undefined
[1, 2, 3].findIndex((item)=>item===3)) //2 如果数组中无值返回-1

类数组转换

1
2
3
4
Array.prototype.slice.call(arguments) //arguments是类数组(伪数组)
Array.prototype.slice.apply(arguments)
Array.from(arguments)
[...arguments]

提取对象key

1
Object.keys({name:'张三',age:14}) //['name','age']

提取对象value

1
Object.values({name:'张三',age:14}) //['张三',14]

提取对象key和value

1
Object.entries({name:'张三',age:14}) //[[name,'张三'],[age,14]]

将提取的key和value放回去

1
Object.fromEntries([name,'张三'],[age,14]) //ES10的api,Chrome不支持 , firebox输出{name:'张三',age:14}

每一项设置值

1
2
[1,2,3].fill(false) //[false,false,false] 
[1,2,3].map(() => 0)

每一项是否满足

1
[1,2,3].every(item=>{return item>2}) //false

有一项满足

1
[1,2,3].some(item=>{return item>2}) //true

过滤数组

1
[1,2,3].filter(item=>{return item>2}) //[3]

按照索引删除元素

1
[1,2,3].splice(index,1) //[1,3]

RegExp

常用正则表达式

1
2
3
4
5
6
英文名: /^[a-zA-Z0-9_-]{4,16}$/
中文名: /^[\u4E00-\u9FA5]{2,4}$/
密码: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,18}$/
邮箱: /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
手机号: /^[1][0-9]{10}$/
身份证号: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/