js中array对象的常用方法(js array对象) 收藏 0

JavaScript 中的 4 种新方法指南Array.

Array其实和Python中的l列表list的操作用非常像

JavaScript 语言标准的最新版本是 ECMAScript 2023，这是第 14 版。此更新包括原型上的新方法。Array

我将指导您了解本文中突出的四种新方法，包括它们在稀疏数组和类数组对象中的行为。如果你喜欢编写JavaScript程序的声明式、函数式风格，那么你将大饱口福。

潜入：

• 保留没有任何突变的原始阵列重要吗？
• toReversed（） 方法
• toSorted（） 方法
• toSpliced（start， deleteCount， …项）方法
• with（index， value） 方法

四种新数组方法的一个共同主题是专注于不改变原始数组，而是返回一个全新的数组。您可能想知道，为什么这种行为很重要？

一般来说，不修改数据有很多优点，这四种新的数组方法就证明了这一点。这些好处不仅限于数组，而是扩展到所有 JavaScript 对象。

尽管有很多好处，但下面概述了一些最重要的好处：

• 纯函数：在函数式编程中，纯函数是在给定相同输入时始终产生相同输出的函数：它们没有任何副作用，并且它们的行为是可预测的。当你不修改数据时，使用这个函数式心智模型是理想的选择，这四种新的数组方法是一个很好的补充。
• 可预测的状态管理：创建状态对象（或数组）的新副本通过消除意外更改并使用新副本表示特定时间点的数据，使状态管理更具可预测性。这简化了大规模状态管理，并总体上改进了有关状态管理的推理
• 更改检测：像 React 这样的框架通过比较状态或 props 对象的两个副本来识别任何更改并相应地呈现用户界面，从而使用简化的更改检测。使用这些方法检测变化变得更加简单，因为我们可以在任何给定时刻比较两个对象以识别任何变化。

该方法与经典方法相似，但有明显的区别。 反转数组中的元素，而不改变原始数组。toReversed()reverse()toReversed()

考虑以下水果阵列：

现在，反向与：fruits.reverse()

使用 ，原始数组发生突变。reverse()

要反转数组而不改变它，我们可以使用如下所示的方法：toReversed()

瞧！

如果您使用的是最新版本的当前浏览器（如 Chrome），则可以访问浏览器控制台并测试本文中提供的代码示例：

在浏览器控制台中尝试该方法toReversed

为了快速复习，稀疏数组是没有顺序元素的数组。例如，请考虑以下事项：

在上面的示例中， 有八个空项目槽。 是一个稀疏数组。现在，回到 。这如何与稀疏数组一起工作？numbersnumberstoReversed()

toReversed()从不返回稀疏数组。如果原始阵列有空插槽，则它们将返回为 。undefined

考虑调用下面的数组：toReversed()numbers

正如预期的那样，所有空插槽都作为数组项值返回。undefined

即使专门存在于原型上，它也可以在类似数组的对象上调用。toReversed()Array

类似数组的对象通常具有属性和（可选）具有整数索引名称的属性。字符串对象是类数组对象的一个示例。length

该函数首先读取调用它的对象的属性，然后从末尾到开头遍历对象的整数键，这意味着从 to .它将每个属性的值添加到新数组的末尾，然后返回该数组。toReversed()lengthlength – 10

让我们试一试。考虑在字符串上的错误应用：toReversed()

即使字符串对象是一个类似数组的对象，这个程序也是错误的：我们不能以这种方式调用它，因为原型上不存在。string.toReversed()toReversedstring

但是，我们可能会使用如下所示的方法：call()

一个自我构造的、类似数组的对象怎么样？请考虑以下示例：

如果这是一个标准数组，它将是一个稀疏数组，即长度为五，第二个索引中的值。

考虑调用此内容的结果：toReversed

该函数生成一个反向数组，而不创建稀疏数组。正如预期的那样，空插槽返回为 。toReversed()undefined

.toSorted()是经典方法的对应物。.sort()

您可能已经猜到了，与 不同，不会改变原始数组。考虑以下基本排序操作：.sort().toSorted().sort()

