文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

9个JavaScript技巧分别是哪些

2024-04-02 19:55

关注

本篇文章为大家展示了9个JavaScript技巧分别是哪些,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

1. 生成指定范围的数字

9个JavaScript技巧分别是哪些

在某些情况下,我们会创建一个处在两个数之间的数组。假设我们要判断某人的生日是否在某个范围的年份内,那么下面是实现它的一个很简单的方法:

let start = 1900, end = 2000; [...new Array(end + 1).keys()].slice(start); // [ 1900, 1901, ..., 2000]  // 还有这种方式,但对于很的范围就不太稳定 Array.from({ length: end - start + 1 }, (_, i) => start + i);

2. 使用值数组作为函数的参数

在某些情况下,我们需要将值收集到数组中,然后将其作为函数的参数传递。使用 ES6,可以使用扩展运算符(...)并从[arg1, arg2] >  (arg1, arg2)中提取数组:

const parts = {   first: [0, 2],   second: [1, 3], }  ["Hello", "World", "JS", "Tricks"].slice(...parts.second) // ["World", "JS"]

3. 将值用作 Math 方法的参数

当我们需要在数组中使用Math.max或Math.min来找到最大或者最小值时,我们可以像下面这样进行操作:

const elementsHeight =  [...document.body.children].map(   el => el.getBoundingClientRect().y ); Math.max(...elementsHeight); // 474  const numbers = [100, 100, -1000, 2000, -3000, 40000]; Math.min(...numbers); // -3000

4. 合并/展平数组中的数组

Array  有一个很好的方法,称为Array.flat,它是需要一个depth参数,表示数组嵌套的深度,默认值为1。但是,如果我们不知道深度怎么办,则需要将其全部展平,只需将Infinity作为参数即可

const arrays = [[10], 50, [100, [2000, 3000, [40000]]]]  arrays.flat(Infinity) // [ 10, 50, 100, 2000, 3000, 40000 ]

5. 防止代码崩溃

在代码中出现不可预测的行为是不好的,但是如果你有这种行为,你需要处理它。

例如,常见错误TypeError,试获取undefined/null等属性,就会报这个错误。

const found = [{ name: "Alex" }].find(i => i.name === 'Jim')  console.log(found.name) // TypeError: Cannot read property 'name' of undefined

我们可以这样避免它:

const found = [{ name: "Alex" }].find(i => i.name === 'Jim') || {}  console.log(found.name) // undefined

6. 传递参数的好方法

对于这个方法,一个很好的用例就是styled-components,在ES6中,我们可以将模板字符中作为函数的参数传递而无需使用方括号。如果要实现格式化/转换文本的功能,这是一个很好的技巧:

const makeList = (raw) =>   raw     .join()     .trim()     .split("\n")     .map((s, i) => `${i + 1}. ${s}`)     .join("\n");  makeList` Hello, World Hello, World `; // 1. Hello,World // 2. World,World

7. 交换变量

使用解构赋值语法,我们可以轻松地交换变量 使用解构赋值语法:

let a = "hello" let b = "world"  // 错误的方式 a = b b = a // { a: 'world', b: 'world' }  // 正确的做法 [a, b] = [b, a] // { a: 'world', b: 'hello' }

8. 按字母顺序排序

需要在跨国际的项目中,对于按字典排序,一些比较特殊的语言可能会出现问题,如下所示:

// 错误的做法 ["a", "z", "ä"].sort((a, b) => a - b); // ['a', 'z', 'ä']  // 正确的做法 ["a", "z", "ä"].sort((a, b) => a.localeCompare(b)); // [ 'a', 'ä', 'z' ]

localeCompare() :用本地特定的顺序来比较两个字符串。

9. 隐藏隐私

最后一个技巧是屏蔽字符串,当你需要屏蔽任何变量时(不是密码),下面这种做法可以快速帮你做到:

const password = "hackme"; password.substr(-3).padStart(password.length, "*"); // ***kme


上述内容就是9个JavaScript技巧分别是哪些,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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