草庐IT

七个你可能还不知道的强大的 JavaScript 特性

佚名 2023-04-13 原文

1.可选链接

可选链接是 JavaScript 中的一项新功能，它允许开发人员编写更简洁、更易于阅读的代码。使用可选链接，您可以访问对象的嵌套属性，而不必担心这些属性是否存在。

const user = {
  name: 'John',
  address: {
    city: 'New York',
    state: 'NY'
  }
};


console.log(user?.address?.city); // Output: New York
console.log(user?.address?.zipCode); // Output: undefined

在上面的示例中，我们使用可选的链接运算符 (?.) 来访问地址对象的 city 属性。如果 address 对象不存在，或者它没有 city 属性，代码将简单地返回 undefined。

2. 无效合并运算符

nullish 合并运算符 (??) 是 JavaScript 中的另一个新功能，可用于为可能为 null 或未定义的变量提供默认值。

const name = null ?? 'John';


console.log(name); // Output: John

在上面的示例中，我们使用 nullish 合并运算符将默认值“John”分配给 name 变量，因为它的初始值为 null。

3.Promise.allSettled()

Promise.allSettled() 方法是 JavaScript 中 Promise API 的新增功能。它允许开发人员同时运行多个Promise并获得所有Promise的结果，无论它们是解决还是拒绝。

const promises = [
  Promise.resolve(1),
  Promise.reject('Error'),
  Promise.resolve(3)
];


Promise.allSettled(promises)
  .then(results => console.log(results));


// Output:
// [
//   { status: 'fulfilled', value: 1 },
//   { status: 'rejected', reason: 'Error' },
//   { status: 'fulfilled', value: 3 }
// ]

在上面的示例中，我们使用 Promise.allSettled() 方法同时运行三个Promise，然后记录所有承诺的结果，包括被拒绝的结果。

4. 对象.fromEntries()

Object.fromEntries() 方法是 JavaScript 中对象 API 的新增功能。它允许开发人员从键值对数组创建对象。

const entries = [
  ['name', 'John'],
  ['age', 30],
  ['city', 'New York']
];


const obj = Object.fromEntries(entries);


console.log(obj); // Output: { name: 'John', age: 30, city: 'New York' }

在上面的示例中，我们使用 Object.fromEntries() 方法从键值对数组创建对象。

5.BigInt

BigInt 数据类型是 JavaScript 的新增功能，它允许开发人员使用大于 Number 数据类型支持的最大值的整数。

const a = BigInt(9007199254740991);
const b = BigInt(9007199254740991);


console.log(a + b); // Output: 18014398509481982n

在上面的示例中，我们使用 BigInt 将两个非常大的数字相加。

6.可选的 Catch 绑定

可选的 catch 绑定是 JavaScript 中的一项新功能，它允许开发人员在不需要参数的情况下捕获错误。这可以使代码更简洁，更易于阅读。

try {
// some code that may throw an error
} catch {
// handle the error without a parameter
}

在上面的示例中，我们使用可选的 catch 绑定来捕获错误而不指定参数。如果您不需要在 catch 块中使用错误对象，这会很有用。

7.数组.prototype.flatMap()

Array.prototype.flatMap() 方法是 JavaScript 中 Array API 的新增功能。它允许开发人员在一个步骤中映射然后展平数组。

const arr = [1, 2, 3, 4];


const result = arr.flatMap(x => [x * 2]);


console.log(result); // Output: [2, 4, 6, 8]

在上面的示例中，我们使用 Array.prototype.flatMap() 方法将数组的每个元素乘以 2，然后将结果数组展平为单个数组。

结论

这些只是可供开发人员使用的许多很酷的现代 JavaScript 功能中的一小部分。通过跟上语言的最新更新，您可以编写更高效、更简洁的代码，并利用可以帮助您成为更好的开发人员的新工具和技术。


JavaScript强大spanstylecolor开发前端

