一、slice()方法
1、slice()方法是JS中最常用的取數組前幾個的方法之一,通過指定起始位置和結束位置,將數組截取成一個新的數組返回。如下所示:
let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(0, 3);
console.log(newArr); // [1, 2, 3]
2、需要注意的是,slice()方法并不會修改原數組,而是返回一個新的數組。同時,起始位置和結束位置都可以是負數,代表倒數第幾個元素。
let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(-3, -1);
console.log(newArr); // [3, 4]
3、另外,如果只指定一個參數,則會從該位置開始截取到數組最后。如果不給定任何參數,則會返回一個包含原數組所有元素的新數組。
let arr = [1, 2, 3, 4, 5];
let newArr1 = arr.slice(2);
let newArr2 = arr.slice();
console.log(newArr1); // [3, 4, 5]
console.log(newArr2); // [1, 2, 3, 4, 5]
二、splice()方法
1、splice()方法可以在原數組上刪除或添加元素,并返回被刪除的元素。通過設置第二個參數來指定刪除元素的數量,如果不指定第二個參數,則會刪除從起始位置到數組結尾的所有元素。然后通過slice()方法截取前幾個元素,實現取數組前幾個的效果。如下所示:
let arr = [1, 2, 3, 4, 5];
let deleted = arr.splice(3);
let newArr = arr.slice(0, 2);
console.log(deleted); // [4, 5]
console.log(newArr); // [1, 2]
2、需要注意的是,splice()方法會修改原數組,使用時需謹慎。
三、for循環
1、利用for循環遍歷數組,將前幾個元素 push 到一個新數組中,達到取數組前幾個的效果。如下所示:
let arr = [1, 2, 3, 4, 5];
let newArr = [];
for (let i = 0; i < 3; i++) {
newArr.push(arr[i]);
}
console.log(newArr); // [1, 2, 3]
2、該方法比較靈活,可以根據需求自由控制需要取的元素數量。但是相比于 slice() 方法,需要寫更多的代碼。
四、ES6的解構賦值
1、ES6 的解構賦值可以方便地取出數組中前幾個元素。如下所示:
let arr = [1, 2, 3, 4, 5];
let [a, b, c] = arr;
console.log(a, b, c); // 1 2 3
2、在這里,只需要將數組中的前幾個元素賦值到對應的變量中即可。需要注意的是,該方法只適用于需要取前幾個元素的情況,不能控制取出元素的個數。
五、Array.from()方法
1、Array.from() 方法可以將一個類數組對象或可迭代對象轉換成真正的數組,然后通過 slice() 方法截取前幾個元素。如下所示:
let arrLike = {
0: 'a',
1: 'b',
2: 'c',
length: 3
};
let arr = Array.from(arrLike);
let newArr = arr.slice(0, 2);
console.log(newArr); // ['a', 'b']
2、需要注意的是,在實際開發中,該方法常用于將 NodeList 轉換成數組。
六、結語
1、在日常開發中,經常需要取出數組前幾個元素進行操作,本文介紹了通過 slice() 方法、splice() 方法、for 循環、ES6 的解構賦值以及 Array.from() 方法等多種方法實現該功能。
2、需要注意的是,選擇合適的方法取決于具體的需求和場景,要根據實際情況選擇使用哪一種方法。