数组的全面方法】"/>
【手把手教你+学数组的全面方法】
在JS中,数组方法是非常重要且常用的方法.在此整理总结一番.
数组的全面方法
- 1. javaScript常用数组方法
- 获取数组最后一项
- 从数组中随机取出来一个值(文字)
- 1.push() 末尾追加 ;
- 2.unshift() 头部添加;
- 3.pop() 删除数组中的最后一项;
- 4.shift() 删除数组的第一位;
- 5.reverse() 对数组里边的数据进行反转;
- 6.sort() 对数组进行排序;
- 7.splice() 从数组中从index(下标或索引值)的位置删除一个;
- 8、slice 对一个新的数组进行 裁切;
- 9.concat() 将数组或元素拼接形成一个新的数组;
- 10.join() 将数组拼接成字符串;
- 11.toString() 将数组转字符串;
- 12.valueOf() 查询数组的原始值;
- 13.indexOf() 查询某个元素在数组中第一次出现的位置;
- 14.lastIndexOf() 查询某个元素在数组中最后一次出现的位置;
- 15.forEach() 遍历数组,每次循环中执行传入的回调函数;
- 16.map() 遍历数组, 每次循环时执行传入的回调函数;
- 17.filter() 对数据进行过滤,不会修改里边的数据,只会返回一个新的数据;
- 18.every() 当有一个条件不满足时,就返回false,都满足就是true;
- 19.some() ;
- 20.reduce();
- 21.reduceRight();
- 22.includes();
- 23.Array.from();
- 24.find();
- 25.findIndex();
- 26.fill();
- 27.flat();
- 28.flatMap();
- 30、 arr.find() 查找;
JavaScript 数组的力量隐藏在数组方法中。
1. javaScript常用数组方法
顺序 | 方法名 | 功能 | 返回值 | 是否改变原数组 | 版本 |
---|---|---|---|---|---|
1 | push() | (在结尾)向数组添加一或多个元素 | 返回新数组长度 | Y | ES5- |
2 | unshift() | (在开头)向数组添加一或多个元素 | 返回新数组长度 | Y | ES5- |
3 | pop() | 删除数组的最后一位 | 返回被删除的数据 | Y | ES5- |
4 | shift() | 删除数组的第一项 | 返回被删除的数据 | Y | ES5- |
5 | reverse() | 反转数组中的元素 | 返回反转后数组 | Y | ES5- |
6 | sort() | 排序 | 返回排序后的新数组 | Y | ES5- |
7 | splice() | 在指定位置删除指定个数元素再增加任意个数元素 (实现数组任意位置的增删改),原来的数组:改变 | 返回删除的数据 | Y | ES5- |
8 | slice() | 裁切指定位置的数组 | 被裁切的元素形成的新数组 | N | ES5- |
9 | concat() | 数组的连接(合并) | 返回合并之后的数组 | N | ES5- |
10 | join() | 数组转字符串 | 返回拼接后的新数组 | N | ES5- |
11 | arr.split() | 字符串转数组 | 返回拼接后的新数组 | ES5 | |
12 | toString() | 将数组转换为字符串 | 新数组 | N | ES5- |
13 | valueOf() | 查询数组原始值 | 数组的原始值 | N | ES5- |
14 | indexOf() | 查询某个元素在数组中第一次出现的位置 | 存在该元素,返回下标,不存在 返回 -1 | N | ES5- |
15 | lastIdexOf() | 反向查询数组某个元素在数组中第一次出现的位置 | 存在该元素,返回下标,不存在 返回 -1 | N | ES5- |
16 | forEach() | (迭代) 遍历数组,每次循环中执行传入的回调函数 | 无/(undefined) | N | ES5- |
17 | map() | (迭代) 遍历数组, 每次循环时执行传入的回调函数,根据回调函数的返回值,生成一个新的数组 | 有/自定义 | N | ES5- |
18 | filter() | 对数组进行过滤 | 满足条件的元素组成的新数组 | N | ES5- |
19 | every() | (迭代) 判断数组中所有的元素是否满足某个条件 | 全都满足返回true 只要有一个不满足 返回false | N | ES5- |
20 | some() | (迭代) 判断数组中是否存在,满足某个条件的元素 | 只要有一个元素满足条件就返回true,都不满足返回false | N | ES5- |
21 | reduce() | (归并)遍历数组, 每次循环时执行传入的回调函数,回调函数会返回一个值,将该值作为初始值prev,传入到下一次函数中 | 最终操作的结果 | N | ES5- |
22 | reduceRight() | (归并)用法同reduce,只不过是从右向左 | 同reduce | N | ES5- |
23 | includes() | 判断一个数组是否包含一个指定的值. | 是返回 true,否则false | N | ES6 |
24 | Array.from() | 接收伪数组,返回对应的真数组 ( 一般用于去重Array.from(new Set(arr) ) | 对应的真数组 | N | ES6 |
25 | find() | 返回满足条件的第一个元素,不存在返回undefined | 满足条件第一个元素/否则返回undefined | N | ES6 |
26 | findIndex() | 遍历数组,执行回调函数,回调函数接受一个条件,返回满足条件的第一个元素下标,不存在返回-1 | 满足条件第一个元素下标,不存在=>-1 | N | ES6 |
27 | fill() | 用给定值填充一个数组 | 新数组 | N | ES6 |
28 | flat() | 用于将嵌套的数组“拉平”,变成一维的数组。 | 返回一个新数组 | N | ES6 |
29 | flatMap() | flat()和map()的组合版 , 先通过map()返回一个新数组,再将数组拉平( 只能拉平一次 ) | 返回新数组 | N | ES6 |
获取数组最后一项
<button @click="tab">按钮</button>tab() {var list = [32, 93, 77, 53, 38, 87];console.log(list[list.length - 1]); //获取数组的最后一项 87console.log(list.length); //数组的长度},// 因为下标是从零开始,减一正好是最后一项(3-1=2)下标0、1、2,以此类推...
从数组中随机取出来一个值(文字)
<button @click="tab">按钮</button>tab() {var arr = ["被表白","你爱的人也喜欢你","好运连连","遍地桃花","开心","升职","防dao","加薪","健康","出名","暴富","瘦成闪电",];var aa = Math.floor(Math.random() * arr.length);// console.log(aa); //直接打印是下标console.log(arr[aa]); //这样是文字,因为aa是变量所以[]},
Math.random(); 结果为0-1间的一个随机数(包括0,不包括1) 。
Math.round(num); 参数num为一个数值,函数结果为num四舍五入后的整数。
Math.ceil(n); Math.floor() 向上取整和向下取整。 (ceil有天花板的意思,向上;floor是地板的意思,向下)
1 Math.ceil() 、 Math.floor() 、向上取整和向下取整。 (ceil有天花板的意思,向上;floor是地板的意思,向下)
console.log(Math.ceil(8.11));//9console.log(Math.floor(8.11));//8
2 Math.round() 四舍五入。 (注意:正数时,包含5是向上取整,负数时 ,包含5是向下取整(因为负数时往下取更大)。)
console.log(Math.round(-8.3)); //-8console.log(Math.round(-8.5)); //-8console.log(Math.round(-8.51)); //-9
3 随机数 (包头不包尾)
//随机数 (包头不包尾)console.log(parseInt(Math.random() * 10)); //未包含10 [0,10]console.log(parseInt(Math.random() * (10 + 1))); //包含10 [0,11]
4 Math.abs() 获取绝对值
console.log(Math.abs(~8.24512)); //9console.log(Math.abs(9 > 8)); //1console.log(Math.abs(9 == 8)); //0
5、 Math.max() 、 Max.min()、 获取一组数据中的最大值和最小值
console.log(Math.max(10, 15, 9, 1010, 2002, 45, 78)); // 2002console.log(Math.min(10, 1, 59, 1000, 200, 45, 78)); // 1
1.push() 末尾追加 ;
功能: 像数组的末尾添加一个或多个元素,并返回新数组的长度,改变原数组.(添加多个元素用逗号隔开)
<button @click="tab">按钮</button>tab() {var arr = [1, 2, 3];var a = arr.push(4, 5, "6");console.log(arr); //添加后的数组console.log(a); //(新数组的长度)},
如下图所示:
2.unshift() 头部添加;
功能: 像数组的头部添加一个或多个元素,并返回新数组的长度,改变原数组。(添加多个元素用逗号隔开)
<button @click="tab">按钮</button>tab() {var arr = [1, 2, 3];var b = arr.unshift("-1", 0);console.log(arr); //添加后的数据console.log(b); //新数组的长度},
如图所示:
3.pop() 删除数组中的最后一项;
功能:删除数组的最后一位,并且返回删除的数据,会改变原来的数组。(该方法不接受参数,且每次只能删除最后一个)
<button @click="tab">按钮</button>tab() {var arr = [1, 2, 3];console.log(arr); //原本数组的数据var b = arr.pop();console.log(arr); //删除后的数据console.log(b); //返回的是被删除的那个 数据},
4.shift() 删除数组的第一位;
功能:删除数组的第一位数据,并且返回被删除的数据,会改变原来的数组。(该方法同pop();一样不接受参数,且每次只能删除数组第一个)
<button @click="tab">按钮</button>tab() {var arr = [4, 1, 2, 3];console.log(arr); //原本数组的数据var b = arr.shift();console.log(arr); //头部被删除过后的数据console.log(b); //返回的是一个被删除之后的 数据},
5.reverse() 对数组里边的数据进行反转;
功能:将数组的数据进行反转,并且返回反转后的数组,会改变原数组
<button @click="tab">按钮</button>tab() {var arr = [1, 2, 3, "c", "4", 5, "7"];console.log(arr); //原本数组的数据var b = arr.reverse();console.log(arr); //反转之后的数据console.log(b); //返回值 也是返回一个反转后的数据},
6.sort() 对数组进行排序;
sort() 方法是最强大的数组方法之一。
sort(); 方法用于对数组的元素进行排序,并返回被排序之后的数组。
例1:
<button @click="tab">按钮</button>tab() {var arr = [1, 2, 3, "c", "4", 5, "7"];console.log(arr); //原本数组的数据var b = arr.sort((a,b)=>{return a - b // a减b 从小到大//return b - a // b减a 从大到小});console.log(arr); //被排序之后的数据console.log(b); //返回值 也是返回一个被排序之后的数据},
从小到大
从大到小
结果并不是我们想要的排序结果,因为它是根据unicode编码来排序的,这也显示了其不稳定性。
语法: arr.sort(function(a,b))
参数: function可选。用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的诸个字符的Unicode位点进行排序。
具体用法:
- 如果 function(a, b) {return: a - b;} ,=> a - b > 0 那么 a 会被排列到 b 之前; (从小到大排序)
- 如果 function(a, b) {return: b - a;} ,=> b - a > 0 那么b会被排列到 a 之前; (从大到小排序)
那么我们就可以运用以上所说的function(a,b)去完成对数字的排序:
var arr = [10, 1, 5, 2, 3];arr.sort(function (a, b) {return a - b;});console.log(arr);
打印结果:
元素为对象时(可按其中某个属性来排序):
var arr1 = [{ name: "老八", age: "38" },{ name: "赵日天", age: "28" },{ name: "龙傲天", age: "48" },];arr1.sort(function (a, b) {console.log(a, b);return b.age - a.age;});console.log(arr1);
打印结果:(按 age 排序(大到小))
7.splice() 从数组中从index(下标或索引值)的位置删除一个;
功能:向数组中添加,或从数组删除,或替换数组中的元素,然后返回被删除/替换的元素。可以实现数组的增删改;
语法: arrayObject.splice(index,howmany,item1,…,itemX)
参数:
参数 | 描述 |
---|---|
index | 必需。整数,规定添加/删除项目的位置(元素下标),使用负数可从数组结尾处规定位置。 |
howmany | 必需。要删除的项目数量。如果设置为 0,则不会删除项目。 |
item1, …, itemX | 可选。向数组添加的新项目。 |
例1,删除arr()中第三个元素并添加 ”add1“ "add2"元素
var arr = ["a", "b", "c", 2, 3, 6];var rel = arr.splice(2, 1, "add1", "add2");console.log(arr); //原数组console.log(rel); //新数组
打印结果:
例2、
<button @click="tab">按钮</button>tab() {var arr = [2, 3, "c", "4", "7"];console.log(arr); //原本数组的数据var b = arr.splice(3, 1); //3代表的是从下表开始数,从第三个开始删除1个 (后面那个 1 就是要删除几个)console.log(arr); //被删除之后的数据console.log(b); //返回值 也是返回一个被删除的数据},
8、slice 对一个新的数组进行 裁切;
功能:从指定的位置对数组进行裁切不会改变原来的数组,返回一个被裁切之后的新数组
注意!起始下标和终止下标的区间是 左闭右开 [ a ,b) 能取到起始,取不到终止
参数 | 描述 |
---|---|
startIndex | 起始下标 默认值 0 |
endIndex | 终止下标 默认值 length,可以接收负数,(倒着数) |
<button @click="tab">按钮</button>tab() {var arr = [2, 3, "c", "4", "7"];console.log(arr); //原本数组的数据var b = arr.slice(arr, 3); //arr代表的是对那个数组进行裁切 (后面那个 3 就是最后要保留下来的数据)console.log(arr); //还是原本的数据console.log(b); //返回值 返回一个被保留下来的数据(从下表0开始)},
9.concat() 将数组或元素拼接形成一个新的数组;
功能: 数组的拼接(将多个数组或元素拼接形成一个新的数组),不改变原数组 如果拼接的是数组 则将数组展开,之后将数组中的每一个元素放到新数组中. 如果是其他类型, 直接放到新数组中 另外,如果不给该方法任何参数,将返回一个和原数组一样的数组(复制数组)
例1、
var arr1 = [1, 2, 3];var arr2 = ["a", "b", "c"];var arr3 = ["A", "B", "C"];var rel = arr1.concat(arr2, arr3);console.log(arr1); //原数组console.log(rel); //新数组
打印结果:
可以看到原数组 arr1() 并没有被改变,该方法不改变原数组,后续不改变原数组方法将不再打印原数组
例2、
<button @click="tab">按钮</button>tab() {var arr = [2, 3, "c", "4", "7"];var arr1 = [5, 8, 9, 10, 22, 33];var b = arr.concat(arr, arr1);console.log(arr); //原数组console.log(arr1); //原数组console.log(b); //返回值 返回一个拼接后的新数组},
如图所示:
10.join() 将数组拼接成字符串;
功能:用特定的字符,将数组拼接形成字符串 (默认",")
<button @click="tab">按钮</button>tab() {var list = ["a", "b", "c", "d"]; // "a-b-c-d"var result = list.join("-"); //"a-b-c-d"var result = list.join("/"); //"a/b/c/d"var result = list.join(""); //"abcd"var result = list.join(); // a,b,c,dconsole.log(list); //原数组console.log(result); //返回值 返回一个转换之后的新数组},
11.toString() 将数组转字符串;
功能: 直接将数组转换为字符串,并且返回转换后的新数组,不改变原数组,与join();方法不添加任何参数 相同.
tab() {var a = ["a", "b", "c", "d", "e"];var b = a.toString(a); //将数组变成字符串console.log(b); //返回值 返回一个新数组 a,b,c,d,e (字符串类型)},
12.valueOf() 查询数组的原始值;
功能: 返回数组的原始值(一般情况下其实就是数组自身)
var list = [1, 2, 3, 4];var rel = list.valueOf();console.log(list); // [1, 2, 3, 4]console.log(rel); // [1, 2, 3, 4]
13.indexOf() 查询某个元素在数组中第一次出现的位置;
功能: 查询某个元素在数组中第一次出现的位置 存在该元素,返回下标,不存在 返回 -1 (可以通过返回值 变相的判断是否存在该元素)
var list = [1, 2, 3, 4];var index = list.indexOf(4); //3var index = list.indexOf("4"); //-1console.log(index);
14.lastIndexOf() 查询某个元素在数组中最后一次出现的位置;
功能: 查询某个元素在数组中最后一次出现的位置 (或者理解为反向查询第一次出现的位置) 存在该元素,返回下标,不存在 返回 -1 (可以通过返回值 变相的判断是否存在该元素)
var list = [1, 2, 3, 4];var index = list.lastIndexOf(4); //3var index = list.lastIndexOf("4"); //-1console.log(index);
15.forEach() 遍历数组,每次循环中执行传入的回调函数;
功能: 遍历数组,每次循环中执行传入的回调函数 。(注意: forEach() 对于空数组是不会执行回调函数的。) 没有返回值,或理解为返回值为undefined,不改变原数组.
语法:
arr[].forEach(function(value,index,array){undefined
//do something
})
参数: item:每次循环的当前元素, index:当前项的索引, array:原始数组;
数组中有几项,那么传递进去的匿名回调函数就需要执行几次;
实例1.:
var list = [32, 93, 77, 53, 38, 87];var res = list.forEach(function (item, index, array) {console.log(item, index, array);});console.log(res);
打印结果
实例2: 数组中元素的和
var list = [32, 93, 77, 53, 38, 87];var sum = 0;list.forEach(function (item) {console.log(item);sum += item;});console.log(sum);
打印结果
16.map() 遍历数组, 每次循环时执行传入的回调函数;
功能: 遍历数组, 每次循环时执行传入的回调函数,根据回调函数的返回值,生成一个新的数组 , 同forEach() 方法,但是map()方法有返回值,可以return出来;
语法:
arr[].map(function(item,index,array){undefined
//do something
return XXX
})
参数: item:每次循环的当前元素, index:当前项的索引, array:原始数组;
示例:
var list = [32, 93, 77, 53, 38, 87];var res = list.map(function (item, index, array) {return item + 5 * 2;});console.log("原数组", list);console.log("新数组", res);
打印结果:
17.filter() 对数据进行过滤,不会修改里边的数据,只会返回一个新的数据;
功能: 遍历数组, 每次循环时执行传入的回调函数,回调函数返回一个条件,把满足条件的元素筛选出来放到新数组中.
语法:
arr[].filter(function(item,index,array){undefined
//do something
return XXX //条件
})
参数: item:每次循环的当前元素, index:当前项的索引, array:原始数组;
示例:
var list = [32, 93, 77, 53, 38, 87];var resList = list.filter(function (item, index, array) {return item >= 60; // true || false});console.log(resList);
打印结果:
18.every() 当有一个条件不满足时,就返回false,都满足就是true;
功能:遍历数组, 每次循环时执行传入的回调函数,回调函数返回一个条件,全都满足返回true 只要有一个不满足 返回false => **判断数组中所有的元素是否满足某个条件**
var list = [32, 93, 77, 53, 38, 87];var result = list.every(function (item, index, array) {console.log(item, index, array);return item >= 50;});console.log(result);
打印结果:false
19.some() ;
功能:遍历数组, 每次循环时执行传入的回调函数,回调函数返回一个条件,只要有一个元素满足条件就返回true,都不满足返回false => **判断数组中是否存在,满足某个条件的元素**
示例:
var list = [32, 93, 77, 53, 38, 87];var result = list.some(function (item, index, array) {return item >= 50;});console.log(result);
打印结果 : true
20.reduce();
功能: 遍历数组, 每次循环时执行传入的回调函数,回调函数会返回一个值,将该值作为初始值prev,传入到下一次函数中, 返回最终操作的结果;
语法: arr.reduce(function(prev,item,index,array){})
参数:
prev 初始值 (类似求和是 sum=0) 可以设置初始值( 参数),如果不设置初始值默认是数组中的第一个元素,遍历时从第二个元素开始遍历
item 每次循环的当前元素
index 每次循环的当前下标
array 原数组
实例1: 不设置初始值的累加
var arr = [2, 3, 4, 5];var sum = arr.reduce(function (prev, item, index, array) {console.log(prev, item, index, array);return prev + item;});console.log(arr, sum);
打印结果
解析:
第一次循环: prev = 2 ; item(当前循环元素) = 3 ; index(当前循环元素下标) = 1;原数组 =array;
因为没有给prev设置初始值,所以prev 的值为数组中第一个元素,遍历从第二个元素开始
第二次循环:prev = 5; item(当前循环元素) = 4 ; index(当前循环元素下标) = 2;原数组 =array;
prev = 2+3(上次循环的元素) = 5 ;
…
最终prev = 14 ; arr中有四个元素 共循环三次;(因为没设置初始值跳过第一次循环prev默认等于第一个值)
实例2 设置初始值的累加
var arr = [2, 3, 4, 5];var sum = arr.reduce(function (prev, item, index, array) {console.log(prev, item, index, array);return prev + item;}, 0);console.log(arr, sum);
打印结果
解析: 可以看到与上一次设置初始值相比,最终的结果相同,但是多循环的一次,因为设置了prev的初始值为0,所以循环遍历从第一个元素开始,而不设置初始值,循环从第一个元素开始.
21.reduceRight();
功能: 用法同reduce,只不过是从右向左
22.includes();
功能: 用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。
实例
let site = ['runoob', 'google', 'taobao'];site.includes('runoob');
// true site.includes('baidu');
// false
23.Array.from();
功能: 将一个类数组对象或者可遍历对象转换成一个真正的数组
注意 将一个类数组对象转换为一个真正的数组,必须具备以下条件:
1、该 伪数组 / 类数组 对象必须具有length属性,用于指定数组的长度。如果没有length属性,那么转换后的数组是一个空数组。
2、该 伪数组 / 类数组 对象的属性名必须为数值型或字符串型的数字
var all = {0: "张飞",1: "28",2: "男",3: ["率土", "鸿图", "三战"],length: 4,};var list = Array.from(all);console.log(all);console.log(list, Array.isArray(list));
打印结果
24.find();
功能: 遍历数组 每次循环 执行回调函数,回调函数接受一个条件 返回满足条件的第一个元素,不存在则返回undefined
参数
item:必须 , 循环当前元素
index:可选 , 循环当前下标
array:可选 , 当前元素所属的数组对象
实例:
var list = [55, 66, 77, 88, 99, 100];var index = list.find(function (item, index, array) {console.log(item, index, array);return item > 60;});console.log(index); //66
打印结果为66,每次循环判断当前元素是否满足条件,如果满足直接跳出循环,返回第一个满足条件的元素
25.findIndex();
功能 遍历数组,执行回调函数,回调函数接受一个条件,返回满足条件的第一个元素下标,不存在则返回-1
参数
item:必须 , 循环当前元素
index:可选 , 循环当前下标
array:可选 , 当前元素所属的数组对象
注意
findIndex();和indexOf();不同 (刚接触时乍一看和indexOf()怎么一模一样,仔细看了下才发现大有不同)
indexOf是传入一个值.找到了也是返回索引,没有找到也是返回-1 ,属于ES5
findIndex是传入一个测试条件,也就是函数,找到了返回当前项索引,没有找到返回-1. 属于ES6
实例
var list = [55, 66, 77, 88, 99, 100];var index = list.findIndex(function (item, index, array) {console.log(item, index, array);return item > 60;});console.log(index); // 1
打印结果为1, 循环步骤和find()方法一样,但是它返回的是下标,find()返回的是满足条件的元素
26.fill();
功能 用给定值填充一个数组
参数
value 必需。填充的值。
start 可选。开始填充位置。
end 可选。停止填充位置 (默认为 array.length)
实例
var result = ["a", "b", "c"].fill("填充", 1, 2);
打印结果
27.flat();
功能 用于将嵌套的数组"拉平",变成一维的数组。该方法返回一个新数组,对原数据没有影响。
注意 默认拉平一次 如果想自定义拉平此处 需要手动传参 ,如果想全都拉平 传 Infinity
var list = [1, 2, [3, 4, [5]]];var arr = list.flat(); // 默认拉平一次console.log("拉平一次", arr);var arr = list.flat(2); // 拉平2次console.log("拉平两次", arr);
打印结果:
28.flatMap();
功能 flat()和map()的组合版 , 先通过map()返回一个新数组,再将数组拉平( 只能拉平一次 )
var list = [55, 66, 77, 88, 99, 100];var newArr = list.map(function (item, index) {return [item, index];});console.log("Map方法:", newArr);var newArr = list.flatMap(function (item, index) {return [item, index];});console.log("flatMap方法:", newArr);
打印结果
30、 arr.find() 查找;
功能:返回满足条件的第一个元素,不存在则返回undefined参数
var list = [505, 686, 77, 48, 99, 100];var index = list.find(function(item, index, array) {console.log(item, index, array);return item > 800;});console.log(index); //undefined 找到返回元素,找不到返回undefined
更多推荐
【手把手教你+学数组的全面方法】
发布评论