如上所示，对数组进行就地排序，从而改变数组。现在，考虑与以下相同的情况：sort()toSorted()

如上所示，返回一个元素排序的新数组。toSorted()

请注意，保留与 相同的语法。例如，我们可以指定一个定义排序顺序的函数，例如。toSorted()sort()list.toSorted(compareFn)

请考虑以下示例：

空插槽将始终返回为 。事实上，它们被视为值为 .但是，不会为这些插槽调用 ，它们将始终位于返回数组的末尾。undefinedundefinedcompareFn

考虑以下示例，其中包含第一个插槽为空的数组：

此行为与初始值为 .请考虑以下示例：undefined

另外，请注意，空插槽（或插槽）将始终移动到返回数组的末尾，无论它们在原始数组中的位置如何。undefined

请考虑以下示例：

当函数与对象一起使用时，它将首先读取对象的属性。然后，它将从头到尾收集对象的整数键，即从 to .对它们进行排序后，它将在新数组中返回相应的值。toSorted()lengththis0length – 1

请考虑以下带有字符串的示例：

请考虑以下示例，其中包含一个构造的类似数组的对象：

.toSpliced()是经典方法的对应物。与我们介绍的其他新方法一样，与 ..splice()toSpliced().splice()

的语法与 相同，如下所示：toSpliced.splice

使用经典 添加新的数组项，如下所示：.splice()

splice()插入新的数组项并改变原始数组。要在不改变原始数组的情况下创建新数组，请使用 。toSpliced()

考虑将上面的示例重写为使用 ：toSpliced()

toSpliced()返回一个新数组而不改变原始数组。请注意两者的语法如何相同。toSpliced()splice()

toSpliced()从不返回稀疏数组。因此，空插槽将返回为 .undefined

请考虑以下示例：

对于类似数组的对象，获取对象的长度，读取所需的整数键，并将结果写入新数组：toSplicedthis

数组方法特别有趣。首先，考虑用于更改特定数组索引值的括号表示法：.with()

使用括号表示法，原始数组总是改变的。 实现在特定索引中插入元素的相同结果，但不会改变数组。相反，它会返回一个带有替换索引的新数组。.with()

让我们重写初始示例以使用：.with()

with()从不返回稀疏数组。因此，空插槽将返回为：undefined

与其他方法类似，读取对象的属性。然后，它读取对象的每个正整数索引（小于 ）。访问这些时，它会将其属性值保存到返回数组索引中。with()lengththislength

最后，在返回的数组上设置调用签名中的 and。请考虑以下示例：indexvaluewith(index, value)

ECMAScript 标准在不断改进，利用它的新功能是个好主意。继续利用 、、 并创建更具声明性的 JavaScript 应用程序。toReversedtoSortedtoSplicedwith

遍历 JavaScript 对象属性的六种方法

在 JavaScript 开发中，我们经常需要遍历对象的属性，读取或修改其值。但你是否了解遍历对象属性的多种方法？每种方法都有其独特的特点和适用场景。今天，我们就来深入探讨 JavaScript 中遍历对象属性的六种常用方法，让你对对象遍历有更全面的认识。

JavaScript 对象的属性是无序的键值对集合。在实际开发中，我们经常需要遍历这些属性，获取键名或值，或者同时获取键名和值。那么，JavaScript 提供了哪些遍历对象属性的方法呢？每种方法又有什么区别呢？让我们带着这些问题，开始今天的探索之旅。

首先，我们定义一个示例对象 obj，用于演示各种遍历方法：

for…in 循环是最传统的遍历对象属性的方法。它会遍历对象及其原型链上的所有可枚举属性。

• hasOwnProperty: hasOwnProperty() 方法用于检查对象是否直接拥有某个属性，而不是从原型链继承来的属性。
• 遍历顺序: for…in 循环遍历的属性顺序是不确定的，可能与属性定义顺序不同。
• 原型链属性: 需要注意 for…in 循环会遍历原型链上的属性，所以通常需要使用 hasOwnProperty() 方法进行过滤。

Object.keys() 方法会返回一个包含对象所有可枚举属性键名的数组。结合 forEach 方法，可以遍历对象的属性键名。

