记录--JavaScript 中有趣的 9 个常用编码套路
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助
1️⃣ set对象:数组快速去重
常规情况下,我们想要筛选唯一值,一般会想到遍历数组然后逐个对比,或者使用成熟的库比如lodash
之类的。
不过,ES6
带来了一个新玩意儿!它引入了一个全新的对象类型:Set
!而且,如果结合上...
展开运算符,我们可以超级快速地创建一个已经去重的全新数组!
const arr = [10, 10, 10, 20, 20, 30, 40, 40, 50, 60, 60, 70];
const uniArr = [...new Set(array)];
console.log(uniArr);
// [10, 20, 30, 40, 50, 60, 70]
这个技巧只适用于包含基本类型的数组,比如undefined
、null
、boolean
、string
和number
。
但是要记住哦,如果数组里面还有对象、函数或其他数组的话,就不能用这个方法了!
2️⃣ include方法:简化( ||
或)条件判断
当我们使用逻辑运算符||
进行条件判断时,如果有很多可选值,代码会变得冗长。
不过,我们可以使用includes
方法来简化对数组的遍历操作,方便地判断数组是否包含某个特定的元素。
这样一来,我们就可以更简洁地列出可选值,而不必写一长串的条件判断语句。includes
方法可以帮助我们轻松判断数组中是否存在指定的元素
const myNum = '3';
const numArr = ['1', '2', '3'];
// 使用 ||
if (myNum === '1' || myNum === '2' || myNum === '3') {
//……
}
// 使用 include
if (numArr.includes(myNum)) {
//……
}
3️⃣ 截断数组:改变length就可以
操作数组时,我们通常会优先使用array
对象中的高级函数。
不过,我这里要介绍一种更简单的方法来改变数组长度,我喜欢它的原因是它非常直观且易读。
只需使用length
属性并传递一个数字,就可以改变数组的长度。这样做非常方便!
let array = ['1', '2', '3', '4'];
array.length = 2;
console.log(array); // ['1', '2']
当然 ,如果你更注重性能,还是请使用 array.slice()
4️⃣ 数字分割符: 提高数字可读性
若要提高数字的可读性,你可以使用下划线作为分隔符来更好地区分数字的各个部分。这样做可以让数字更易读,让人一目了然
const num = 1_000_000_000;
console.log(num); // 1000000000
5️⃣ 控制台打印:用对象包裹更清晰
在使用console.log()
时,你可以将参数括在大括号中,这样可以在控制台输出时同时显示变量的名称和值。这种方式非常方便,让你更清晰地了解每个变量的内容
const name = "道长王jj";
console.log({ name });
// {
// "name": "道长王jj"
// }
6️⃣ 短路运算:简化条件判断
if...else
条件判断是代码过程中最常用的,几乎在任何情况下,我们都会快速地敲下它来控制逻辑流程。
不过,有时候我们也希望代码更加简洁、快速,不占那么多篇幅。我们想尽可能地简洁且快速,于是就会用到三元运算符:
const num = 75;
const result1 = num > 100 ? '大于100' : '小于100';
但是我在这里并不是推荐使用“三元运算”,其实有时候三元运算符可能会让代码逻辑变得有点复杂哦!比如这样:
const result2 = num > 100 ? (num > 200 ? '大于200' : '介于100和200之间') : '小于100';
这个时候,使用 &&
和 ||
这类逻辑运算符反而能更简洁的表达算式。
举个例子:
// 假设,我们有三个已经打过分的相亲对象必须选择一个来当女朋友,使用 `&&` 可以很好的帮我们做出选择。
const one = 8;
const two = 9;
const three = 10;
// 返回10
console.log(one && two && three);
// 返回0
console.log(0 && null);
// 当然,如果你足够独特~~(变态)~~,就是不要女朋友,如果选只选最差的,你可以使用 `||` 来帮你做吹选择。
const one = 8;
const two = 9;
const three = 10;
// 返回8
console.log(one || two || three);
// 返回null
console.log(0 || null);
哦,这个情况在工作场景中确实很常见。
假设我们想返回变量的 length
,但我们不确定接口会不会给我们需要的类型。
这个时候我们就可以使用 if/else
语句来检查是可接受的类型,但它会让我们的代码非常臃肿。
这时候,我们可以使用短路运算来简化代码,而且有极高的健壮性:
// 使用if
let temp = getArray();
if (!temp) {
tempLength = 0;
} else {
tempLength = temp.length
}
// 使用 ||
// 如果变量 tempArray 为真,则将返回该变量。否则,将返回 []
const temp = (tempArray || []).length;
7️⃣ 可选链:更加安全地访问对象属性
你有没有遇到过访问嵌套对象属性的困扰?
就是有时候你根本不确定这个对象或者它的子属性到底存不存在,结果就报错了!以至于程序崩溃无法运行
console.log(abc.ss)
// ceError: abc is not defined
// at <anonymous>:1:1
// (匿名) @ VM190795
为了不让报错阻止我们的程序运行,我们通常会将它包装在一个if……else代码块中:
if (abc.ss) {
console.log(abc.ss);
} else {
console.log('没有abc这个变量喏~');
}
// 还可以用短路运算
console.log(abc && abc.ss)
8️⃣ 巧用运算符:快速类型转换
在这之前需要科普一些小知识:
除了常规的true
和false
之外,其他变量也可以被当成true
或者 false
。
除了0
、""(空字符串)
、null
、undefined
、NaN
、false
之外呢,JavaScript中的所有其他值都是"真的"哦!
所以呢,基于这个认知。
我们可以使用负运算符 !
,将类型转换为 "boolean"
。
const x = Boolean(expression); // 推荐
const x = !!(expression); // 推荐
const x = new Boolean(expression); // 不太好
我们可以使用连接运算符 +
后跟一组空引号 ''
,将类型转换为 "string"
。
const value = 12 + '';
console.log(value); // '12'
我们可以使用加法运算符 +
,将类型转换为 "number"
。
const value = '12';
value = value + 1;
console.log(value); // 13
// 当然也可以转换 Boolean 变成 Number
// 工作中不推荐这样用!!!!
console.log(+true); // 1
console.log(+false); // 0
9️⃣ 快速运算:更快更简洁的数学运算操作符
以前我们在使用JavaScript进行数学运算时,总是要借助Math
库进行运算。
很奇怪的是,但是很多教程并没有提醒我们,ES7
其实带来的全新运算符
如果想示乘方操作,通常我们会调用Math.pow(5, 7)
这个方法。但是现在我们可以使用幂运算符**
了,而且性能更快更好。
console.log(5 ** 7); // 78125
如果想将浮点数转换为整数,通常我们会使用Math.floor()
、Math.ceil()
或Math.round()
这些方法。不过,其实可以使用 |
将浮点数直接截断为整数。这个技巧可以让你的代码更简洁高效哦!
// 正数,则向下舍入
console.log(34.9 | 0); // Result: 34
// 负数,则向上舍入
console.log(-12.9 | 0); // Result: -12
以前我们只取千分位需要进行类型转换后才能进行取数
let str = "33545";
Number(str.substring(0, str.length - 3)); // 33
但是我们可以更优雅地这样做:
console.log(33545 / 1000 | 0) // Result: 33
本文转载于:
https://juejin.cn/post/7239895900297740344
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
记录--JavaScript 中有趣的 9 个常用编码套路的更多相关文章
- Javascript中的string类型使用UTF-16编码
2019独角兽企业重金招聘Python工程师标准>>> 在JavaScript中,所有的string类型(或者被称为DOMString)都是使用UTF-16编码的. MDN DOMS ...
- 记录JavaScript中使用keyup事件做输入验证(附event.keyCode表)
input的blur事件 $("#input-name").blur(function () { var value = $(this).val(); if (value === ...
- 浅析 JavaScript 中的 函数 uncurrying 反柯里化
柯里化 柯里化又称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果. 因此柯里化的过程是 ...
- URL地址中中文乱码详解(javascript中encodeURI和decodeURI方法、java.net.URLDecoder.encode、java.net.URLDecoder.decode)
引言: 在Restful类的服务设计中,经常会碰到需要在URL地址中使用中文作为的参数的情况,这种情况下,一般都需要正确的设置和编码中文字符信息.乱码问题就此产生了,该如何解决呢?且听本文详细道来. ...
- JavaScript 中常用的 正则表达式
这编文章我来整理了一些在 javascript 中常用的正则式希望能给大家带来一些开发的灵感 //校验是否全由数字组成 function isDigit(s) { var patrn=/^[0-9]{ ...
- javascript中数组常用的方法和属性
前言 在javascript中,数组是一种非常重要的数据类型,我们时常会和它打交道,最近在开发项目中频繁的使用到数组,但是自己对数组的众多方法已经是非常模糊了,为了方便自己以后能够更好的使用数组中的属 ...
- 如何理解JavaScript中常用的4种排序算法?
如何理解JavaScript中常用的4种排序算法? 冒泡排序 冒泡排序是我们在编程算法中,算是比较常用的排序算法之一,在学习阶段,也是最需要接触理解的算法,所以我们放在第一个来学习. 算法介绍: ...
- javascript中数组常用的方法
在JavaScript中,数组可以使用Array构造函数来创建,或使用[]快速创建,这也是首选的方法.数组是继承自Object的原型,并且他对typeof没有特殊的返回值,他只返回'object'. ...
- JavaScript中常用函数(入门级)(持续更新)
本文中枫竹梦介绍一些JavaScript中入门级的常用函数,对于已经过了入门的童鞋可选择略过,都是一些非常实用的函数.如果发现什么问题,欢迎讨论. 问题列表 Q1: 设计一个函数repeatIt(st ...
- Javascript中最常用的55个经典技巧
Javascript中最常用的55个经典技巧1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键<table ...
随机推荐
- NC16527 [NOIP2013]货车运输
题目链接 题目 题目描述 A 国有 n 座城市,编号从 1 到 n ,城市之间有 m 条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有 q 辆货车在运输货物, 司机们想知道每辆车在不超过车辆 ...
- Python 装饰器解析(一)
装饰器用于在源码中"标记"函数,以增强函数的行为. 我们先来看下面的例子,现有一个求和函数add,现在要求统计函数执行的时长 def add(a, b): print(a+b) 最 ...
- python 学习随笔1121
Python 数据处理几个好用又简单的库: json re string pandas 与系统交互: subprocess os
- 玩转 CMS2
玩转 CMS2 上篇研究了样式.请求.evn.mock,感觉对效率的提升没有太明显作用. 比如某个工作需要2天,现在1天可以干完,这就是很大的提升. 提高效率的方法有代码复用.模块化.低代码工具. 目 ...
- GCC项目的文件组织和编译步骤分解
C项目的文件组织和编译 C项目的代码, 由头文件(.h后缀)和C文件(.c后缀)组成 C语言的函数和变量, 分声明和定义两个阶段 头文件和C文件是等价的, 相当于C文件的一部分, 其功能由人为划分, ...
- mktemp命令
mktemp命令 mktemp命令用于安全地创建一个临时文件或目录,并输出其名称,TEMPLATE在最后一个组件中必须至少包含3个连续的X,如果未指定TEMPLATE,则使用tmp.XXXXXXXXX ...
- SpringCloud Config配置中心实战
介绍 本文以理论结合实践编写,篇幅较长,各位看官保持耐心:),部分内容引用自网络. 什么是配置中心? 当微服务过多的时候,每个微服务的配置很难集中管理.SpringCloud Config通过git代 ...
- 为什么华为今年疯狂招od?
不知道的大家有没有发现 这两年市场不好公司用人需求紧缩 唯有华子疯狂招人 很多人都听过华为OD 但是具体是什么还是有很多人疑惑 总结以下三个部分: 1.为啥疯狂招od而不是之前的纯"外包&q ...
- crontab采坑总结
目录 crontab环境变量 脚本缺少执行权限 crontab是Linux平台实现定时任务的服务工具,通常情况下该服务会预装在发行版中,直接使用即可. 关于crontab的详细用法参考:https:/ ...
- 安装MySql失败( Microsoft Visual C++ 2013 Runtime 64bit)
参考资料:下载之家 提示你缺少什么版本就安装什么版本.64位或者32位. 文件下载地址:下载之家 不知道有没有失效,如果失效的话大家直接去下载之家搜索下载.