需要知道的 18 个 JavaScript 和 TypeScript 速记

本最有用的 JavaScript 和 TypeScript 简写指南最后更新于 2023 年 1 月 3 日,以解决代码中的错误并包含有关 TypeScript v4.9 中引入的满足运算符的信息。

JavaScript 和 TypeScript 共享许多常用代码概念的有用速记替代方法。速记代码替代方案可以帮助减少代码行,这是我们通常努力的目标。

在本文中,我们将回顾 18 个常见的JavaScript和TypeScript以及简写。修复 0x8078002A Windows 备份错误我们还将探讨如何使用这些简写的示例。

通读这些有用的 JavaScript 和 TypeScript 速记或导航到您在下面的列表中寻找的速记。

跳跃前进:

  • JavaScript 和 TypeScript 简写

  • 三元运算符

  • 短路评估

  • 无效合并运算符

  • 模板文字

  • 对象属性赋值速记

  • 可选链接

  • 对象解构

  • 传播算子

  • 对象循环速记

  • Array.indexOf使用按位运算符的速记

  • 将值转换为布尔值!!

  • 箭头/lambda 函数表达式

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

  • 双位非运算符

  • 指数幂简写

  • TypeScript 构造函数简写

  • TypeScript 满足运算符

JavaScript 和 TypeScript 简写

在编写干净且可扩展的代码时,如何切换到 Windows Insider Canary 频道?使用速记代码并不总是正确的决定。简洁的代码有时会更难以阅读和更新。因此,您的代码清晰易读并向其他开发人员传达意义和上下文非常重要。

我们使用简写的决定不得损害其他理想的代码特征。如何在 Windows 11/10 上的 PowerShell 中导出 CSV在 JavaScript和 TypeScript中对表达式和运算符使用以下简写时,请记住这一点。

JavaScript 中可用的所有简写在 TypeScript 中都以相同的语法提供。如何逐步从 iCloud 中删除照片唯一的细微差别是在 TypeScript 中指定类型,TypeScript 构造函数简写是 TypeScript 独有的。

三元运算符

三元运算符是 JavaScript 和 TypeScript 中最流行的简写形式之一。如何通过网络浏览器访问 iCloud它取代了传统的说法。它的语法如下:if…else

[condition] ? [true result] : [false result]

以下示例演示了一个传统语句及其使用三元运算符的等效简写形式:if…else

// Longhand

const mark = 80

if (mark >= 65) {
  return "Pass"
} else {
  return "Fail"
}

// Shorthand
const mark = 80

return mark >= 65 ? "Pass" : "Fail"
当您进行单行操作时,三元运算符非常有用,例如为变量赋值或根据两种可能的条件返回值。一旦您的条件有两个以上的结果,使用块就更容易阅读。if/else

短路评估

另一种替换语句的方法是使用短路评估。Mac 休眠时会做什么?你的 Mac 作为梦游者的秘密生活当预期值为 falsy 时,如何为 iCloud 开启高级数据保护此简写使用逻辑 OR 运算符将默认值分配给变量。if…else||

以下示例演示了如何使用短路评估:

// Longhand
let str = ''
let finalStr

if (str !== null && str !== undefined && str != '') {
  finalStr = str
} else {
  finalStr = 'default string'
}

// Shorthand
let str = ''
let finalStr = str || 'default string' // 'default string
当您进行单行操作并且您的条件取决于值/语句的错误或非错误时,最好使用此速记。

无效合并运算符

nullish合并运算符 ??类似于短路评估,因为它为变量分配默认值。如何使用 Focus 限制 iOS 16 和 macOS Ventura 中的通知但是,空值合并运算符仅在预期值也为空值时才使用默认值。

换句话说,如果预期值是 falsy 但不是 nullish,如何在 Twitter 上设置双因素身份验证则不会使用默认值。

以下是无效合并运算符的两个示例:

例子一

// Longhand
let str = ''
let finalStr

if (str !== null && str !== undefined) {
  finalStr = 'default string'
} else {
  finalStr = str
}

// Shorthand
let str = ''
let finaStr = str ?? 'default string' // ''

例子二

// Longhand
let num = null
let actualNum

if (num !== null && num !== undefined) {
  actualNum = num
} else {
  actualNum = 0
}

