数组常用方法(含es6):every、some、filter、map、reduce、forEach、find、for、for in 、for of 、findIndex、concat合并、扩展运算符…

数组常用操作方法整理(包含es6)及详细使用。

1. every()

判断数组所有元素是否**全部**符合条件 返回 Boolean 布尔值:true/false 

全部符合才为true

```javascript

let arr = [1,6,9,10,100,25];

const e = arr.every(item => item > 2);// 判断是否都大于2

console.log(e);// false

```

2. some()

判断数组所有元素是否**有**符合条件的 返回 Boolean 布尔值:true/false

只要有一项符合条件就为true

```javascript

let arr = [1,6,9,10,100,25];

const s = arr.some(item => item > 2);// 判断是否有大于2的

console.log(s);// true

```

3. filter()

过滤数组  创建并返回一个符合条件的新数组(==不改变原数组==)

注意:filter函数只是筛选功能,不能改变元素、操作元素

```javascript

let arr = [1,6,9,10,100,25]

const f=arr.filter(item=>item%2===0);// 返回偶数

console.log(f); // [6, 10, 100]

console.log(arr); // [1,6,9,10,100,25]

```

4. map()

可以逐个改变数组 创建并返回一个新数组(==不改变原数组==)

> 语法:let newArray = oldArray.map((item, index, arr) => {})  item当前元素、index当前索引、arr原数组

```javascript

let arr = [1,6,9,10,100,25];

const newArr=arr.map(item=>{if(item %2===0) item=item*10 ;return item });// 偶数*10

console.log(newArr);// [1, 60, 9, 100, 1000, 25]  返回的是每一项运算后的结果的数组

console.log(arr);// [1,6,9,10,100,25]

// 注意

const newArr2=arr.map(item=>item%2===0)  // 返回的是布尔值组成的数组

console.log(newArr2);// [false, true, false, true, true, false]

```

5. reduce()

对数组中的每个元素调用指定的回调函数(自定义累计器),该回调函数的返回值为累积结果,并且此返回值在下一次调用该回调函数时作为参数提供

>语法:let newArray =arr.reduce((prev累计完成计算的返回值,cur当前元素,index当前元素的索引,arr当前元素所属的数组对象)=>{},初始值)

>最简写:arr.reduce((pre,cur)=>{},初始值)

**初级应用**

```javascript

// 常用求和、求乘积

let arr = [1,6,9,10,100,25];

const r = arr.reduce((pre,item)=>pre+=item,0);// 计算数组总和

console.log(r);// 151

// 对象属性求和

let arr2 = [{name:'语文',score:120},{name:'数学',score:130},{name:'英语',score:113}];

const r2 = arr2.reduce((pre,item)=>pre+=item.score,0);

console.log(r2);  //363   

```

**高级应用**

```javascript

// 计算数组中每个元素出现的次数

let arr= ['a','b','c','d','b','a','c','a','e'];

let r=arr.reduce((obj,item)=>{obj[item]=obj[item]?obj[item]+1:1;return obj},{});

console.log(r);// {a: 3, b: 2, c: 2, d: 1, e: 1}

```

```javascript

// 去重

let arr= ['a','b','c','d','b','a','c','a','e'];

let r=arr.reduce((newArr,item)=>{!newArr.includes(item)&&newArr.push(item);return newArr},[]);

console.log(r);// ["a", "b", "c", "d", "e"]

```

```javascript

// 二维数组转一维

let arr = [[0, 1], [2, 3], [4, 5]]

let r=arr.reduce((pre,item)=>[...pre,...item],[])

console.log(r);// [0, 1, 2, 3, 4, 5]

```

```javascript

// 多维转一维

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]

const fn=(arr)=>{

  return arr.reduce((pre,item)=>pre.concat(Array.isArray(item)?fn(item):item),[])

}

console.log(fn(arr));// [0, 1, 2, 3, 4, 5, 6, 7]

```

6. forEach() 遍历

遍历数组,会修改原来的数组,==不会返回执行结果==

>语法:Array.forEach((item,index,arr)=>{});  item当前元素、index当前索引、arr原数组

```javascript

let arr = [1,6,9,10,100,25];

const r=arr.forEach((item,index)=>arr[index]=item*2);

console.log(r);// undefined

console.log(arr);// [2, 12, 18, 20, 200, 50]

```

7. find() 查找

