整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、生成隨機字符串
我們可以使用 Math.random 生成一個隨機字符串，當我們需要一個唯一的 ID 時非常方便。
const randomString = () => Math.random().toString(36).slice(2)
randomString() // gi1qtdego0b
randomString() // f3qixv40mot
randomString() // eeelv1pm3ja2、轉義HTML特殊字符
如果您了解 XSS，其中一種解決方案是轉義 HTML 字符串。
const escape = (str) => str.replace(/[&<>"']/g, (m) => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[m]))
escape('<div class="medium">Hi Medium.</div>')
// <div class="medium">Hi Medium.</div>3、將字符串中每個單詞的第一個字符大寫
此方法用于將字符串中每個單詞的第一個字符大寫。
const uppercaseWords = (str) => str.replace(/^(.)|\s+(.)/g, (c) => c.toUpperCase())
uppercaseWords('hello world'); // 'Hello World'另外，在這里，我要謝謝克里斯托弗·斯特羅利亞-戴維斯，他還跟我分享了他的更加簡單的方法，代碼如下：
const uppercaseWords = (str) => str.replace(/^(.)|\s+(.)/g, (c) => c.toUpperCase())4、將字符串轉換為camelCase
const toCamelCase = (str) => str.trim().replace(/[-_\s]+(.)?/g, (_, c) => (c ? c.toUpperCase() : ''));
toCamelCase('background-color'); // backgroundColor
toCamelCase('-webkit-scrollbar-thumb'); // WebkitScrollbarThumb
toCamelCase('_hello_world'); // HelloWorld
toCamelCase('hello_world'); // helloWorld5、刪除數組中的重復值
刪除數組的重復項是非常有必要的，使用“Set”會變得非常簡單。
const removeDuplicates = (arr) => [...new Set(arr)]
console.log(removeDuplicates([1, 2, 2, 3, 3, 4, 4, 5, 5, 6]))
// [1, 2, 3, 4, 5, 6]6、 展平一個數組
我們經常在面試中受到考驗，這可以通過兩種方式來實現。
const flat = (arr) =>
[].concat.apply(
[],
arr.map((a) => (Array.isArray(a) ? flat(a) : a))
)
// Or
const flat = (arr) => arr.reduce((a, b) => (Array.isArray(b) ? [...a, ...flat(b)] : [...a, b]), [])
flat(['cat', ['lion', 'tiger']]) // ['cat', 'lion', 'tiger']7、從數組中刪除虛假值
使用此方法，您將能夠過濾掉數組中的所有虛假值。
const removeFalsy = (arr) => arr.filter(Boolean)
removeFalsy([0, 'a string', '', NaN, true, 5, undefined, 'another string', false])
// ['a string', true, 5, 'another string']8、檢查一個數字是偶數還是奇數
超級簡單的任務，可以通過使用模運算符 (%) 來解決。
const isEven = num => num % 2 === 0
isEven(2) // true
isEven(1) // false9、獲取兩個數字之間的隨機整數
此方法用于獲取兩個數字之間的隨機整數。
const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
random(1, 50) // 25
random(1, 50) // 3410、獲取參數的平均值
我們可以使用 reduce 方法來獲取我們在此函數中提供的參數的平均值。
const average = (...args) => args.reduce((a, b) => a + b) / args.length;
average(1, 2, 3, 4, 5); // 311、將數字截斷為固定小數點
使用 Math.pow() 方法，可以將一個數字截斷為我們在函數中提供的某個小數點。
const round = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d)
round(1.005, 2) //1.01
round(1.555, 2) //1.5612、計算兩個日期相差天數
有時候我們需要計算兩個日期之間的天數，一行代碼就可以搞定。
const diffDays = (date, otherDate) => Math.ceil(Math.abs(date - otherDate) / (1000 * 60 * 60 * 24));
diffDays(new Date("2021-11-3"), new Date("2022-2-1")) // 9013、從日期中獲取一年中的哪一天
如果我們想知道某個日期是一年中的哪一天，我們只需要一行代碼即可實現。
const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / (1000 * 60 * 60 * 24))
dayOfYear(new Date()) // 7414、生成一個隨機的十六進制顏色
如果你需要一個隨機的顏色值，這個函數就可以了。
const randomColor = () => `#${Math.random().toString(16).slice(2, 8).padEnd(6, '0')}`
randomColor() // #9dae4f
randomColor() // #6ef10e15、將RGB顏色轉換為十六進制
const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
rgbToHex(255, 255, 255) // '#ffffff'16、清除所有cookies
const clearCookies = () => document.cookie.split(';').forEach((c) => (document.cookie = c.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date().toUTCString()};path=/`)))17、檢測暗模式
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches18、交換兩個變量
[foo, bar] = [bar, foo]19、暫停一會
我們的日常開發工作中，文本溢出截斷省略是很常見的一種需考慮的業務場景細節。看上去 “稀松平常” ，但在實現上卻有不同的區分，是單行截斷還是多行截斷？多行的截斷判斷是基于行數還是基于高度？這些問題之下，都有哪些實現方案？他們之間的差異性和場景適應性又是如何？
一般來說，在做這樣文字截斷效果時我們更多是希望：
基于上述的準則，下面我們通過編碼實踐，給出一些答案。
核心 CSS 語句
優點
短板
適用場景
Demo
<div class="demo">
床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光
</div>.demo {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
效果示例
核心 CSS 語句
優點
短板
適用場景
Demo
<div class="demo">
床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光
</div>
.demo {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
效果示例
核心 CSS 語句
優點
短板
適用場景
Demo
<div class="demo">
床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光
</div>
.demo {
position: relative;
line-height: 18px;
height: 36px;
overflow: hidden;
word-break: break-all;
}
.demo::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
/* 為了展示效果更好 */
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}
效果示例
核心 CSS 語句
優點
短板
適用場景
Demo
<div class="demo">
<div class="text">
床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光
</div>
</div>
.demo {
height: 40px;
line-height: 20px;
overflow: hidden;
}
.demo .text {
float: right;
margin-left: -5px;
width: 100%;
word-break: break-all;
}
.demo::before {
float: left;
width: 5px;
content: "";
height: 40px;
}
.demo::after {
float: right;
content: "...";
height: 20px;
line-height: 20px;
padding-right: 5px;
text-align: right;
width: 3em;
margin-left: -3em;
position: relative;
left: 100%;
top: -20px;
padding-right: 5px;
/* 為了展示效果更好 */
background: -webkit-gradient(
linear,
left top,
right top,
from(rgba(255, 255, 255, 0)),
to(white),
color-stop(50%, white)
);
background: -moz-linear-gradient(
to right,
rgba(255, 255, 255, 0),
white 50%,
white
);
background: -o-linear-gradient(
to right,
rgba(255, 255, 255, 0),
white 50%,
white
);
background: -ms-linear-gradient(
to right,
rgba(255, 255, 255, 0),
white 50%,
white
);
background: linear-gradient(
to right,
rgba(255, 255, 255, 0),
white 50%,
white
);
}
效果示例
原文鏈接：https://blog.csdn.net/weixin_41978102/article/details/105158024
世界有超過 1000 萬 Javascript 開發人員，而且這個數字每天都在增加。盡管 JavaScript 以其動態特性而聞名，但它還具有許多其他出色的特性。在這篇博客中，我們將看到 10 個有用的 JavaScript 單行代碼，你應該知道它們來提高你的工作效率。
在很多情況下，我們需要在一個范圍內生成一個隨機數。Math.random() 函數可以為我們生成一個隨機數，然后我們可以將其轉換為我們想要的范圍。
const max = 20;
const min = 10;
// Math.floor() 返回小于或等于一個給定數字的最大整數。
// Math.random() 返回一個浮點型偽隨機數字，在0（包括0）和1（不包括）之間。
const random = Math.floor(Math.random() * (max - min + 1)) + min;
console.log(random);
//output: 17
//output: 10
有幾種不同的方法可以反轉字符串。這是最簡單的一個，使用 split() 、reverse() 和 join() 方法。
?split() 方法使用指定的分隔符字符串將一個String對象分割成子字符串數組。 ?reverse() 方法將數組中元素的位置顛倒，并返回該數組?join() 方法將一個數組（或一個類數組對象）的所有元素連接成一個字符串并返回這個字符串。如果數組只有一個項目，那么將返回該項目而不使用分隔符。
reverse = (str) => str.split('').reverse().join('');
const str = 'hello world';
console.log(reverse(str));
// output: dlrow olleh
適用于元素隨機顏色生成的場景
?padEnd() 方法會用一個字符串填充當前字符串（如果需要的話則重復填充），返回填充后達到指定長度的字符串。從當前字符串的末尾（右側）開始填充。
'#' +
Math.floor(Math.random() * 0xffffff)
.toString(16)
.padEnd(6, '0');
console.log(color);
//output: #ed19ed在使用隨機算法時，數組的隨機排序是一項經常用到的場景，在 JavaScript 中，我們沒有模塊像python 中的 random.shuffle() 方法一樣實現數組元素的隨機排序，但仍然有一種方法只需一行代碼就可以將數組的所有元素隨機排序。
const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());
const arr = Array.from({ length: 10 }, (_, i) => i + 1);
console.log('array: ', arr);
console.log('shuffled array: ', shuffleArray(arr));
//output:
// array: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// shuffled array: [5, 7, 8, 9, 1, 2, 3, 4, 10, 6]初學者經常會發現自己很難正確地將元素滾動到視圖中。滾動元素最簡單的方法是使用 scrollIntoView() 方法。
//Add behavior: "smooth" for a smooth scrolling animation.
const scrollToTop = (element) =>
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
const scrollToBottom = (element) =>
element.scrollIntoView({ behavior: 'smooth', block: 'end' });如果您希望您顯示的內容遵循使用您網站的人的配色方案，JavaScript 包含一種檢測某人是否使用暗色主題的方法，以便您可以相應地調整顏色。
const isDarkMode1 =
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches;
// 如果您想將其用作函數
const isDarkMode2 = () =>
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches;
console.log(isDarkMode1);
console.log(isDarkMode2());
//output:
// true
// true將文本復制到剪貼板非常有用，也是一個難以解決的問題。您可以在網上找到各種解決方案，但下面的解決方案可能是最簡潔和最聰明的解決方案之一。
const copyToClipboard = (text) =>
navigator.clipboard?.writeText && navigator.clipboard.writeText(text);確定如用戶的年齡時，你必須計算從某個時間點到現在已經過去的天數。
const ageDays = (old, recent) =>
Math.ceil(Math.abs(old - recent) / (1000 * 60 * 60 * 24)) + ' Day(s)';
const firstDate = new Date('2021-06-10');
const secondDate = new Date('2022-03-03');
console.log(ageDays(firstDate, secondDate));
// output: 266 Day(s)Javascript 中的 Math.random 函數可用于生成范圍之間的隨機數。要生成隨機布爾值，我們需要隨機獲取 0 到 1 之間的數字，然后檢查它是大于還是小于 0.5。
const randomBoolean = () => Math.random() >= 0.5;
console.log(randomBoolean());
// output: false我們可以使用 navigator.platform 來檢查瀏覽器運行的平臺。
const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
console.log(navigator.platform);
console.log(isAppleDevice);
// output:
// Win32
// false注意：此屬性的推薦替代方案是 navigator.userAgentData.platform。但是，navigator.userAgentData.platform 還沒有被一些主流瀏覽器支持，并且定義它的規范還沒有被任何標準組采用（具體來說，它不是 W3C 或 WHATWG 發布的任何規范的一部分）。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
