2023最容易忽略JavaScript更新

.groupBy()

Object.groupBy()静态方法根据提供的回调函数返回的值将给定可迭代对象的元素分组。返回的对象为每个组都具有单独的属性,其中包含组中的元素数组。

当字符串可以表示组名称时,应使用此方法。如果您需要使用某些任意值的键对元素进行分组,请改用 Map.groupBy()。

const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },  
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 5 },
  { name: "fish", type: "meat", quantity: 22 }
];

const result = Object.groupBy(inventory, ({ type }) => type); 

/* 结果是:
{
  vegetables: [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },  
  ],
  fruit: [
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }
  ],
  meat: [
    { name: "goat", type: "meat", quantity: 23 },
    { name: "fish", type: "meat", quantity: 22 }  
  ]
}
*/

.toSorted()

Array 实例的 toSorted() 方法是 sort() 方法的复制版本。它返回一个新的数组,其中的元素按升序排序。

const months = ["Mar", "Jan", "Feb", "Dec"];

const sortedMonths = months.toSorted();
console.log(sortedMonths); // ['Dec', 'Feb', 'Jan', 'Mar']  

console.log(months); // ['Mar', 'Jan', 'Feb', 'Dec']

const values = [1, 10, 21, 2]; 

const sortedValues = values.toSorted((a, b) => a - b);
console.log(sortedValues); // [1, 2, 10, 21]

console.log(values); // [1, 10, 21, 2]

: 对话框元素

<dialog> HTML元素表示模态或非模态对话框或其他交互组件,例如可关闭的警报、检查器或子窗口。

HTML <dialog> 元素用于创建模态和非模态对话框。模态对话框中断与页面其余部分的交互,而非模态对话框允许与页面的其余部分进行交互。

应使用 JavaScript 来显示 <dialog> 元素。使用 .showModal() 方法显示模态对话框,使用 .show() 方法显示非模态对话框。可以使用 .close() 方法或在嵌套在 <dialog> 元素中的 <form> 内使用 dialog 方法提交时关闭对话框。按 Esc 键也可以关闭模态对话框。

<dialog open>
  <p>啊,你们!</p>
  <form method="dialog">
    <button>好的</button>
  </form> 
</dialog>

const dialog = document.querySelector("dialog");
const showButton = document.querySelector("dialog + button");
const closeButton = document.querySelector("dialog button");

// “显示对话框”按钮以模态方式打开对话框  
showButton.addEventListener("click", () => {
  dialog.showModal(); 
});

// “关闭”按钮关闭对话框
closeButton.addEventListener("click", () => {
  dialog.close();  
});

我们可以使用 ::backdrop 伪元素来设置对话框的背景。

::backdrop {
  background-image: linear-gradient(
    45deg,
    magenta,
    rebeccapurple,
    dodgerblue,
    green
  );
  opacity: 0.75; 
}

: 通用搜索元素

<search> HTML元素是一个容器,代表文档或应用程序中的执行搜索或过滤操作的表单控件或其他内容的部分。 <search> 元素在语义上标识元素内容的目的是具有搜索或过滤功能。搜索或过滤功能可以用于网站或应用程序、当前网页或文档,或者整个互联网或其子部分。

<search>
  <label>
    查找并过滤您的查询  
    <input type="search" id="query" />
  </label>
  <label>
    <input type="checkbox" id="exact-only" /> 
    仅完全匹配
  </label>

  <section>
    <h3>结果:</h3>
    <ul id="results">
      <!-- 搜索结果内容 --> 
    </ul>
    <output id="no-results">
     <!-- 无结果内容 -->
    </output>
  </section>
</search>

这个示例演示了在 Web 应用程序中动态包含 JavaScript 搜索功能时的潜在 DOM 内容。当使用 JavaScript 完全实现搜索功能时,如果没有提交表单,则不需要 <form> 元素或 submit 按钮。为了语义,<search> 元素被包含以包含搜索和过滤功能。

.findLast()

Array 实例的 findLast() 方法以相反的顺序迭代数组,并返回满足提供的测试函数的第一个元素的值。如果没有元素满足测试函数,则返回 undefined。

const array1 = [5, 12, 50, 130, 44];

const found = array1.findLast((element) => element > 45);

console.log(found);  
// 预期输出:130

.with()

Array 实例的 with() 方法是使用 方括号表示法更改给定索引处的值的复制版本。它返回一个新的数组,其中给定索引处的元素被替换为给定的值。

创建一个单个更改元素的新数组

const arr = [1, 2, 3, 4, 5];
console.log(arr.with(2, 6)); // [1, 2, 6, 4, 5]
console.log(arr); //

.with() (continued)

使用 .with() 方法,您可以更新数组中的单个元素,然后应用其他数组方法。

const arr = [1, 2, 3, 4, 5];
console.log(arr.with(2, 6).map((x) => x ** 2)); // [1, 4, 36, 16, 25]

with() 方法创建并返回一个新数组。它读取 this 的 length 属性,然后访问每个键为非负整数且小于 length 的属性。随着访问 this 的每个属性,数组元素的索引等于属性的键,元素被设置为属性的值。最后,数组中的值 index 被设置为 value。

const arrayLike = {
  length: 3, 
  unrelated: "foo",
  0: 5,
  2: 4,
  3: 3, // 被 with() 忽略,因为 length 是 3
};

console.log(Array.prototype.with.call(arrayLike, 0, 1)); 
// [1, undefined, 4]

结论

总之,2023年的JavaScript更新引入了一些强大而方便的功能,增强了语言的功能和开发人员的体验。Object.groupBy() 方法简化了对可迭代对象中的元素进行分组的过程,使数据操作更加直截了当。Array.prototype.toSorted() 方法提供了对数组排序的非破坏性方法,保留了原始数组的顺序。引入 <dialog> HTML元素及其JavaScript方法,提供了一种更简化的方法来创建模态和非模态对话框,增强了用户交互和界面设计。最后,<search> 元素在处理 Web 应用程序中的搜索和筛选操作方面标志着语义和功能的进步。这些更新不仅展示了 JavaScript 的持续发展,还体现了其致力于为开发人员提供高效和有效的现代 Web 应用程序构建工具的承诺。