參考網站
參考網站
最近重溫了一遍紅寶書，發現一些比較好玩的寫法，很多東西日常都在用，但是發現還會有不一樣的寫法, 結合一些日常工作中使用的方法，爲大家總結一篇日常經常使用可能還不知道的點，希望對你能有所幫助。
一行代碼完成結構加賦值
我們日常經常使用結構賦值，一般都是先結構，再賦值，當然我們也可以一行就完成解構加賦值操作，看起來非常簡化，當然可讀性你懂得！
1
2
3
4
5
| let people = { name: null, age: null };
let result = { name: '張三', age: 16 };
({ name: people.name, age: people.age} = result);
console.log(people) // {"name":"張三","age":16}
|
對基礎數據類型進行解構
日常中我們應該用不到這樣的場景，但是實際上我們也可以對基礎數據類型解構。
1
2
| const {length : a} = '1234';
console.log(a) // 4
|
對數組解構快速拿到最後一項值
實際上我們是可以對數組解構賦值拿到 length 屬性的，通過這個特性也可以做更多的事情。
1
2
3
4
5
| const arr = [1, 2, 3];
const { 0: first, length, [length - 1]: last } = arr;
first; // 1
last; // 3
length; // 3
|
將下標轉爲中文零一二三…
日常可能有的列表我們需要將對應的 012345 轉爲中文的一、二、三、四、五…，在老的項目看到還有通過自己手動定義很多行這樣的寫法，於是寫了一個這樣的方法轉換
1
2
3
4
5
6
| export function transfromNumber(number){
const INDEX_MAP = ['零'，'一'.....]
if(!number) return
if(number === 10) return INDEX_MAP[number]
return [...number.toString()].reduce( (pre, cur) => pre + INDEX_MAP[cur] , '' )
}
|
判斷整數的不同方法
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
| /* 1. 任何整數都會被1整除，即餘數是0。利用這個規則來判斷是否是整數。但是對字符串不準確 */
function isInteger(obj) {
return obj % 1 === 0
}
/* 1. 添加一個是數字的判斷 */
function isInteger(obj) {
return typeof obj === 'number' && obj % 1 === 0
}
/* 2. 使用Math.round、Math.ceil、Math.floor判斷 整數取整後還是等於自己。利用這個特性來判斷是否是整數*/
function isInteger(obj) {
return Math.floor(obj) === obj
}
/* 3. 通過parseInt判斷 某些場景不準確 */
function isInteger(obj) {
return parseInt(obj, 10) === obj
}
/* 4. 通過位運算符*/
function isInteger(obj) {
return (obj | 0) === obj
}
/* 5.ES6提供了Number.isInteger */
|
通過 css 檢測系統的主題色從而全局修改樣式
@media 的屬性 prefers-color-scheme 就可以知道當前的系統主題，當然使用前需要查查兼容性。
1
2
| @media (prefers-color-scheme: dark) { //... }
@media (prefers-color-scheme: light) { //... }
|
javascript 也可以輕鬆做到
1
2
3
4
5
6
7
8
| window.addEventListener('theme-mode', event =>{
if(event.mode == 'dark'){}
if(event.mode == 'light'){}
})
window.matchMedia('(prefers-color-scheme: dark)') .addEventListener('change', event => {
if (event.matches) {} // dark mode
})
|
數組隨機打亂順序
通過 0.5-Math.random() 得到一個隨機數，再通過兩次 sort 排序打亂的更徹底, 但是這個方法實際上並不夠隨機，如果是企業級運用，建議使用第二種洗牌算法。
1
2
3
| function shuffle(arr) {
return arr.sort(() => 0.5 - Math.random()). sort(() => 0.5 - Math.random());
}
|
1
2
3
4
5
6
7
| function shuffle(arr) {
for (let i = arr.length - 1; i > 0; i--) {
const randomIndex = Math.floor(Math.random() * (i + 1))
;[arr[i], arr[randomIndex]] = [arr[randomIndex], arr[i]]
}
return arr
}
|
隨機獲取一個 Boolean 值
和上個原理相同，通過隨機數獲取，Math.random() 的區間是 0-0.99，用 0.5 在中間百分之五十的概率。
1
2
3
| function randomBool() {
return 0.5 - Math.random()
}
|
把數組最後一項移到第一項
1
2
3
| function (arr){
return arr.push(arr.shift());
}
|
把數組的第一項放到最後一項
1
2
3
| function(arr){
return arr.unshift(arr.pop());
}
|
利用 set 數組去重
1
2
3
| function uniqueArr(arr){
return [...new Set(arr)]
}
|
dom 節點平滑滾動到可視區域、頂部、底部
原生的 scrollTo 方法沒有動畫，類似於錨點跳轉，比較生硬，可以通過這個方法會自帶平滑的過度效果。
1
2
3
4
5
6
7
8
9
10
| function scrollTo(element) {
// 頂部
element.scrollIntoView({ behavior: "smooth", block: "start" })
// 底部
element.scrollIntoView({ behavior: "smooth", block: "end" })
// 可視區域
element.scrollIntoView({ behavior: "smooth"})
}
|
獲取隨機顏色
日常我們經常會需要獲取一個隨機顏色，通過隨機數即可完成。
1
2
3
| function getRandomColor(){
return `#${Math.floor(Math.random() * 0xffffff) .toString(16)}`;
}
|
檢測是否爲空對象
通過使用 ES6 的 Reflect 靜態方法判斷他的長度就可以判斷是否是空數組了，也可以通過 Object.keys() 來判斷。
1
2
3
| function isEmpty(obj){
return Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;
}
|
Boolean 轉換
一些場景下我們會將 boolean 值定義爲場景，但是在 js 中非空的字符串都會被認爲是 true。
1
2
3
4
5
6
7
| function toBoolean(value, truthyValues = ['true']){
const normalizedValue = String(value).toLowerCase().trim();
return truthyValues.includes(normalizedValue);
}
toBoolean('TRUE'); // true
toBoolean('FALSE'); // false
toBoolean('YES', ['yes']); // true
|
各種數組複製方法
數組克隆的方法其實特別多了，看看有沒有你沒見過的！
1
2
3
4
5
6
7
| const clone = (arr) => arr.slice(0);
const clone = (arr) => [...arr];
const clone = (arr) => Array.from(arr);
const clone = (arr) => arr.map((x) => x);
const clone = (arr) => JSON.parse(JSON.stringify(arr));
const clone = (arr) => arr.concat([]);
const clone = (arr) => structuredClone(arr);
|
比較兩個時間大小
通過調用 getTime 獲取時間戳比較就可以了。
1
2
3
| function compare(a, b){
return a.getTime() > b.getTime();
}
|
計算兩個時間之間的月份差異
1
2
3
| function monthDiff(startDate, endDate){
return Math.max(0, (endDate.getFullYear() - startDate.getFullYear()) * 12 - startDate.getMonth() + endDate.getMonth());
}
|
一步驟從時間中提取年月日時分秒
時間格式化輕鬆解決，一步驟獲取到年月日時分秒毫秒，由於 toISOString 會丟失時區，導致時間差八小時，所以在格式化之前我們加上八個小時時間即可。
1
2
3
4
5
6
| function extract(date){
const d = new Date(new Date(date).getTime() + 8*3600*1000);
return new Date(d).toISOString().split(/[^0-9]/).slice(0, -1);
}
console.log(extract(new Date())) // ['2022', '09', '19', '18', '06', '11', '187']
|
判斷一個參數是不是函數
有時候我們的方法需要傳入一個函數回調，但是需要檢測其類型，我們可以通過 Object 的原型方法去檢測，當然這個方法可以準確檢測任何類型。
1
2
3
| function isFunction(v){
return ['[object Function]', '[object GeneratorFunction]', '[object AsyncFunction]', '[object Promise]'].includes(Object.prototype.toString.call(v));
}
|
計算兩個座標之間的距離
1
2
3
| function distance(p1, p2){
return `Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
}
|
檢測兩個 dom 節點是否覆蓋重疊
有些場景下我們需要判斷 dom 是否發生碰撞了或者重疊了，我們可以通過 getBoundingClientRect 獲取到 dom 的 x1、y1、x2、y2 座標然後進行座標比對即可判斷出來。
1
2
3
| function overlaps = (a, b) {
return (a.x1 < b.x2 && b.x1 < a.x2) || (a.y1 < b.y2 && b.y1 < a.y2);
}
|
判斷是否是 Nodejs 環境
前端的日常開發是離不開 nodejs 的，通過判斷全局環境來檢測是否是 nodejs 環境。
1
2
3
| function isNode(){
return typeof process !== 'undefined' && process.versions != null && process.versions.node != null;
}
|
參數求和
之前看到有通過函數柯理化形式來求和的，通過 reduce 一行即可。
1
2
3
| function sum(...args){
args.reduce((a, b) => a + b);
}
|