// Shorthand
let num = null
let actualNum = num ?? 0 // 0

逻辑空赋值运算符

这类似于通过检查值是否为空值的空值合并运算符,如何将任何 Mac、iPhone、iPad、iPod touch 或 Apple Watch 恢复出厂设置并添加了在空值检查之后分配值的能力。

下面的示例演示了我们如何使用逻辑空赋值以普通和速记形式检查和赋值:

// Longhand
let num = null

if (num === null) {
  num = 0
}

// shorthand
let num = null

num ??= 0
JavaScript 还有其他几种赋值简写形式,如加法+=赋值、*=乘法赋值、/=除法赋值%=、余数赋值等。您可以在此处找到完整的赋值运算符列表。

模板文字

模板文字是作为JavaScript 强大的 ES6 功能的一部分引入的,在 Mac 上打开文件的 12 种方法可以用来代替+在字符串中连接多个变量。``要使用模板文字,如何在 iPhone、iPad 或 Mac 上使用安全密钥保护您的 Apple ID 帐户请将您的字符串和变量包装在这些${}字符串中。

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

// Longhand
const name = 'Iby'
const hobby = 'to read'

const fullStr = name + ' loves ' + hobby // 'Iby loves to read'

// Shorthand
const name = 'Iby'
const hobby = 'to read'

const fullStr = `${name} loves ${hobby}` // 'Iby loves to read'

您还可以使用模板文字来构建多行字符串,而无需使用\n. 例如:

// Shorthand
const name = 'Iby'
const hobby = 'to read'
const fullStr = `${name} loves ${hobby}.
She also loves to write!` 

使用模板文字有助于添加其值可能会变成更大字符串的字符串,解码 Apple 序列号背后的含义例如 HTML 模板。它们对于创建多行字符串也很有用,因为包裹在模板文字中的字符串保留了所有的白色间距和缩进。

对象属性赋值速记

在 JavaScript 和 TypeScript 中,如何检查您的 iPhone 是否经过翻新您可以通过在对象字面量中提及变量来简写地将属性分配给对象。为此,必须使用预期的键命名变量。

请参阅下面的对象属性分配简写示例:

// Longhand
const obj = {
  x: 1,
  y: 2,
  z: 3
}
// Shorthand
const x = 8
const y = 10
const obj = { x, y }

可选链接

点符号允许我们访问对象的键或值。使用可选链接,Xbox 应用程序无法在 Windows 中打开?我们可以更进一步读取键或值,即使我们不确定它们是否存在或是否已设置。

当键不存在时,可选链的值为undefined。if/else这有助于我们在从对象中读取值时避免不必要的检查条件,iPhone 原装还是假的?您可以通过以下方式找到答案并且无需try/catch处理因尝试访问不存在的对象键而引发的错误。

请参阅下面的可选链接示例:

// Longhand
const obj = {
  x: {
    y: 1,
    z: 2
  },
  others: [
    'test',
    'tested'
  ] 
}

if (obj.hasProperty('others') && others.length >= 2) {
  console.log('2nd value in others: ', obj.others[1])
}
// Shorthand
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

对象解构

除了传统的点符号外,如何在 Mac 上更改屏幕截图的默认保存位置另一种读取对象值的方法是将对象的值解构为它们自己的变量。

以下示例演示了如何使用传统的点表示法与使用对象解构的速记方法读取对象的值:

// Longhand
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)

// Shorthand
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)

You can also rename the variables you destructure from the object. Here's an example:
const obj = {x: 1, y: 2}
const {x: myVar} = object

console.log('My renamed variable: ', myVar) // My renamed variable: 1

传播算子

展开运算符…用于访问数组和对象的内容。如何在 Apple Watch 上使用跑步轨迹检测您可以使用展开运算符来替换数组函数(如concat)和对象函数(如 )object.assign。

查看下面的示例,了解展开运算符如何替换普通数组和对象函数:

// Longhand
const arr = [1, 2, 3]
const biggerArr = [4,5,6].concat(arr)

const smallObj = {x: 1}
const otherObj = object.assign(smallObj, {y: 2})

// Shorthand
const arr = [1, 2, 3]
const biggerArr = [...arr, 4, 5, 6]

const smallObj = {x: 1}
const otherObj = {...smallObj, y: 2}

对象循环速记

