关键词:
作者:Haseeb Anwar
译者:前端小智
来源:medium
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
JavaScript 有很多很酷的特性,大多数初学者和中级开发人员都不知道。今天分享一些,我经常在项目中使用一些技巧。
1. 有条件地向对象添加属性
我们可以使用展开运算符号(...
)来有条件地向 JS 对象快速添加属性。
const condition = true;
const person =
id: 1,
name: 'John Doe',
...(condition && age: 16 ),
;
如果每个操作数的值都为 true
,则 &&
操作符返回最后一个求值表达式。因此返回一个对象age: 16
,然后将其扩展为person
对象的一部分。
如果 condition
为 false
,JavaScript 会做这样的事情:
const person =
id: 1,
name: '前端小智',
...(false),
;
// 展开 `false` 对对象没有影响
console.log(person); // id: 1, name: 'John Doe'
2.检查属性是否存在对象中
可以使用 in
关键字来检查 JavaScript 对象中是否存在某个属性。
const person = name: '前端小智', salary: 1000 ;
console.log('salary' in person); // true
console.log('age' in person); // false
3.对象中的动态属性名称
使用动态键设置对象属性很简单。只需使用['key name']
来添加属性:
const dynamic = 'flavour';
var item =
name: '前端小智',
[dynamic]: '巧克力'
console.log(item); // name: '前端小智', flavour: '巧克力'
同样的技巧也可用于使用动态键引用对象属性:
const keyName = 'name';
console.log(item[keyName]); // returns '前端小智'
4. 使用动态键进行对象解构
我们知道在对象解构时,可以使用 :
来对解构的属性进行重命名。但,你是否知道键名是动态的时,也可以解构对象的属性?
const person = id: 1, name: '前端小智' ;
const name: personName = person;
console.log(personName); // '前端小智'
现在,我们用动态键来解构属性:
const templates =
'hello': 'Hello there',
'bye': 'Good bye'
;
const templateName = 'bye';
const [templateName]: template = templates;
console.log(template); // Good bye
5. 空值合并 ??
操作符
当我们想检查一个变量是否为 null
或 undefined
时,??
操作符很有用。当它的左侧操作数为null
或 undefined
时,它返回右侧的操作数,否则返回其左侧的操作数。
const foo = null ?? 'Hello';
console.log(foo); // 'Hello'
const bar = 'Not null' ?? 'Hello';
console.log(bar); // 'Not null'
const baz = 0 ?? 'Hello';
console.log(baz); // 0
在第三个示例中,返回 0
,因为即使 0
在 JS 中被认为是假的,但它不是null
的或undefined
的。你可能认为我们可以用||算子但这两者之间是有区别的
你可能认为我们可以在这里使用 ||
操作符,但这两者之间是有区别的。
const cannotBeZero = 0 || 5;
console.log(cannotBeZero); // 5
const canBeZero = 0 ?? 5;
console.log(canBeZero); // 0
6.可选链 ?.
我们是不是经常遇到这样的错误: TypeError: Cannot read property ‘foo’ of null
。这对每一个毅开发人员来说都是一个烦人的问题。引入可选链就是为了解决这个问题。一起来看看:
const book = id:1, title: 'Title', author: null ;
// 通常情况下,你会这样做
console.log(book.author.age) // throws error
console.log(book.author && book.author.age); // null
// 使用可选链
console.log(book.author?.age); // undefined
// 或深度可选链
console.log(book.author?.address?.city); // undefined
还可以使用如下函数可选链:
const person =
firstName: '前端',
lastName: '小智',
printName: function ()
return `$this.firstName $this.lastName`;
,
;
console.log(person.printName()); // '前端 小智'
console.log(persone.doesNotExist?.()); // undefined
7. 使用 !!
操作符
!!
运算符可用于将表达式的结果快速转换为布尔值(true
或false
):
const greeting = 'Hello there!';
console.log(!!greeting) // true
const noGreeting = '';
console.log(!!noGreeting); // false
8. 字符串和整数转换
使用 +
操作符将字符串快速转换为数字:
const stringNumer = '123';
console.log(+stringNumer); //123
console.log(typeof +stringNumer); //'number'
要将数字快速转换为字符串,也可以使用 +
操作符,后面跟着一个空字符串:
const myString = 25 + '';
console.log(myString); //'25'
console.log(typeof myString); //'string'
这些类型转换非常方便,但它们的清晰度和代码可读性较差。所以实际开发,需要慎重的选择使用。
9. 检查数组中的假值
大家应该都用过数组方法:filter
、some
、every
,这些方法可以配合 Boolean
方法来测试真假值。
const myArray = [null, false, 'Hello', undefined, 0];
// 过滤虚值
const filtered = myArray.filter(Boolean);
console.log(filtered); // ['Hello']
// 检查至少一个值是否为真
const anyTruthy = myArray.some(Boolean);
console.log(anyTruthy); // true
// 检查所有的值是否为真
const allTruthy = myArray.every(Boolean);
console.log(allTruthy); // false
下面是它的工作原理。我们知道这些数组方法接受一个回调函数,所以我们传递 Boolean
作为回调函数。Boolean
函数本身接受一个参数,并根据参数的真实性返回 true
或 false
。所以:
myArray.filter(val => Boolean(val));
等价于:
myArray.filter(Boolean);
10. 扁平化数组
在原型 Array 上有一个方法 flat
,可以从一个数组的数组中制作一个单一的数组。
const myArray = [ id: 1 , [ id: 2 ], [ id: 3 ]];
const flattedArray = myArray.flat();
//[ id: 1 , id: 2 , id: 3 ]
你也可以定义一个深度级别,指定一个嵌套的数组结构应该被扁平化的深度。例如:
const arr = [0, 1, 2, [[[3, 4]]]];
console.log(arr.flat(2)); // returns [0, 1, 2, [3,4]]
11.Object.entries
大多数开发人员使用 Object.keys
方法来迭代对象。 此方法仅返回对象键的数组,而不返回值。 我们可以使用 Object.entries
来获取键和值。
const person =
name: '前端小智',
age: 20
;
Object.keys(person); // ['name', 'age']
Object.entries(data); // [['name', '前端小智'], ['age', 20]]
为了迭代一个对象,我们可以执行以下操作:
Object.keys(person).forEach((key) =>
console.log(`$key is $person[key]`);
);
// 使用 entries 获取键和值
Object.entries(person).forEach(([key, value]) =>
console.log(`$key is $value`);
);
// name is 前端小智
// age is 20
上述两种方法都返回相同的结果,但 Object.entries
获取键值对更容易。
12.replaceAll 方法
在 JS 中,要将所有出现的字符串替换为另一个字符串,我们需要使用如下所示的正则表达式:
const str = 'Red-Green-Blue';
// 只规制第一次出现的
str.replace('-', ' '); // Red Green-Blue
// 使用 RegEx 替换所有匹配项
str.replace(/\\-/g, ' '); // Red Green Blue
但是在 ES12 中,一个名为 replaceAll
的新方法被添加到 String.prototype
中,它用另一个字符串值替换所有出现的字符串。
str.replaceAll('-', ' '); // Red Green Blue
13.数字分隔符
可以使用下划线作为数字分隔符,这样可以方便地计算数字中0的个数。
// 难以阅读
const billion = 1000000000;
// 易于阅读
const readableBillion = 1000_000_000;
console.log(readableBillion) //1000000000
下划线分隔符也可以用于BigInt数字,如下例所示
const trillion = 1000_000_000_000n;
console.log(trillion); // 1000000000000
14.document.designMode
与前端的JavaScript有关,设计模式让你可以编辑页面上的任何内容。只要打开浏览器控制台,输入以下内容即可。
document.designMode = 'on';
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SHXiAJVx-1633998428732)(/img/bVcVdBh)]
15.逻辑赋值运算符
逻辑赋值运算符是由逻辑运算符&&
、||
、??
和赋值运算符=
组合而成。
const a = 1;
const b = 2;
a &&= b;
console.log(a); // 2
// 上面等价于
a && (a = b);
// 或者
if (a)
a = b
检查a
的值是否为真,如果为真,那么更新a
的值。使用逻辑或 ||
操作符也可以做同样的事情。
const a = null;
const b = 3;
a ||= b;
console.log(a); // 3
// 上面等价于
a || (a = b);
使用空值合并操作符 ??
:
const a = null;
const b = 3;
a ??= b;
console.log(a); // 3
// 上面等价于
if (a === null || a === undefined)
a = b;
注意:??
操作符只检查 null
或 undefined
的值。
~~ 完,我是刷碗智,点赞和在看是对我最大的支持,我会好好的刷碗的。
编辑中可能存在的bug没法实时知道,事后为了解决这些bug,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
原文:
https://betterprogramming.pub/10-modern-javascript-tricks-every-developer-should-use-377857311d79
https://betterprogramming.pub/5-cool-modern-javascript-features-most-developers-dont-know-6baf19b532da
交流
文章每周持续更新,可以微信搜索**【大迁世界 】第一时间阅读,回复【福利】**有多份前端视频等着你,本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,欢迎Star。
从61名最有影响力的javascript开发者身上,我总结出了这三大“成功秘诀”(代码片段)
作者|SasheVuchkov译者|张红月出品|CSDN(ID:CSDNnews)为了在职业发展中取得成功,我们必须在感兴趣的领域找到一些优秀的人才,并以他们为榜样,向他们学习。因为他们掌握了一些取得成功的诀窍,而... 查看详情
你们知道javascript的优雅写法及骚操作
1、判断为空小白写法优雅写法:问题:我们编写js代码时经常遇到复杂逻辑判断的情况,通常大家可以用if/else或者switch来实现多个条件判断,但这样会有个问题,随着逻辑复杂度的增加,代码中的if/else/switch会变得越来越臃肿,... 查看详情
学会这10个javascript单行代码,让你的代码更优雅(代码片段)
干货推荐:学会这10个javascript单行代码,让你的代码更优雅数组去重从url获取参数并转为对象检查对象是否为空反转字符串生成随机十六进制检查当前选项卡是否在后台检测元素是否处于焦点检查设备类型文字复制到剪... 查看详情
这4种,统计代码执行耗时,才足够优雅!(代码片段)
...统计04、StopWatch05、高级方法06、Function07、AutoCloseable08、总结一、前言代码耗时统计在日常开发中算是一个十分常见的需求,特别是在需要找出代码性能瓶颈时。可能也是受限于Java的语言特性,总觉得代码写起来不够优雅 查看详情
让你的js更优雅的小技巧
...成所谓的脏读。那么,该怎样把JS写得优雅一些呢?下面总结了几点供大家参考(如有错误,欢迎指正!):①巧用闭包将函数变量变为局部变量,基本格式为:;(function(){ ...& 查看详情
Javascript Ajax 优雅降级,有不同的页面?
】JavascriptAjax优雅降级,有不同的页面?【英文标题】:JavascriptAjaxGraceful-degradation,withDifferentPages?【发布时间】:2010-12-0404:27:59【问题描述】:我开始更加关注如何让我的javascript和ajax优雅地降级。哪个更推荐:致力于将优雅降... 查看详情
优雅编程|7个你应该掌握的javascript编码技巧
JavaScript是一个灵活性很强的语言,有很多和其他语言不一样的特性,本文分享7个日常开发中可以用到的JavaScript编码技巧,享受其优雅编程的快感。更多的编码技巧可以参阅《18个JavaScript代码的小技巧》和《24个Javascript代码优化... 查看详情
javascript基础总结
JavaScript基础总结(2)六、数组与函数数组1.数组的概念 一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。2.创建数组利... 查看详情
这段javascript代码能写得优雅吗?
】这段javascript代码能写得优雅吗?【英文标题】:Canthisjavascriptcodebewrittenelegantly?【发布时间】:2020-03-2805:11:08【问题描述】:由于我是javascript新手,谁能帮助我优雅地编写这段代码。我正在将它添加到wordpress,所以我已经尝试... 查看详情
业务开发中的javascript小技巧
在顺利完成某一功能模块后,如何提高工作效率、如何时代吗更加简洁、优雅,便是我们接下来要考虑的问题。下面总结了一些开发过程中经常用到的一些技巧,供大家一起学习。一、求和,最小值和最大值constarray=[5,4,7,8,9,2];ar... 查看详情
优雅的创建一个javascript库(代码片段)
...JS库。在我们深入之前,我做了两点假设:你知道简单的JavaScript或C语言。你不打算使用jQuery。通常情况下,一个JavaScript库不需要任何依赖。首先,我遇到了第一个麻烦,即如何正确的看待一个JavaScript库。在C/C++中,一个库是功... 查看详情
在 .NET 环境中优雅地缩小动态生成的 javascript? [关闭]
】在.NET环境中优雅地缩小动态生成的javascript?[关闭]【英文标题】:Elegantlyminifydynamicallygeneratedjavascriptina.NETenvironment?[closed]【发布时间】:2012-01-2322:07:45【问题描述】:我正在通过.NETWeb应用程序以编程方式创建javascript文件,并... 查看详情
如何在vuejs中优雅使用javascript各种插件
...不得不使使用js第三方库或者插件。如何在Vue项目中引入javascript第三方库 全局变量将JavaScript第三方库添加到项目中,最简单的办法是通过将其附加到 window 对象上,以使其成为全局变量。如何引入:window._=require(‘lod... 查看详情
javascript基础总结(代码片段)
JavaScript基础总结(2)六、数组与函数数组1.数组的概念 一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。2.创建数组利... 查看详情
javascript基础总结(代码片段)
JavaScript基础总结(2)六、数组与函数数组1.数组的概念 一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。2.创建数组利... 查看详情
如何优雅的设计购物车
...ession/Cookie中。2.Mvc中有个很好的特性:自定义模型绑定,开发者可以在Action方法的参数中添加一个复杂对象,由Mvc自动装配上这个对象。通过这个我们就能轻易的运用多态,屏蔽SessionCa 查看详情
优雅的 javascript - 在发生 3 个不同的 AJAX 请求时触发函数
】优雅的javascript-在发生3个不同的AJAX请求时触发函数【英文标题】:Elegantjavascript-makingfunctionfirewhen3differentAJAXrequestshavehappened【发布时间】:2011-11-1320:59:58【问题描述】:我有三个不同的AJAX查询,我想访问各种服务。当他们都... 查看详情
javascript学习总结——jquery插件的开发
概要jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用,在jQuery官网有许多插件:http://pl... 查看详情