JavaScript数组技巧-截断和填充条目

发布于1/15/2020 来自:「前端知否」微信公众号

JavaScript与其他任何编程语言一样,具有许多方便的技巧,使我们可以更轻松地编写程序。在本文中,我们将研究如何执行涉及数组的不同操作,例如截断数组,将数组转换为对象以及用数据填充数组。

截断数组

在JavaScript中,数组对象具有length属性,该属性指定数组的长度。它既是getter属性,又是setter属性,因此除了能够获取数组的长度之外,我们还可以使用它来设置数组的长度。

将length属性设置为小于数组的原始长度,将截断该数组,直到达到我们指定的条目数。例如,如果我们只想保留数组的第一个条目,则可以编写如下内容:

let arr = [1, 2, 3, 4, 5, 6];

arr.length = 1

console.log(arr);

我们只需设置数组的length属性,然后神奇地只剩下数组的第一个元素。

另外,我们可以使用splice方法从数组中删除条目。通过此方法,我们可以删除,替换现有元素或在适当位置添加新元素,但只需要从数组中删除元素即可。

splice方法的参数是开始更改数组的起始索引。它可以是正数或负数。如果为负数,则它将从末尾开始更改数组,然后朝数组的开头移动。结束索引是-1,第二个索引是-2,依此类推。

splice方法的第二个参数是deleteCount,这是一个可选参数,可让我们指定从第一个元素中的start参数开始要删除多少个项目。

后续参数是我们要插入数组中的项。这可以持续很长时间,只要我们想要。仅第一个参数是必需的。

例如,如果我们要截断一个数组并仅保留前两个元素,则可以编写类似以下代码的内容:

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

arr.splice(2)

console.log(arr);

如我们所见,我们只需要指定第一个参数,然后将自动设置deleteCount,以便删除数组右侧的条目。我们还可以像下面的代码一样指定一个负起始索引:

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

arr.splice(-1 * arr.length + 1)

console.log(arr);

因此,如果在第一个参数中指定-1 * arr.length + n,则将保留原始数组的前n个条目。

我们还可以使用slice方法截断数组。通常,它用于从数组中提取值,并返回包含提取值的新数组。 slice方法采用2个参数。

第一个是可选参数,用于指定从何处开始从数组中提取条目。第二个参数是另一个可选参数,用于指定原始数组的结束索引以结束从中提取值。结束索引本身的值将从提取中排除。
例如,如果我们要从原始数组中获取前两个值,则可以编写类似以下代码的内容:

let arr = [1, 2, 3, 4, 5, 6];

arr = arr.slice(0, 2);

console.log(arr);

运行代码时,我们以[1,2]作为新值arr。我们还可以为开始和结束指定负索引。数组的最后一个条目是-1,倒数第二个元素是索引-2,依此类推。因此,如果要提取具有负索引的数组的前2个元素,可以编写如下内容:

let arr = [1, 2, 3, 4, 5, 6];

arr = arr.slice(-1 * arr.length, -1 * arr.length + 2);

console.log(arr);

如果我们用负索引来表示,则数组的第一个元素将位于索引-1 * arr.length。那么后续条目将为-1 *长度+ n,其中n是第n个位置的数组条目。

用数据填充数组

在ES6或更高版本中,我们可以使用fill方法使用具有新数据的数组填充数组。 fill方法最多包含3个参数。第一个是我们要添加到数组的值。

第二个可选参数是我们要开始填充数据的起始索引。

第二个参数的默认值为0。第三个参数是一个可选参数,它使我们可以指定的最终索引来填充数组项。

第三个参数的默认值是数组的长度。请注意,结尾索引本身不包含在填充中,因此当我们调用fill方法时,它不会溢出。

fill方法将返回一个新数组,其中将填充新值。所有已填充的现有值将替换原始数组中的所有现有值。

例如,我们可以通过以下方式使用它:

let arr = [1, 2, 3, 4, 5, 6];

arr = arr.fill(8)

console.log(arr);

然后,我们从console.log获得以下输出:

[8, 8, 8, 8, 8, 8]

我们还可以更改fill方法的索引以指定填充边界。例如,我们可以这样写:

let arr = [1, 2, 3, 4, 5, 6];

arr = arr.fill(8, 3, 5)

console.log(arr);

然后我们得到:

[1, 2, 3, 8, 8, 6]

如果我们指定的结束索引超出了原始数组的长度,那么它将替换直到原始数组的值直到原始数组的最后一个位置的值。例如,如果我们有:

let arr = [1, 2, 3, 4, 5, 6];

arr = arr.fill(8, 3, 10)

console.log(arr);

然后我们得到:

[1, 2, 3, 8, 8, 8]

我们还可以使用负索引通过fill方法指定填充边界。数组的最后一个位置为-1,倒数第二个为-2,依此类推。因此,我们可以使用负索引调用fill,如下所示:

let arr = [1, 2, 3, 4, 5, 6];

arr = arr.fill(8, -4, -1)

console.log(arr);

然后我们得到:

[1, 2, 8, 8, 8, 6]

因为第三个参数不包含最后一个索引。如果我们也要用新值填充最后一个元素,则只需省略最后一个参数,如以下代码所示:

let arr = [1, 2, 3, 4, 5, 6];

arr = arr.fill(8, -4)

console.log(arr);

当我们运行上面的代码时,我们得到[1、2、8、8、8、8、8]。如果第二个参数的值大于第三个参数,则将不执行填充操作,并返回原始数组。例如,如果我们有:

let arr = [1, 2, 3, 4, 5, 6];

arr = arr.fill(8, 4, 1)

console.log(arr);

然后我们返回[1、2、3、4、5、6],这是原始数组。

最后

在JavaScript中,数组对象具有length属性,该属性指定数组的长度。它既是getter属性,又是setter属性,因此除了能够获取数组的长度之外,我们还可以使用它来设置数组的长度。这意味着将length属性设置为小于数组的原始长度。我们还可以使用splice和slice方法截断数组。

在ES6或更高版本中,我们可以使用fill方法使用具有新数据的数组填充数组。 fill方法最多包含3个参数。第一个是我们要添加到数组的值。第二个可选参数是我们要开始填充数据的起始索引。

第二个参数的默认值为0。第三个参数是可选参数,它使我们可以指定结束索引以填充数组条目。第三个参数的默认值是数组的长度。

我们还可以对第二个和第三个参数使用负索引来设置边界。