国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

當(dāng)前位置:首頁(yè)  >  技術(shù)干貨  > 用法介紹JS數(shù)組前幾個(gè)的取法

用法介紹JS數(shù)組前幾個(gè)的取法

來源:千鋒教育
發(fā)布人:xqq
時(shí)間: 2023-11-23 11:38:02 1700710682

一、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é)語(yǔ)

1、在日常開發(fā)中,經(jīng)常需要取出數(shù)組前幾個(gè)元素進(jìn)行操作,本文介紹了通過 slice() 方法、splice() 方法、for 循環(huán)、ES6 的解構(gòu)賦值以及 Array.from() 方法等多種方法實(shí)現(xiàn)該功能。

2、需要注意的是,選擇合適的方法取決于具體的需求和場(chǎng)景,要根據(jù)實(shí)際情況選擇使用哪一種方法。

聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請(qǐng)您保持通訊暢通,專屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
免費(fèi)領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT