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 相关文章推荐
javascript定义函数的方法
Dec 06 Javascript
js汉字转拼音实现代码
Feb 06 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 Javascript
禁止ajax缓存获取程序最新数据的方法
Nov 19 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
JavaScript事件委托的技术原理探讨示例
Apr 17 Javascript
JavaScript中的分号插入机制详细介绍
Feb 11 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
Apr 24 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
vue实例的选项总结
Jun 09 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
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
PHP统计目录大小的自定义函数分享
2014/11/18 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
微信小程序 引入es6 promise
2017/04/12 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
django+js+ajax实现刷新页面的方法
2017/05/22 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
Python中内建模块collections如何使用
2020/05/27 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
用python 绘制茎叶图和复合饼图
2021/02/26 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
煤矿安全生产标语
2014/06/06 职场文书
党员教师四风自我剖析材料
2014/09/30 职场文书
思想道德自我评价2015
2015/03/09 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang