Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >TypeScript和JavaScript:需要了解的实用代码技巧

TypeScript和JavaScript:需要了解的实用代码技巧

原创
作者头像
智影Yodonicc
修改于 2022-05-19 10:46:28
修改于 2022-05-19 10:46:28
4K100
代码可运行
举报
文章被收录于专栏:智影Yodonicc智影Yodonicc
运行总次数:0
代码可运行

作者:Marcio dos Anjos Junior 原文链接:TypeScript and JavaScript: Useful shortcuts to know 译者:Yodonicc

在编写干净和可扩展的代码时,使用速记代码并不总是正确的决定。简明的代码有时会让人在阅读和更新时更加困惑。重要的是,你的代码是可读的,并能向其他开发者传达意义和上下文信息。

我们使用速记的决定不能有损于代码的其他理想特性。在JavaScript和TypeScript中使用以下表达式和操作符的速记时,请牢记这一点。

所有在JavaScript中可用的实用代码技巧在TypeScript中也有相同的语法。

三元运算符

三元运算符是JavaScript和TypeScript中最流行的实用代码技巧之一。它取代了传统的if...else语句。它的语法如下。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const number = 10if(number >= 5){
	console.log('bigger or equal');
}else{
	console.log('smaller');
}

长写法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const number = 10;
console.log(number >= 5 ? 'bigger or equal' : 'smaller');

简写法

短路运算符

另一种取代if...else语句的方法是使用短路运算符。这种简写法使用逻辑OR运算符||,当预期值不准确时,为变量分配一个默认值。

