JS方法速查
????前言
首先這個文章是一個不斷維護的專案,勵志,如果各位朋友有更好的解決方法,歡迎在下方評論,我也會第一時間感謝和更新文章內容的,拜謝!!!
- GitHub地址:
- 檢視更多速查:
更新記錄(只顯示最近5條)
- 最佳化其他部分 - 常用正則速查表現形式(增加了示例等)(2019.7.4)
- 其他部分 增加了 Math函式的一些應用 和 常用正則速查 (2019.7.2)
- 陣列部分增加一些方法(2019.7.1)
- 陣列部分增加了註釋,和一些示例,整體上最佳化了很多,感謝大家的反饋(2019.6.25)
- 致謝: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]
陣列去重擴充(傳引數 指定去除哪個重複的,未完成)
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.獲得陣列最大最小值
// 使用 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
4.獲取陣列交集
// 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)
// })
// }
5.多維陣列轉一維陣列(陣列降緯)
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() 方法大家可以自行查閱一下,擴充下自己的知識面
6.過濾陣列物件(拿取JSON陣列中的特定項)
const data = [
{ id: 1, name: 'john', age: 24 },
{ id: 2, name: 'zkp', age: 21 },
{ id: 3, name: 'mike', age: 50 }
];
// ES6
const reducedFilter = (data, keys, fn) => data.filter(fn).map(el => keys.reduce((acc, key) => {acc[key] = el[key];return acc;}, {}));
// 引數一 必填 陣列物件(一般都JSON那種陣列物件)
// 引數二 必填 陣列,裡面傳的是你需要返回的欄位(看下面的示例就明白了)
// 引數三 必填 過濾的條件(看下面示例就明白了)
reducedFilter(data, ['id', 'name'], item => item.age > 25); // [{ id: 3, name: 'mike'}]
// 注:最後返回結果,不會改變原陣列
// 這個在 RESTful API 模式下返回JSON資料的時候還是很常用的,會節省你forEach的的過程
7.陣列物件去重
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'}]
8.陣列排序(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
})
// 結果會按照年齡從小到大的順序排列
8.陣列亂序
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] 結果不定
還有更簡單的方式,歡迎來撩
10.檢查陣列中某元素出現的次數
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
11.在陣列第一位插入項
let arr1 = [2,3,4,5]
let arr2 = [1]
// ES6
console.log([...arr2, ...arr1]) // [1,2,3,4,5]
注:這種是陣列合並的思路,一定有其他方式,等待你的補充
12.陣列過濾(filter)
// filter()
// 1.方法建立一個新的陣列,新陣列中的元素是透過檢查指定陣列中符合條件的所有元素
// 2.不會改變原始陣列
let arr = [
{ id: 1, text: 'aa', done: true },
{ id: 2, text: 'bb', done: false }
]
// 如果返回的結果是 true,那麼這個項就符合,就會儲存下來
arr.filter(item => item.done) // [{ id: 1, text: 'aa', done: true }]
arr.filter(item => item.text === 'bb') // [{ id: 2, text: 'bb', done: false }]
13.判斷陣列中的項是否滿足於某個條件
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
// 注意:上面兩個有不同哦,一個是有符合的判定,一個是全符合的判定
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.map(arr => arr[key])
fn(potatos, 'id') // ["1001", "1002", "1003", "1004"]
fn(potatos, 'weight') // [50, 80, 120, 40]
16.陣列物件,求某一列屬性的總和
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" 字串相加就是這個結果,如果有各自的需求,可以自己加上
????時間
1.一個時間戳格式的數字,是多少 天小時分鐘秒毫秒
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
2.一個陣列中,有時間,需要將這個陣列按照時間進行排序
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 ? 1 : -1);
// 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"}
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.獲取兩個日期相差天數
const getDaysDiffBetweenDates = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 * 3600 * 24);
getDaysDiffBetweenDates(new Date('2017-12-13'), new Date('2017-12-22')); // 9
????物件
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}
// 支援無限制合併,但如果物件之間存在相同屬性,則後面屬性會覆蓋前面屬性。*請注意,這僅適用於淺層合併。
方法一: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() 方法
方法二:$.extend()(抽時間看一下實現原理)
2.淺複製,深複製
方法一:淺複製:意思就是隻複製引用(指標),而未複製真正的值
// 最簡單的利用 = 賦值運算子實現了一個淺複製
let obj1 = {
name: '朱昆鵬'
}
let obj2 = obj1; // 完成了淺複製
方法二:深複製:目標的完全複製(只要進行了深複製,它們老死不相往來,誰也不會影響誰)
// 目前實現深複製的方法不多,主要是兩種:
// 01:利用遞迴來實現每一層都重新建立物件並賦值(推薦使用)
// 02:利用 JSON 物件中的 parse 和 stringify(有些屬性會被忽略,所以不能使用)
// 01遞迴方法案例:對每一層的資料都實現一次 建立物件->物件賦值 的操作
function 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;
}
const obj1 = {
name:'axuebin',
sayHello:function(){
console.log('Hello World');
}
}
const obj2 = deepClone(obj1);
console.log(obj2); // {name: "axuebin", sayHello: ƒ}
console.log(obj1 === obj2); // false
// 02方法示例
const obj3 = {
name:'axuebin',
sayHello:function(){
console.log('Hello World');
}
}
console.log(JSON.parse(JSON.stringify(obj3)); // {name: "axuebin"} ???
// undefined、function、symbol 會在轉換過程中被忽略,所以就不能用這個方法進行深複製
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.判斷當前位置是否為頁面底部
function bottomVisible() {
return document.documentElement.clientHeight + window.scrollY >= (document.documentElement.scrollHeight || document.documentElement.clientHeight)
}
bottomVisible() // 返回值為true/false
2.全屏
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('退出全屏')
}
})
3.判斷dom元素是否具有某個className
方法一:使用HTML5新增classList 來操作類名
<!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>
擴充:
- classList.add(newClassName);新增新的類名,如已經存在,取消新增
- classList.contains(oldClassName):確定元素中是否包含指定的類名,返回值為true,false
- classList.remove(oldClassName):移除已經存在的類名;
- classList.toggle(className):如果classList中存在給定的值,刪除它,否則,新增它;
????感謝掘金使用者tjNane分享此方法
方法二:
const hasClass = (el, className) => new RegExp(`(^|\s)${className}(\s|$)`).test(el.className);
????BOM
1.返回當前網頁地址
function currentURL() {
return window.location.href
}
currentURL() // ""
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('') // {name: "tyler"}
4.檢測裝置型別
const detectDeviceType = () =>/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ? 'Mobile' : 'Desktop';
detectDeviceType() // "Desktop"
????處理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.生成隨機整數
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]的整數
7.RGB 顏色轉 16進位制顏色
const RGBToHex = (r, g, b) => ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');
RGBToHex(255, 165, 1); // 'ffa501'
????參考列表
- 日常工作總結
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/1806/viewspace-2823149/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- JS速查手冊JS
- js字串與陣列常用方法速查.個人筆記JS字串陣列筆記
- js正規表示式速查JS
- 速查表
- Markdown & typora 速查
- git 指令速查Git
- Linux 命令速查Linux
- calico 指令速查
- HTML速查列表HTML
- git命令速查Git
- js字串方法JS字串
- JavaScript速查表JavaScript
- Linux: 命令速查(自用)Linux
- Markdown 速查表
- Git速查表Git
- Nmap速查手冊
- Vue 優化速查Vue優化
- FastAPI快速查閱ASTAPI
- MySQL 聯錶速查MySql
- Laravel 速查表Laravel
- js includes方法 和 filter方法JSFilter
- 5種快速查詢容器檔案系統中檔案的方法
- 實用 Docker 速查大全:快速認識 Docker 的概念和使用方法Docker
- js轉碼方法JS
- js 陣列方法JS陣列
- js常用方法整理JS
- JS中reduce方法JS
- js字串排序方法JS字串排序
- 常用的js方法JS
- 常用JS方法整理JS
- 原生JS DOM方法JS
- Python cheatsheet 速查表Python
- WRFDA namelist速查表
- Nmap基本使用【速查版】
- HTML 速查列表簡介HTML
- python selenium 速查筆記Python筆記
- CMD 命令速查手冊
- SQL隱碼攻擊速查表(下)與Oracle注入速查表SQLOracle