• 仅遍历自身属性: Object.keys() 方法只返回对象自身的可枚举属性键名，不包括原型链上的属性。
• 返回数组: Object.keys() 方法返回的是一个数组，可以使用数组的各种方法进行处理。
• 遍历顺序: Object.keys() 方法返回的属性键名顺序通常与属性定义顺序一致。

Object.values() 方法会返回一个包含对象所有可枚举属性值的数组。结合 forEach 方法，可以遍历对象的属性值。

• 仅遍历自身属性值: Object.values() 方法只返回对象自身的可枚举属性值，不包括原型链上的属性值。
• 返回数组: Object.values() 方法返回的是一个数组，可以使用数组的各种方法进行处理。
• 不包含键名: Object.values() 方法只能遍历属性值，无法获取属性键名。

Object.entries() 方法会返回一个包含对象所有可枚举属性的键值对数组。结合 forEach 方法，可以遍历对象的键值对。

• 键值对数组: Object.entries() 方法返回的是一个二维数组，每个子数组包含一个键值对。
• 解构赋值: 可以使用数组解构赋值 ([key, value])来获取键名和值。
• 仅遍历自身属性: Object.entries() 方法只返回对象自身的可枚举属性的键值对，不包括原型链上的属性。

for…of 循环可以遍历可迭代对象，如数组。结合 Object.entries() 方法，可以使用 for…of 循环遍历对象的键值对。

• 可读性高: for…of 循环语法更加简洁，可读性更高。
• 解构赋值: 可以使用数组解构赋值 ([key, value])来获取键名和值。
• 遍历顺序: for…of 循环遍历的顺序通常与属性定义顺序一致。

结合 Object.keys() 方法，可以使用传统的 for 循环遍历对象的属性。

• 循环遍历键名: for 循环遍历 Object.keys() 返回的键名数组。
• 传统遍历方式: for 循环是一种传统的遍历数组的方式。

本文详细介绍了 JavaScript 中遍历对象属性的六种常用方法，包括 for…in 循环，Object.keys()、Object.values() 和 Object.entries() 方法，以及 for…of 循环和 for 循环。每种方法都有其独特的特点和适用场景，在实际开发中，我们可以根据具体需求选择最合适的方法。

掌握这些遍历技巧，可以帮助我们更好地处理 JavaScript 对象，提高开发效率。希望今天的文章能为你提供一些帮助。也欢迎在评论区分享你在对象遍历中的经验。

最后，不妨思考一下：

1. 你认为哪种方法遍历对象属性更方便？
2. 在实际项目中，你最常用哪种方法遍历对象属性？

期待与你一起探索 JavaScript 的更多可能性。

js数组常用方法总结

首先说明，本文没技术含量，都是js的知识，只是为以后查阅方便。另外我们开了一个免费的讲解web前端课程，有兴趣的朋友可以去看，详情地址：http://fe.qietu.com/forum.php

1、创建数组；

var arr = new Array(); //创建一个空数组；

var arr1 = new Array(3); //创建一个包含3项的数组，每一项都是undefined；

var arr2 = new Array(\”3\”); //创建一个数组，只有一项为字符串3；

2、常用方法

join();

此方法可以把数组转换为字符串，接受一个参数指定数组每一项的连接符；若不加参数，默认为逗号；

例如：

var arr=[2,3,4];

arr.join(\’\’); // \”234\”

arr.join(\’+\’); // \”2+3+4\”

split();

此方法可以字符串转为数组;

例如：

var str=\”https://www.baidu.com/s?wd=javascript&rsv_spt=1&rsv_iqid=0xb5b5ce2900000036&issp=1&f=3&rsv_bp=0&rsv_idx=2&ie=utf-8&tn=baiduhome_pg\”;

str.split(\’?\’)[1].split(\’&\’);

//[\”wd=javascript\”, \”rsv_spt=1\”, \”rsv_iqid=0xb5b5ce2900000036\”, \”issp=1\”, \”f=3\”, \”rsv_bp=0\”, \”rsv_idx=2\”, \”ie=utf-8\”, \”tn=baiduhome_pg\”]

