首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么我喜欢 JavaScript 可选链

通常,你可以在以下情况下处理此类对象: 获取远程JSON数据 使用配置对象 具有可选属性 尽管这对象提供了支持不同数据的灵活性,但是在访问此类对象的属性,随之而来的是增加了复杂性。...你可以在同一表达式中自由使用多个可选链运算符。甚至可以用它安全地访问数组项! 下一个任务编写一个返回电影主角姓名的函数。...如果 variable 是 undefined null,则表达式 variable ?? defaultValue 的结果 defaultValue。...何时使用可选链 要抵制使用可选链运算符访问任何类型属性的冲动:这会导致错误的用法。下一节将说明何时正确使用它。 6.1 可能无效的访问属性 必须仅在可能为空的属性附近使用 ?....在其他情况下,请使用老式的属性访问器:.property [propExpression]。 调用电影对象。查看表达式 movie.director?.

69840
您找到你想要的搜索结果了吗?
是的
没有找到

【JS】1847- JavaScript 中几个优雅的运算符使用技巧

} 上面的代码用于 API 响应,我必须解析 JSON 以确保名称存在。但是,当对象具有可选属性某些配置对象具有某些值的动态映射,可能会遇到类似情况,需要检查很多边界条件。...由于操作符一旦空值就会终止,因此也可以使用它来有条件地调用方法应用条件逻辑 const conditionalProperty = null; let index = 0; console.log...从左到右操作,如果 x 不为 nullish 值则中表达式不执行。因此,如果 x 不为null 或者 undefined,则永远不会对表达式y进行求值。如果y是一个函数,它将根本不会被调用。...(x = y); 三、逻辑分配(|| =) 此逻辑赋值运算符仅在左侧表达式 falsy 值(虚值) 才赋值。...' 四、逻辑与分配(&& =) 可能你已经猜到了,此逻辑赋值运算符仅在左侧才赋值。

17821

JavaScript 权威指南第七版(GPT 重译)(二)

使用.[]的常规属性访问表达式中,如果左侧的表达式评估nullundefined,则会收到 TypeError。您可以使用?.和?.[]语法来防止此类错误。 考虑表达式a?.b。...当调用表达式被评估,首先评估函数表达式,然后评估参数表达式生成参数值列表。如果函数表达式的值不是函数,则会抛出 TypeError。...()而不是()来调用函数。通常当你调用一个函数,如果括号左侧的表达式nullundefined任何其他非函数值,将抛出 TypeError使用新的?.()调用语法,如果?....在第二个表达式中,如果onullundefined,则表达式评估undefined。但如果o有任何其他值,则它必须具有一个值函数的属性m。...在严格模式下,如果其操作数是未经限定的标识符,如变量、函数函数参数,则delete 会引发 SyntaxError:它仅在操作数属性访问表达式起作用(§4.4)。

43010

4个优雅的 ES2020 运算符使用技巧

} 上面的代码用于API响应,我必须解析JSON以确保名称存在。但是,当对象具有可选属性某些配置对象具有某些值的动态映射,可能会遇到类似情况,需要检查很多边界条件。...由于操作符一旦空值就会终止,因此也可以使用它来有条件地调用方法应用条件逻辑 const conditionalProperty = null; let index = 0; console.log...因此,如果x不为 null 或者 undefined,则永远不会对表达式y进行求值。因此,如果y是一个函数,它将根本不会被调用。因此,此逻辑赋值运算符等效于 x ??...(x = y); 三、逻辑分配(|| =) 此逻辑赋值运算符仅在左侧表达式 falsy值才赋值。...' 四、逻辑与分配(&& =) 可能你已经猜到了,此逻辑赋值运算符仅在左侧才赋值。

1.2K30

大话 JavaScript(Speaking JavaScript):第十六章到第二十章

其理由是超级方法必须与当前方法使用相同的实例;它必须能够访问相同的实例属性。 因此,子方法的代码如下所示。...特别是当涉及到星际飞船中的代码点,您必须小心。第二十四章解释了详细信息。 创建正则表达式 您可以通过文字构造函数创建正则表达式,并通过标志配置其工作方式。...文字与构造函数 有两种方法可以创建正则表达式:您可以使用文字构造函数RegExp: 文字:/xyz/i:在加载编译 构造函数(第二个参数是可选的):new RegExp('xyz','i'):在运行时编译...但是您必须意识到您不能这样做,即使是在快速的 hack 中也不行。 问题 2:/g正则表达式作为参数 调用test()和exec()多次的代码在作为参数传递给它的正则表达式必须小心。...如果您需要进行多次搜索和替换,则此函数特别方便。然后要搜索的值必须是设置了global标志的正则表达式使用quoteText(),您可以使用任意字符串。

31220

可选链运算符(?.)

