数组常用方法（含es6）：everysomefiltermapreduceforEachfindforfor in for of findIndexconcat合并扩展运算符…

Posted 2021-06-09 ljy景

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

数组常用操作方法整理（包含es6）及详细使用。
## 1. every()
判断数组所有元素是否**全部**符合条件 返回 Boolean 布尔值：true/false
全部符合才为true

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

let arr = [1,6,9,10,100,25];
const s = arr.some(item => item > 2);// 判断是否有大于2的
console.log(s);// true

 

3. filter()
过滤数组 创建并返回一个符合条件的新数组（==不改变原数组==）
注意：filter函数只是筛选功能，不能改变元素、操作元素

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原数组

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)=>{},初始值)

**初级应用**

/ 常用求和、求乘积
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

 

**高级应用**

// 计算数组中每个元素出现的次数
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}

// 去重
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"]

// 二维数组转一维
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]

// 多维转一维
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原数组

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原数组

let arr = [1,6,9,10,100,25];
let r= arr.find((value,index,arr) => { return value > 2})// 找出第一个大于2的
console.log(r);// 6

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循环

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

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

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原数组

let arr = [1,6,9,10,100,25];
const r= arr.findIndex((value,index,arr) => { return value > 2}) // 2
console.log(r);//1

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类型

const t=[\'西游记\',\'红楼梦\',\'三国演义\',\'水浒传\']
console.log(t.includes(\'西游记\')); // true
console.log(t.includes(\'唐僧\'));// false

13. concat合并

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. 能将数组转换为 逗号分隔的参数序列

const tfbodys=[\'易烊千玺\',\'王源\',\'王俊凯\']
function fn(){console.log(arguments)}
fn(...tfbodys) // 相当于fn(\'易烊千玺\',\'王源\',\'王俊凯\')

2. 数组的合并

let arr1=[\'小明\',\'小红\']
let arr2=[\'小三\',\'小四\']
let arr3=[...arr1,...arr2]
console.log(arr3);// [\'小明\',\'小红\',\'小三\',\'小四\']

3. 数组克隆

const x=[\'e\',\'f\',\'h\']
const y=[...x]
console.log(y);// [\'e\',\'f\',\'h\']

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

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

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