使用这些内置函数提升您的 JavaScript 技能！

Pexels 上的 Josh Hild 拍摄的照片

[

标准内置对象 - JavaScript | MDN

本章记录了 JavaScript 的所有标准内置对象，包括它们的方法和属性。期限…

developer.mozilla.org

](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)

[

数组 - JavaScript | MDN

在 JavaScript 中，数组不是基元，而是具有以下核心特征的 Array 对象：创建...

developer.mozilla.org

](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)

每次更新时，Javascript 都会添加一些新功能，让我们作为开发人员的生活更轻松。虽然一些库和框架很好，但如果我们可以利用内置功能，为什么不呢？我们将在下面介绍一些我最喜欢的！

在（）

at() 方法接受一个整数，然后返回给定索引处的项目。这很好，因为它允许我们同时传递正数和负数。正整数值从左到右计数，而负整数值从右到左计数。

虽然您可以轻松地使用方括号表示法传递您的整数值，例如 数组[3] 对于正整数，或 数组[array.length-3] , 有能力使用 数组（-3） 或者 数组(3) 更简单，更具可读性。在下面的例子中，我们会传入一些叛乱的成员，并抓住我们最关心的那些

 常量名称数组 = [  
 '阿索卡'，  
 “卢克”，  
 '珍'，  
 '莱娅'，  
 '楔'  
 ]; // 在（）  
 console.log(namesArray.at(2)); // 输出：Jyn  
 console.log(namesArray.at(-2)); // 输出：莱娅 // 方括号表示法  
 控制台.log(namesArray[2]); // 输出：Jyn  
 console.log(namesArray[namesArray.length - 2]); // 输出：莱娅

如您所见，虽然这两种方法都有效，但 在（） 更干净，更易于阅读。

[

Array.prototype.at() - JavaScript | MDN

at() 方法接受一个整数值并返回该索引处的项目，允许正整数和负整数……

developer.mozilla.org

](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at)

地图（）

这 地图（） 函数创建一个数组，其中填充了被调用数组中元素的值。例如，如果我们想要一个包含叛乱成员的名字或姓氏的新数组，我们可以调用 地图（） 功能。

虽然我们可以用 for 循环完成类似的事情，但 .map() 函数允许我们缩短代码和复杂性

 const rebellionNames = [  
 {  
 名字：'阿索卡'，  
 姓氏：“塔诺”  
 },  
 {  
 名字：'卢克'，  
 姓氏：“天行者”  
 },  
 {  
 名字：'Jyn'，  
 姓氏：“厄索”  
 },  
 {  
 名字：'莱娅'，  
 姓氏：'器官'  
 },  
 {  
 firstName: '楔形',  
 姓氏：'安的列斯群岛'  
 }  
 ]; const firstName = rebellionNames.map((character) => {  
 返回字符。名字；  
 }); const lastName = rebellionNames.map((character) => {  
 返回字符。姓氏；  
 }); 控制台.log（名字）；  
 // 输出：["Ahsoka", "Luke", "Jyn", "Leia", "Wedge"]  
 控制台.log（姓氏）；  
 // 输出：["Tano", "Skywalker", "Erso", "Organa", "Antilles"]  

[

Array.prototype.map() - JavaScript | MDN

（受此博客文章启发）通常使用带有一个参数（被遍历的元素）的回调。肯定…

developer.mozilla.org

](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)

forEach()

虽然 。地图（） 函数为我们提供了一个由我们传递的值组成的新数组，如果我们想一个一个地输出每个元素怎么办？我们可以用内置的 forEach() ，这可以非常方便。

在提供的示例中，我们将使用由多个字符串组成的 namesArray，然后将它们一一输出。我们可以很容易地将它与类似的东西配对 。筛选（） 搜索特定名称或基于名称的长度。

 常量名称数组 = [  
 '阿索卡'，  
 “卢克”，  
 '珍'，  
 '莱娅'，  
 '楔'  
 ]; namesArray.forEach((name) => console.log(name));  
 // 预期输出：“Ahsoka”  
 // 预期输出：“卢克”  
 // 预期输出：“Jyn”  
 // 预期输出：“Leia”  
 // 预期输出：“楔形”

[

Array.prototype.forEach() - JavaScript | MDN

forEach() 为数组中的每个元素按索引升序调用一次提供的 callbackFn 函数。它不是…

developer.mozilla.org

](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)

筛选（）

最后，让我们讨论 筛选（） 功能。这 筛选（） 函数创建一个 浅拷贝 给定数组的一部分，过滤到仅通过给定函数实现的测试的给定数组中的元素。本质上，如果我们想抓取超过 4 个字符的内容，或者等于“Luke”的内容，我们可以做到这一点。让我们来看一个例子！

在给定的示例中，我们将检查任何内容 名称.长度 > 4 ， 或者 名称 === '卢克' .我们正在检查名称数组中的值。这些应该返回一个包含我们关心的内容的浅拷贝的新数组。

 常量名称数组 = [  
 '阿索卡'，  
 “卢克”，  
 '珍'，  
 '莱娅'，  
 '楔'  
 ];  
 const 结果 = namesArray.filter((name) => name.length > 4);  
 控制台.log（结果）；  
 // 输出：数组 ["Ahsoka", "Wedge"] const specifiedName = namesArray.filter((name) => name === 'Luke');  
 控制台.log（指定名称）；  
 // 输出：数组 ["Luke"]

[

Array.prototype.filter() - JavaScript | MDN

filter() 为数组中的每个元素调用一次提供的 callbackFn 函数，并构造一个包含所有...

developer.mozilla.org

](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)

虽然这些只是 JavaScript 必须提供的开箱即用功能中的一小部分，但我希望它们对您有所帮助。我已经为每个附加了 MDN 文档链接，以防您想要更

The Mandalorian by Disney

我希望这篇文章很有趣。如果您有任何反馈，请发表评论并让我知道我可以改进的地方。如果您想查看我的其他一些帖子，可以找到它们 这里 .我写了所有关于前端的东西，所以我有关于设置的文章 火力基地与反应 , Shopify 的自定义主题开发 , 基于类的 React 组件 , 获取 API , 反应 , & 打字稿 .感谢您的阅读，祝您阅读愉快！

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/38402/44532111