JS方法速查
🔥前言
首先這個文章是一個不斷維護的項目，勵志，若是各位朋友有更好的解決方法，歡迎在下方評論，我也會第一時間感謝和更新文章內容的，拜謝!!!javascript
更新記錄（只顯示最近5條）css
- 增長 經常使用DOM接口 && 常見的XSS轉義場景（2019.9.2）
- 優化Array，Date 部份內容（2019.7.12）
- 優化其餘部分 - 經常使用正則速查表現形式（增長了示例等）（2019.7.4）快速跳轉
- 其餘部分 增長了 Math函數的一些應用 和 經常使用正則速查 （2019.7.2）
- 致謝：A、讓你一眼就看到我。| 大溼胸。| Adaer | 你的宇哥哥 | jNane | Felix_俊鍇
🌲數組
1.數組去重
let arrs = [1,2,2,3,3,6,5,5];
// ES6
[...new Set(arr)] // [1,2,3,6,5]
// 此方法也能去除數組中重複的項：[...new Set('ababbc')].join('') // abc
// 其餘方法
function uniq(array){
let temp = [];
let l = array.length;
for(let i = 0; i < l; i++) {
for(let j = i + 1; j < l; j++){
if (array[i] === array[j]){
i++;
j = i;
}
}
temp.push(array[i]);
}
return temp;
}
console.log(uniq(arrs)); // [1,2,3,6,5]
複製代碼
數組去重拓展（傳參數 指定去除哪一個重複的，未完成）html
2.數組合並
let arr1 = [1,2,3]
let arr2 = [4,5,6]
// ES6
[...arr1, ...arr2] // [1, 2, 3, 4, 5, 6]
// 方法2：concat方法（掛載Array原型鏈上）
let c = a.concat(b);
console.log(c); // [1, 2, 3, 4, 5, 6]
console.log(a); // [1, 2, 3] 不改變自己
// 備註：看似concat彷佛是 數組對象的深拷貝，其實，concat 只是對數組的第一層進行深拷貝
// 方法3：apply方法
Array.prototype.push.apply(a, b);
console.log(a); // [1, 2, 3, 4, 5, 6] 改變原目標數組
console.log(b); // [4, 5, 6]
複製代碼
3.數組排序（sort）
let objArr = [
{name: 'test1', age: 20},
{name: 'test1', age: 22},
{name: 'test1', age: 21}
]
// 第一參數a， 第二參數b ---> a-b升序（從小到大）;b-a降序（從大到小），原理就是 兩數計算，若是返回的是負數，就保留前者（我可能說的不對，歡迎糾正）
objArr.sort((a, b) => {
return a.age - b.age
})
// 結果會按照年齡從小到大的順序排列
複製代碼
4.多維數組轉一維數組（flat）
let arr = [1, [2], [[3], 4], 5];
// ES6 數組的flat()
arr.flat() // [1, 2, Array(1), 4, 5] 若是這樣寫的話只能展開二維數組，可是能夠加參數Infinity，就是能展開多維數組
arr.flat(Infinity) // [1, 2, 3, 4, 5] 注意若是原數組有空位，flat()方法會跳過空位
// 其餘方法
const deepFlatten = arr => [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v)));
deepFlatten(arr); // [1,2,3,4,5]
// 執行效率驗證（拓展）
// let start = new Date().getTime();
// console.log('reduceDimension: ', deepFlatten([1, [2], [[3], 4], 5]);
// console.log('耗時: ', new Date().getTime() - start); // *ms
// ES6 數組的flatMap() 方法你們能夠自行查閱一下，拓展下本身的知識面
複製代碼
5.過濾數組（filter）
let json = [
{ id: 1, name: 'john', age: 24 },
{ id: 2, name: 'zkp', age: 21 },
{ id: 3, name: 'mike', age: 50 }
];
// ES6
json.filter( item => item.age > 22) // [{id: 1, name: 'john', age: 24}, { id: 3, name: 'mike', age: 50 }]
// ES5
複製代碼
6.判斷數組中的項是否知足於某個條件（some，every）
let arr = [4, 2, 3]
// ES6 some方法（有符合）
arr.some( item => item > 1) // true
arr.some( item => item > 3) // true
// ES5 every（全符合）
arr.every(item => item > 1) // true
arr.every(item => item > 3) // false
// 注意：上面兩個有不一樣哦，一個是有符合的斷定，一個是全符合的斷定
複製代碼
7.操做數組中的每一項，並使其按照必定的邏輯返回（map）
var potatos = [
{ id: '1001', weight: 50 },
{ id: '1002', weight: 80 },
{ id: '1003', weight: 120 },
{ id: '1004', weight: 40 }
]
// ES6寫法
const fn = (arr, key) => arr.map(arr => arr[key])
fn(potatos, 'id') // ["1001", "1002", "1003", "1004"]
fn(potatos, 'weight') // [50, 80, 120, 40]
複製代碼
8.其餘經常使用的ES6 Array方法
// forEach() 遍歷數組
// pop() 刪除數組中最後一個元素，並返回該元素的值。此方法更改數組的長度
// shift() 刪除數組中第一個元素，並返回該元素的值。此方法更改數組的長度
// push() 將一個或多個元素添加到數組的末尾，並返回該數組的新長度
// unshift() 將一個或多個元素添加到數組的開頭，並返回該數組的新長度(該方法修改原有數組)
// 🔥Array.prototype.filter() 建立一個新數組, 其包含經過所提供函數實現的測試的全部元素，不會改變原有值，若是沒符合的返回[]
let arr = [1, 2, 3]
arr.filter( x => x > 1) // [2, 3]
// Array.prototype.join() 將一個數組（或一個類數組對象）的全部元素鏈接成一個字符串並返回這個字符串
['Fire', 'Air', 'Water'].join() // "Fire,Air,Water"
// Array.prototype.slice() 取出任意元素, | 參數一：從哪開始，參數二（可選）結束位置，不選的話 就節選到最後了
[1, 2, 3].slice(0, 1) // [1]
// Array.prototype.splice() 刪除任意元素，操做任意元素 | 參數一：從哪開始 | 參數二：操做元素的個數 | 參數三：插入元素的值...（能夠寫多個參數三）
[1, 2, 3].splice(0, 1) // 刪除 [2, 3]
// Array.prototype.includes() 用來判斷一個數組是否包含一個指定的值，根據狀況，若是包含則返回 true，不然返回false。
[1, 2, 3].includes(1) // true
// Array.prototype.reverse() 顛倒數組
[1, 2, 3].reverse() // [3, 2, 1]
複製代碼
9.得到數組最大最小值
// 使用 Math 中的 max/min 方法
let arr = [22,13,6,55,30];
// ES6
Math.max(...arr); // 55
Math.min(...arr); // 6
// ES5
Math.max.apply(null, arr); // 55
Math.min.apply(null, arr); // 6
複製代碼
10.獲取數組交集
// ES6 寫法
const similarity = (arr1, arr2) => arr1.filter(v => arr2.includes(v));
similarity([1, 2, 3], [1, 2, 4]); // [1,2]
// ES5 寫法
// function similarity(arr1, arr2) {
// return arr2.filter(function(v) {
// return arr1.includes(v)
// })
// }
複製代碼
11.數組對象去重
let arr = [
{id: 1, name: 'Jhon1'},
{id: 2, name: 'sss'},
{id: 3, name: 'Jhon2'},
{id: 4, name: 'Jhon3'}
]
// ES6
const uniqueElementsBy = (arr, fn) =>arr.reduce((acc, v) => {if (!acc.some(x => fn(v, x))) acc.push(v);return acc;}, []);
// 下面的示例表示，去重依據是 id ，就是 id同樣的，只留下一個
uniqueElementsBy(arr, (a, b) => a.id === b.id) // [{id: 1, name: 'Jhon1'}, {id: 2, name: 'sss'}]
複製代碼
12.數組亂序
function shuffle(arr) {
let array = arr
let index = array.length
while (index) {
index -= 1
let randomInedx = Math.floor(Math.random() * index)
let middleware = array[index]
array[index] = array[randomInedx]
array[randomInedx] = middleware
}
return array
}
let arr = [1,2,3,4,5]
shuffle(arr) // [3, 4, 2, 5, 1] 結果不定
複製代碼
還有更簡單的方式，歡迎來撩java
13.檢查數組中某元素出現的次數
function countOccurrences(arr, value) {
return arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0);
}
let arr = [1,2,3,4,1,2,4]
countOccurrences(arr, 1) // 2
複製代碼
14.檢查數組中的全部元素是否相等
const allEqual = arr => arr.every(val => val === arr[0]);
// 示例
allEqual([1, 2, 3, 4, 5, 6]); // false
allEqual([1, 1, 1, 1]); // true
複製代碼
15.數組對象，求某一列屬性的總和
var potatos = [
{ id: '1001', weight: 50 },
{ id: '1002', weight: 80 },
{ id: '1003', weight: 120 },
{ id: '1004', weight: 40 }
]
// ES6寫法
const fn = (arr, key) => arr.reduce((sum, p) => { return p[key] + sum },0)
fn(potatos, 'weight') // 290
fn(potatos, 'id') // "10041003100210010" 字符串相加就是這個結果，若是有各自的需求，能夠本身加上
複製代碼
16.分割數組，並操做每一項數組（函數）
/** * 數組分隔方法，而且能夠傳入一個處理函數，用來分隔以前處理數組的每一項 * * @category Array * @param {Array} array 須要處理的數組 * @param {number} [size = 1] 每一個數組區塊的長度 * @param {Function} [fn = item => item] 函數 * @returns {Array} 返回一個包含拆分區塊的新數組（至關於一個二維數組）。 * @example * * chunk(['a', 'b', 'c', 'd'], 2) * // => [['a', 'b'], ['c', 'd']] * * chunk(['a', 'b', 'c', 'd'], 3) * // => [['a', 'b', 'c'], ['d']] * * chunk([1, 2, 3, 4], 3, item => item * 2) * // => [[2, 4, 6], [8]] */
function chunk(array, size = 1, fn = item => item) {
array = array.map(fn)
size = Math.max(size, 0) // 這一句就很妙，當傳入值小於0的時候，置爲0，大於0的時候，不寫，但不知道性能怎麼樣
const length = array == null ? 0 : array.length
if (!length || size < 1) {
return []
}
let index = 0
let resIndex = 0
const result = new Array(Math.ceil(length / size))
while (index < length) {
result[resIndex++] = array.slice(index, (index += size))
}
return result
}
複製代碼
👫對象
1.對象合併
// 1️⃣ ES6方法
let obj1 = {
a:1,
b:{
b1:2
}
}
let obj2 = { c:3, d:4 }
console.log({...obj1, ...obj2}) // {a: 1, b: {…}, c: 3, d: 4}
// 支持無限制合併，但若是對象之間存在相同屬性，則後面屬性會覆蓋前面屬性。*請注意，這僅適用於淺層合併。
// 2️⃣ Obj.assign()：能夠把任意多個的源對象自身的可枚舉屬性拷貝給目標對象，而後返回目標對象
let o1 = { a: 1 };
let o2 = { b: 2 };
let obj = Object.assign(o1, o2);
console.log(obj); // { a: 1, b: 2 }
console.log(o1); // { a: 1, b: 2 }, 且 **目標對象** 自身也會改變（也就是assign第一個對象）
console.log(o2); // { b: 2 } 不改變
// 備註：Object.assign() 拷貝的是屬性值。假如源對象的屬性值是一個指向對象的引用，它也只拷貝那個引用值
// 備註：數組合並用 concat() 方法
// 3️⃣ $.extend()
複製代碼
2.淺拷貝，深拷貝
深拷貝（基礎版）node
/** * 此函數，能夠徹底生成一個新的拷貝對象，也能夠將一個對象中的屬性拷貝到另外一個對象中去 * @parmas {Object} 須要被拷貝的對象 * @parmas {Object} 可選，目標對象，若是不填直接返回一個對象 */
function deepClone(origin, target = {}) {
// 循環遍歷對象的屬性
for (key in origin) {
let isType = Object.prototype.toString.call(origin[key])
// 克隆對象類型
if (isType === '[object Object]') {
target[key] = {}
deepClone(origin[key], target[key])
continue
}
// 克隆數組類型
if (isType === '[object Array]') {
target[key] = []
deepClone(origin[key], target[key])
continue
}
// 克隆 Set 類型
// 克隆 Map 類型
// 克隆其餘類型
// 克隆基礎類型
target[key] = origin[key]
}
return target
}
let zhu = {
name: '朱昆鵬',
technology: ['css', 'html', 'js'],
girlfriend: {
name: 'lyt'
}
}
let zhuClone = deepClone(zhu) // zhuClone 內容徹底和 zhu 同樣
let zhuTest = { test: '測試' }
let zhuTestClone = deepClone(zhuTest, zhu) // zhuTestClone 不只有 zhu全部內容，還有 zhuTest 的內容
// JSON.parse(JSON.stringify(obj) 方法進行拷貝，瞭解就行
const obj = {
name:'axuebin',
sayHello:function(){
console.log('Hello World');
}
}
console.log(JSON.parse(JSON.stringify(obj)); // {name: "axuebin"} ???
// undefined、function、symbol 會在轉換過程當中被忽略，因此就不能用這個方法進行深拷貝
// 淺拷貝
function clone(origin, target = {}) {
let target = {};
for (const key in origin) {
target[key] = origin[key];
}
return target;
};
複製代碼
3.拓展：首層淺拷貝
function shallowClone(source) {
const targetObj = source.constructor === Array ? [] : {}; // 判斷複製的目標是數組仍是對象
for (let keys in source) { // 遍歷目標
if (source.hasOwnProperty(keys)) {
targetObj[keys] = source[keys];
}
}
return targetObj;
}
const originObj = {
a:'a',
b:'b',
c:[1, 2, 3],
d:{ dd: 'dd' }
};
const cloneObj = shallowClone(originObj);
console.log(cloneObj === originObj); // false
cloneObj.a = 'aa';
cloneObj.c = [1, 1, 1];
cloneObj.d.dd = 'surprise';
console.log(cloneObj); // {a:'aa',b:'b',c:[1,1,1],d:{dd:'surprise'}}
console.log(originObj); // {a:'a',b:'b',c:[1,2,3],d:{dd:'surprise'}}
複製代碼
4.判斷對象是否爲空對象
// 參考：https://www.cnblogs.com/HKCC/p/6083575.html
if (JSON.stringify(對象) === '{}') {
console.log('空');
}
複製代碼
5.判斷對象中屬性的個數
let obj = {name: '朱昆鵬', age: 21}
// ES6
Object.keys(obj).length // 2
// ES5
let attributeCount = obj => {
let count = 0;
for(let i in obj) {
if(obj.hasOwnProperty(i)) { // 建議加上判斷,若是沒有擴展對象屬性能夠不加
count++;
}
}
return count;
}
attributeCount(obj) // 2
複製代碼
6.JS 對象轉 url 查詢字符串
const objectToQueryString = (obj) => Object.keys(obj).map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`).join('&');
objectToQueryString({name: 'Jhon', age: 18, address: 'beijing'})
// name=Jhon&age=18&address=beijing
複製代碼
7.對象遍歷
let objs = {
1: {
name: '朱昆鵬'
},
2: {
name: '林雨桐'
}
}
Object.keys(objs).forEach( ket => {
console.log(key,objs[key])
})
// 1 {name: '朱昆鵬'} 2 {nama:'林雨桐'}
複製代碼
🌴DOM
1.經常使用DOM接口
// 獲取DOM節點
document.getElementById() // 經過ID獲取
document.getElementsByTagName() // 標籤名
document.getElementsByClassName() // 類名
document.querySelector() // 經過選擇器獲取一個元素
document.querySelectorAll() // 經過選擇器獲取一組元素
document.body // 獲取body的方法
document.getElementsByName(name) // 經過name屬性查找元素節點
document.documentElement // 獲取html的方法
// 節點類型
元素節點（標籤） // 屬性nodeType返回值1
屬性節點（標籤裏的屬性）// 返回值2
文本節點 // 返回值3
註釋節點（comment） // 返回值8
document // 返回值9
DocumentFragment // 返回值11
// 節點接口
dom元素.parentNode // 返回當前元素的父節點
dom元素.childNodes // 子節點們
dom元素.firstChild // 第一個子節點
dom元素.lastChild // 最後一個子節點
dom元素.nextSibling // 後一個兄弟節點 previousSibling -> 前一個兄弟節點
// 元素節點接口
dom元素.parentElement // 返回當前元素的父元素節點
dom元素.children // 返回當前元素的元素子節點
dom元素.firstElementChild // 第一個元素子節點（IE不兼容）
dom元素.lastElementChild // 最後一個元素子節點（IE不兼容）
dom元素.nextElementSibling // 返回後一個兄弟元素節點
dom元素.previousElementSibling // 返回前一個兄弟元素節點
// 節點的四個屬性和一個方法
節點.nodeName // 元素的標籤名，以大寫形式表示（只讀）
節點.nodeValue // Text節點或者Comment節點的文本內容，（讀寫）
節點.nodeType // 該節點的類型（只讀）
節點.attributes // Element節點的屬性集合
節點.hasChildNodes() // 判斷節點 是否有子節點
// Element節點的 屬性和方法
dom元素.innerHtml
dom元素.innerText
dom元素.attributes // 獲取元素身上全部屬性構成的集合
dom元素.setAttribute("屬性名","屬性值")// 給元素設置屬性和屬性值
dom元素.getAttribute("屬性名")// 獲取屬性值的方法
dom元素.removerAttribute("屬性") // 刪除屬性
// ============== 操做接口 ==================
// 增
document.createElement() // 建立元素節點
document.createTextNode() // 建立文本節點
document.creaetComment() //建立註釋節點
document.createDocumentFragment() // 建立文檔碎片節點
// 插
父元素節點.appendChild(子元素對象) // 在元素節點的子元素最後插入子元素
父元素節點.insertBefore(父元素中的子元素a, 須要插入的子元素b) // 最後的結果是，父元素節點中 b元素插入到了 a的前面
// 刪
元素節點.remove() // 刪除DOM元素（本身）
父元素節點.removeChild(子元素節點) // 刪除子元素
// 替換
父元素節點.replaceChild(新的節點, 須要被替換的子節點)
// 複製
元素節點.cloneChild() // 返回值是 複製出來的節點
// 元素節點賦值 示例
dom元素.style.width = ...
dom元素.style.backgroundColor = ...
dom元素.className = ...
複製代碼
2.判斷當前位置是否爲頁面底部
function bottomVisible() {
return document.documentElement.clientHeight + window.scrollY >= (document.documentElement.scrollHeight || document.documentElement.clientHeight)
}
bottomVisible() // 返回值爲true/false
複製代碼
3.全屏
1.進入全屏
function launchFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen()
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen()
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullScreen()
}
}
launchFullscreen(document.documentElement) // 整個頁面進入全屏
launchFullscreen(document.getElementById("id")) //某個元素進入全屏
複製代碼
退出全屏
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
}
}
exitFullscreen()
複製代碼
全屏事件
document.addEventListener("fullscreenchange", function (e) {
if (document.fullscreenElement) {
console.log('進入全屏')
} else {
console.log('退出全屏')
}
})
複製代碼
4.判斷dom元素是否具備某個className
方法一：使用HTML5新增classList 來操做類名git
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="test" class="te"></div>
<script> let div = document.getElementById('test') console.log(div.classList.contains("te")) // true </script>
</body>
</html>
複製代碼
拓展：github
- classList.add(newClassName)；添加新的類名，如已經存在，取消添加
- classList.contains(oldClassName)：肯定元素中是否包含指定的類名，返回值爲true，false
- classList.remove(oldClassName)：移除已經存在的類名;
- classList.toggle(className)：若是classList中存在給定的值，刪除它，不然，添加它；
🦀感謝掘金用戶tjNane分享此方法web
方法二：json
const hasClass = (el, className) => new RegExp(`(^|\\s)${className}(\\s|$)`).test(el.className);
複製代碼
🌱BOM
1.返回當前網頁地址
function currentURL() {
return window.location.href
}
currentURL() // "https://juejin.im/timeline"
複製代碼
2.獲取滾動條位置
function getScrollPosition(el = window) {
return {
x: (el.pageXOffset !== undefined) ? el.pageXOffset : el.scrollLeft,
y: (el.pageYOffset !== undefined) ? el.pageYOffset : el.scrollTop
}
}
getScrollPosition() // {x: 0, y: 692}
複製代碼
3.獲取url中的參數
function getURLParameters(url) {
const params = url.match(/([^?=&]+)(=([^&]*))/g)
return params?params.reduce(
(a, v) => (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1), a), {}
):[]
}
getURLParameters('http://www.baidu.com/index?name=tyler') // {name: "tyler"}
複製代碼
4.檢測設備類型
const detectDeviceType = () =>/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ? 'Mobile' : 'Desktop';
detectDeviceType() // "Desktop"
複製代碼
🕰時間
1.Date 經常使用API
new Date() // 建立一個時間對象 Fri Jul 12 2019 19:59:59 GMT+0800 (中國標準時間)
// 返回自1970年1月1日 00:00:00 UTC到當前時間的毫秒數。
Date.now(); // 1562932828164
// 解析一個表示某個日期的字符串，並返回從1970-1-1 00:00:00 UTC 到該日期對象（該日期對象的UTC時間）的毫秒數
Date.parse('2019.7.12') // 1562860800000
// 年月日時分秒 獲取
let dateMe = new Date()
dateMe.getFullYear() // 2019 | 根據本地時間返回指定日期的年份
dateMe.getMonth() // 6 | 根據本地時間，返回一個指定的日期對象的月份，爲基於0的值（0表示一年中的第一月）。
dateMe.getDate() // 12 | 根據本地時間，返回一個指定的日期對象爲一個月中的哪一日（從1--31）
dateMe.getHours() // 20 |根據本地時間，返回一個指定的日期對象的小時。
dateMe.getMinutes() // 11 | 根據本地時間，返回一個指定的日期對象的分鐘數。
dateMe.getSeconds() // 29 | 方法根據本地時間，返回一個指定的日期對象的秒數
dateMe.getMilliseconds() // 363 | 根據本地時間，返回一個指定的日期對象的毫秒數。
dateMe.toJSON() // 🔥 "2019-07-12T12:05:15.363Z" | 返回 Date 對象的字符串形式
dateMe.getDay() // 5 | 根據本地時間，返回一個具體日期中一週的第幾天，0 表示星期天（0 - 6）
dateMe.getTime() // 1562933115363 | 方法返回一個時間的格林威治時間數值。
dateMe.toString() // "Fri Jul 12 2019 20:05:15 GMT+0800 (中國標準時間)" | 返回一個字符串，表示該Date對象
dateMe.getTimezoneOffset() // -480（說明比正常時區慢480分鐘，因此要加480分鐘纔對） | 返回協調世界時（UTC）相對於當前時區的時間差值，單位爲分鐘。
dateMe.toDateString() // "Fri Jul 12 2019" | 以美式英語和人類易讀的形式返回一個日期對象日期部分的字符串。
複製代碼
2.一個時間戳格式的數字，是多少 天小時分鐘秒毫秒
const formatDuration = ms => {
if (ms < 0) ms = -ms;
const time = {
day: Math.floor(ms / 86400000),
hour: Math.floor(ms / 3600000) % 24,
minute: Math.floor(ms / 60000) % 60,
second: Math.floor(ms / 1000) % 60,
millisecond: Math.floor(ms) % 1000
};
return Object.entries(time)
.filter(val => val[1] !== 0)
.map(([key, val]) => `${val} ${key}${val !== 1 ? 's' : ''}`)
.join(', ');
};
formatDuration(3161012); // 52 minutes, 41 seconds, 12 milliseconds
複製代碼
3.格林尼治時間 轉 北京時間（可傳格林尼治時間 或者 時間戳）
function myTimeToLocal(inputTime){
if(!inputTime && typeof inputTime !== 'number'){
return '';
}
let localTime = '';
inputTime = new Date(inputTime).getTime();
const offset = (new Date()).getTimezoneOffset();
localTime = (new Date(inputTime - offset * 60000)).toISOString();
localTime = localTime.substr(0, localTime.lastIndexOf('.'));
localTime = localTime.replace('T', ' ');
return localTime;
}
console.log(myTimeToLocal(1530540726443)); // 2018-07-02 22:12:06
console.log(myTimeToLocal('2017-11-16T05:23:20.000Z')); // 2017-11-16 13:23:20
複製代碼
4.獲取兩個日期相差天數
function getDaysDiffBetweenDates (dateInitial, dateFinal) {
return (dateFinal - dateInitial) / (1000 * 3600 * 24);
}
getDaysDiffBetweenDates(new Date('2017-12-13'), new Date('2017-12-22')); // 9
複製代碼
5.一個數組中，有時間，須要將這個數組按照時間進行排序
let data = [
{
id: 1,
publishTime: "2019-05-14 18:10:29"
},
{
id: 2,
publishTime: "2019-05-14 18:17:29"
},
{
id: 3,
publishTime: "2019-05-14 15:09:25"
}]
data.sort((a, b) => b.publishTime - a.publishTime);
// 0: {id: 2, publishTime: "2019-05-14 18:17:29"}
// 1: {id: 1, publishTime: "2019-05-14 18:10:29"}
// 2: {id: 3, publishTime: "2019-05-14 15:09:25"}
複製代碼
💍處理JS原生具備的一些問題
1.加減法精度缺失問題
// 加法函數（由於JS小數計算 丟失精度）
function add(arg1, arg2) {
let r1, r2, m;
try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 }
try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 }
m = Math.pow(10, Math.max(r1, r2))
return (arg1 * m + arg2 * m) / m
}
複製代碼
// 減法函數（由於JS小數計算 丟失精度）
function sub(arg1, arg2) {
let r1, r2, m, n;
try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 }
try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 }
m = Math.pow(10, Math.max(r1, r2));
n = (r1 >= r2) ? r1 : r2;
return Number(((arg1 * m - arg2 * m) / m).toFixed(n));
}
複製代碼
2.遞歸優化（尾遞歸）
// 尾遞歸函數 摘自阮一峯ES6 | 本身懶得寫了
function tco(f) {
let value;
let active = false;
let accumulated = [];
return function accumulator() {
accumulated.push(arguments);
if (!active) {
active = true;
while (accumulated.length) {
value = f.apply(this, accumulated.shift());
}
active = false;
return value;
}
};
}
// 使用
新的函數 = tco(遞歸函數)
複製代碼
🙏其餘
1.Math函數的一些應用
parseInt(5.12) // 5 | 只保留整數部分（丟棄小數部分）
Math.floor(5.12) // 5 | 向下取整（效果和parseInt同樣）
Math.ceil(5.12) // 6 | 向上取整（有小數，整數就+1）
Math.round(5.499) // 5 | 四捨五入
Math.round(5.501) // 6 | 四捨五入
Math.abs(-5) // 5 | 絕對值
Math.max(5, 6) // 6 | 返回二者中較大的數
Math.min(5, 6) // 5 | 返回二者中較小的數
Math.random() // 隨機數 (0-1)
複製代碼
2.經常使用正則速查
消除字符串首尾兩端的空格（替換）
let reg = /^\s+|\s+$/g;
let str = ' #id div.class ';
str.replace(reg, '') // "#id div.class"
複製代碼
*把手機號碼替換成 （替換）
var reg = /1[24578]\d{9}/;
var str = '姓名：朱昆鵬 手機：15932638907'; // 手記號瞎寫的
str.replace(reg, '***') //"姓名：朱昆鵬 手機：***"
複製代碼
替換敏感字（替換）
let str = '中國中國人民解放軍中華人民共和國';
let r = str.replace(/中國|軍/g, input => {
let t = '';
for (let i = 0; i<input.length; i++) {
t += '*';
}
return t;
})
console.log(r); //****人民解放*中華人民共和國
複製代碼
千位分隔符（替換）
let reg = /(\d)(?=(?:\d{3})+$)/g
let str = '100002003232322';
let r = str.replace(, '$1,'); //100,002,003,232,322
複製代碼
匹配網頁標籤（匹配）
var reg = /<(.+)>.+<\/\1>/;
var str = '朱昆鵬<div>2707509@.qq.com</div>朱昆鵬';
str.match(reg); // ["<div>2707509@.qq.com</div>"]
複製代碼
驗證手記號（驗證）
let reg = /^1((3[\d])|(4[5,6,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[1-3,5-8])|(9[1,8,9]))\d{8}$/;
reg.test('15932539095'); //true
reg.test('234554568997'); //false
複製代碼
驗證郵箱地址（驗證）
let reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
reg.test('2775033@hotmail.com'); //true
reg.test('abc@'); //false
複製代碼
驗證身份證（驗證）
let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
reg.test('31210119651230518X'); //true 本身瞎寫的
reg.test('2101196523s230518X'); //false 本身瞎寫的
複製代碼
驗證中國郵箱編碼（驗證）
let reg = /^(0[1-7]|1[0-356]|2[0-7]|3[0-6]|4[0-7]|5[1-7]|6[1-7]|7[0-5]|8[013-6])\d{4}$/
reg.test('065900'); //true
reg.test('999999'); //false
複製代碼
驗證ipv4地址正則（驗證）
let reg = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
reg.test('192.168.1.192'); //true
reg.test('127.0.0.1s'); //false
複製代碼
驗證銀行卡號（16或19位）
let reg = /^([1-9]{1})(\d{15}|\d{18})$/
reg.test('6222026006705354218') // true
複製代碼
驗證中文姓名（驗證）
let reg = /^([\u4e00-\u9fa5\·]{2,10})$/
reg.test('朱昆鵬'); //true
reg.test('Zhu Kunpeng'); //false
複製代碼
3.變換變量
// [letA，letB] = [letB，letA];
let a = 1;
let b = 2;
[a, b] = [b, a] // a = 2 b = 1
複製代碼
4.格式化對象爲JSON代碼
const formatted = JSON.stringify({name: 'Jhon', age: 18, address: 'sz'}, null, 4);
/* { "name": "Jhon", "age": 18, "address": "sz" } */
// 該字符串化命令有三個參數。第一個是Javascript對象。第二個是可選函數，可用於在JSON進行字符串化時對其執行操做。最後一個參數指示要添加多少空格做爲縮進以格式化JSON。省略最後一個參數，JSON將返回一個長行。若是myObj中存在循環引用，則會格式失敗。
複製代碼
5.隨機生成六位數字驗證碼
const code = Math.floor(Math.random() * 1000000).toString().padStart(6, "0") // 942377
複製代碼
6.RGB 顏色轉 16進制顏色
const RGBToHex = (r, g, b) => ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');
RGBToHex(255, 165, 1); // 'ffa501'
複製代碼
7.生成隨機整數
function randomNum(min, max) {
switch (arguments.length) {
case 1:
return parseInt(Math.random() * min + 1, 10)
case 2:
return parseInt(Math.random() * (max - min + 1) + min, 10)
default:
return 0
}
}
randomNum(1,10) // 隨機 [1,10]的整數
複製代碼
8.去除空格（1-全部空格 2-先後空格 3-前空格 4-後空格 默認爲1）
/** * trim 去除空格 * param1 string str 待處理字符串 * param2 number type 去除空格類型 1-全部空格 2-先後空格 3-前空格 4-後空格 默認爲1 * return string str 處理後的字符串 */
function trim(str, type = 1) {
if (type && type !== 1 && type !== 2 && type !== 3 && type !== 4) return;
switch (type) {
case 1:
return str.replace(/\s/g, "");
case 2:
return str.replace(/(^\s)|(\s*$)/g, "");
case 3:
return str.replace(/(^\s)/g, "");
case 4:
return str.replace(/(\s$)/g, "");
default:
return str;
}
}
複製代碼
9.大小寫轉換
/** * 大小寫轉換 * param1 string str 待轉換的字符串 * param2 number type 1-全大寫 2-全小寫 3-首字母大寫 * return string str 處理後的字符串 */
function turnCase(str, type) {
switch (type) {
case 1:
return str.toUpperCase()
case 2:
return str.toLowerCase();
case 3:
return str[0].toUpperCase() + str.substr(1).toLowerCase()
default:
return str;
}
}
複製代碼
10.隨機16進制顏色 hexColor
/** * 隨機16進制顏色 hexColor * return string str 帶#號的隨機16進制顏色 */
function hexColor() {
let str = '#';
let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];
for (let i = 0; i < 6; i++) {
let index = Number.parseInt(Math.random() * 16);
str += arr[index]
}
return str;
}
複製代碼
11.統計一段文字中指定文字出現次數 keywordsCount（騷操做）
/** * 關鍵詞統計：統計一段文字中指定文字出現次數 keywordsCount * param1 string text 進行統計的文本 * param2 string keywords 進行統計的關鍵詞 * return number count 關鍵詞出現次數 * tip:param1 document.body.innerText--全文統計 */
function keywordsCount(text, keywords) {
return text.split(keywords).length - 1
}
複製代碼
12.好的筆記文章
13. 輪詢等待函數
/** * 輪詢等待函數 * * @param {Function} 輪詢結束的條件 * @param {Function} 成功以後的回調函數 * @param {Number} 輪詢時間（默認100ms） * @param {Number} 輪詢最長的時間（默認1000ms） */
function pollingWaiting (callBack, resCallBack, time = 100, lastTime = 1000) {
let startTime = Date.now()
let t = null;
let fn = function () {
t = setTimeout(() => {
if (!callBack()) {
// 此處能夠採用尾遞歸優化，來防止佔用過多內存
console.log('startTime', Date.now() - startTime > lastTime)
(Date.now() - startTime > lastTime) ? window.clearInterval(t) : fn()
} else {
resCallBack()
}
}, time);
}
fn()
}
// 示例
let a = 1;
setTimeout( () => {
a = 2
}, 500)
pollingWaiting( () => {
return a === 2
}, () => {
console.log('觸發了', a)
}, 100, 800)
// 4 startTime false
// 觸發了 2
複製代碼
14.大數值轉換爲萬，億
/** * 大數值轉換爲萬，億函數 * * @param {Number} 大數 * @param {Number} 保留幾位小數 */
function numConversion (num, point = 2) {
let numStr = num.toString().split('.')[0] // 去掉小數點後的數值字符串
let numLen = numStr.length
if (numLen < 6) {
return numStr
} else if (numLen >= 6 && numLen <= 8) {
let decimal = numStr.substring(numLen - 4, numLen - 4 + point)
let res = parseInt(num / 10000) + '.' + decimal + '萬'
return res
} else if (numLen > 8) {
let decimal = numStr.substring(numLen - 8, numLen - 8 + point)
let res = parseInt(num / 100000000) + '.' + decimal + '億'
return res
}
}
numConversion(12345) // 12345
numConversion(1234567) // 123.45萬
numConversion(123456789) // 1.23億
複製代碼
15.常見的XSS轉義場景
// 轉義HTML特殊字符
function HtmlEncode(str) {
var hex = new Array('0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f');
var preescape = str;
var escaped = "";
for(var i = 0; i < preescape.length; i++){
var p = preescape.charAt(i);
escaped = escaped + escapeCharx(p);
}
return escaped;
function escapeCharx(original){
var found=true;
var thechar=original.charCodeAt(0);
switch(thechar) {
case 10: return "<br/>"; break; //newline
case 32: return " "; break; //space
case 34:return """; break; //"
case 38:return "&"; break; //&
case 39:return "'"; break; //'
case 47:return "/"; break; // /
case 60:return "<"; break; //<
case 62:return ">"; break; //>
case 198:return "Æ"; break;
case 193:return "Á"; break;
case 194:return "Â"; break;
case 192:return "À"; break;
case 197:return "Å"; break;
case 195:return "Ã"; break;
case 196:return "Ä"; break;
case 199:return "Ç"; break;
case 208:return "Ð"; break;
case 201:return "É"; break;
case 202:return "Ê"; break;
case 200:return "È"; break;
case 203:return "Ë"; break;
case 205:return "Í"; break;
case 206:return "Î"; break;
case 204:return "Ì"; break;
case 207:return "Ï"; break;
case 209:return "Ñ"; break;
case 211:return "Ó"; break;
case 212:return "Ô"; break;
case 210:return "Ò"; break;
case 216:return "Ø"; break;
case 213:return "Õ"; break;
case 214:return "Ö"; break;
case 222:return "Þ"; break;
case 218:return "Ú"; break;
case 219:return "Û"; break;
case 217:return "Ù"; break;
case 220:return "Ü"; break;
case 221:return "Ý"; break;
case 225:return "á"; break;
case 226:return "â"; break;
case 230:return "æ"; break;
case 224:return "à"; break;
case 229:return "å"; break;
case 227:return "ã"; break;
case 228:return "ä"; break;
case 231:return "ç"; break;
case 233:return "é"; break;
case 234:return "ê"; break;
case 232:return "è"; break;
case 240:return "ð"; break;
case 235:return "ë"; break;
case 237:return "í"; break;
case 238:return "î"; break;
case 236:return "ì"; break;
case 239:return "ï"; break;
case 241:return "ñ"; break;
case 243:return "ó"; break;
case 244:return "ô"; break;
case 242:return "ò"; break;
case 248:return "ø"; break;
case 245:return "õ"; break;
case 246:return "ö"; break;
case 223:return "ß"; break;
case 254:return "þ"; break;
case 250:return "ú"; break;
case 251:return "û"; break;
case 249:return "ù"; break;
case 252:return "ü"; break;
case 253:return "ý"; break;
case 255:return "ÿ"; break;
case 162:return "¢"; break;
case '\r': break;
default:
found=false;
break;
}
if(!found){
if(thechar>127) {
var c=thechar;
var a4=c%16;
c=Math.floor(c/16);
var a3=c%16;
c=Math.floor(c/16);
var a2=c%16;
c=Math.floor(c/16);
var a1=c%16;
return "&#x"+hex[a1]+hex[a2]+hex[a3]+hex[a4]+";";
}
else{
return original;
}
}
}
}
// 轉義JS特殊字符
function JavaScriptEncode(str) var hex=new Array('0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'); function changeTo16Hex(charCode){
return "\\x" + charCode.charCodeAt(0).toString(16);
}
function encodeCharx(original) {
var found = true;
var thecharchar = original.charAt(0);
var thechar = original.charCodeAt(0);
switch(thecharchar) {
case '\n': return "\\n"; break; //newline
case '\r': return "\\r"; break; //Carriage return
case '\'': return "\\'"; break;
case '"': return "\\\""; break;
case '\&': return "\\&"; break;
case '\\': return "\\\\"; break;
case '\t': return "\\t"; break;
case '\b': return "\\b"; break;
case '\f': return "\\f"; break;
case '/': return "\\x2F"; break;
case '<': return "\\x3C"; break;
case '>': return "\\x3E"; break;
default:
found=false;
break;
}
if(!found){
if(thechar > 47 && thechar < 58){ //數字
return original;
}
if(thechar > 64 && thechar < 91){ //大寫字母
return original;
}
if(thechar > 96 && thechar < 123){ //小寫字母
return original;
}
if(thechar>127) { //大於127用unicode
var c = thechar;
var a4 = c%16;
c = Math.floor(c/16);
var a3 = c%16;
c = Math.floor(c/16);
var a2 = c%16;
c = Math.floor(c/16);
var a1 = c%16;
return "\\u"+hex[a1]+hex[a2]+hex[a3]+hex[a4]+"";
}
else {
return changeTo16Hex(original);
}
}
}
var preescape = str;
var escaped = "";
var i=0;
for(i=0; i < preescape.length; i++){
escaped = escaped + encodeCharx(preescape.charAt(i));
}
return escaped;
}
複製代碼
📚參考列表
相關文章
- 1. JS數組方法——速查小本子
- 2. js查找對象方法
- 3. js 數組快速查詢指定字符串方法
- 4. js 快速生成數組的方法
- 5. JS對象方法——速記小本子
- 6. js裏查詢對象和方法
- 7. JS內存泄漏排查方法
- 8. JS內存泄露排查方法
- 9. grep快速查找字串方法
- 10. ubuntu12.04——查看網速的終極方法
- 更多相關文章...
- • ASP Contents.Remove 方法 - ASP 教程
- • ASP Contents.RemoveAll 方法 - ASP 教程
- • 算法總結-二分查找法
- • SpringBoot中properties文件不能自動提示解決方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. JS數組方法——速查小本子
- 2. js查找對象方法
- 3. js 數組快速查詢指定字符串方法
- 4. js 快速生成數組的方法
- 5. JS對象方法——速記小本子
- 6. js裏查詢對象和方法
- 7. JS內存泄漏排查方法
- 8. JS內存泄露排查方法
- 9. grep快速查找字串方法
- 10. ubuntu12.04——查看網速的終極方法