一、數(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"