「查缺補漏」一些 Javascript 的小技巧筆記
???
前言
這篇文章的話，分享一些最近使用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 ( <div style = {style}> { _mode === MODE.NORMAL && this._renderFourOptionsBg()} {/* 正確錯誤,提示的效果顯示 */} {isRight && this._renderCorrectBg()} </div> ) }
哈哈哈，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 ( <div> { _threeBaseStyle.map((el,i) => { return ( <div key = {i} style = { {...el,..._threeOptionsStyle,backgroundImage:((isRight && _index === i) ? `url(${BOTTOM_CORRECT_BG})` : `url(${BOTTOM_PROMPT_BG})`)} } > </div> ) }) } </div> ) }
合理的減少代碼量，也算是開發中的一個小技巧吧??
產生隨機不重復id
當你有這個需求的時候，希望產生隨機且不同的id時，這時，我們應該使用什么方式呢??
有個不錯的方式??「隨機數+時間戳」
1.首先使用Math.random() 產生0~1之間的約16~17位的浮點數，再通過toString(36)方法縮短其位數。
// 通常而言,這個n是自己定的 Math.random().toString(36).substr(2,n)
2.使用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")
