歡迎大家關註我的微信公眾號,不定時更新 使用方法非常簡單,只需放到你的 utils.js 工具文件中,直接 export const 加上我的封裝方法,在別的文件中使用{方法1,方法2,方法3...}引用後就可以直接使用了! 001.輸入一個值,返回其數據類型 type = para => { re ...
歡迎大家關註我的微信公眾號,不定時更新
使用方法非常簡單,只需放到你的 utils.js 工具文件中,直接 export const 加上我的封裝方法,在別的文件中使用{方法1,方法2,方法3...}
引用後就可以直接使用了!
001.輸入一個值,返回其數據類型
type = para => {
return Object.prototype.toString.call(para).slice(8,-1)
}
複製代碼
002.冒泡排序
升序 bubbleAsSort()
bubbleAsSort = arr => {
for (let i = 0; i < arr.length - 1; i++) {
for (let j = 0; j < arr.length - 1 - i; j++) {
if (arr[j] > arr[j + 1]) {
let temp = arr[j + 1];
arr[j + 1] = arr[j];
arr[j] = temp;
}
}
}
return arr;
}
複製代碼
降序 bubbleDeSort()
bubbleDeSort = arr => {
for (let i = 0; i < arr.length - 1; i++) {
for (let j = 0; j < arr.length - 1 - i; j++) {
if (arr[j] < arr[j + 1]) {
let temp = arr[j + 1];
arr[j + 1] = arr[j];
arr[j] = temp;
}
}
}
return arr;
}
複製代碼
003.選擇排序
升序 selectAsSort()
selectAsSort = arr => {
let minIndex, temp;
for (let i = 0; i < arr.length - 1; i++) {
minIndex = i;
for (let j = i + 1; j < arr.length; j++) {
if (arr[j] < arr[minIndex]) {
minIndex = j;
}
}
temp = arr[i];
arr[i] = arr[minIndex];
arr[minIndex] = temp;
}
return arr;
}
複製代碼
降序 selectDeSort()
selectDeSort = arr => {
let minIndex, temp;
for (let i = 0; i < arr.length - 1; i++) {
minIndex = i;
for (let j = i + 1; j < arr.length; j++) {
if (arr[j] > arr[minIndex]) {
minIndex = j;
}
}
temp = arr[i];
arr[i] = arr[minIndex];
arr[minIndex] = temp;
}
return arr;
}
複製代碼
004.插入排序
升序 insertAsSort()
insertAsSort = arr => {
let current, preIndex;
for (let i = 1; i < arr.length; i++) {
current = arr[i];
preIndex = i - 1;
while (preIndex >= 0 && arr[preIndex] > current) {
arr[preIndex + 1] = arr[preIndex];
preIndex--;
}
arr[preIndex + 1] = current;
}
return arr;
}
複製代碼
降序 insertDeSort()
insertDeSort = arr => {
let current, preIndex;
for (let i = 1; i < arr.length; i++) {
current = arr[i];
preIndex = i - 1;
while (preIndex >= 0 && arr[preIndex] < current) {
arr[preIndex + 1] = arr[preIndex];
preIndex--;
}
arr[preIndex + 1] = current;
}
return arr;
}
複製代碼
005.階乘
factorial = num => {
let count = 1;
for (let i = 1; i <= num; i++) {
count *= i;
}
return count;
}
複製代碼
006.兩個數之間累乘
multBetride = (x, y) => {
let count;
if (x < y) {
count = x;
for (let i = x + 1; i <= y; i++) {
count *= i;
}
return count;
} else {
count = y;
for (let i = y + 1; i <= x; i++) {
count *= i;
}
return count;
}
}
複製代碼
007.累加
()裡面可以放N個實參
function cumsum() {
let sum = 0;
for (let i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
複製代碼
008.計時器(計算代碼塊(函數)執行時間)
無參 computeTime(f)
computeTime = code => {
let startTime = new Date().getTime();
code();
let endTime = new Date().getTime();
let time = endTime - startTime;
return time;
}
複製代碼
有參 computeTime(f)
使用方法:computeTime(f,參數1,參數2......)
computeTime = f => {
let startTime = new Date().getTime();
let p = [];
for (let i = 1; i < arguments.length; i++) {
p.push(arguments[i])
}
f.apply(null, p)
let endTime = new Date().getTime();
let Time = endTime - startTime;
return Time;
}
複製代碼
009.數組去重
arrDemp1 = arr => {
let newArr = [];
let m = {};
for (let i = 0; i < arr.length; i++) {
let n = arr[i];
if (m[n]) {
} else {
newArr.push(arr[i]);
m[n] = true;
}
}
return newArr;
}
//遍曆數組法
arrDemp2 = arr => {
let temp = [];
for (let i = 0; i < arr.length; i++) {
//indexOf()方法可返回某個指定的字元串或數組值在字元串或數組中首次出現的位置,若不在其中則返回-1
if (temp.indexOf(arr[i]) === -1)
temp.push(arr[i]);
}
return temp;
}
//排序法
arrDemp3 = arr => {
let temp = [];
arr.sort();
temp.push(arr[0]);
//因為數組已經經過排序,所以重覆元素一定相鄰,判斷當前數組第i個元素與temp的最後一個元素是否相等,不相等時才複製元素
for (let i = 1; i < arr.length; i++) {
if (arr[i] != temp[temp.length - 1])
temp.push(arr[i]);
}
return temp;
}
//對象法
arrDemp4 = arr => {
let temp = [];
let json = {};
//將當前數組的元素值當作對象的屬性,遍曆數組,比對對象,如果對象的這個屬性不存在則將當前數組元素複製到臨時數組,並添加該屬性且將屬性值賦值為1
for (let i = 0; i < arr.length; i++) {
if (!json[arr[i]]) {//如果對象沒有該屬性
temp.push(arr[i]);
json[arr[i]] = 1;//添加屬性,將屬性值賦值為1
}
}
return temp;
}
複製代碼
也可以使用ES6中的new Set
,一步到位
let arr = [1,2,3,5,4,5,4,3,6]
let arrDemp = new Set(arr) //arrDemp是一個對象
let newArr = [...arrDemp] //把arrDemp轉化成數組
console.log(newArr);
複製代碼
010.數組對象去重
將對象數組中屬性相同的項去重
/*
* objArr 對象數組
* para 將要進行去重的欄位(String類型)
*/
測試數據:
let objArr = [{ name: 'a', age: 1 }, { name: 'a', age: 2 }, { name: 'b', age: 2 }]
console.log(objArrDemp1(objArr,'name')); // [ { name: 'a', age: 1 }, { name: 'b', age: 2 } ]
console.log(objArrDemp1(objArr,'age')); // [ { name: 'a', age: 1 }, { name: 'a', age: 2 } ]
objArrDemp1 = (objArr, para) => {
let result = [];
let temp = {};
for (let i = 0; i < objArr.length; i++) {
let parameter = objArr[i][para];
if (temp[parameter]) {
continue;//不繼續執行接下來的代碼,跳轉至迴圈開頭
}
temp[parameter] = true;//為temp添加此屬性(parameter)且將其值賦為true
result.push(objArr[i]);//將這一項複製到結果數組result中去
}
return result;
}
objArrDemp2 = (objArr, para) => {
let hash = {};
//reduce方法有兩個參數,第一個參數是一個callback,用於針對數組項的操作;第二個參數則是傳入的初始值,這個初始值用於單個數組項的操作。
objArr = objArr.reduce(function (item, next) {//這是針對數組項操作的函數,對於每個數組項,reduce方法都會將其調用一次
hash[next[para]] ? '' : hash[next[para]] = true && item.push(next);
return item;
}, []);//初始值是一個空對象,使用reduce方法返回的是空對象通過疊加執行之後的結果
return objArr;
}
複製代碼
011.統計數組中各個元素出現的次數
staArrNum = arr => {
let obj = {};
for (let i = 0; i < arr.length; i++) {
let m = arr[i];
if (obj.hasOwnProperty(m)) {
obj[m] += 1;
} else {
obj[m] = 1;
}
}
return obj;
}
let arr = [1, 2, 3, 6, 5, 3, 2, 1, 2, 3, 2, 1]
console.log(staArrNum(arr)); // { '1': 3, '2': 4, '3': 3, '5': 1, '6': 1 }
複製代碼
012.在數組中找指定的元素,返回下標
arrFinNum = function (arr,num) {
let index = -1;
for (let i = 0; i < arr.length; i++) {
if (num == arr[i]) {
index = i;
break;
}
}
return index;
}
let arr = [1,2,3,4,5,6]
console.log(arrFinNum(arr,4)); // 3
複製代碼
013.刪除數組中的元素
delArrNum = (arr,val) => {
let index = arrFinNum(arr, val) //調用了前面自行添加的arrFinNum方法
if (index != -1) {
return arr.splice(index, 1);
}
}
複製代碼
示例
let arr = [1, 2, 3, 4, 5, 6]
arrFinNum = (arr, num) => {
let index = -1;
for (let i = 0; i < arr.length; i++) {
if (num == arr[i]) {
index = i;
break;
}
}
return index;
}
delArrNum = (arr,val) => {
let index = arrFinNum(arr, val) //調用了前面自行添加的arrFinNum方法
if (index != -1) {
return arr.splice(index, 1);
}
}
console.log(delArrNum(arr,2)); // [ 2 ]
複製代碼
014.數字超過9顯示省略號
num_filter = val =>{
val = val?val-0:0;
if (val > 9 ) {
return "…"
}else{
return val;
}
}
複製代碼
015.數字超過99顯示99+
ninenum_filter = val =>{
val = val?val-0:0;
if (val > 99 ) {
return "99+"
}else{
return val;
}
}
複製代碼
016.銀行卡號分割
bank_filter = val =>{
val += '';
val = val.replace(/(\s)/g,'').replace(/(\d{4})/g,'$1 ').replace(/\s*$/,'');
return val;
}
複製代碼
017.二分查找
//非遞歸實現
binarySearch = (arr, key) => {
let high = arr.length - 1,
low = 0;
while (low <= high) {
let m = Math.floor((high + low) / 2);
if (arr[m] == key) {
return m;
}
if (key > arr[m]) {
low = m + 1;
} else {
high = m - 1;
}
}
return false;
}
let arr = [-1, 1, 3, 4, 5, 8, 32, 234, 12, 42];
console.log(binarySearch(arr, 4));
複製代碼
//遞歸實現
binarySearch = (arr, low, high, key) => {
if (low > high) {
return -1;
}
let mid = parseInt((high + low) / 2);
if (arr[mid] == key) {
return mid;
} else if (arr[mid] > key) {
high = mid - 1;
return binarySearch(arr, low, high, key);
} else if (arr[mid] < key) {
low = mid + 1;
return binarySearch(arr, low, high, key);
}
};
let arr = [-1, 1, 3, 4, 5, 8, 32, 234, 12, 42];
console.log(binarySearch(arr, 0, 13, 5));
複製代碼
018.防抖與節流
/**
* 函數防抖 (只執行最後一次點擊)
*/
Debounce = (fn, t) => {
let delay = t || 500;
let timer;
return function () {
let args = arguments;
if(timer){
clearTimeout(timer);
}
timer = setTimeout(() => {
timer = null;
fn.apply(this, args);
}, delay);
}
};
/*
* 函數節流
*/
Throttle = (fn, t) => {
let last;
let timer;
let interval = t || 500;
return function () {
let args = arguments;
let now = +new Date();
if (last && now - last < interval) {
clearTimeout(timer);
timer = setTimeout(() => {
last = now;
fn.apply(this, args);
}, interval);
} else {
last = now;
fn.apply(this, args);
}
}
};
複製代碼
019.深拷貝
deepClone = source => {
const targetObj = source.constructor === Array ? [] : {}; // 判斷複製的目標是數組還是對象
for (let keys in source) { // 遍歷目標
if (source.hasOwnProperty(keys)) {
if (source[keys] && typeof source[keys] === 'object') { // 如果值是對象,就遞歸一下
targetObj[keys] = source[keys].constructor === Array ? [] : {};
targetObj[keys] = deepClone(source[keys]);
} else { // 如果不是,就直接賦值
targetObj[keys] = source[keys];
}
}
}
return targetObj;
}
let str1 = {
arr: [1, 2, 3],
obj: {
key: 'value'
},
fn: function () {
return 1;
}
};
let str3 = deepClone(str1);
console.log(str3 === str1); // false
console.log(str3.obj === str1.obj); // false
console.log(str3.fn === str1.fn); // true
複製代碼
020.獲取視口尺寸
需要在HTML文件中運行
function getViewportOffset() {
if (window.innerWidth) {
return {
w: window.innerWidth,
h: window.innerHeight
}
} else {
// ie8及其以下
if (document.compatMode === "BackCompat") {
// 怪異模式
return {
w: document.body.clientWidth,
h: document.body.clientHeight
}
} else {
// 標準模式
return {
w: document.documentElement.clientWidth,
h: document.documentElement.clientHeight
}
}
}
}
複製代碼
021.數字前補零
/**
* num為你想要進行填充的數字
* length為你想要的數字長度
*/
//迭代方式實現
padding1=(num, length)=> {
for(let len = (num + "").length; len < length; len = num.length) {
num = "0" + num;
}
return num;
}
//遞歸方式實現
padding2=(num, length) =>{
if((num + "").length >= length) {
return num;
}
return padding2("0" + num, length)
}
//轉為小數
padding3=(num, length)=> {
let decimal = num / Math.pow(10, length);
//toFixed指定保留幾位小數
decimal = decimal.toFixed(length) + "";
return decimal.substr(decimal.indexOf(".")+1);
}
//填充截取法
padding4=(num, length)=> {
//這裡用slice和substr均可
return (Array(length).join("0") + num).slice(-length);
}
//填充截取法
padding5=(num, length)=> {
let len = (num + "").length;
let diff = length+1 - len;
if(diff > 0) {
return Array(diff).join("0") + num;
}
return num;
}
複製代碼
022.字元替換
可以替換任意數字和符號
/**
* str 表示將要替換的字元串
* l 表示你將要替換的字元
* r 表示你想要替換的字元
*/
transFormat = (str, l, r) => {
let reg = new RegExp(l, 'g') // g表示全部替換,預設替換第一個
str = str.replace(reg, r)
return str
}
console.log(transFormat('2019-12-13', '-', '/')); // 2019/12/13
console.log(transFormat('2019-12-13', '-', '')); // 20191213
複製代碼
023.在字元串指定位置插入字元
/**
* character 原字元串(String)
* site 要插入的字元的位置 (Number)
* newStr 想要插入的字元 (String)
*/
insertStr = (character, site, newStr) => {
return character.slice(0, site) + newStr + character.slice(site);
}
console.log(insertStr('20191217',4,'-')); // 2019-1217
複製代碼
024.字元串反轉處理分割
/**
* str 是你將要進行處理的字元串(String)
* under 是你根據什麼字元處理(String)
* event 是你根據什麼字元把處理結果分割(String)
*/
keyCharacterMap = (str,under,event) => {
return str.split(under).reverse().join(event)
}
console.log(keyCharacterMap('hello world','','')); // dlrow olleh
console.log(keyCharacterMap('hello world',' ','-')); // world-hello
複製代碼
025.格式轉換:base64轉file
/**
* base64 base64
* filename 轉換後的文件名
*/
base64ToFile = (base64, filename) => {
let arr = base64.split(","),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {
type: mime
});
}
複製代碼
026.格式轉換:base64轉blob
base64ToBlob = base64 => {
let arr = base64.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
};
複製代碼
027.格式轉換:blob轉file
blobToFile = (blob, fileName) => {
blob.lastModifiedDate = new Date();
blob.name = fileName;
return blob;
};
複製代碼
028.截取指定字元之前之後的字元串
// 截取指定字元之前的字元串
beforeStrSub = (str, char) => {
return str.split(char)[0]
}
// 截取指定字元之後的字元串
afterStrSub = (str, char) => {
return str.split(char)[1]
}
// 測試數據
let str = 'abc:de;fghi.jk';
console.log(beforeStrSub(str, ';')); // abc:de
console.log(afterStrSub(str, 'f')); // ghi.jk
複製代碼
029.截取指定字元之間的字元串
/**
* str 要截取的字元串 (String)
* start 字元串截取的開始位置 (String)
* end 字元串截取的結束位置 (String)
*/
betweenStrSub = (str, start, end) => {
temp = str.split(start, 2);
content = temp[1].split(end, 2);
return content[0];
}
// 測試數據
let str = 'abc:de;fghi.jk';
console.log(betweenStrSub(str, ':', '.')); // de;fghi
console.log(betweenStrSub(str, 'bc', 'k')); // :de;fghi.j
console.log(betweenStrSub(str, ':', 'k')); // de;fghi.j
複製代碼
030.獲取地址欄傳遞過來的參數
/**
* name為地址欄傳遞過來的欄位名
*/
getQueryString = name => {
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
let r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
// 測試
// http://localhost:3306/admin?id=111&name=xxx
// console.log(getQueryString('id')); // 111
// console.log(getQueryString('name')); // xxx
複製代碼
031.字元串反轉
/**
* str 要反轉的字元串
*/
strInversion = str => {
str = str + '';
let newStr=[];
newStr=str.split("").reverse().join("");
return newStr
}
// 測試數據
console.log(strInversion("I Love You!")); // !uoY evoL I
複製代碼
032.對象處理為數組對象
/**
* obj 需要處理的對象
*/
objToArrObj = obj => {
let arr = []
for(let i in obj){
arr.push({[i]:obj[i]})
}
return arr
}
// 測試數據
let obj = {20180410: 5, 20180411: 13, 20180412: 26, 20180413: 16}
console.log(objToArrObj(obj));
/*
[
{ 20180410: 5 },
{ 20180411: 13 },
{ 20180412: 26 },
{ 20180413: 16 }
]
*/
複製代碼
033.通過鍵查找對象數組中對應的下標、鍵、值
/**
* arr 對象數組
* index 要查找的鍵名
*/
objArrHandle = (arr,keyName) => {
let sub = arr.findIndex(item=>item[keyName])
let obj = arr[sub]
let key = Object.keys(obj)[0]
let value = obj[Object.keys(obj)]
return '下標:'+sub+' 鍵:'+key+' 值:'+value
}
// 測試數據
let arr = [{ 20180410: 5 },{ 20180411: 13 },{ 20180412: 26 },{ 20180413: 16 }]
console.log(objArrHandle(arr,20180412)); // 下標:2 鍵:20180412 值:26
作者:YXi
鏈接:https://juejin.im/post/5deb2cdf518825122671b637
來源:掘金
著作權歸作者所有。商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。