迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

JavaScript 中两个数组的区别

作者:迹忆客 最近更新:2023/03/10 浏览次数:

介绍用于确定元素是否属于数组的 .includes 数组实体方法,我们将使用它来获取第一个数组的哪些元素也包含在第二个数组中。

我们将在 .filter 方法的 condition() 函数中使用它。这个回调函数既可以是箭头函数,也可以是普通函数作为回调函数。

.filter 可用于根据条件过滤数组元素,回调函数将指示 .filter 将添加或不添加到返回的数组中的元素。

.include 是 Array 实体的一种方法。如果作为参数传递的元素包含在调用方法的数组中,则返回 true,如果不包含元素,则返回 false。举个简单的例子:

// Input
let array = ['a', 'b', 'c', 'd'];
console.log(array.includes('a'))

输出:

// Output
true

如果元素不属于数组,我们有:

// Input
let array = ['a', 'b', 'c', 'd'];
console.log(array.includes('z'))

输出:

// Output
false

该方法只能接收两个参数。如果你传递多个,它可能会向作为参数传递的元素集返回错误值。如上所见,第一个参数是元素;第二个是索引或 fromIndex,这是可选的。

fromIndex.includes 将在其中搜索元素的索引。让我们看看下面的例子。

// Input
let array = [1, 2, 3, 4, 5];
console.log(array.includes(3, 3))

由于值 3 在索引 array[2] 上,所以从索引 array[3] 到末尾的数组具有等于 3 的元素是 false

// Output
false

现在对于 .filter 方法来说,它也是数组实体的一个方法,并且该方法返回一个由其中的 condition() 函数提供的条件过滤的新数组。返回一个新数组意味着调用该方法的原始数组将保持不变。

此外,这个 condition() 函数是一个回调函数。回调函数作为参数传递给另一个称为外部函数的函数或方法。

外层函数会调用回调函数做某事;在 .filter 方法的情况下,它会调用条件回调函数来根据这个条件过滤数组。

.filter 方法将为数组中的每个元素调用回调函数。因此,.filter 将有一个 array.length 迭代,并最终返回一个新数组,其中的几个元素等于回调函数返回的值等于 true 的迭代次数。

例如,如果我们想要所有大小等于 3 的元素,我们可以使用下面的 .filter

// Input
let array = ['one', 'two', 'three', 'four', 'five']
array = array.filter(element => element.length == 3)
console.log(array)

在这种情况下,它接收一个元素作为参数,如果这个元素的大小等于 3,它返回 true,否则返回 false。因此,.filter 方法会添加条件结果为 true 的任何元素

// Output
[ 'one', 'two' ]

正如预期的那样,.filter 方法返回了一个基于 element.length == 3 条件的数组。大小等于 3 的数组的每个值都被添加到返回的数组中。

但是我们想要得到两个数组之间的差异,这将是可能的。

将在我们想要获取差异的数组上使用 .filter 方法,在其中,我们将使用 .include 作为条件,验证数组上的元素是否调用 .filter 包含在第二个元素中。让我们看看这个例子:

// Input
let array1 = ['a', 'b', 'c', 'd', 'e'];
let array2 = ['a', 'b', 'c'];
console.log(array1.filter(element => array2.includes(element)))

输出:

// Output
[ 'a', 'b', 'c' ]

好吧,看到输出不是两个数组之间的差异,而是它们的交集。并不是说条件 array2.includes(element) 比较 element 是否包含在第二个数组中,如果它是 true.filter 会将这个元素添加到结果数组中。

但是,如果我们输入一个合乎逻辑的 not!在什么情况下?这样,.filter 将只添加不包含在第二个数组中的元素。检查示例:

// Input
let array1 = ['a', 'b', 'c', 'd', 'e'];
let array2 = ['a', 'b', 'c'];
console.log(array1.filter(element => !array2.includes(element)))

输出:

// Output
[ 'd', 'e' ]

最后,我们有两个数组之间的区别。

另外,如果我们想获取所有不在交集中的元素,我们可以执行以下操作。

// Input
let array1 = ['a', 'b', 'c', 'd', 'e', 'f'];
let array2 = ['a', 'b', 'c', 'x', 'y', 'z'];
let array3 = array1.filter(element => !array2.includes(element)).
    concat(array2.filter(element => !array1.includes(element)))
console.log(array3)

在这个例子中,我们想要所有不是'a''b''c'的元素,所以输出是:

// Output
[ 'd', 'e', 'f', 'x', 'y', 'z' ]

最后,作为最后一件事,我们可以将我们的解决方案添加到 Array 实体的原型方法中的两个数组之间的差异。.prototype 是 Array 实体的一个属性,它允许我们向实体添加自定义属性和方法。

要对 Array 实体创建 .difference 方法,我们可以使用以下结构:

// Input
// Declaring the prototype .difference method
Array.prototype.difference = function(array2){
    return this.filter(element => !array2.includes(element))
}
let array1 = ['a', 'b', 'c', 'd', 'e'];
console.log(array1.difference(['a', 'b', 'c']))

输出:

// Output
[ 'd', 'e' ]

这样,我们可以在每次必要时使用 .difference,而不是每次都重写逻辑。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 Angular 中上传文件

发布时间:2023/04/14 浏览次数:71 分类:Angular

本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。

Angular 2 中的复选框双向数据绑定

发布时间:2023/04/14 浏览次数:139 分类:Angular

本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。

在 AngularJs 中加载 spinner

发布时间:2023/04/14 浏览次数:107 分类:Angular

我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。

在 Angular 中显示和隐藏

发布时间:2023/04/14 浏览次数:78 分类:Angular

本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。

在 Angular 中下载文件

发布时间:2023/04/14 浏览次数:104 分类:Angular

本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便