一、slice()方法
1、slice()方法是JS中最常用的取數(shù)組前幾個(gè)的方法之一，通過指定起始位置和結(jié)束位置，將數(shù)組截取成一個(gè)新的數(shù)組返回。如下所示：
let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(0, 3);
console.log(newArr); // [1, 2, 3]
2、需要注意的是，slice()方法并不會(huì)修改原數(shù)組，而是返回一個(gè)新的數(shù)組。同時(shí)，起始位置和結(jié)束位置都可以是負(fù)數(shù)，代表倒數(shù)第幾個(gè)元素。
let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(-3, -1);
console.log(newArr); // [3, 4]
3、另外，如果只指定一個(gè)參數(shù)，則會(huì)從該位置開始截取到數(shù)組最后。如果不給定任何參數(shù)，則會(huì)返回一個(gè)包含原數(shù)組所有元素的新數(shù)組。
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()方法可以在原數(shù)組上刪除或添加元素，并返回被刪除的元素。通過設(shè)置第二個(gè)參數(shù)來指定刪除元素的數(shù)量，如果不指定第二個(gè)參數(shù)，則會(huì)刪除從起始位置到數(shù)組結(jié)尾的所有元素。然后通過slice()方法截取前幾個(gè)元素，實(shí)現(xiàn)取數(shù)組前幾個(gè)的效果。如下所示：
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()方法會(huì)修改原數(shù)組，使用時(shí)需謹(jǐn)慎。
三、for循環(huán)
1、利用for循環(huán)遍歷數(shù)組，將前幾個(gè)元素 push 到一個(gè)新數(shù)組中，達(dá)到取數(shù)組前幾個(gè)的效果。如下所示：
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、該方法比較靈活，可以根據(jù)需求自由控制需要取的元素?cái)?shù)量。但是相比于 slice() 方法，需要寫更多的代碼。
四、ES6的解構(gòu)賦值
1、ES6 的解構(gòu)賦值可以方便地取出數(shù)組中前幾個(gè)元素。如下所示：
let arr = [1, 2, 3, 4, 5];
let [a, b, c] = arr;
console.log(a, b, c); // 1 2 3
2、在這里，只需要將數(shù)組中的前幾個(gè)元素賦值到對(duì)應(yīng)的變量中即可。需要注意的是，該方法只適用于需要取前幾個(gè)元素的情況，不能控制取出元素的個(gè)數(shù)。
五、Array.from()方法
1、Array.from() 方法可以將一個(gè)類數(shù)組對(duì)象或可迭代對(duì)象轉(zhuǎn)換成真正的數(shù)組，然后通過 slice() 方法截取前幾個(gè)元素。如下所示：
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、需要注意的是，在實(shí)際開發(fā)中，該方法常用于將 NodeList 轉(zhuǎn)換成數(shù)組。
六、結(jié)語
1、在日常開發(fā)中，經(jīng)常需要取出數(shù)組前幾個(gè)元素進(jìn)行操作，本文介紹了通過 slice() 方法、splice() 方法、for 循環(huán)、ES6 的解構(gòu)賦值以及 Array.from() 方法等多種方法實(shí)現(xiàn)該功能。
2、需要注意的是，選擇合適的方法取決于具體的需求和場景，要根據(jù)實(shí)際情況選擇使用哪一種方法。
京公網(wǎng)安備 11010802030320號(hào)