js 數(shù)組迭代和元素增刪改查

一、數(shù)組的迭代方法

常用的數(shù)組迭代方法:every,some,filter,map,foreach

1.every 方法

every語(yǔ)法接收兩個(gè)參數(shù),以第一個(gè)參數(shù)是每一個(gè)數(shù)據(jù)項(xiàng)都要執(zhí)行的函數(shù), 第二個(gè)參數(shù)是運(yùn)行函數(shù)的作用域?qū)ο?可選),其中數(shù)據(jù)項(xiàng)執(zhí)行的函數(shù)接收三個(gè)參數(shù),第一個(gè)是當(dāng)前數(shù)據(jù)項(xiàng),第二個(gè)是當(dāng)前下標(biāo)值,第三個(gè)是數(shù)組本身。如果每個(gè)數(shù)據(jù)項(xiàng)都返回true,則every方法返回true,否則返回false。如下:

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

const res1 = arr.every((item: any, inde: number, array) => {

? ? ? console.log('item=' + item + ',index=' + inde + ',array=' + array);

? ? ? return item > 3;

});

console.log(res1);

打印結(jié)果

item=1,index=0,array=1,2,3,4,5,6

false

2、some方法

some方法接收兩個(gè)參數(shù),第一個(gè)參數(shù)是每個(gè)數(shù)據(jù)項(xiàng)都要執(zhí)行的函數(shù)和運(yùn)行該函數(shù)的作用域?qū)ο螅蛇x),其中數(shù)據(jù)項(xiàng)執(zhí)行的函數(shù)接收三個(gè)參數(shù),第一個(gè)是當(dāng)前數(shù)據(jù)項(xiàng),第二個(gè)是當(dāng)前下標(biāo),第三個(gè)是數(shù)組本身。如果有一個(gè)數(shù)據(jù)項(xiàng)返回true,則some方法返回true,否則返回false。如下:

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

const res = arr.some((item: any, inde: number, array ) => {

? ? ?console.log( 'item=' + item + ',index=' + inde + ',array=' + array );

? ? ?return item > 3;

?});

console.log(res);

打印結(jié)果

item=1,index=0,array=1,2,3,4,5,6

item=2,index=1,array=1,2,3,4,5,6

item=3,index=2,array=1,2,3,4,5,6

item=4,index=3,array=1,2,3,4,5,6?

true

3.filter方法

filter方法接收兩個(gè)參數(shù),第一個(gè)參數(shù)是每個(gè)數(shù)據(jù)項(xiàng)都要執(zhí)行的函數(shù)和運(yùn)行該函數(shù)的作用域?qū)ο螅蛇x),其中數(shù)據(jù)項(xiàng)執(zhí)行的函數(shù)接收三個(gè)參數(shù),第一個(gè)是當(dāng)前數(shù)據(jù)項(xiàng),第二個(gè)是當(dāng)前下標(biāo),第三個(gè)是數(shù)組本身。filter方法返回所有返回true的數(shù)據(jù)項(xiàng)組成的新數(shù)組。如下:

const result = arr.filter((item, inde, array) => {

? ? return item > 2;

});

console.log(result);?

打印結(jié)果

[3,4,5,6]

4、forEach方法

forEach方法接收兩個(gè)參數(shù),第一個(gè)參數(shù)是每個(gè)數(shù)據(jù)項(xiàng)都要執(zhí)行的函數(shù)和運(yùn)行該函數(shù)的作用域?qū)ο螅蛇x),其中數(shù)據(jù)項(xiàng)執(zhí)行的函數(shù)接收三個(gè)參數(shù),第一個(gè)是當(dāng)前數(shù)據(jù)項(xiàng),第二個(gè)是當(dāng)前下標(biāo),第三個(gè)是數(shù)組本身。forEach方法不返回值,跟for循環(huán)一樣,可以在forEach中進(jìn)行一些操作

arr.forEach((item, inde, array) => {

? ? // 一些操作

});

5、map方法

map方法接收兩個(gè)參數(shù),第一個(gè)參數(shù)是每個(gè)數(shù)據(jù)項(xiàng)都要執(zhí)行的函數(shù)和運(yùn)行該函數(shù)的作用域?qū)ο螅蛇x),其中數(shù)據(jù)項(xiàng)執(zhí)行的函數(shù)接收三個(gè)參數(shù),第一個(gè)是當(dāng)前數(shù)據(jù)項(xiàng),第二個(gè)是當(dāng)前下標(biāo),第三個(gè)是數(shù)組本身。map方法返回每個(gè)數(shù)據(jù)項(xiàng)經(jīng)過(guò)相應(yīng)的操作后組成的新數(shù)組。如下:

const result3 = arr.map((item, inde, array) => {

? ?return item * 2;

});

console.log(result3);?

打印結(jié)果:

?[2,4,6,8,10,12]

二、數(shù)組的遍歷

1.for...in ?2.forEach 3.map 4.for循環(huán)遍歷?5.for...of(es6)


三、數(shù)組中元素的增、刪、改、查

1. 增加

1>. splice ? ?多個(gè)參數(shù)(起始位置、刪除長(zhǎng)度、插入的元素1、元素2...)

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

arr.splice(1, 2, 9, 10, 15 , 17);

?console.log(arr);

打印結(jié)果

[1, 9, 10, 15, 17, 4, 5, 6]

2>. unshift:將參數(shù)添加到原數(shù)組開(kāi)頭,并返回?cái)?shù)組的長(zhǎng)度

