数组方法
数组方法有多种,可以大致分为以下三类:改变数组本身的方法、不改变数组本身而返回一个新数组的方法,以及其他对数组本身功能性产生影响的方法。
改变数组本身的方法 (7个)
pop和push尾部删除添加
这两个方法用于数组结尾的删除和添加
const arr = [ 1, 2, 3, 4, 5 ]
//添加到数组的尾端
arr.push(6) //[1,2,3,4,5,6]
//再次调用pop方法就删除了最后一位
arr.pop()//[1,2,3,4,5]
unshift和shift头部删除添加
用于在数组的首位进行删除和添加
const arr = [ 1, 2, 3, 4, 5 ]
//添加到数组的前端
arr.unshift(6) //[6,1,2,3,4,5]
//再次调用shift方法就删除了第一位
arr.shift()//[1,2,3,4,5]
sort 排序
数组提供了一种强大的排序方法,允许你就地排序数组,而不需要复制或返回一个新的数组。这个排序方法可以接受可选参数,一个回调函数,该回调函数有两个参数a和b,它的返回值决定了排序的方式。如果回调函数返回a < b,则返回-1,这将导致数组按升序排序;如果返回a > b,则返回1,这将导致数组按降序排序;如果返回a == b,则返回0,这将保持原来的排序(默认排序是将元素转换为字符串,然后按照它们的 UTF-16 码元值升序排序)。
这个排序方法非常有用,因为它允许你根据自定义的比较逻辑对数组进行灵活的排序,而不仅仅是按照默认方式排序。这可以用来解决各种排序问题,从简单的数字和字符串排序到复杂的对象排序。这种灵活性使得JavaScript中的数组排序功能非常强大。
const arr = ["March", "Jan", "Feb", "Dec", 6, 2, "A", "a"];
arr.sort(function (a, b) {
if (a < b) {
return -1;
} else if (a > b) {
return 1;
} else {
return 0;
}
});
console.log(arr);//['A','Dec', 'Feb','Jan','March',2, 6,'a']
reverse 反转
对数组进行就地反转,顺序颠倒。
const arr = ["March", "Jan", 6, 2, "A", "a"];
arr.reverse();
console.log(arr);//[ 'a', 'A', 2, 6, 'Jan', 'March' ]
splice 截取新增数据
在JavaScript中,你可以使用splice来删除数组中的某一个值或在数组的指定位置添加数据。这个方法接受可选参数,需要提供至少三个或更多的参数。第一个参数是截取的索引位置(必须是一个整数),第二个参数是截取的个数(同样是整数),然后你可以在第三个参数以及之后的参数中添加你想要插入的任何类型的数据。
当你提供这些参数时,数组会根据指定的索引位置和个数删除原始数据,并将你提供的新数据插入到指定位置。这个方法对于数组的修改非常有用,可以根据需要轻松地删除和添加数据,从而实现对数组的定制操作
const arr = ["March", "Jan", 6, 2, "A", "a"];
//在索引为2的位置截取一个,并在索引2的位置后添加8
arr.splice(2, 1, 8);
console.log(arr);//[ 'March', 'Jan', 8, 2, 'A', 'a' ]
//截取位数不够,就将有的全部且去掉
arr.splice(2, 6);
console.log(arr);//[ 'March', 'Jan' ]
不改变数组本身而返回一个新数组的方法 (13个)
filter 数据过滤
JavaScript的filter()方法允许你根据特定条件来过滤数组中的元素,并返回一个新数组,其中包含符合条件的元素。这个方法接受一个回调函数,回调函数有三个参数:第一个是当前遍历的元素,第二个是当前元素的索引,第三个是数组本身。这个回调函数需要返回一个布尔值,用于指示是否保留当前元素在新数组中。
当filter()方法遍历数组时,它会对每个元素调用回调函数,并根据回调函数的返回值来决定是否将该元素包含在新数组中。如果回调函数返回true,则该元素会被保留,如果返回false,则该元素会被排除。
const arr = ["March", "Jan", 6, 2, "A", "a"];
//这里是一个简单的例子,返回类型为string的元素
const newArr = arr.filter((item, index) => typeof item === "string");
console.log(newArr);//[ 'March', 'Jan', 'A', 'a' ]
map
JavaScript的map()方法是一个强大的数组方法,它用于对数组中的每个元素执行一个指定的回调函数,并将回调函数的返回值组成一个新的数组返回。这个方法接受一个回调函数作为参数,回调函数有三个参数:第一个参数是当前遍历的元素,第二个参数是当前元素的索引,第三个参数是数组本身。回调函数需要返回一个值,这个值会成为新数组的对应元素。
map()方法并不改变原始数组,而是创建一个新的数组,其中包含了经过回调函数处理后的元素。这使得它非常适合用于对原数组中的元素进行一些变换或处理,同时保留原始数据不变。
举个例子,你可以使用map()方法来将数组中的每个元素都加倍,或者根据元素的值生成一个新的字符串数组。这种灵活性使得map()方法在处理和转换数组数据时非常有用。
const arr = ["March", "Jan", 6, 2, "A", "a"];
//返回一个number的数组,不是number类型的就返回它们的字段长度
const newArr = arr.map((item, index) => (typeof item === "number" ? item : item.length);
console.log(newArr);//[ 5, 3, 6, 2, 1, 1 ]
reduce 数据累加
reduce()是一个非常强大的数组方法,虽然平常很少使用,但它具有强大的功能,因为它可以用来实现其他许多数组方法,有时候合理的使用reduce可以大大减少代码量。reduce()接收两个参数,第一个参数是一个回调函数,回调函数有四个参数:第一个参数是上一次回调函数返回的结果,首次调用时默认为数组的第二个元素(如果没有提供默认值的话,否则默认为第一个元素),第二个参数是当前元素,第三个参数是当前元素的索引值,第四个参数是数组本身。reduce()的第二个参数是一个可选的默认值,如果提供了默认值,它将作为第一次回调的第一个参数。
通过reduce(),你可以实现各种复杂的操作,例如数组求和、找到最大值、将数组元素连接成字符串等等。这个方法通过迭代数组的每个元素,并根据回调函数的逻辑来计算一个累积的结果。这种累积的结果可以在多次迭代中进行更新,从而实现各种复杂的操作。
虽然reduce()的使用可能需要一些思考和理解,但一旦熟悉了它的工作原理,就可以发现它的强大之处,能够用更简洁的方式实现各种数组操作
//使用reduce实现filter方法
const arr = ["March", "Jan", 6, 2, "A", "a"];
//定义第二个参数的默认值为一个数组
const newArr = arr.reduce((acc, cur, index) => {
typeof cur === "string" && acc.push(cur);
return acc;
}, []);
console.log(newArr);//[ 'March', 'Jan', 'A', 'a' ]
//使用reduce实现数字的求和
//第二个参数默认定义0 number类型
const newArr = arr.reduce((acc, cur, index) => {
typeof cur === "number" && (acc += cur);
return acc;
}, 0);
console.log(newArr);//8
reduceRight 从右开始 数据累加
这个方法是reduceRight(),它是reduce方法的右向版本。与reduce类似,reduceRight()也接受两个参数:第一个参数是回调函数,回调函数有四个参数,第二个参数是可选的默认值。不同之处在于,reduceRight()会从数组的最后一个元素开始,从右向左执行操作,逐步向前累积结果。
reduceRight()非常适用于需要对数组进行反转、过滤等操作的情况。例如,如果你想从数组的末尾开始对元素进行累积运算或者筛选,这个方法会非常方便。它的便利之处在于,你无需手动反转数组,而是可以直接从右向左处理数组元素。
const arr = ["March", "Jan", 6, 2, "A", "a"];
const newArr = arr.reduceRight((acc, cur, index) => {
typeof cur === "string" && acc.push(cur);
return acc;
}, []);
//这里打印之后可以看出,毕竟过滤了非字符串的参数,还将数组反转了
console.log(newArr);//[ 'a', 'A', 'Jan', 'March' ]
slice 数组截取
你可以使用数组的slice()方法来进行浅拷贝,并且它接受两个参数:第一个参数是截取的初始位置,第二个参数是终止位置(但不包括这个索引值)。如果你只提供一个参数,slice()会从该索引位置开始截取到数组的末尾。
这个方法非常适用于需要复制数组的一部分元素而不影响原始数组的情况。例如,你可以使用slice()来创建一个包含特定范围元素的新数组,而不必修改原始数组。这种浅拷贝的方法非常常见,并且在处理数组数据时非常有用。
const arr = ["March", "Jan", 6, 2, "A", "a"];
const newArr = arr.slice(0, 3);
console.log(newArr);//[ 'March', 'Jan', 6 ]
const newArr = arr.slice(3);
console.log(newArr);//[ 2, 'A', 'a' ]
concat 数组合并
当需要合并两个或多个数组时,你可以使用JavaScript中的concat()方法来快速实现。concat()方法接受一个或多个参数,每个参数可以是任意类型的数据,包括数组、元素、甚至是其他数组。它会将所有提供的参数合并成一个新的数组,并返回这个新数组。
虽然在ES6之后,扩展运算符也提供了一种简单的方式来合并数组,但concat()方法仍然是一个非常有用的工具,特别是当你需要合并多个数组或需要将其他类型的数据与数组合并时。这个方法的灵活性使得在处理数据时更加方便,因为它可以处理多种不同的输入类型。
const arr1 = ["March", "Jan"];
const arr2 = [6, 2, "A", "a"];
const arr3 = {
name: "Tom",
age: 18,
sex: "男",
};
//如果参数是数组则会合并
const newArr = arr1.concat(arr2);
console.log(newArr);//[ 'March', 'Jan', 6, 2, 'A', 'a' ]
//一个以上的参数 如果是值类型 则会直接添加到数组得最后面
const newArr = arr1.concat(arr2,'Tom');
console.log(newArr);//[ 'March', 'Jan', 6, 2, 'A', 'a','Tom' ]
//一个以上的参数,为一个对象类型,会直接添加到对象中
const newArr = arr1.concat(arr2,arr3);
console.log(newArr);//[ 'March', 'Jan', 6, 2, 'A', 'a', { name: 'Tom', age: 18, sex: '男' } ]
copyWithin 将数组得一部分赋值到另一个位置
copyWithin()方法是一种高性能的数组数据移动方法,它是通用的,只要数组对象具有length属性和整数键属性,就可以使用它。但需要注意,尽管字符串在某种程度上类似于数组,但copyWithin()方法不适用于字符串,因为字符串是不可变的,不能像数组一样进行直接修改。
copyWithin()方法不会改变数组的长度,它仅修改数组的内容。这个方法接受三个参数:
第一个参数是复制到的目标位置的索引值。 第二个参数是复制的起始位置(可选)。如果为负数,则相当于从数组的末尾往前数。 第三个参数是结束位置(不包括此索引的位置,可选)。需要注意的是,起始位置不能小于结束位置,否则方法将无效。 通过copyWithin()方法,你可以在数组内部高效地复制和移动元素,而不必创建新的数组或进行复杂的拷贝操作。这使得它成为处理数组数据的有力工具。
const arr1 = ["March", "Jan", 6, 2, "A", "a"];
//从索引为三个位置开始复制,到索引为5的位置,但不包含5,从索引为1的位置粘贴并覆盖
const newArr = arr1.copyWithin(1, 3, 5);
console.log(newArr);//[ 'March', 2, 'A', 2, 'A', 'a' ]
//为负数时从后往前数-2从A的位置到-1不包括-1的位置,也就是将A赋值并覆盖到了索引为0的位置
const newArr = arr1.copyWithin(0, -2, -1);
console.log(newArr);//[ 'A', 'Jan', 6, 2, 'A', 'a' ]
//这种结束索引位置在开始索引位置之前的都不生效
const newArr = arr1.copyWithin(0, -2, 2);
const newArr = arr1.copyWithin(0, -2, -4);
console.log(newArr);//[ 'March', 'Jan', 6, 2, 'A', 'a' ]
fill 填充
你可以使用JavaScript的fill()方法来对数组内容进行覆盖填充。这个方法接受三个参数:
-
第一个参数是要用于填充数组的值。 -
第二个参数是起始位置(可选),表示从数组的哪个索引位置开始填充。如果未提供此参数,默认从索引0开始。 -
第三个参数是结束位置(不包括此索引的位置,可选),表示填充的范围。如果未提供此参数,默认填充整个数组。
const arr1 = ["March", "Jan", 6, 2, "A", "a"];
//将666填充到1-4不包括4索引的位置
const newArr = arr1.fill(666, 1, 4);
console.log(newArr);//[ 'March', 666, 666, 666, 'A', 'a' ]
flatMap 扁平化map
flatMap与map相似,都是接收一个回调函数,进行处理后返回一个数组,但有一处差别就是flatMap可以对数组进行一层扁平化(仅数组)
const arr1 = ["March", "Jan", 6, 2, "A", "a"];
const newArr = arr1.flatMap((item, index) => {
return [item, index];
});
//可以看出本应该是双层数组的,却被扁平化了
console.log(newArr);//['March', 0,'Jan', 1,6,2,2,3,'A',4,'a', 5]
const newArr = arr1.flatMap((item, index) => {
return [[item, index]];
});
//仅只能扁平化一层
console.log(newArr);//[[ 'March', 0 ],[ 'Jan', 1 ], [ 6, 2 ], [ 2, 3 ],[ 'A', 4 ],[ 'a', 5 ]]
with 修改指定索引值得复制方法
值得注意的是,with 方法在某些情况下并不是一个推荐使用的方式,因为它的兼容性较差。在现代的 JavaScript 开发中,通常更常见且更稳定的方式是直接使用 arr[index] = xxx 来修改数组中的某个值,这会更符合 JavaScript 的最佳实践。
如果你确实需要使用 with 方法,它可以接受两个参数:第一个参数是要修改的索引位置,第二个参数是你要将该位置修改成的新值。然而,需要注意的是,with 方法在一些 JavaScript 环境中可能会导致意外的行为,因此在使用之前需要小心谨慎,并确保它在你的目标环境中能够正常工作。
总的来说,虽然 with 方法可以实现数组中特定位置的值的修改,但建议使用更常见、更稳定且更易维护的方式来处理数组数据,以确保代码的可读性和可维护性。
const arr = ["March", "Jan", 6, 2, "A", "a"];
const newArr = arr.with(3, "Tom");
console.log(newArr);//[ 'March', 'Jan', 6, 'Tom', 'A', 'a' ]
toReversed 反转数组的复制版
「此方法兼容性不好,暂时不推荐使用,node版本需要20.0.0以上,浏览器就不用说了」
使用reverse
可以反转数组,但是会改变原数组,如果不想让原数组改变的并反转数组的话就可以使用它的复制版本toReveresed
const arr1 = ["March", "Jan", 6, 2, "A", "a"];
const newArr = arr1.toReversed();
console.log(newArr);//[ 'a', 'A', 2, 6, 'Jan', 'March' ]
toSorted 排序的复制版
「此方法兼容性不好,暂时不推荐使用,node版本需要20.0.0以上,浏览器就不用说了」
使用sort
可以反转数组,但是会改变原数组,一样的可以使用toSorted
,不会改变原数组,会返回一个排好序的数组,接受的参数和sort
一致,参考sort
const arr1 = ["March", "Jan", 6, 2, "A", "a"];
const newArr = arr1.toSorted();
console.log(newArr);//[ 2, 6, 'A', 'Jan', 'March', 'a' ]
toSpliced 截取新增数组的复制版
「此方法兼容性不好,暂时不推荐使用,node版本需要20.0.0以上,浏览器就不用说了」
使用splice
可以对数组进行截取和指定位置新增数据,但是会改变原数组,可以使用toSpliced
,不会改变原数组,会返回一个新的数组,接受的参数使用方法和splice
一致,参考splice
const arr1 = ["March", "Jan", 6, 2, "A", "a"];
const newArr = arr1.toSpliced(0, 1, 4);
console.log(newArr);//[ 4, 'Jan', 6, 2, 'A', 'a' ]
其他对数组本身功能性产生影响的方法(22个)
forEach 数组遍历
const arr = ["March", "Jan", 6, 2, "A", "a"];
//使用这中方法改变数组本身
arr.forEach((item, index) => {
arr[arr.length - index - 1] = item;
});
//返回这种数据应为数组本身在遍历的时候被改变了
console.log(arr);//[ 'March', 'Jan', 6, 6, 'Jan', 'March' ]
Array.from() 转换成数组
你可以使用Array.from()方法将可迭代的或类似数组的数据转换成真正的数组,并返回一个新数组。这个方法接受两个参数:
-
第一个参数是要转化的可迭代对象或类似数组的数据。 -
第二个参数是一个可选的回调函数,它有两个参数:当前遍历的对象和索引。你可以使用这个回调函数来对转换后的数组的元素进行进一步处理。
Array.from()方法非常实用,因为它使得将不同类型的数据转换为数组变得简单,例如,你可以将字符串、DOM伪数组、Set、Map等数据结构转换为数组,方便进一步处理和操作。此外,如果提供了回调函数,还可以对每个元素进行自定义的处理,使其更加灵活。
const newArr = Array.from("March");
console.log( newArr);//[ 'M', 'a', 'r', 'c', 'h' ]
(function () {
//arguments为一个伪数组,转化成真正的数组,并经过第二个回调函数进行处理返回
const arr = Array.from(arguments, (item, index) => item + index);
console.log(arr,Array.isArray(arr));//[ 1, 4, 6, 8 ] true
})(1, 3, 4, 5);
Array.fromAsync Array.from异步版本
Array.fromAsync()是一个用于迭代异步可迭代对象的方法,它的行为与Array.from()几乎相同,但适用于异步操作。以下是关于Array.fromAsync()的一些重要特点:
-
Array.fromAsync()能够处理异步可迭代对象,与for await…of相似。 -
Array.fromAsync()返回一个Promise,该Promise最终会解析为一个数组实例。 -
如果使用非异步可迭代对象调用Array.fromAsync(),那么要添加到数组中的每个元素(无论是否为Promise)都会等待它们的解析。 -
如果提供了mapFn回调函数,它的输入和输出都会在内部等待解析。
此外,需要注意Array.fromAsync()与Promise.all()之间的两个关键区别:
-
Array.fromAsync()会依次等待异步可迭代对象中生成的每个值解析,而Promise.all()会并行等待所有值的解析。 -
Array.fromAsync()采用惰性迭代方式,只有在当前值解析后才会获取下一个值。相反,Promise.all()会预先获取所有值并等待它们全部解析。
这使得Array.fromAsync()在需要按顺序处理异步操作并等待它们完成的情况下非常有用,而Promise.all()则更适用于并行处理多个异步操作。
const asyncIterable = (async function* () {
for (let i = 0; i < 5; i++) {
await new Promise((resolve) => setTimeout(resolve, 10 * i));
yield i;
}
})();
Array.fromAsync(asyncIterable).then((array) => console.log(array));
// [0, 1, 2, 3, 4]
Array.isArray 判断是不是数组
在类型判断的时候,我们通常使用typeof
,但是使用typeof
的时候数组判断出来的就是Object
类型,可以说数组是特殊的对象,使用typeof
判断不出数组,就可以使用Array.isArray
方法
(function () {
//在这可以看出arguments并不是一个数组
console.log(Array.isArray(arguments));//false
})(1, 3, 4, 5);
const arr = ["March", "Jan", 6, 2, "A", "a"];
//看的出是可以识别出来的 但typeof却识别不出来
console.log(typeof arr, Array.isArray(arr));//object true
includes 判断某个值数组中是否存在
在数组中查找某一个值,返回一个布尔值,有两个参数,第一个你要查找的值,第二个从哪个索引位置开始找
const arr = ["March", "Jan", 6, 2, "A", "a"];
const newArr = arr.includes(6);
console.log(newArr);//true
//也可以利用这一特性简化判断条件
let name='a'
//name是一个变量,可能有很多种可能,判断条件中就会非常冗余
if ( name === 'a' || name === 'A' || name === 6...) {
//...
}
//可以改成这种,看着也非常明了简便
if (['a',"A",6,...].includes(name)) {
//...
}
indexOf 判断数组中是否存在某个值,并返回索引
写法和includes类似,有两个参数第一个是要找的值,第二个为开始索引,indexOf会在查找到第一个符合条件的参数跳出循环并返回索引,没找到则返回-1
const arr = ["March", "Jan", 6, 2, "A", 6, "a"];
const newArr = arr.indexOf(6);
//返回索引值
console.log(newArr);//2
//查找6,从索引为3的位置开始找
const newArr = arr.indexOf(6,3);
console.log(newArr);//5
lastIndexOf 判断数组中是否存在某个值,并返回最后的索引
与indexOf一致,只不过是返回最后的索引位置,也可以理解为他是从数组的右边开始往左找元素,并返回第一个找到的元素的索引,没找到则返回-1
//所有的结果恰恰与indexOf反过来了
const arr = ["March", "Jan", 6, 2, "A", 6, "a"];
const newArr = arr.lastIndexOf(6);
//返回索引值
console.log(newArr);//5
//查找6,从索引为3的位置开始找
const newArr = arr.lastIndexOf(6,3);
console.log(newArr);//2
find 查找符合条件的元素
find
查找符合条件的的一个元素并返回那个元素本身,没有则返回undefined
,接收一个回调函数,回调函数有三个形参,第一个当前元素,第二个当前索引,第三个数组本身
const arr = ["March", "Jan", 6, 2, "A", 6, "a"];
const newArr = arr.find((item, index) => {
return item.length > index;
});
//只会返回符合条件的第一个值
console.log(newArr);//March
//也可以用在数组对象上
const arr = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }];
const newArr = arr.find((item, index) => {
return item.id > index;
});
//返回对象元素本身
console.log(newArr);//{ id: 1 }
findIndex 查找符合条件的元素,返回索引版
与find
使用方法一致,findIndex
查找符合条件的的一个元素并返回那个元素的索引值,没有则返回-1,接收一个回调函数,回调函数有三个形参,第一个当前元素,第二个当前索引,第三个数组本身
const arr = ["March", "Jan", 6, 2, "A", 6, "a"];
const newArr = arr.findIndex((item, index) => {
return item.length > index;
});
//只会返回符合条件的第一个索引
console.log(newArr);//0
//也可以用在数组对象上
const arr = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }];
const newArr = arr.findIndex((item, index) => {
return item.id > index;
});
//返回对象元素所在位置的索引
console.log(newArr);//0
findLast 从右向左查找符合条件的元素
「此方法兼容性不好,暂时不推荐使用,node版本需要18.0.0以上」 与find
使用方法一致,findLast
从右向左查找符合条件的的一个元素,并返回那个元素,没有则返回undefined
,接收一个回调函数,回调函数有三个形参,第一个当前元素,第二个当前索引,第三个数组本身
const arr = ["March", "Jan", 6, 2, "A", 6, "a"];
const newArr = arr.findLast((item, index) => {
return item.length > index;
});
//返回Jan,从右向左第一个符合条件的就是Jan,索引值是不变的,例如arr数组,遍历的时候索引值是6、5、4、3、2、1、0
console.log(newArr);//Jan
//也可以用在数组对象上
const arr = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }];
const newArr = arr.findLast((item, index) => {
return item.id > index;
});
//返回第一个符合条件的对象元素本身
console.log(newArr);//{ id: 5 }
findLastIndex 从右向左查找符合条件的元素,返回索引版
「此方法兼容性不好,暂时不推荐使用,node版本需要18.0.0以上」 与findLast
使用方法一致,findLastIndex
从右向左查找符合条件的的一个元素,并返回那个元素的索引值,没有则返回-1,接收一个回调函数,回调函数有三个形参,第一个当前元素,第二个当前索引,第三个数组本身
const arr = ["March", "Jan", 6, 2, "A", 6, "a"];
const newArr = arr.findLastIndex((item, index) => {
return item.length > index;
});
//从右向左查找,返回符合条件的第一个索引
console.log(newArr);//1
//也可以用在数组对象上
const arr = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }];
const newArr = arr.findLastIndex((item, index) => {
return item.id > index;
});
//从右向左查找,返回对象元素所在位置的索引
console.log(newArr);//4
at 返回索引位置的值
「此方法兼容性一般,暂时不推荐使用,node版本需要16.6.0以上」 at接收一个number的参数,可以为负数,正数时获取到索引为的值,当参数为负数时,从右向左查找对应的值
const arr = ["March", "Jan", 6, 2, "A", "a"];
//正数与直接索引取值无异
const newArr = arr.at(2);
console.log(newArr);//6
//从右向左找 可以简化代码量,有些情况下效果很明显
const newArr = arr.at(-2);
//等价于 const newArr = arr.at(arr.length - 2);
console.log(newArr);//A
Array.of 创建可变的数组
使用静态方法创建一个可变的数组,可以接收任意类型,任意个数的参数
const newArr = Array.of("March", "Jan", 6, 2, "A", "a");
console.log(newArr);//[ 'March', 'Jan', 6, 2, 'A', 'a' ]
//使用of创建数组和直接使用Array实例创建数组有所不同
const newArr = Array.of(6);
const arr = Array(6);
//传入6 of则创建一个只包含6得数组,Array传入6则创建有六个空位置得数组
console.log(newArr, arr);[ 6 ] [ <6 empty items> ]
flat 扁平化数组
flat()方法是用于扁平化数组的方法,它可以避免编写递归函数,减少代码冗余。flat()方法本身也使用递归方法来实现数组的扁平化。
flat()方法接受一个可选的参数,这个参数是一个数字,表示要扁平化的层数。如果不提供参数,默认值为1,表示只扁平化一层。如果提供参数为Infinity,则表示可以扁平化任意层次的数组,即完全扁平化。
const arr = [1, [2, [3, 4, [5]]]];
// 使用默认参数(扁平一层)
const flatResult1 = arr.flat();
console.log(flatResult1); // 输出:[1, 2, [3, 4, [5]]]
// 扁平化两层
const flatResult2 = arr.flat(2);
console.log(flatResult2); // 输出:[1, 2, 3, 4, [5]]
// 使用 Infinity 扁平化任意层
const flatResultInfinity = arr.flat(Infinity);
console.log(flatResultInfinity); // 输出:[1, 2, 3, 4, 5]
every 所有元素是否通过测试
every()方法用于检查数组中是否所有元素都满足指定的条件,如果所有元素都通过了测试,它会返回true,否则返回false。这个方法接受一个回调函数作为参数,回调函数有三个参数:
-
第一个参数是当前遍历的元素。 -
第二个参数是当前元素的索引。 -
第三个参数是数组本身。
需要注意的是,当数组为空时使用every()方法,不论指定的条件如何,都会返回true,因为对于空集来说,无论什么条件都是满足的(即无条件正确)。
const arr = ["March", "Jan", 6, 2, "A", "a"];
const newArr = arr.every((item) => typeof item === "string");
//并不是所有的元素都符合条件 所以返回false
console.log(newArr);//false
//只要是数组是空数组,后面的条件不管跟什么返回的永远为true
console.log([].every((item) => item > 10));//true
some 数组中至少有一个元素通过测试
some()方法用于检查数组中是否有至少一个元素满足指定的条件,如果有一个或多个通过了测试,它会返回true,否则返回false。这个方法接受一个回调函数作为参数,回调函数有三个参数:
-
第一个参数是当前遍历的元素。 -
第二个参数是当前元素的索引。 -
第三个参数是数组本身。
some()方法在遇到满足条件的元素后会立即返回true,不再继续遍历数组的其他元素。如果数组为空,some()方法会返回false,因为没有元素可以满足条件。
const arr = ["March", "Jan", 6, 2, "A", "a"];
const newArr = arr.some((item) => typeof item === "string");
//其中一个或以上的元素符合条件就返回true
console.log(newArr);//true
//只要是数组是空数组,后面的条件不管跟什么返回的永远为false
console.log([].some((item) => item==undefined));//false
join 选定格式转换成字符串
join()方法是用于将数组转换成字符串的方法,它接受一个参数,该参数为用于分隔数组元素的字符串。如果不传递参数,默认使用逗号 , 作为分隔符。
const arr = ["March", "Jan", 6, 2, "A", "a"];
const newArr = arr.join();
console.log(newArr);//March,Jan,6,2,A,a
//可以是number类型
const newArr = arr.join(3);
console.log(newArr);//March3Jan36323A3a
//也可以是引用类型,但会自动转换
const newArr = arr.join({ id: 1 });
console.log(newArr);//March[object Object]Jan[object Object]6[object Object]2[object Object]A[object Object]a
toString 转换成字符串
toString
是几乎所有数据类型都有的一个方法,就是单纯的转换成字符串,数组中转换成字符串默认以‘,’号隔开,「有一个小技巧,如果多维数组的类型都是值类型的,可以使用toString进行扁平化」
// 简单的数组转换为字符串
const arr1 = ["March", "Jan", 6, 2, "A", "a"];
const newArr1 = arr1.toString();
console.log(newArr1); // 输出:"March,Jan,6,2,A,a"
// 不论是几维数组,在toString的时候都会转化成字符串,然后通过split方法转回数组
const arr2 = [[["March"]], [[[["Jan"]]]], [[[6]]], [[2]], [[["A"]]], [[["a"]]]];
const newArr2 = arr2.toString().split(",");
console.log(newArr2); // 输出:[ 'March', 'Jan', '6', '2', 'A', 'a' ]
toLocaleString
此方法用于格式转换,最后返回字符串代表数组中所有的元素,接收两个参数第一个带有 BCP 47 语言标签的字符串,或者此类字符串的数组。
const arr = ["¥7", 500, 8123, 12];
const newArr = arr.toLocaleString("ja-JP", { style: "currency", currency: "JPY" });
console.log(newArr);//¥7,¥500,¥8,123,¥12
//如果不传参数,则效果于toString一样
const newArr = arr.toLocaleString();
console.log(newArr);//¥7,500,8,123,12
entries 返回数组迭代器的对象,包含键和值
返回一个数组迭代器对象。
const arr = ["March", "Jan", 6, 2, "A", "a"];
// 使用entries()方法创建一个迭代器对象
const newArr = arr.entries();
// 使用next()方法来迭代迭代器对象,获取数组的索引和对应的值
console.log(newArr.next()); // { value: [ 0, 'March' ], done: false }
console.log(newArr.next()); // { value: [ 1, 'Jan' ], done: false }
console.log(newArr.next()); // { value: [ 2, 6 ], done: false }
console.log(newArr.next()); // { value: [ 3, 2 ], done: false }
console.log(newArr.next()); // { value: [ 4, 'A' ], done: false }
console.log(newArr.next()); // { value: [ 5, 'a' ], done: false }
// 当没有更多的值可迭代时,done变为true,value为undefined
console.log(newArr.next()); // { value: undefined, done: true }
// 你也可以使用for...of循环遍历迭代器对象
for (const iterator of newArr) {
console.log(iterator);
}
// 输出:
// [ 0, 'March' ]
// [ 1, 'Jan' ]
// [ 2, 6 ]
// [ 3, 2 ]
// [ 4, 'A' ]
// [ 5, 'a' ]
keys 返回数组迭代对象,键
返回一个只包含键的迭代对象,使用方法与entries一致
const arr = ["March", "Jan", 6, 2, "A", "a"];
//返回只包含键的可迭代对象,数组中的键也就是索引
const newArr = arr.keys();
//使用for...of..遍历打印
for (const iterator of newArr) {
console.log(iterator);
}
//0
//1
//2
//3
//4
//5
values 返回数组迭代对象,值
返回一个只包含值得可迭代对象,使用方法与entries一致
const arr = ["March", "Jan", 6, 2, "A", "a"];
//返回只包含键的可迭代对象,数组中的键也就是索引
const newArr = arr.values();
//使用for...of..遍历打印
for (const iterator of newArr) {
console.log(iterator);
}
//March
//Jan
//6
//2
//A
//a
原文始发于微信公众号(前端大大大):JavaScript数组方法大全
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/174120.html