背景: 在 ES2020 之前,如果要访问 JavaScript 中对象的嵌套属性,则必须在每个级别检查是否 null undefined,否则最终将会抛出 TypeError。...为了避免出现 TypeError,我们将不得不创建临时变量执行一系列增量 && 调用,这看起来很丑陋,并且同时占用了空间和时间。...(); 注: 如果存在一个属性名且不是函数使用 ?. 仍然会产生一个 TypeError 异常 (x.y is not a function). 处理可选的回调函数或者事件处理器 使用?....(err.message); // 如果 onError 是 undefined 也不会有异常 } } 可选链和表达式使用方括号与属性名的形式来访问属性,你也可以使用可选链运算符: let nestedProp...name; 短路计算 当在表达式使用可选链,如果左操作数是 null undefined,表达式将不会被计算,例如: let potentiallyNullObj = null; let x =

1K30

TypeScript 非空断言

; } 二、非空断言操作符简介 在上下文中当类型检查器无法断定类型,一个新的后缀表达式操作符 ! 可以用于断言操作对象是非 null 和非undefined 类型。具体而言,x!...; // Ok } 2.2 调用函数忽略 undefined 类型 type NumGenerator = () => number; function myFunc(numGenerator: NumGenerator...(); } // Uncaught TypeError: numGenerator is not a function myFunc(undefined); // Error 以上 TS 代码会编译生成以下...需要注意的是,非空断言操作符仅在启用 strictNullChecks 标志的时候才生效。当关闭该标志,编译器不会检查 undefined 类型和 null 类型的赋值。...complete ,响应对象不会为 null,但 TypeScript 并无法感知这些,所以我们还需要使用非空断言 ajaxState.response!.

20.1K65

ECMAScript 2020 新增功能速成

新的 dynamic import 语法看起来像一个函数(但不是),它返回 promise,这也意味着可以将其与 async/await一起使用。...,该运算符的工作原理与其类似,但仅在初始值 null undefined 才赋值右手。...Promise.allSettled 还记得 Promise.all 函数吗?它仅在所有的 Promise 均得到解决才会被解决。...只有当所有的 promise 全部都完成(即成功被拒绝),它才会被解决。它被分解一个数组,其中包含 promise 的状态及其所解决的内容(错误)。...如果你认为这命名有点尴尬,那么我完全同意你的看法,但是请注意,将其命名为 self global 可能会使某些旧代码不兼容。所以我想我们必须忍受这一点。

77020

JavaScript 面试要点:作用域和闭包

如果 RHS 查询找到了一个变量,但是尝试对这个变量的值进行不合理的操作,比如试图对一个非函数类型的值进行函数调用,着引用 null undefined 类型的值中的属性,那么引擎会抛出另外一种类型的异常...ReferenceError 同作用域判别失败相关,而 TypeError 则代表作用域判别成功了,但是对结果的操作是非法不合理的。...通常来讲,显式的代码优于隐式一些精巧但不清晰的代码。 只要声明是有效的,在声明中的任意位置都可以使用 { .. } 括号来 let 创建一个用于绑定的块。...只有声明本身会被提升,而赋值其他运行逻辑会留在原地 。如果提升改变了代码执行的顺序,会造成非常严重的破坏。 每个作用域 都会进行提升操作。 函数声明会被提升,但是函数表达式却不会被提升。...foo(); // TypeError 相当于 undefined() var foo = function() { console.log('foo'); }; 即使是具名的函数表达式,名称标识符在赋值之前也无法在所在作用域中使用

42120

TypeScript 可选链

有了可选链后,我们编写代码如果遇到 null undefined 就可以立即停止某些表达式的运行。可选链的核心是新的 ?. 运算符,它支持以下语法: > obj?.prop > obj?....void 0 : a.b; 上述的代码会自动检查对象 a 是否 null undefined,如果是的话就立即返回 undefined,这样就可以立即停止某些表达式的运行。...只会验证对象是否 null undefined,对于 0 空字符串来说,并不会出现 “短路”。...最后我们来介绍一下可选链与函数调用。 五、可选链与函数调用 当尝试调用一个可能不存在的方法也可以使用可选链。在实际开发过程中,这是很有用的。...函数调用时如果被调用的方法不存在,使用可选链可以使表达式自动返回 undefined 而不是抛出一个异常。

2.6K32

例外处理