push();

把元素从后面添加到数组；可以接受任意参数，返回数组的长度；

例如：

var arr=[2,3];

arr.push(\’d\’); // 3;

alert(arr); // [2,3,\”d\”];

pop();

从数组末尾删除最后一项，减少数组的长度；不加参数；返回删除项；

例如：

var arr=[1,2,3];

arr.pop(); // 3;

arr; // [1, 2];

unshift();

把元素从前面添加到数组；可以接受任意参数，返回数组的长度；

例如：

var arr=[1,2,3];

arr.unshift(0); // 4

arr; // [0, 1, 2, 3]

shift();

删除数组的第一项，减少数组的长度；不加参数；返回删除项；

例如：

var arr=[0,1,2,3];

arr.shift(); //0

arr; //[1, 2, 3]

reverser();

反转数组的顺序；不够灵活更多时使用sort()方法；

例如：

var arr=[2,3,4,5]; arr.reverse();

[5, 4, 3, 2]

sort();

对数组进行排序，默认为升序（由小到大）；可接受比较函数作为参数来指定如何排列；

例如：

var a=[6,4,8,1,0,9,4,2];

a.sort(function(a,b){return a-b}); // [0, 1, 2, 4, 4, 6, 8, 9]

a.sort(function(a,b){return b-a}); // [9, 8, 6, 4, 4, 2, 1, 0]

concat();

创建并返回一个新的数组；不改变原有数组；

例如：

var a=[2,3,4];

a.concat([\”a\”,\”b\”]); // [2, 3, 4, \”a\”, \”b\”]

slice();

截取当前数组创建并返回一个新的数组；一到两个参数，分别代表起始位置和结束位置之间的项，不包含结束位置的项，当只有第一个参数，代表从参数指定位置到结尾;

例如：

var arr=[3,2,\”a\”,\”c\”,6,\”e\”];

arr.slice(1,4); // [2, \”a\”, \”c\”]

arr; // [3, 2, \”a\”, \”c\”, 6, \”e\”]

arr.slice(4); // [6, \”e\”]

splice();

功能强大；可实现插入、替换、删除方法；参数有多个；会修改原数组；

删除：可删除任意项，指定两个参数，分别代表 要删除第一项的位置和删除的项数。返回删除项

例如：

var arr=[3, 2, \”a\”, \”c\”, 6, \”e\”];

arr.splice(1,2); // [2, \”a\”]

arr; // [3, \”c\”, 6, \”e\”]

替换：在任意位置插入任意数量的项，同时删除任意数量的项，第一个参数为起始位置，第二个参数为要删除的项数，后面分别代表要插入的每一项。删除的项数和插入的项数可以不相等。

例如：

var arr=[3, 2, \”a\”, \”c\”, 6, \”e\”];

arr.splice(2,1,\”insert0\”,\”insert1\”);

arr; // [3, 2, \”insert0\”, \”insert1\”, \”c\”, 6, \”e\”]

插入：在指定位置插入任意数量的项；第一个参数代表起始位置，第二个参数代表要插入的项0；如果是多个项，分别是为后面的参数

例如：

var a=[2,3,4];

a.splice(1,0,\”insert0\”,\”insert1\”);

a; // [2, \”insert0\”, \”insert1\”, 3, 4]

ECMAScript 5 新方法：

注意兼容性问题，支持 chrome , IE9+ , FF2+ , Safari3+ , Opera9.5+

map();

迭代数组；对每一项运行对应的函数，参数可选值：数组项的值，该项在数组中的位置，数组对象本身 ；不会修改原数组；返回函数调用的结果组成的数组；

var arr=[1,4,3];

arr.map(function( res , n ){ return res+1 }); // [2, 5, 4]

forEach();

同map() 方法，迭代数组；对每一项运行对应的函数，无返回值；

更多迭代方法如 filter(),every(),some() 可参考其它教程

文/丁向明

做一个有博客的web前端自媒体人，专注web前端开发，关注用户体验，加我qq/微信交流：6135833

http://dingxiangming.com

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com