const arr = [{ "name": "張三","gender": "男","age": 20},{ "name": "王明","gender": "男","age": 20},{ "name": "李四","gender": "男","age": 20}];?

const b = arr.unshift(-2,-1);?

console.log('arr=', arr);?

console.log('b=', b);?

打印結(jié)果:

arr=?[-2,-1,1,2,3,4,5]

b=7

3>.?push:將參數(shù)添加到原數(shù)組末尾,并返回?cái)?shù)組的長(zhǎng)度

var a = [1,2,3,4,5];

var b = a.push(6,7);?

//a:[1,2,3,4,5,6,7] ? ?b:7

2. 刪除

1>. splice方式 ? ?兩個(gè)參數(shù)(起始位置、刪除長(zhǎng)度)

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

arr.splice(1, 2);

console.log(arr);

打印結(jié)果?

[1, 4, 5, 6] ?

2>. ?delete ?刪除掉數(shù)組中的元素后,會(huì)把該下標(biāo)出的值置為undefined,數(shù)組的長(zhǎng)度不會(huì)改變

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

delete arr[1];

console.log(arr);

答應(yīng)結(jié)果

[1, empty, 3, 4, 5, 6]

3>. ?shift() ?刪除數(shù)組的第一項(xiàng)

const arr = [{ "name": "張三","gender": "男","age": 20},{ "name": "王明","gender": "男","age": 20},{ "name": "李四","gender": "男","age": 20}];?

const b = arr.shift();?

console.log('arr=', arr);

console.log('b=', b);

打印結(jié)果

arr=[{name: "王明", gender: "男", age: 20}1: {name: "李四", gender: "男", age: 20}]?

b= {name: "張三", gender: "男", age: 20}

4>. ?pop:刪除原數(shù)組最后一項(xiàng),并返回刪除元素的值;如果數(shù)組為空則返回undefined

const arr = [{ "name": "張三","gender": "男","age": 20},{ "name": "王明","gender": "男","age": 20},{ "name": "李四","gender": "男","age": 20}];

?const b = arr.pop();

?console.log('arr=', arr);?

console.log('b=', b);?

打印結(jié)果

arr= [{name: "張三", gender: "男", age: 20}1: {name: "王明", gender: "男", age: 20}]

?b= {name: "李四", gender: "男", age: 20}

3. 數(shù)組元素修改(替換)

splice方式 ? ?三個(gè)參數(shù)(起始位置、修改長(zhǎng)度、新元素)

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

?arr.splice(1, 2, 9);?

console.log(arr);

打印結(jié)果

[1, 9, 4, 5, 6]

4. 數(shù)組元素的查找

4.1 ?根據(jù)下標(biāo)查找

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

?const a = arr[3];?

console.log(a);

答應(yīng)結(jié)果

4

4.2 ? ?indexOf 函數(shù) ??arr.indexOf(find,start); ?find:要找的內(nèi)容 ?start:查找開(kāi)始下標(biāo),可選參數(shù) ? 函數(shù)返回值:查找數(shù)據(jù)所在的下標(biāo),如果沒(méi)找到,返回-1

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

?const a1 = arr.indexOf(3, 1);

?const a2 = arr.indexOf(3, 5);?

console.log(a1, ?a2);?

答應(yīng)結(jié)果

2 ? -1

4.3 find()和findIndex()的函數(shù)使用

find() 主要是在數(shù)組--對(duì)應(yīng)屬性--對(duì)應(yīng)的對(duì)象

findIndex()?主要是在數(shù)組中對(duì)象對(duì)應(yīng)的下標(biāo)

const arr =[{ ?"name": "張三","gender": "男","age": 20},{ "name": "王明","gender": "男","age": 20},{ "name": "李四","gender": "男","age": 20}];?

const a1 = arr.find(item => item.name === '王明').gender;?

const a2 = arr.find((element) => (element.name == '李四'));?

const a3 = arr.findIndex((element)=>(element.name =='李四')); ?

console.log(a1);

console.log(a2);

console.log(a3);

打印結(jié)果

男 ??

?{name: "李四", gender: "男", age: 20} ? ?

??2

四、數(shù)組的其他操作

1、concat:返回一個(gè)新數(shù)組,是將參數(shù)添加到原數(shù)組中構(gòu)成的

var b = a.concat(6,7); //a:[1,2,3,4,5] b:[1,2,3,4,5,6,7]

2、reverse:將數(shù)組反序

var a = [1,2,3,4,5];

var b = a.reverse(); //a:[5,4,3,2,1] b:[5,4,3,2,1]

3、sort(orderfunction):按指定的參數(shù)對(duì)數(shù)組進(jìn)行排序

var a = [1,2,3,4,5];

var b = a.sort(); ?//a:[1,2,3,4,5] b:[1,2,3,4,5]

4、slice(start,end):返回從原數(shù)組中指定開(kāi)始下標(biāo)到結(jié)束下標(biāo)之間的項(xiàng)組成的新數(shù)組

var a = [1,2,3,4,5];

var b = a.slice(2,5);?

輸出結(jié)果:?a:[1,2,3,4,5] b:[3,4,5]

5.?join(separator):將數(shù)組的元素組起一個(gè)字符串,以separator為分隔符,省略的話則用默認(rèn)用逗號(hào)為分隔符

var a = [1,2,3,4,5];

var b = a.join("|");?

輸出結(jié)果:a:[1,2,3,4,5] b:"1|2|3|4|5"

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容