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"

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。