文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

「查缺补漏」一些 Javascript 的小技巧笔记

2024-12-10 16:09

关注

 前言

这篇文章的话,分享一些最近使用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 (                                              
                   )               })           }       
   ) } 

合理的减少代码量,也算是开发中的一个小技巧吧🤭

产生随机不重复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") 




来源:前端UpUp内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