「查缺補漏」一些 Javascript 的小技巧筆記

前言

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

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

快速取整數(shù)

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

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

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

是不是get一個小技巧呢?

獲取數(shù)組的最大最小值

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

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

特殊字符串的排序

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

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

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

這個返回值有三個?

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

舉個例子?

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

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

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

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

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

是不是get一個小技巧呢

在條件中使用邏輯與或

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

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

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

    )
}

哈哈哈，get一個小技巧?

合理布局樣式

最近在用react開發(fā)中，又get到一個小技巧，這里分享一下，我們經(jīng)常會遇到布局，那么如何優(yōu)雅的布局呢?

舉個例子?，拿到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中，我們定義好了這些數(shù)據(jù)后，應(yīng)該如何去渲染呢?

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

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

                  )
              })
          }