传统的 JavaScriptfor循环语法如下:

for (let i = 0; i < x; i++) { … }

我们可以使用此循环语法通过引用迭代器的数组长度来遍历数组。如何使用谷歌搜索有三种for循环简写提供了不同的方法来遍历数组对象:

  • for…of:访问数组条目

  • for…in:在对象文字上使用时访问数组的索引和键

  • Array.forEach:使用回调函数对数组元素及其索引执行操作

请注意,Array.forEach回调具有三个可能的参数,按以下顺序调用:

  • 正在进行的迭代的数组元素

  • 元素的索引

  • 阵列的完整副本

下面的示例演示了这些对象循环简写的实际应用:

// Longhand
const arr = ['Yes', 'No', 'Maybe']

for (let i = 0; i < arr.length; i++) {
  console.log('Here is item: ', arr[i])
}

// Shorthand
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]}`)
}

// For object literals
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。如何将您的 Gmail 帐户恢复出厂设置如果数组中存在,则此方法返回项目的索引位置,如果-1不存在,则返回。

在 JavaScript 中,使用 Google Apps 脚本将文件从 Google Drive 上传到 Google Cloud Storage0是一个假值,而小于或大于的数字0被认为是真值。通常,这意味着我们需要使用if…else语句来使用返回的索引来确定该项目是否存在。

使用按位运算符 ~添加新行时 Google 表格中的公式消失而不是if…else语句允许我们获得任何大于或等于的真值0。

下面的示例演示了Array.indexOf使用按位运算符而不是if…else语句的速记:

const arr = [10, 12, 14, 16]

const realNum = 10
const fakeNum = 20

const realNumIndex = arr.indexOf(realNum)
const noneNumIndex = arr.indexOf(fakeNum)

// Longhand
if (realNumIndex > -1) {
  console.log(realNum, ' exists!')
} else if (realNumIndex === -1) {
  console.log(realNum, ' does not exist!')
}

if (noneNumIndex > -1) {
  console.log(fakeNum, ' exists!')
} else if (noneNumIndex === -1) {
  console.log(fakeNum, ' does not exist!')
}

// Shorthand
const arr = [10, 12, 14, 16]

const realNum = 10
const fakeNum = 20

const realNumIndex = arr.indexOf(realNum)
const noneNumIndex = arr.indexOf(fakeNum)

console.log(realNum + (~realNumIndex ? ' exists!' : ' does not exist!')
console.log(fakeNum + (~noneNumIndex ? ' exists!' : ' does not exist!')

将值转换为布尔值!!

在 JavaScript 中,如何在没有电话号码和恢复电子邮件的情况下恢复 Gmail 密码我们可以使用速记将任何类型的变量转换为布尔值!![variable]。

!! [variable]请参阅使用速记将值转换为的示例Boolean:

// Longhand
const simpleInt = 3
const intAsBool = Boolean(simpleInt)

// Shorthand
const simpleInt = 3
const intAsBool = !!simpleInt

箭头/lambda 函数表达式

JavaScript 中的函数可以使用箭头函数语法来编写,删除您的 Google 帐户:分步指南而不是显式使用关键字的传统表达式function。如何从 Mac 的菜单栏访问 ChatGPT箭头函数类似于其他语言中的 lambda 函数。

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

// Longhand
function printStr(str) {
  console.log('This is a string: ', str)
}
printStr('Girl!')

// Shorthand
const printStr = (str) => {
  console.log('This is a string: ', str)
}
printStr('Girl!')

// Shorthand TypeScript (specifying variable type)
const printStr = (str: string) => {
  console.log('This is a string: ', str)
}
printStr('Girl!')

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

在 JavaScript 中,我们通常使用return关键字从函数返回值。如何在 Windows 11 上禁用任务栏搜索框当我们使用箭头函数语法定义我们的函数时,我们可以通过排除大括号隐式返回一个值{}。

对于多行语句,例如表达式,如何在 Windows 11 上启用文件资源管理器精简视图我们可以将返回表达式括在括号中()。下面的示例演示了使用箭头函数表达式从函数隐式返回值的简写代码:

// Longhand
function capitalize(name) {
  return name.toUpperCase()
}

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

// Shorthand
const capitalize = (name) => name.toUpperCase()

const add = (numA, numB) => (numA + numB)

// Shorthand TypeScript (specifying variable type)
const capitalize = (name: string) => name.toUpperCase()

const add = (numA: number, numB: number) => (numA + numB)

双位非运算符

在 JavaScript 中,我们通常使用内置Math对象访问数学函数和常量。其中一些函数是Math.floor()、Math.round()、Math.trunc()和许多其他函数。

(Math.trunc()在 ES6 中可用)返回整数部分。如何在 Windows 11 上共享网络打印机例如,给定数字小数点前的数字使用双位按位非运算符可获得相同的结果~~。

查看下面的示例,微软在移动、Skype 上发布了带有 ChatGPT 的 Bing AI了解如何使用 Double 按位 NOT 运算符作为Math.trunc()速记:

// Longhand
const num = 4.5
const floorNum = Math.trunc(num) // 4

// Shorthand
const num = 4.5
const floorNum = ~~num // 4
重要的是要注意,Double 按位 NOT 运算符~~不是 的官方简写,Math.trunc因为某些边缘情况不会返回相同的结果。有关这方面的更多详细信息,请参见此处。

指数幂简写

另一个具有有用速记的数学函数是函数Math.pow()。如何使用 ChatGPT 提前访问 Bing使用内置Math对象的替代方法是**速记。

下面的例子演示了这个指数幂速记的作用:

// Longhand
const num = Math.pow(3, 4) // 81

// Shorthand
const num = 3 ** 4 // 81

TypeScript 构造函数简写

创建类并通过 TypeScript 中的构造函数为类属性赋值有一种简写方式。使用此方法时,TypeScript 会自动创建和设置类属性。微软提高了 Bing AI 每次会话和每天聊天的限制这种速记仅适用于 TypeScript,在 JavaScript 类定义中不可用。

看看下面的例子,看看 TypeScript 构造函数速记的作用:

// Longhand
class Person {
  private name: string
  public age: int
  protected hobbies: string[]

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

// Shorthand
class Person {
  constructor(
    private name: string,
    public age: int,
    protected hobbies: string[]
  ) {}
}

TypeScript 满足运算符

满足运算符从设置类型的约束中提供了一些灵活性,如何在 Windows 11 上将音频设置重置为默认值错误处理涵盖了显式类型。

当一个值有多种可能的类型时,最好使用它。如何在 Windows 11 上设置默认的 Linux 发行版 WSL比如可以是字符串,也可以是数组;使用此运算符,我们不必添加任何检查。这是一个例子:

// Longhand
type Colors = "red" | "green" | "blue";
type RGB = [red: number, green: number, blue: number];
const palette: Record<Colors, string | RGB> = {
    red: [255, 0, 0],
    green: "#00ff00",
    blue: [0, 0, 255]
};

if (typeof palette.red !== 'string') {
    console.log(palette.red.at(0))
}

// shorthand
type Colors = "red" | "green" | "blue";
type RGB = [red: number, green: number, blue: number];
const palette = {
    red: [255, 0, 0],
    green: "#00ff00",
    blue: [0, 0, 255]
} satisfies Record<Colors, string | RGB>;

console.log(palette.red.at(0))

在我们上面示例的普通版本中,Windows 11 设置应用程序获得新的主页、存在感应、VHD 管理器我们必须进行检查typeof以确保palette.red是 的type RGB并且我们可以使用 读取它的第一个属性at。

虽然在我们的速记版本中,使用satisfies,如何在 Windows 11 上始终在后台运行 WSA我们没有palette.redbeing的类型限制string,但我们仍然可以告诉编译器确保palette它的属性具有正确的形状。

ieArray.property.at()方法at()接受一个整数并返回该索引处的项目。Array.at需要ES2022目标,从 TypeScript v4.6 开始可用。此处提供更多信息。

结论

这些只是一些最常用的 JavaScript 和 TypeScript 简写。

JavaScript 和 TypeScript 普通代码和速记代码通常在幕后以相同的方式工作,如何在 PowerPoint 中将文字叠加在视频上因此选择速记通常只意味着编写更少的代码行。请记住,使用速记代码并不总是最好的选择。最重要的是编写清晰易懂的代码,让其他开发人员可以轻松阅读。

猜你喜欢

转载自blog.csdn.net/weixin_47967031/article/details/129682512