第三节：数组高频方法(filter/forEach/map/find/findIndex/new Array.fill/Array.from等等)
一. 数组中的高频方法
数据准备：
let arry1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; let arry2 = [ { id: 1, userName: "ypf1", age: 11 }, { id: 2, userName: "ypf2", age: 12 }, { id: 3, userName: "ypf3", age: 13 }, { id: 4, userName: "ypf4", age: 14 }, { id: 5, userName: "ypf5", age: 15 }, { id: 6, userName: "ypf6", age: 16 }, { id: 7, userName: "ypf2", age: 12 }, ]; let arry3 = [11, 12, 13, 14]; let arry4 = [14, 15, 16];
1. filter
用于过滤，获取符合条件的数据
用法：条件为true的数据会被放到【新数组里】
/* 用于过滤，获取符合条件的数据 用法：条件为true的数据会被放到【新数组里】 */ // 案例1：获取所有偶数 { let newArry = arry1.filter(item => { return item % 2 === 0; }); console.log(newArry); } // 案例2：获取age大约13的所有数据 { let newArry = arry2.filter(item => item.age > 13); console.log(newArry); }
2. forEach
用于遍历数据/* 用于遍历数据 */ // 案例1：将arry2中的数据按顺序依次输出 { arry2.forEach((item, index) => { console.log(index, item); }); }
3. map
用途：遍历每个元素，可以对其处理后，返回一个【新数组】/* 用途：遍历每个元素，可以对其处理后，返回一个【新数组】 */ // 案例1：将arry1中的数据翻倍后输出 { let newArry = arry1.map(item => { return item * 2; }); console.log(newArry); } // 案例2：单独输出所有的年龄 { let newArry = arry2.map(item => item.age); console.log(newArry); } // 案例3：将年龄大约13的所有名字数出来 { let newArry = arry2.filter(item => item.age > 13).map(item => item.userName); console.log(newArry); }
补充：map遍历元素，组合成一个新的数组返回，新的数组中的内容可以自行添加，不仅仅局限于遍历对象中数据。比如react中常用来返回jsx。
let stuElement = stu2.map(item =>
(
<div key={item.id} className="myDiv">
<p>编号：{item.id}</p>
<p>姓名：{item.name}</p>
</div>
)4. find
作用：获取符合条件的第一个元素 (特别注意：多个符合条件的数据，仅返回第一个，放到obj里)
用法：条件为true的数据会被放到一个obj对象里/* 作用：获取符合条件的第一个元素 (特别注意：多个符合条件的数据，仅返回第一个，放到obj里) 用法：条件为true的数据会被放到一个obj对象里 */ // 案例1：获取名字为ypf2的第一条数据 { let obj = arry2.find(item => item.userName === "ypf2"); console.log(obj); }
5. findIndex
作用：获取符合条件的【第一个】元素的索引 (特别注意：多个符合条件的数据，仅获取第一个)
用法：条件为true的数据/* 作用：获取符合条件的【第一个】元素的索引 (特别注意：多个符合条件的数据，仅获取第一个) 用法：条件为true的数据 */ // 案例1：获取名字为ypf2的顺序 { let objIndex = arry2.findIndex(item => item.userName === "ypf2"); console.log(objIndex); //结果为 1 }
6. includes
ES7的语法
作用：判断数组里是否有某个元素，返回true or false
PS：ES7之前可以通过filter或者find或者indexof来判断，详见：https://www.cnblogs.com/yaopengfei/p/14700298.html/* ES7的语法 作用：判断数组里是否有某个元素，返回true or false PS：ES7之前可以通过filter或者find或者indexof来判断，详见：https://www.cnblogs.com/yaopengfei/p/14700298.html */ // 案例1：判断arry1是否包含5， 判断arry1从第二个元素往后，是否包含5 { console.log(arry1.includes(5)); //true console.log(arry1.includes(5, 1)); //true, 第二个参数 1，代表索引的位置 }
7. some
ES6语法
作用：判断数组里是否有符合条件的数据，只要有1个，则返回true，反之false/* ES6语法 作用：判断数组里是否有符合条件的数据，只要有1个，则返回true，反之false */ //案例1：判断是否arry中是否有年龄>15的数据 (换言之，有一个>15,则返回true) { console.log(arry2.some(item => item.age > 15)); //true }
8. every
ES6语法
作用：判断数组里是否所有数据都符合条件，全部符合，则返回true，反之false/* ES6语法 作用：判断数组里是否所有数据都符合条件，全部符合，则返回true，反之false */ // 案例1:判断是否所有年龄都>15 { console.log(arry2.every(item => item.age > 15)); //false }
9. reduce
ES6语法
作用：累加，
参数说明，第一个参数中的preValue代表上次的返回值, currentValue表示遍历的当前值
第二个参数代表第一次的默认值，/* ES6语法 作用：累加， 参数说明，第一个参数中的preValue代表上次的返回值, currentValue表示遍历的当前值 第二个参数代表第一次的默认值， */ // 案例1：将arry1中的数据累加 { let total = arry1.reduce((preValue, currentValue) => { return preValue + currentValue; }, 0); console.log(total); }
10. contact
作用：将几个不同的数组组合成1个新的数组，注意：不去重！！！/* 作用：将几个不同的数组组合成1个新的数组，注意：不去重！！！ */ // 案例1：将arry1 arry3 arry4组合成一个新数组，进行删除 { let newArry = arry1.concat(arry3, arry4); console.log(newArry); }
11. slice
作用：获取数组中的指定位置的元素
用法：slice(startIndex,endIndex),两个参数分别是：开始位置索引，结束位置索引,
特别注意：获取的数据包含开始，不含结束位置！！！！ [start,end）/* 作用：获取数组中的指定位置的元素 用法：slice(startIndex,endIndex),两个参数分别是：开始位置索引，结束位置索引, 特别注意：获取的数据包含开始，不含结束位置！！！！ */ // 案例：获取arry1中第2-4个元素 { let newArry = arry1.slice(1, 4); console.log(newArry); //[2,3,4] }
总结：上述所有方法，都不会影响原始的数组数据，而是形成一个新的数组.
12. 其它
下面的方法都是在原数组的基础上进行修改
a. push: 往数组最后面添加一个元素，成功返回当前数组的长度。
b. pop: 删除数组的最后一个元素，成功返回删除元素的值
c. shift: 删除数组的第一个元素，成功返回删除元素的值
d. unshift: 往数组最前面添加一个元素，成功返回当前数组的长度
e. splice: 有三个参数，第一个要删除元素的下标(必选)，第二个要删除元素的个数(必选)，第三个删除后想在原位置替换的值
f. sort: 将数组按照字符编码从小到大排序，成功返回排序后的数组
g. reverse: 将数组倒序排列，并返回倒叙后的数组
13. 对比两个截取数组方法
(1).slice：slice截取数组时不会对原数组进行任何操作,而是生成一个新的数组；区间为前闭后开 [start,end) 【是纯函数！】
(2).splice：splice截取数组, 会返回一个新的数组, 也会对原数组进行修改； 【不是纯函数！】
{ //slice传入两个参数,start和end (不含end位置的数据) let name1 = ["a", "b", "c", "d", "e"]; console.log("-----------1.slice-------------------"); let newName1 = name1.slice(0, 3); console.log(newName1); //[ 'a', 'b', 'c' ] console.log(name1); //[ 'a', 'b', 'c', 'd', 'e' ] //splice用法剖析 【https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice】 //用法1： 传入1个参数，start开始位置，直接截取到最后 // 返回值：由被删除的元素组成的一个数组，表示从start位置直接截取到最后 // 对于原数组而言：相当于删除了从start位置到最后 { console.log("------------2.1 splice 传入1个参数-------------------"); let name2 = ["a", "b", "c", "d", "e"]; let newName2 = name2.splice(2); console.log(newName2); //返回值：[ 'c', 'd', 'e' ] console.log(name2); //原数组：[ 'a', 'b' ] } // 用法2： 传入2个参数,第一个要删除元素的下标(必选)，第二个要删除元素的个数(可选) /* 返回值：由被删除的元素组成的一个数组 原数组：相当于扣掉删除的元素，剩下的元素 */ { console.log("------------2.2 splice 传入2个参数-------------------"); let name2 = ["a", "b", "c", "d", "e"]; let newName2 = name2.splice(2, 1); console.log(newName2); //返回值：[ 'c' ] console.log(name2); //原数组：[ 'a', 'b' , 'd', 'e'] } // 用法3：传入3个参数，第一个要删除元素的下标(必选)，第二个要删除元素的个数(可选)，第三个元素，从删除位置添加元素 /* 返回值：由被删除的元素组成的一个数组 原数组：相当于扣掉删除的元素，加上新增的元素，组成的新数组 */ { console.log("------------2.3 splice 传入3个参数-------------------"); let name2 = ["a", "b", "c", "d", "e"]; let newName2 = name2.splice(2, 1, "h1", "h2"); console.log(newName2); //返回值：[ 'c' ] console.log(name2); //原数组：[ 'a', 'b' , 'h1', 'h2','d', 'e'] } }
二. 其它
1. new Array 和 Array.from.fill构建数组的方法
(1). new Array(m).fill(n) ：创建一个数组，数组的长度为m, 数组中的每个元素都为n
{
console.log(new Array(3).fill(0)); //[ 0, 0, 0 ]
console.log(new Array(4).fill(1)); //[ 1, 1, 1, 1 ]
console.log(new Array(3).fill(new Array(2).fill(0))); //[ [ 0, 0 ], [ 0, 0 ], [ 0, 0 ] ]
}(2). Array.from({length:m},()=>n):创建一个数组，数组的长度为m, 数组中的每个元素都为n 【推荐使用】
{
console.log(Array.from({ length: 3 }, () => 0)); //[ 0, 0, 0 ]
console.log(Array.from({ length: 4 }, () => 1)); //[ 1, 1, 1, 1 ]
console.log(Array.from({ length: 3 }, () => new Array(2).fill(0))); //[ [ 0, 0 ], [ 0, 0 ], [ 0, 0 ] ]
}(3). 二者是有区别的
A. 使用new Array(2).fill(new Array(4).fill(0))创建数组时，所有元素都是对新创建的new Array(4).fill(0)数组的引用。
这意味着dp1[0]和dp1[1]实际上都指向同一个数组。
因此，当你修改dp1[0][0]时，你实际上也在修改dp1[1][0]，因为它们都引用同一个内部数组。
B. 使用Array.from方法创建数组时，它会为每个索引位置调用提供的函数（在这里是一个箭头函数() => new Array(4).fill(0)），
这意味着每个子数组都是独立创建的。因此，修改dp2[0][0]不会影响dp2[1][0]，因为它们引用的是两个完全不同的数组。
{
let dp1 = new Array(2).fill(new Array(4).fill(0));
console.log(dp1); //[ [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ] ]
dp1[0][0] = 2;
console.log(dp1); //[ [ 2, 0, 0, 0 ], [ 2, 0, 0, 0 ] ] 把第二个数组中的第一个元素也改了
}
{
let dp2 = Array.from({ length: 2 }, () => new Array(4).fill(0));
console.log(dp2); // [ [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ] ]
dp2[0][0] = 2;
console.log(dp2); //[ [ 2, 0, 0, 0 ], [ 0, 0, 0, 0 ] ]
}
!
- 作 者 : Yaopengfei(姚鹏飞)
- 博客地址 : http://www.cnblogs.com/yaopengfei/
- 声 明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
- 声 明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。