Exception 代码运行可能会意外出现各种错误: • 语法错误:Syntax Error • 除以0错误:ZeroDivisionError • 列表下标越界:IndexError • 类型错误:TypeError...三、推导式comprehensions 可以用来生成列表、字典和集合的语句 • [ for in if] • {: for <...与推导式一样语法: • (for in if ) • 返回一个生成器对象,也是可迭代对象 • 但生成器并不立即产生全部元素,仅在要用到元素的时候才生成...七、生成函数 • 如果生成器较复杂,一行表达式无法容纳,可以定义生成函数生成函数的定义与普通函数相同,只是将return换成 了yield • yield语句会立即中止函数执行,返回一个值...• 但在下一次迭代生成函数的时候,会从yield语句后的语句继续执行,直到再次yield返回,终止 • return语句也会立即中止函数执行,返回一个值 • 但它会终止函数的执行,下次调用函数会重新执行函数

78620

JavaScript 进阶问题列表

静态方法被设计只能被创建它们的构造器使用(也就是 Chameleon),并且不能传递给实例。因为 freddie 是一个实例,静态方法不能被实例使用,因此抛出了 TypeError 错误。...为了避免这个题,我们可以使用 "use strict"。这能确保当你声明变量必须赋值。 ---- 10. 当我们这么做,会发生什么?...你不能使用 let  const 来实现这一点,因为它们是块作用域的。 ---- 24. 输出是什么?...注意,生成器在这种情况下不 返回 (return )值,而是 生成 (yield)值。 首先,我们用10作为参数i来初始化生成函数。然后使用next()方法一步步执行生成器。...然后我们声明了变量x等于y,也是10.但变量是使用 let声明的,它只作用于 块级作用域, 仅在声明它的块中有效;就是案例中的立即调用表达式(IIFE)。

1.3K10

这些python3的小知识点你都知道吗?

这么说可能比较“高深”,举个例子,表达式 x and y,需要 x 和 y 两个变量同时真(True)的时候,结果才真。...__init__() should return None 32、子类定义了父类的方法 当子类定义了与父类相同的属性和方法,会将父类属性方法覆盖,子类对象调用的时候会调用到覆盖之后的新属性方法...33、super()函数 super()函数超级之处在于你不需要明确的给出任何基类的名字,它会自动的帮你找出所有的基类以及对应的方法,由于你不用给出基类的名字,这就意味着你如果需要改变了类继承关系,...,并返回修饰后的同名函数其它可调用的东西。...if not name.isupper(): raise TypeError('常量名必须由大写字母组成!') self.

62960

面试官问:能否模拟实现JS的call和apply方法

一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 func 函数。如果该参数的值 null undefined,则表示不需要传入任何参数。...),笔者都验证了一遍:更加验证了相同点第一点,严格模式下,函数的this值就是call和apply的第一个参数thisArg,非严格模式下,thisArg值被指定为 null undefined ...thisArg 是 undefined null 它会被替换成全局对象,所有其他值会被应用 ToObject 并将结果作为 this 值,这是第三版引入的更改。...面试可以直接用生成时间戳即可。...如果返回值空,返回undefined 解决方案二:但万一面试官不允许用eval呢,毕竟eval是魔鬼。可以采用new Function()来生成执行函数

79730

作用域和闭包

# 作用域嵌套 当一个块函数嵌套在另一个块函数,就发生了作用域的嵌套。...如果 RHS 查询找到了一个变量,但是尝试对这个变量的值进行不合理的操作,比如试图对一个非函数类型的值进行函数调用,着引用 null undefined 类型的值中的属性,那么引擎会抛出另外一种类型的异常...通常来讲,显式的代码优于隐式一些精巧但不清晰的代码。 只要声明是有效的,在声明中的任意位置都可以使用 { .. } 括号来 let 创建一个用于绑定的块。...foo(); // TypeError 相当于 undefined() var foo = function() { console.log('foo'); }; 即使是具名的函数表达式,名称标识符在赋值之前也无法在所在作用域中使用...模块模式需要具备两个必要条件: 必须有外部的封闭函数,该函数必须至少被调用一次(每次调用都会创建一个新的模块实例) 封闭函数必须返回至少一个内部函数,这样内部函数才能在私有作用域中形成闭包,并且可以访问或者修改私有的状态

69420

7个处理JavaScript值undefined的技巧

相关的常见错误消息是: TypeError:'undefined'不是函数 TypeError:无法读取未定义的属性''' 和类似type errors。...让我们来看看: 变量不会暴露于未初始化的状态,因此您没有访问未定义的风险 尽可能将变量移动到它们的使用地点增加了代码的可读性 高度连贯的代码块在需要更容易重构并提取分离的函数 2.2 访问不存在的属性...使用默认属性值填充不完整的对象是使代码安全和稳定的有效策略。不管情况如何,对象总是包含全部属性:'undefined'不能生成。 2.3 函数的参数 函数参数默认默认为undefined。...始终使用它来可选参数设置默认值。 2.4 函数返回值 隐式地,没有return语句,JavaScript函数返回undefined。...当一个换行符位于return和返回的表达式'return \ n expression之间,ASI自动在换行符之前插入一个分号; \ n表达式。 在函数内部意味着什么return;语句?

5.9K30

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券