文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

七个我在工作中经常使用的 JavaScript 技巧

2024-12-01 14:17

关注

ES6 给我们编程带来了很多便利,以前用大量代码实现的功能现在变得非常简洁。

本文总结了我在工作中经常使用的 7 个 JavaScript 技巧,希望对你也有帮助。

1. 找出数组中的最大值或最小值

有时,我们需要找到数组中的最大值,你通常是怎么做的?

解决方案 1​

我们可以先对数组进行排序,然后,数组的最后一项就是最大值。

const array = [ 1, 10, -19, 2, 7, 100 ]
array.sort((a, b) => a - b)
console.log('max value', array[ array.length - 1 ])
console.log('min value', array[ 0 ])

解决方案 2​

还有其他解决方案吗?是的,我们可以使用“Math.max”轻松处理它。

const array = [ 1, 10, -19, 2, 7, 100 ]
console.log('max value', Math.max(...array))
console.log('min value', Math.min(...array))

2.计算数组的总和

如果有一个数字数组,得到它们总和的最快方法是什么?

const array = [ 1, 10, -19, 2, 7, 100 ]
const sum = array.reduce((sum, num) => sum + num)

3. 从数组中获取随机值

给你一个数组,现在你想从中获取一个随机值,你怎么做呢?

const array = [ 'fatfish', 'fish', 24, 'hello', 'world' ]
const getRandomValue = (array) => {
return array[ Math.floor(Math.random() * array.length) ]
}
console.log(getRandomValue())
console.log(getRandomValue())
console.log(getRandomValue())

4.随机打乱数组的值

我们在抽奖的时候,需要打乱抽奖顺序。

const prizes = [ '📱', '🍫', '🍵', '🍔' ]
prizes.sort(() => 0.5 - Math.random())
console.log(prizes)
prizes.sort(() => 0.5 - Math.random())
console.log(prizes)

5. 展平多层阵列

现在我们有了一个多维嵌套数组,如何将其铺成一维数组?

解决方案 1

const array = [ 1, [ 2, [ 3, [ 4, [ 5 ] ] ] ] ]
const flattenArray = (array) => {
return array.reduce((res, it) => {
return res.concat(Array.isArray(it) ? flattenArray(it) : it)
}, [])
}
console.log(flattenArray(array))

解决方案 2

事实上,我们有一个更简单的方法来解决它。关于flat,我们来看看MDN的解释:

flat() 方法创建一个新数组,其中所有子数组元素递归连接到指定深度。

const array = [ 1, [ 2, [ 3, [ 4, [ 5 ] ] ] ] ]
console.log(array.flat(Infinity))

6.检查数组是否包含值

过去,我们总是使用“indexOf”方法来检查数组是否包含值。如果“indexOf”返回的值大于-1,则表示有一个。

const array = [ 'fatfish', 'hello', 'world', 24 ]
console.log(array.indexOf('fatfish'))
console.log(array.indexOf('medium'))

但是,现在数据比较复杂,我们将无法通过 indexOf 方法直接确认数组中是否存在“fatfish”。幸运的是,ES6 中提供了 findIndex 方法。

const array = [
{
name: 'fatfish'
},
{
name: 'hello'
},
{
name: 'world'
},
]
const index = array.findIndex((it) => it.name === 'fatfish') // 0

7.使用“includes”方法进行判断

你一定见过这样的判断方法,虽然,可以达到条件判断的目的,但是,看起来很繁琐。

const value = 'fatfish'
if (value === 'fatfish' || value === 'medium' || value === 'fe') {
console.log('hello world')
}

我们可以使用includes方法让代码更简单甚至更可扩展。

const conditions = [ 'fatfish', 'medium', 'fe' ]
const value = 'fatfish'
if (conditions.includes(value)) {
console.log('hello world')
}

最后

以上就是我今天跟你分享的7个我在工作中经常使用的ES6技巧,希望这些技巧也能够帮助到你

来源:web前端开发内容投诉

免责声明:

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

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

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

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

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

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

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

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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