下面的例子演示了如何使用短路运算符。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const str = '';
if (str ! == null && str !== undefined && str !== '') {
console.log('default string');
} else {
console.log(str);

长写法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const str = '':
console.log(str || 'default string');

简写法

空值合并运算符

空值合并运算符??与短路运算符类似,它被用来给变量分配一个默认值。然而,空值合并运算符只在预期值也是空值时使用默认值。

换句话说,如果预期值为假,但不是空值,它就不会使用默认值。

下面是两个关于空值合并运算符的例子。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const str = '';
if (str !== null && str !== undefined) {
console.log('default string');
} else {
console.log(str);

例1--长写法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const str = '';
console.log(str ?? 'default string');

例1--简写法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const num = null;
let actualNum;
if (num !== null && num !== undefined) {
actualNum = num;
} else {
actualNum = 0;
}
console.log(actualNum);

例2--长写法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const num = null;
let actualNum = num ?? 0;
console.log(actualNum);

例2--简写法

模板字符串

利用JavaScript强大的ES6功能,我们可以使用模板字符串,而不是用+来连接一个字符串中的多个变量。要使用模板字符串,需要用包住字符串,在这些字符串中用${}包住变量。

下面的例子演示了如何使用模板字符串来执行字符串插值。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const name = 'Marcio'
const hobby = 'to write articles';
const fullStr = name + 'loves' + hobby;
console.log(fullStr);

长写法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const name = 'Marcio'
const hobby = 'to write articles';
const fullStr = `${name} loves ${hobby}`;
console.log(fullStr);

简写法

对象字面量简写语法

在JavaScript和TypeScript中,你可以通过在对象字面中提到变量,以速记的方式将一个属性分配给一个对象。要做到这一点,该变量必须用预定的键来命名。

请看下面一个对象属性赋值简写语法的例子。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const obj = {
  X: 1,
  y: 2,
  z: 3
};
console.log(obj);

长写法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const X = 1;
const y = 2;
const z = 3;
const obj = { x, y, Z };
console.log(obj);

简写法

可选链操作符

点符号允许我们访问一个对象的键或值。通过可选链,我们可以更进一步,在不确定键或值是否存在或被设置的情况下,也可以读取它们。当键不存在时,来自可选链的值是未定义的。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const obj {
  X: {
    y: 1,
    Z: 2
  },
  others: [
  	'test',
    'tested'
  ]
};
if (obj.hasProperty('others') && obj.others.length >= 2) {
console.log('2nd value in others: obj. others[1]);

长写法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const obj {
  X: {
    y: 1,
    Z: 2
  },
  others: [
  	'test',
    'tested'
  ]
};
console.log('2nd value in others:', obj.others?.[1]); // 'tested'
console.log('3rd value in others:', obj.others?.[2]); // undefined

简写法

解构赋值

除了传统的点符号,另一种读取对象值的方法是将对象的值重构为它们自己的变量。

下面的例子演示了如何使用传统的点符号和使用解构赋值的实用代码技巧来读取一个对象的值。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const obj = {
	X: {
    y: 1,
    Z: 2
  },
  other: 'test string'
};
console.log('Value of z in x: ', obj.x.z);
console.log('Value of other: '', obj.other);

长写法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const obj = {
	X: {
    y: 1,
    Z: 2
  },
  other: 'test string'
};
const { x, other } = obj;
const { z } = x;
console.log('Value of z in x: ', z);
console.log('Value of other: ', other);

简写法

你也可以重命名你从对象中去解构赋值的变量。这里有一个例子。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const obj = { x: 1, y: 2 };
const { x: myVar } obj;
console.log('My renamed variable:', myVar);

简写法

展开运算符

展开运算符...是用来访问数组和对象的内容。你可以用展开操作符来代替数组函数,如concat,和对象函数,如object.assign

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const arr = [1, 2, 3];
const biggerArr = [4, 5, 6].concat(arr);
console.log(biggerArr);
const smallobj = { x: 1 };
const other0bj = Object.assign(smallObj, { y: 2 });
console.log(otherObj);

长写法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const arr [1, 2, 3] ;
const biggerArr = [...arr, 4, 5, 6];
console.log(biggerArr);
const smallobj { x: 1 };
const otherObj { ...smallobj, y: };
console.log(other0bj);

简写法

对象遍历新方法

传统的JavaScript的循环语法如下。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
for (let i = 0; i < x; i++) {}

我们可以使用这种遍历语法,通过引用数组的长度来遍历数组的迭代器。

有三个for循环的缩写,提供了不同的方式来遍历一个数组对象。

  • for...of用于访问数组条目
  • for...in访问数组的索引,当用于对象字面时,访问键值
  • Array.forEach使用回调函数对数组元素和它们的索引执行操作

请注意,Array.forEach回调有三个可能的参数,按这个顺序调用。

  • 正在进行迭代的数组元素
  • 该元素的索引
  • 数组的完整拷贝

下面的例子展示了这些对象遍历的实用代码技巧。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const arr = ['Yes' , 'No' , 'Maybe'];
for (let i = 0; i < arr. length; i++) {
console.log('Here is item:', arr[i]);

长写法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const arr = ['Yes', 'No' 'Maybe'];
for (let str of arr) {
	console.log('Here is item:', str);
}
arr.forEach( (str) => {
	console.log('Here is item:', str);
});
for (let index in arr) {
console.log(`Item at index ${index} is ${arr[index]}` );

简写法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const obj = { a: 1, b: 2, C: 3 };
for (let key in obj) {
console.log(`Value at key ${key} is ${obj[key]}`);

对于对象字面量简写语法

使用位操作符的Array.indexOf简写法

我们可以使用Array.indexOf方法查询一个数组中的项目是否存在。如果该项目存在于数组中,该方法将返回其索引位置,如果不存在,则返回-1。

在JavaScript中,0是一个虚假的值,而小于或大于0的数字被认为是真实的。通常情况下,这意味着我们需要使用if...else语句来确定项目是否存在,使用返回的索引。

使用位操作符~而不是if...else语句可以让我们对任何大于或等于0的数字得到一个真实的值。

下面的例子演示了Array.indexOf的简写法,使用位运算符而不是if...else语句。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const arr = ['x', 'z'];
const realNumIndex = arr. index0f ('x');
if (realNumIndex > -1) {
	console.log( 'exists!');
} else if (realNumIndex === -1) {
console.log('does not exist!');

长写法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const arr = ['x', 'y', 'z'];
console.log(~arr.indexOf('x') ? ' exists!' : 'does not exist!');

简写法

!!将值转换为布尔值。

在JavaScript中,我们可以使用!![变量]简写法将任何类型的变量转换为布尔值。

请看一个使用!![变量]简写法将数值转换为布尔值的例子。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const simpleInt 3:
const intAsBool = Boolean(simpleInt);
console.log(intAsBool);

长写法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const simpleInt = 3 ;
const intAsBool = !!simpleInt;
console.log(intAsBool);

简写法

箭头/Lambda函数表达式

JavaScript中的函数可以使用箭头函数语法来编写,而不是传统的明确使用函数关键字的表达方式。箭头函数类似于其他语言中的lambda函数。

请看这个使用箭头函数表达式简写函数的例子。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function printStr(str){
	console.log('This is a string:', str);
}

printStr('JavaScript function!');

长写法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const printStr = (str) => {
	console.log('This is a string:', str);
};
printStr('JavaScript arrow function!') ;

简写法

代码语言:typescript
AI代码解释
复制
const printStr = (str: string) => {
	console.log('This is a string:', str);
};
printStr('TypeScript arrow function!');

TypeScript简写法(指定变量类型)

使用箭头函数表达式的隐式返回

在JavaScript中,我们通常使用return关键字来从一个函数中返回一个值。当我们使用箭头函数语法定义我们的函数时,我们可以通过省略大括号{}来隐式返回一个值。

对于多行语句,如表达式,我们可以用小括号()来包裹我们的返回表达式。

下面的例子演示了使用箭头函数表达式从一个函数中隐式返回一个值的简写法。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function capitalize (name) {
	return name.toUpperCase();
}

console.log(capitalize('marcio'));

function add (numA, numB) {
	return numA + numB;
}

console.log(add(2, 3));

长写法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const capitalize = (name) => name.toUpperCase();
console.log(capitalize('marcio'));
const add = (numA, numB) => (numA + numB);
console.log(add(2, 3));

简写法

代码语言:typescript
AI代码解释
复制
const capitalize = (name: string) => name.toUpperCase();
console.log(capitalize('marcio'));
const add = (numA: number, numB: number) => (numA + numB);
console.log(add(2, 3));

TypeScript简写法 (指定变量类型)

双位NOT运算符

在JavaScript中,我们通常使用内置的Math对象访问数学函数和常数。然而,一些函数有有用的实用代码技巧,使我们能够在不引用Math对象的情况下访问该函数。

例如,应用两次~~的bitwise NOT运算符,我们就可以得到一个数值的Math.floor()

请看下面的例子,看看如何使用双位NOT运算符作为Math.floor()

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const num = 4.5;
const floorNum = Math.floor(num);
console.log(floorNum);

长写法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const num = 4.5;
const floorNum = ~~num;
console.log(floorNum);

简写法

指数幂简写语法

另一个具有有用速记功能的数学函数是Math.pow()函数。使用内置数学对象的替代方法是**简写法。

下面的例子演示了这种指数幂简写法的操作。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const num = Math.pow(3, 4);
console.log(num);

长写法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const num = 3 ** 4;
console.log(num);

简写法

TypeScript CONSTRUCTOR 简写法

在TypeScript中,有一种创建类并通过构造函数为类属性赋值的实用代码技巧。当使用这种方法时,TypeScript将自动创建和设置类的属性。

这个简写法是TypeScript独有的,在JavaScript类定义中是没有的。

看一下下面的例子,看看TypeScript构造函数的作用。

代码语言:typescript
AI代码解释
复制
class Person {
  private name: string;
  public age: number;
  protected hobbies: string[];

  constructor(name: string, age: number, hobbies: string[]) {
    this.name = name;
    this.age = age;
    this.hobbies = hobbies;
  }
}

长写法

代码语言:typescript
AI代码解释
复制
class Person {
  constructor(
    private name: string,
    public age: number.
    protected hobbies: string[]
  ) {}
}

简写法

总结

这些只是一些最常用的JavaScript和TypeScript实用代码技巧。请记住,使用这些技巧并不总是最好的选择;最重要的是写出干净、易懂的代码,让其他开发者可以轻松阅读。

你最喜欢的JavaScript或TypeScript实用代码技巧是什么?请在评论中分享!

注:特别感谢技术指导dazhao(赵达)对本文翻译的审阅指正

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
10 条评论
热度
最新
66666
66666
111举报
^_^感谢支持
^_^感谢支持
回复回复点赞举报
66666666
66666666
111举报
感谢支持^_^
感谢支持^_^
回复回复点赞举报
666666666666
666666666666
111举报
^_^感谢支持
^_^感谢支持
回复回复点赞举报
路过看看~~~
路过看看~~~
111举报
感谢支持^_^
感谢支持^_^
回复回复点赞举报
其实我个人更喜欢JS多一些,本来就是因为动态类型喜欢它的😁
其实我个人更喜欢JS多一些,本来就是因为动态类型喜欢它的😁
111举报
其实动态语言对于程序员个体来说真的节省了很多生命;只是TS对于大型多人开发,总体上可以节省更多的时间,因为避免了很多维护性问题带来的抓耳挠腮时刻
其实动态语言对于程序员个体来说真的节省了很多生命;只是TS对于大型多人开发,总体上可以节省更多的时间,因为避免了很多维护性问题带来的抓耳挠腮时刻
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
分享 16 个有用的 TypeScript 和 JS 技巧
英文 | https://blog.logrocket.com/16-useful-typescript-javascript-shorthands-know/
前端达人
2022/06/09
1.3K0
提高 javascript 代码效率的技巧
✨ 变量声明 多个变量的声明,可以简写 // 非效率写法 let x; let y; let z = 520; // 效率写法 let x, y, z = 520; ✨ 三元运算符 在条件判断时,可
江户川码农
2022/06/25
9313
提高 javascript 代码效率的技巧
20个常用的JavaScript简写技巧
任何编程语言的简写技巧都能够帮助你编写更简练的代码,让你用更少的代码实现你的目标。让我们一个个来看看 JavaScript 的简写技巧吧。
深度学习与Python
2020/12/07
1.1K0
程序员提高写代码速度_学完javascript学什么
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/170853.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/22
5220
2021年要了解的34中javascript优化技术
您可能已经进行了很久的Javascipt开发,但有时你可能没有编写一些额外最近的代码去解决你的问题。这些技术可以帮助你编写干净并且优化你的Javascript代码。此外,这些主题可以帮助你为2021年的Javascipt面试做好准备。
小丑同学
2021/01/08
7110
分享一些 JavaScript 代码简写技巧
如果||前面的值是0 '' false null undefined NaN其中的任意一种,则直接返回||后面的值
前端达人
2023/08/31
3750
分享一些 JavaScript 代码简写技巧
分享 20 个提升效率的 JavaScript 缩写小技巧
JavaScript中有很多速记技巧,可以缩短代码长度,减少冗余,提高代码的可读性和可维护性。本文将介绍20个提高效率的JS缩写技巧,帮助你告别写垃圾的生活,轻松写出优雅的代码!
前端达人
2023/10/25
4390
分享 20 个提升效率的 JavaScript 缩写小技巧
Typescript常看常新
在看了同事推荐的ts教程后,发现自己还是有很多不会的,所以整理出一些自己学到的新知识点,希望各位也能有所收获!(我就写给自己看看,不要太当回事哈哈哈
y191024
2024/01/22
3190
Typescript常看常新
30个 JS 实用技巧总结,助你提升工作效率
我是Rakshit Shah,我在 IT 行业的工作经验已经超过5年了。我是一名全栈开发人员。JavaScript确实是所有全栈开发人员的必会的技术。其他技术(Angular、Java、VueJS 等)的语法会有所不同,但我们应该更多地关注概念与实际应用!
前端达人
2021/10/08
1K0
30个 JS 实用技巧总结,助你提升工作效率
22+ 高频实用的 JavaScript 片段 (2020年)
废话不多话,在本文中,列出了一些比较常用或者实用的的 JavaScript 代码片段,希望对你们有所帮助。
前端小智@大迁世界
2020/09/03
2740
34种你需要了解的JavaScript优化技术
英文 | https://javascript.plainenglish.io/34-javascript-optimization-techniques-to-know-in-2021-d561afdf73c3
前端达人
2021/04/22
1.2K0
21个单行代码技巧,不单单只是炫技!
简单的工作绝不复杂化,复杂的代码大多都能简化。今天大师兄就公开珍藏收集已久的单行代码绝技
程序员老鱼
2022/12/02
3510
19+ JavaScript 常用的简写技巧
CG国斌
2017/12/29
1.1K0
19+ JavaScript 常用的简写技巧
您应该知道的11个JavaScript和TypeScript速记
英文 | https://blog.bitsrc.io/11-javascript-and-typescript-shorthands-you-should-know-690a002674e0
winty
2020/10/09
6720
【TypeScript 4.5】005-第 5 章 函数
object 指的是任何不是基元的值:string、number、bigint、boolean、symbol、null、undefined
訾博ZiBo
2025/01/06
2280
开发中经常遇到的JavaScript问题整理(超实用)
今天遇到一个需求,已知月份,得到这个月的第一天和最后一天作为查询条件查范围内的数据
coder_koala
2021/03/09
1.7K0
分享 9 个实用的 JavaScript 技巧
https://javascript.plainenglish.io/9-javascript-tricks-that-make-your-code-fantastic-4cf3d7880229
前端达人
2023/08/31
3610
分享 9 个实用的 JavaScript 技巧
JavaScript 开发人员需要知道的简写技巧
本文来源于多年的 JavaScript 编码技术经验,适合所有正在使用 JavaScript 编程的开发人员阅读。
一墨编程学习
2018/10/20
9910
42个实用的JavaScript优化技巧
我一直喜欢报纸之类的东西,可以在较短的时间内提供足够的信息。在这里,我为前端开发优化创建了一个新的学习列表。
前端达人
2021/05/11
12.6K0
重读《学习JavaScript数据结构与算法-第三版》-第2章 ECMAScript与TypeScript概述
洛伊安妮·格罗纳女士所著的《学习JavaScript数据结构与算法》第三版于2019年的5月份再次刊印发行,新版内容契合当下,实为JavaScript开发人员的必备之佳作。有幸重读此版,与诸君分享共勉。
胡哥有话说
2019/08/19
9930
推荐阅读
相关推荐
分享 16 个有用的 TypeScript 和 JS 技巧
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验