javascript|web前端 - 10 个现代JavaScript开发技巧


javascript|web前端 - 10 个现代JavaScript开发技巧
JavaScript 有很多很酷的特性 , 但大多数初学者和中级开发人员都不知道 。今天 , 我挑选了 10 个 JavaScript 项目中使用的技巧 。
1、有条件地向对象添加属性
我们可以使用扩展运算符 ... 来有条件地向 JavaScript 对象快速添加属性 。
const condition = true;
const person = {
id: 1
name: 'John Doe'
...(condition && { age: 16 )
;
如果每个操作数的计算结果都为真 ,&& 运算符将返回最后计算的表达式 。因此返回一个对象 { age: 16, 然后 , 将其扩展为 person 对象的一部分 。
如果condition为 false , 则 JavaScript 将执行以下操作:
...(false) // evaluates to false
// spreading false has no effect on the object
console.log(person); // { id: 1 name: 'John Doe'
2、检查一个属性是否存在于一个对象中
你知道我们可以使用 in 关键字来检查 JavaScript 对象中是否存在属性吗?
const person = { name: 'John Doe' salary: 1000 ;
console.log('salary' in person); // returns true
console.log('age' in person); // returns false
3、对象中的动态属性名称
使用动态键设置对象属性很简单 。只需使用 ['key_name'
符号添加属性:
const dynamic = 'flavour';
var item = {
name: 'Biscuit'
[dynamic
: 'Chocolate'
console.log(item); // { name: 'Biscuit' flavour: 'Chocolate'
同样的技巧也可用于使用动态键引用对象属性:
const keyName = 'name';
console.log(item[keyName
); // returns 'Biscuit'
4、使用动态键进行对象解构
你知道可以解构一个变量并立即用 : 符号重命名它 。但是 , 当你不知道键名或键名是动态的时 , 你也可以解构对象的属性吗?
首先 , 让我们看看如何在解构(使用别名解构)时重命名变量 。
const person = { id: 1 name: 'John Doe' ;
const { name: personName= person;
console.log(personName); // returns 'John Doe'
现在 , 让我们使用动态键来解构属性:
const templates = {
'hello': 'Hello there'
'bye': 'Good bye'
const templateName = 'bye';
const { [templateName
: template= templates;
console.log(template) // returns 'Good bye'
5、空合并 , ?? 运算符
当你要检查变量是 null 还是 undefined 时 , 此?运算符很有用 。当左侧为null或者undefined时 , 它返回右侧值 , 否则返回其左侧操作数 。
const foo = null ?? 'Hello';
console.log(foo); // returns 'Hello'
const bar = 'Not null' ?? 'Hello';
console.log(bar); // returns 'Not null'
const baz = 0 ?? 'Hello';
console.log(baz); // returns 0
在第三个示例中 , 返回 0 是因为即使 0 在 JavaScript 中被认为是假的 , 它不是 null, 也不是undefined 。你可能认为我们可以使用 || 运算符在这里 , 但这两者之间存在差异:
const cannotBeZero = 0 || 5;
console.log(cannotBeZero); // returns 5
const canBeZero = 0 ?? 5;
console.log(canBeZero); // returns 0
6、可选链接 (?.)
你是否也讨厌像TypeError:无法读取 null 的属性“foo”之类的错误 。这对每个 JavaSript 开发人员来说都是头疼的问题 。引入了可选链就是为了解决这个问题 。让我们来看看:
const book = { id:1 title: 'Title' author: null ;
// normally you would do this
console.log(book.author.age) // throws error
console.log(book.author && book.author.age); // returns null (no error)
// with optional chaining
console.log(book.author?.age); // returns undefined
// or deep optional chaining
console.log(book.author?.address?.city); // returns undefined
你还可以使用具有以下功能的可选链接:
firstName: 'Haseeb'
lastName: 'Anwar'
printName: function () {
return `${this.firstName ${this.lastName`;
console.log(person.printName()); // returns 'Haseeb Anwar'
console.log(persone.doesNotExist?.()); // returns undefined
7、使用 !! 运算符进行布尔转换
【javascript|web前端 - 10 个现代JavaScript开发技巧】该 !! 运算符可用于将表达式的结果快速转换为布尔值 true 或 false 。就是这样:
const greeting = 'Hello there!';
console.log(!!greeting) // returns true
const noGreeting = '';
console.log(!!noGreeting); // returns false
8、字符串和整数转换
使用 + 运算符快速将字符串转换为数字 , 如下所示:
const stringNumer = '123';
console.log(+stringNumer); // returns integer 123
console.log(typeof +stringNumer); // returns 'number'
要将数字快速转换为字符串 , 请使用 + 运算符后跟空字符串 \"\":
const myString = 25 + '';