js 數組迭代和元素增刪改查

一、數組的迭代方法

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

1.every 方法

every語法接收兩個參數,以第一個參數是每一個數據項都要執行的函數, 第二個參數是運行函數的作用域對象(可選),其中數據項執行的函數接收三個參數,第一個是當前數據項,第二個是當前下標值,第三個是數組本身。如果每個數據項都返回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);

打印結果

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

false

2、some方法

some方法接收兩個參數,第一個參數是每個數據項都要執行的函數和運行該函數的作用域對象(可選),其中數據項執行的函數接收三個參數,第一個是當前數據項,第二個是當前下標,第三個是數組本身。如果有一個數據項返回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);

打印結果

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方法接收兩個參數,第一個參數是每個數據項都要執行的函數和運行該函數的作用域對象(可選),其中數據項執行的函數接收三個參數,第一個是當前數據項,第二個是當前下標,第三個是數組本身。filter方法返回所有返回true的數據項組成的新數組。如下:

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

? ? return item > 2;

});

console.log(result);?

打印結果

[3,4,5,6]

4、forEach方法

forEach方法接收兩個參數,第一個參數是每個數據項都要執行的函數和運行該函數的作用域對象(可選),其中數據項執行的函數接收三個參數,第一個是當前數據項,第二個是當前下標,第三個是數組本身。forEach方法不返回值,跟for循環一樣,可以在forEach中進行一些操作

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

? ? // 一些操作

});

5、map方法

map方法接收兩個參數,第一個參數是每個數據項都要執行的函數和運行該函數的作用域對象(可選),其中數據項執行的函數接收三個參數,第一個是當前數據項,第二個是當前下標,第三個是數組本身。map方法返回每個數據項經過相應的操作后組成的新數組。如下:

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

? ?return item * 2;

});

console.log(result3);?

打印結果:

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

二、數組的遍歷

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


三、數組中元素的增、刪、改、查

1. 增加

1>. splice ? ?多個參數(起始位置、刪除長度、插入的元素1、元素2...)

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

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

?console.log(arr);

打印結果

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

2>. unshift:將參數添加到原數組開頭,并返回數組的長度

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);?

打印結果:

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

b=7

3>.?push:將參數添加到原數組末尾,并返回數組的長度

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方式 ? ?兩個參數(起始位置、刪除長度)

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

arr.splice(1, 2);

console.log(arr);

打印結果?

[1, 4, 5, 6] ?

2>. ?delete ?刪除掉數組中的元素后,會把該下標出的值置為undefined,數組的長度不會改變

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

delete arr[1];

console.log(arr);

答應結果

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

3>. ?shift() ?刪除數組的第一項

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);

打印結果

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

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

4>. ?pop:刪除原數組最后一項,并返回刪除元素的值;如果數組為空則返回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);?

打印結果

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

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

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

splice方式 ? ?三個參數(起始位置、修改長度、新元素)

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

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

console.log(arr);

打印結果

[1, 9, 4, 5, 6]

4. 數組元素的查找

4.1 ?根據下標查找

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

?const a = arr[3];?

console.log(a);

答應結果

4

4.2 ? ?indexOf 函數 ??arr.indexOf(find,start); ?find:要找的內容 ?start:查找開始下標,可選參數 ? 函數返回值:查找數據所在的下標,如果沒找到,返回-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);?

答應結果

2 ? -1

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

find() 主要是在數組--對應屬性--對應的對象

findIndex()?主要是在數組中對象對應的下標

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);

打印結果

男 ??

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

??2

四、數組的其他操作

1、concat:返回一個新數組,是將參數添加到原數組中構成的

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

2、reverse:將數組反序

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):按指定的參數對數組進行排序

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):返回從原數組中指定開始下標到結束下標之間的項組成的新數組

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

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

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

5.?join(separator):將數組的元素組起一個字符串,以separator為分隔符,省略的話則用默認用逗號為分隔符

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

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

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。