关键词:
有条件地向对象添加属性
使用展开运算符号(...)来有条件地向对象快速添加属性
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: 'JackieDYH',
...(false),
;
// 展开 `false` 对对象没有影响
console.log(person); // id: 1, name: 'John Doe'
检查属性是否存在对象中
可以使用 in 关键字来检查 JavaScript 对象中是否存在某个属性。
const person = name: 'JackieDYH', salary: 1000 ;
console.log('salary' in person); // true
console.log('age' in person); // false
对象中的动态属性名称
使用动态键设置对象属性很简单。只需使用['key name']来添加属性:
const dynamic = 'flavour';
var item =
name: 'JackieDYH',
[dynamic]: '巧克力'
console.log(item); // name: 'JackieDYH', flavour: '巧克力'
同样的技巧也可用于使用动态键引用对象属性:
const keyName = 'name';
console.log(item[keyName]); // returns 'JackieDYH'
使用动态键进行对象解构
我们知道在对象解构时,可以使用 : 来对解构的属性进行重命名。但,你是否知道键名是动态的时,也可以解构对象的属性?
const person = id: 1, name: 'JackieDYH' ;
const name: personName = person;
console.log(personName); // 'JackieDYH'
现在,我们用动态键来解构属性:
const templates =
'hello': 'Hello there',
'bye': 'Good bye'
;
const templateName = 'bye';
const [templateName]: template = templates;
console.log(template); // Good bye
空值合并??操作符
当我们想检查一个变量是否为 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
可选链?.
我们是不是经常遇到这样的错误: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: 'Jackie',
lastName: 'DYH',
printName: function ()
return `$this.firstName $this.lastName`;
,
;
console.log(person.printName()); // 'Jackie DYH'
console.log(persone.doesNotExist?.()); // undefined
使用!!操作符
!! 运算符可用于将表达式的结果快速转换为布尔值(true或false):
const greeting = 'Hello there!';
console.log(!!greeting) // true
const noGreeting = '';
console.log(!!noGreeting); // false
字符串和整数转换
使用 + 操作符将字符串快速转换为数字:
const stringNumer = '123';
console.log(+stringNumer); //123
console.log(typeof +stringNumer); //'number'
要将数字快速转换为字符串,也可以使用 + 操作符,后面跟着一个空字符串:
const myString = 25 + '';
console.log(myString); //'25'
console.log(typeof myString); //'string'
这些类型转换非常方便,但它们的清晰度和代码可读性较差。所以实际开发,需要慎重的选择使用。
检查数组中的假值
应该都用过数组方法: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);
扁平化数组
在原型 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]]
Object.entries
大多数开发人员使用 Object.keys 方法来迭代对象。此方法仅返回对象键的数组,而不返回值。我们可以使用 Object.entries 来获取键和值。
const person =
name: 'JackieDYH',
age: 20
;
Object.keys(person); // ['name', 'age']
Object.entries(data); // [['name', 'JackieDYH'], ['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 JackieDYH
// age is 20
上述两种方法都返回相同的结果,但 Object.entries 获取键值对更容易。
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
数字分隔符
可以使用下划线作为数字分隔符,这样可以方便地计算数字中0的个数。
// 难以阅读
const billion = 1000000000;
// 易于阅读
const readableBillion = 1000_000_000;
console.log(readableBillion) //1000000000
下划线分隔符也可以用于BigInt数字,如下例所示
const trillion = 1000_000_000_000n;
console.log(trillion); // 1000000000000
document.designMode
与前端的JavaScript有关,设计模式让你可以编辑页面上的任何内容。只要打开浏览器控制台,输入以下内容即可。
document.designMode = 'on';
逻辑赋值运算符
逻辑赋值运算符是由逻辑运算符&&、||、??和赋值运算符=组合而成。
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 的值。
vue中常用的开发小技巧-让开发更便捷快速-总结(代码片段)
1.将一个prop限制在一个类型的列表中使用prop定义中的 validator 选项,可以将一个prop类型限制在一组特定的值中。exportdefaultname:'Image',props:src:type:String,,style:type:String,validator:s=>['square','roun 查看详情
javascript简写技巧总结
在日常工作中,JavaScript一些常用的简写技巧,将直接影响到我们的开发效率,现将常用技巧整理如下: 1.空(null,undefined)验证 当我们创建了一个新的变量,我们通常会... 查看详情
微信小程序开发技巧总结(持续更新...)(代码片段)
...和浏览各种问题的解决方案总结出一些自己在日常开发中常用的技巧和知点,希望各位不吝斧正。数据的生命周期1.短生命周期数据存储以小程序启动到彻底关闭为周期的的数据建议存储在app.js文件夹中,引用app.js:constapp=getApp();假... 查看详情
22条常用javascript开发小技巧(代码片段)
...。要尽量避免不必要的全局变量。2、行尾使用分号虽然JavaScript允许省略行尾的分号,但是有时不注意的省略,会导致不必要的错误。建议在可用可不用行尾分号的地方加上分号。3、获取指定范围内的随机数vargetRandom=function(max,m... 查看详情
计算机入门的一些常用小技巧总结(代码片段)
...信公众号:雄雄的小课堂。”今天总结了一些windows中常用的小技巧,也是明天上课需要演示的,希望对初入计算机行业的你们有所帮助,哈哈哈哈。常用shutdown命令:1.定时自动关机(10分钟之后自动关机... 查看详情
总结一些关于javascript的小技巧!(代码片段)
分享分享自己收藏的学习资料,有需要的朋友可以找我获取根据自身面试经历整理以及不断收集的(珍藏版)【推荐】2020年最新Java电子书集合.pdf(吐血整理) >>> https://www.cnblogs.com/xiaogeng88/p/12692306.html这篇文章主要... 查看详情
业务开发中的javascript小技巧
在顺利完成某一功能模块后,如何提高工作效率、如何时代吗更加简洁、优雅,便是我们接下来要考虑的问题。下面总结了一些开发过程中经常用到的一些技巧,供大家一起学习。一、求和,最小值和最大值constarray=[5,4,7,8,9,2];ar... 查看详情
总结下常用js中的小语法和技巧(代码片段)
1,数组对象遍历对一个级数对象进行遍历,取出每个值 vararr="result":["time":"2018-10-2412:12:12","time":"2018-10-2512:12:12","time":"2018-10-2612:12:12","time":"2018-10-2712:12:12","time":"2018-10-2812:12:12", 查看详情
android开发常用控件的小技巧(代码片段)
有段时间没有写过新文章了,今天就把近期学到的一些控件小技巧分享一下。EditText布局文件中设置inputType无效处理办法开发中我们有时候会限制输入的内容,比如只能输入数字,但是布局文件中设置inputType有时候就... 查看详情
web前端javascript常用开发小知识总结
01、假值undefined、null、0、false、NaN、‘’都是假值。您可能已经知道这一点,但您是否知道空字符串也是假的?见下文:console.log(’’==false);//trueconsole.log(’’===false);//false02、Filter函数您一定在数组上... 查看详情
javascript开发中让代码性能变高的小技巧
1、选择器优先使用ID选择器2、用变量存选择器3、swicth性能高于if,if层级不建议超过两层4、遇到渲染不上的问题时,可以用setInterval或者setTimeout做延迟 欢迎小伙伴们提供更多小技巧,一起学习进步~ 查看详情
ios小技巧总结,绝对有你想要的(代码片段)
原文链接在这里总结一些iOS开发中的小技巧,能大大方便我们的开发,持续更新。UITableView的Group样式下顶部空白处理//分组列表头部空白处理UIView*view=[[UIViewalloc]initWithFrame:CGRectMake(0,0,0,0.1)];self.tableView.tableHeaderView=vi... 查看详情
有个开发者总结这15优雅的javascript个技巧(代码片段)
...xff0c;有一线大厂面试完整考点、资料以及我的系列文章。JavaScript有很多很酷的特性 查看详情
mysql开发常用技巧总结
1.查询某个schema,某张表的创建时间。SELECTCREATE_TIMEFROMINFORMATION_SCHEMA.TABLESWHERETABLE_SCHEMA=‘db_campus(库名)‘ANDTABLE_NAME=‘tb_ilovi_device(表名)‘;2. 开发的时候,我们有时候需要整列进行替换,然后你也可以根据sql语句进行去重处理... 查看详情
我开发中总结的小技巧(代码片段)
经过一段时间的react开发,自己总结了一些小习惯,自动构建webpack1.组件命名文件夹一个组件一个文件夹,可读性高,结构清晰文件夹:Danamic(组件首字母大写)index.jsxstyle.lessdata.js引用:importDanamicfrom‘./Danamic‘webpack能自动识别... 查看详情
javascript中开发常用方法-总结-持续更新(代码片段)
数组的常用方法lengthlength是一个可读可写的属性,用来表示数组的长度(即数组元素个数)。通过访问length属性,可以获取数组长度;而通过修改length的值,可以增加或减少数组元素,甚至可以完全清... 查看详情
微信小程序入门与实战常用组件api开发技巧项目实战
...的模板化与模块化优化代码,使用require构建模块儿化的JavaScript代码以及使用template构建模板化小程序。感受在小程序中使用template的优势。第6章构建新闻详情页面新闻详情页面包括音乐播放、文章收藏等功能。本节将讲解音乐... 查看详情
超实用的jquery小技巧(代码片段)
JQuery是一个JavaScript库,她极大的简化了我们对JavaScript的编程。今天我们总结了下平常项目中用到的一些小技巧,仅供参考。1、替换元素//替换元素$(document).ready(function()$("#id").replaceWith(‘<p>Ihavebeenrepaced</p>‘));2、延时加... 查看详情