9个JavaScript日常开发小技巧


Posted in Javascript onOctober 06, 2020

1.生成指定范围的数字

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

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

掌握这些小技巧,在日常开发过程中可以避免很多不必要的错误,更多关于JavaScript日常开发小技巧请查看下面的相关链接

Javascript 相关文章推荐
jquery 延迟执行实例介绍
Aug 20 Javascript
JQuery筛选器全系列介绍
Aug 27 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
Javascript this 关键字 详解
Oct 22 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 Javascript
通过原生vue添加滚动加载更多功能
Nov 21 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 Javascript
详解ES6中class的实现原理
Oct 03 #Javascript
在vue中使用Echarts画曲线图的示例
Oct 03 #Javascript
vue 虚拟DOM的原理
Oct 03 #Javascript
vue使用video插件vue-video-player的示例
Oct 03 #Javascript
区分vue-router的hash和history模式
Oct 03 #Javascript
Vue双向数据绑定(MVVM)的原理
Oct 03 #Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 #Javascript
You might like
php函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
php判断终端是手机还是电脑访问网站的思路及代码
2013/04/24 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
基于PHP生成简单的验证码
2016/06/01 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
newxtree.js代码
2007/03/13 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
2014/02/21 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
jQuery链使用指南
2015/01/20 Javascript
理解Angular数据双向绑定
2016/01/10 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
python实现给数组按片赋值的方法
2015/07/28 Python
Python切片操作深入详解
2018/07/27 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
python图形用户接口实例详解
2019/12/16 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
struct和class的区别
2015/11/20 面试题
产品销售员岗位职责
2013/12/18 职场文书
好学生评语大全
2014/05/05 职场文书
工地标语大全
2014/06/18 职场文书
组工干部对照检查材料
2014/08/25 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
红色革命电影观后感
2015/06/18 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
详解运行Python的神器Jupyter Notebook
2021/06/03 Python