返回第一个符合条件的值 参数为回调函数 (找到立即返回object 不会再往下遍历)

>语法:Array.find((value,index,,arr) => { return value > 2}) ;value当前值,index当前索引,arr原数组

```javascript

let arr = [1,6,9,10,100,25];

let r= arr.find((value,index,arr) => { return value > 2})// 找出第一个大于2的

console.log(r);// 6

```

```javascript

let arr2 = [{name:'语文',score:120},{name:'数学',score:130},{name:'英语',score:113}];

let r2=arr2.find(item=>item.name=='语文')

console.log(r2);// {name:'语文',score:120}

```

8. for循环

```javascript

let arr = [1,6,9,10,100,25];

// 循环打印

for (let i = 0; i < arr.length; i++) {

    console.log(arr[i]); // 按顺序输出 1 6 9 10 100 25

}

// 九九乘法表

for (let i = 1; i <= 9; i++) {

    for (let j = 1; j <= i; j++) {

        document.write(i + "*" + j + "=" + (i * j) + "&nbsp;&nbsp;&nbsp;");

        if (j == i) {

            document.write("<br/>");

        }

    }

}

```

效果图:

9. for in

```javascript

let arr = [1,6,9,10,100,25];

for (let i in arr) {

    console.log(arr[i]); // 按顺序输出 1 6 9 10 100 25

}

```

10. for of

```javascript

let arr = [1,6,9,10,100,25];

for (let i of arr) {

    console.log(i); // 按顺序输出 1 6 9 10 100 25

}

```

11. findIndex()

返回第一个符合条件的==索引==,参数为回调函数

>语法:Array.findIndex((value,index,,arr) => { return value > 2}) ;value当前值,index当前索引,arr原数组

```javascript

let arr = [1,6,9,10,100,25];

const r= arr.findIndex((value,index,arr) => { return value > 2}) // 2

console.log(r);//1

```

```javascript

let arr2 = [{name:'语文',score:120},{name:'数学',score:130},{name:'英语',score:113}];

let index = arr2.findIndex(item => item.name === "数学");

console.log(index);// 返回第一个符合条件的索引值1  找不到返回-1

```

12. includes()

检测数组是否包含某元素,返回Boolean类型

```javascript

const t=['西游记','红楼梦','三国演义','水浒传']       

console.log(t.includes('西游记')); // true 

console.log(t.includes('唐僧'));// false

```

13. concat合并

```javascript

let arr1=[1,2,3,4];

let arr2=[5,6,7,8];

let arr3=arr1.concat(arr2);

console.log(arr1);// [1,2,3,4]

console.log(arr2);// [5,6,7,8]

console.log(arr3);// [1,2,3,4,5,6,7,8]

```

14. 扩展运算符…

(1) 能将数组转换为 逗号分隔的参数序列

```javascript

const tfbodys=['易烊千玺','王源','王俊凯']

function fn(){console.log(arguments)}

fn(...tfbodys) // 相当于fn('易烊千玺','王源','王俊凯')

```

(2) 数组的合并

```javascript

let arr1=['小明','小红']

let arr2=['小三','小四']

let arr3=[...arr1,...arr2]

console.log(arr3);// ['小明','小红','小三','小四']

```

(3). 数组克隆

```javascript

const x=['e','f','h']

const y=[...x]

console.log(y);// ['e','f','h']

```

(4). 将伪数组转为真正的数组

```javascript

let lis=document.querySelectorAll('li');// 伪数组

// lis.push('测试')// 报错

let liArr=[...lis] // 变成真数组

liArr.push('测试')

console.log(liArr);// [li, li, li, li, li, "测试"]

```

15. indexOf()和lastIndexOf()

>indexOf('字符',可指定开始查找的位置)  查找给定元素的第一个索引号  默认从0开始找,不存在返回-1

lastIndexOf()  查找给定元素的最后一个索引  从后开始找,不存在返回-1

```javascript

let arr= ['a','b','c','d','b','a','c','a','e'];

console.log(arr.indexOf('a'));  // 0

console.log(arr.indexOf('a',1));  // 5

console.log(arr.lastIndexOf('a')); // 7

```

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,110评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,443评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,474评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,881评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,902评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,698评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,418评论 3 419
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,332评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,796评论 1 316
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,968评论 3 337
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,110评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,792评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,455评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,003评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,130评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,348评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,047评论 2 355

推荐阅读更多精彩内容