我可以用 JavaScript 限制数组的长度吗？

我想显示产品浏览历史记录，因此我将产品 ID 存储在一个浏览器 cookie 中。

因为历史记录的列表限制为5个项，所以我将 cookie 值转换为一个数组，然后检查它的长度并删除冗余。

下面的代码是我已经尝试过的，但是它不起作用; 数组项没有被删除。

我想问如何限制数组的长度，使它只能存储5项？

或者

如何在数组索引4之后删除项？

var id = product_id;
var browseHistory = $.cookie('history');
if (browseHistory != null) {
var old_cookie = $.cookie('history');
var new_cookie = '';


if (old_cookie.indexOf(',') != -1) {
var arr = old_cookie.split(',');
if (arr.length >= 5) {
arr.splice(4, 1)
}
}


new_cookie = id + ',' + old_cookie;
$.cookie('history', new_cookie, { expires: 7, path: '/' });
} else {
$.cookie('history', id, { expires: 7, path: '/' });
}
194036 次浏览
小开
最佳答案

You're not using splice correctly:

arr.splice(4, 1)

this will remove 1 item at index 4. see here

I think you want to use slice:

arr.slice(0,5)

this will return elements in position 0 through 4.

This assumes all the rest of your code (cookies etc) works correctly

小开

You need to actually use the shortened array after you remove items from it. You are ignoring the shortened array.

You convert the cookie into an array. You reduce the length of the array and then you never use that shortened array. Instead, you just use the old cookie (the unshortened one).

You should convert the shortened array back to a string with .join(",") and then use it for the new cookie instead of using old_cookie which is not shortened.

You may also not be using .splice() correctly, but I don't know exactly what your objective is for shortening the array. You can read about the exact function of .splice() here.

小开

The fastest and simplest way is by setting the .length property to the desired length:

arr.length = 4;

This is also the desired way to reset/empty arrays:

arr.length = 0;

Caveat: setting this property can also make the array longer than it is: If its length is 2, running arr.length = 4 will add two undefined items to it. Perhaps add a condition:

if (arr.length > 4) arr.length = 4;

Alternatively:

arr.length = Math.min(arr.length, 4);
小开 
arr.length = Math.min(arr.length, 5)
小开 
var  arrLength = arr.length;
if(arrLength > maxNumber){
arr.splice( 0, arrLength - maxNumber);
}

This solution works better in a dynamic environment like p5js. I put this inside the draw call and it clamps the length of the array dynamically.

The problem with

arr.slice(0,5)

is that it only takes a fixed number of items off the array per draw frame, which won't be able to keep the array size constant if your user can add multiple items.

The problem with

if (arr.length > 4) arr.length = 4;

is that it takes items off the end of the array, so which won't cycle through the array if you are also adding to the end with push().

小开

I think you could just do:

let array = [];
array.length = 2;
Object.defineProperty(array, 'length', {writable:false});




array[0] = 1 // [1, undefined]


array[1] = 2 // [1, 2]


array[2] = 3 // [1, 2] -> doesn't add anything and fails silently


array.push("something"); //but this throws an Uncaught TypeError
小开

I was surprised nobody mentioned the following snippet to limit the length of the array:

arr.splice(5);

According to the Parameters definitions for splice, if start is larger than the length of the array, it will be set to the length of the array, and if deleteCount is omitted or larger than the array length, all of the items after start will be deleted.

Therefore, if you want to limit an array to some MAX_SIZE (modifying the existing array instead of creating a new instance) an easy shortcut is just arr.splice(MAX_SIZE).

As others have said, there is more going on with the code in the question, but given the title and spirit of the ask, I hope this is a useful answer for anyone else ending up here via search.

Note: According to the compatibility notes for IE 5.5-8, deleteCount does not work as described above, so this solution won't work right on those browsers.

小开

Came here but couldn't find a functional way of limiting the length of an array.

So I came up with:

const list = ["a","b","c","d","e","f","g","h","i"];
const listWithOnly3Items = list.filter((element,index) => index < 3);

提交答案