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"

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,802评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,109评论 2赞 379
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,683评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,458评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,452评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,505评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,901评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,550评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,763评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,556评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,629评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,330评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,898评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,897评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,140评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,807评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,339评论 2赞 342