有关七个你可能还不知道的强大的 JavaScript 特性的更多相关文章

  1. ruby - 如何以所有可能的方式将字符串拆分为长度最多为 3 的连续子字符串？ - 2

    我试图获取一个长度在1到10之间的字符串，并输出将字符串分解为大小为1、2或3的连续子字符串的所有可能方式。例如:输入:123456将整数分割成单个字符，然后继续查找组合。该代码将返回以下所有数组。[1,2,3,4,5,6][12,3,4,5,6][1,23,4,5,6][1,2,34,5,6][1,2,3,45,6][1,2,3,4,56][12,34,5,6][12,3,45,6][12,3,4,56][1,23,45,6][1,2,34,56][1,23,4,56][12,34,56][123,4,5,6][1,234,5,6][1,2,345,6][1,2,3,456][123

  2. ruby - EventMachine - 你怎么知道你是否落后了？ - 2

    我正在研究使用EventMachine支持的twitter-streamruby​​gem来跟踪和捕获推文。我对整个事件编程有点陌生。我如何判断我在事件循环中所做的任何处理是否导致我落后？有没有简单的检查方法？ 最佳答案 您可以通过使用周期性计时器并打印出耗时来确定延迟。如果您使用的是1秒的计时器，您应该已经过了大约1秒，如果它更长，您就知道您正在减慢react器的速度。@last=Time.now.to_fEM.add_periodic_timer(1)doputs"LATENCY:#{Time.now.to_f-@last}"@

  3. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. Ruby Regex，获取所有可能的匹配项(不截断字符串) - 2

    我遇到了ruby​​正则表达式的问题。我需要找到所有(可能重叠的)匹配项。这是问题的简化:#Simpleexample"Hey".scan(/../)=>["He"]#Actualresults#Withoverlappingmatchestheresultshouldbe=>["He"],["ey"]我尝试执行并获得所有结果的正则表达式如下所示:"aaaaaa".scan(/^(..+)\1+$/)#Thislooksformultiplesof(here)"a"biggerthanonethat"fills"theentirestring."aa"*3=>true,"aaa"*2=

  5. ruby-on-rails - Ruby 如何知道在哪里可以找到所需的文件？ - 2

    这里还有一个新手问题:require'tasks/rails'我在每个Rails项目的根路径中的Rakefile中看到了这一行。我猜这行用于要求vendor/rails/railties/lib/tasks/rails.rb加载所有rake任务:$VERBOSE=nil#LoadRailsrakefileextensionsDir["#{File.dirname(__FILE__)}/*.rake"].each{|ext|loadext}#LoadanycustomrakefileextensionsDir["#{RAILS_ROOT}/lib/tasks/**/*.rake"].so

  6. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  7. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  8. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

  9. ruby-on-rails - 是否有可能发现 Ruby on Rails 应用程序中未使用哪些类？ - 2

    在我们的项目中，我们有一些“被遗忘的”类存在了很长一段时间。那些类已被其他类替代，但我们忘记删除它们。是否有一些自动化的方法/工具可以发现Ruby{onRails}应用程序中没有使用哪些类？谢谢! 最佳答案 这个问题已经被提出了很多次，但是最好的答案都在这里:FindunusedcodeinaRailsapp我个人喜欢日志解析:https://stackoverflow.com/a/14161807但在任何情况下，您都可以创建自己的记录器，扩展ActiveRecord::Base以创建一个观察器，该观察器将最常用的模块存储在数据库中

  10. ruby - Class 怎么可能属于 Class 类而没有 Class 实例方法呢？ - 2

    我正在研究Ruby解释器是如何实现的，并且出现了一个问题，但我还没有得到答案。这就是标题中的那个:因为Class(r_cClass)将super设置为自身(忽略元类，因为实际上super是r_cClass的元类)，如果我向Class对象发送一个方法，这将在Class的方法表中查找'类(class)。但是Class的类是Class，所以我不应该最终寻找Class的实例方法吗？但事实并非如此，因为在文档中Class类方法和Class实例方法是分开的。在Ruby的eval.c中的search_method中，我没有发现对Class类有什么特别的检查。任何人都可以阐明这一点吗？

随机推荐