「查缺补漏」一些 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 (
        

            { _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 (
                                                key = {i}
                          style = { {...el,..._threeOptionsStyle,backgroundImage:((isRight && _index === i) ? `url(${BOTTOM_CORRECT_BG})` : `url(${BOTTOM_PROMPT_BG})`)} }
                      >
                      

                  )
              })
          }