前言

這篇文章的話，分享一些最近使用React開發項目時，用到的小技巧,其實也算是JavaScript中的一些技巧吧，內容主要有一下幾點?

• 產生隨機不重復id
• 快速取整數
• 合理布局樣式
• 字符串xml的轉換
• 特殊字符串的排序
• 獲取數組的最大最小值
• 在條件中使用邏輯與或

---

快速取整數

在JavaScript中去整數的話，最常見的是Math.round()進行四舍五入，Math.floor()以及Math.ceil()等方法取整數。接下來還有一種去整數的方法?

const?num?=?Math.random()?*?100
console.log(num)???//?隨機數字
console.log(~~num)?//?取得整數的部分

這樣子，也是一種很方便，而且很容易記住的方法來獲取整數。

是不是get一個小技巧呢?

---

獲取數組的最大最小值

這是最近遇到的一個小問題，當然了，求解這個問題不是難點，我覺得這是一個小技巧，所以就分享出來?

const?numbers?=?[1,?2,?3,?99,?4,?4,?-1];
const?maxNumber?=?Math.max.apply(Math,?numbers);
const?minNumber?=?Math.min.apply(Math,?numbers);

---

特殊字符串的排序

最近在排序字母的時候，遇到一點小問題，這次把它給分享出來?

使用的是「localeCompare」這個函數，那它的返回值是哪些

首先，它返回一個數字表示是否 「引用字符串」 在排序中位于 「比較字符串」 的前面，后面，或者二者相同。

這個返回值有三個?

• 當 「引用字符串」 在 「比較字符串」 前面時返回 -1
• 當 「引用字符串」 在 「比較字符串」 后面時返回 1
• 相同位置時返回 0

舉個例子?

'a'.localeCompare('c')
//?返回的值是?-1
'check'.localeCompare('against')?
//?返回的值是?1

'a'.localeCompare('a')
//?返回的值是?0

掌握了基本的使用方法，排序數組就很簡單了?

const?strList?=?['a','d','f','h','e']
strList.sort((a,?b)?=>?a.localeCompare(b))
console.log(strList)

//?["a",?"d",?"e",?"f",?"h"]

是不是get一個小技巧呢

---

在條件中使用邏輯與或

最近項目中，學會得一個小技巧，就是邏輯與或去渲染對應的場景，通過state中的isRight來更新答錯答錯的效果。

render() {
const {
_gameContainer,
_optionStyle,
_mode,
state: {
isRight
}
} = this
let style = {}

return (

{ _mode === MODE.NORMAL && this._renderFourOptionsBg()}
{/* 正確錯誤,提示的效果顯示 */}
{isRight && this._renderCorrectBg()}
)
}

哈哈哈，get一個小技巧?

---

合理布局樣式

最近在用react開發中，又get到一個小技巧，這里分享一下，我們經常會遇到布局，那么如何優雅的布局呢?

舉個例子?，拿到UI時，有三個按鈕樣式基本上一樣，就是定位不同，那么我們可以這樣子來寫?

//?三個按鈕的基本樣式
this._threeBaseStyle?=?Array(3).fill(null).map(?(_,?i)?=>?{
??const?left?=?(757?+?i?*?(238?+?21))?*?scale?-?leftCut
??return?{
??????position:?'absolute',
??????width:?238?*?scale,
??????height:?59?*?scale,
??????top:?596?*?scale,
??????left,
??????backgroundSize:?'100%?100%',
??}
})

//?每個不同按鈕的具體信息
this._threeOptionsStyle?=?[{
??top:?159?*?scale,
??left:?1340?*?scale?-?leftCut,
},{
??top:?253.6?*?scale,
??left:?1431.4?*?scale?-?leftCut,
},{
??top:?347.3?*?scale,
??left:?1339.6?*?scale?-?leftCut,
}]

在react中，我們定義好了這些數據后，應該如何去渲染呢?

_renderBottomEleBg() {
const {
_threeBaseStyle,
_threeOptionsStyle,
state: {
isRight,
userAnswer
}
} = this
const _index = this._options.findIndex(e => e === userAnswer)
return (

{
_threeBaseStyle.map((el,i) => {
return (
style = { {...el,..._threeOptionsStyle,backgroundImage:((isRight && _index === i) ? `url(${BOTTOM_CORRECT_BG})` : `url(${BOTTOM_PROMPT_BG})`)} }
>
)
})
}

)
}

合理的減少代碼量，也算是開發中的一個小技巧吧?

---

產生隨機不重復id

當你有這個需求的時候，希望產生隨機且不同的id時，這時，我們應該使用什么方式呢?

有個不錯的方式?「隨機數+時間戳」

首先使用Math.random() 產生0~1之間的約16~17位的浮點數，再通過toString(36)方法縮短其位數。

//?通常而言,這個n是自己定的
Math.random().toString(36).substr(2,n)??

使用Date.now() 獲取目前毫秒數，一共13位，同樣可以通過這個toString(36)的方法縮短其位數。

//?n自己來規定大小

Date.now().toString(36).substr(0,n)

//Date.now().toString(36).substr(0,4)

那么他們兩個組合在一起的話，應該就不可能有重復的啦?

Date.now().toString(36).substr(0,n)?+?Math.random().toString(36).substr(2,n)??

---

字符串xml的轉換

你是不是遇到過在JavaScript中獲取XML，但是得到的東西又不是你想要的東西呢，那么有沒有更加簡單的方法呢？接下來我們看看下面所提到的?

「XML轉字符串String」?

xmlToString?=?(new?XMLSerializer()).serializeToString(xmlObject)

字符串轉XML

?stringToXML?=?(new?DOMParser()).parseFromString(xmlString,?"text/xml")

---

掃碼關注公眾號，訂閱更多精彩內容。

你點的每個贊，我都認真當成了喜歡

總結

以上是生活随笔為你收集整理的javascript取随机数_查缺补漏一些 Javascript 的小技巧笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。