9 个JavaScript 技巧
时间:2022-07-26
本文章向大家介绍9 个JavaScript 技巧,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【容器技术】Docker容器技术入门(二)
- Mysql+Mycat实现数据库主从同步与读写分离
- 性能优化|Tomcat 服务优化
- zookeeper技术介绍
- Nosql数据库服务之redis
- 计算机网络基础:这是一份详细HTTP学习指南
- Docker容器技术之Docker file
- 学会这15点,让你分分钟拿下Redis数据库
- 服务器性能指标——负载(Load)分析及问题排查
- 这20个Docker Command,有几个是你会的?
- Redis 备份、容灾及高可用实战
- 容器技术|Docker三剑客之Compose
- ProxySQL+Mysql实现数据库读写分离实战
- 打造高逼格、可视化的Docker容器监控系统平台
- 企业面试题|最常问的MySQL面试题集合(一)