JS数组与它的42个方法

前言

数组在js中作为一个非常重要的类型之一,在我们对数据处理,存储数据,条件渲染的时候经常会用到,所以随着ES的不断更新,数组的方法也是越来越多,也让我们使用数组对数据操作的时候,越来越简单,但是不经意间,数组的方法已经有42个之多,接下来让我们看看有哪些数组方法从出来就你还没用过的吧!

数组方法

数组方法之多,大致可以分为以改变数组本身的,不改变数组本身的(返回一个新的数组),还有就是其他对数组本身功能性作用的方法

改变数组本身 (9个)

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 码元值升序排序。)

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 截取新增数据

可以选择删除数组中的某一个值,也可以在数组中的某个位置添加一些数据,接收可选参数,三个或以上的参数,第一个为截取的索引位置,number类型,第二个截取的个数,number类型,第三个或更多实在截取位置添加的参数,可以是任何类型

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' ]

copyWithin 将数组得一部分赋值到另一个位置

copyWithin是一种移动数组数据的高性能方法,copyWithin() 方法是通用的。它只期望 this 值具有 length 属性和整数键属性。虽然字符串也是类似数组的,但这种方法不适用于它们,因为字符串是不可变的。
copyWithin不会改变数组的长度,只会修改内容,它接收三个参数,第一个为复制到的目标位置(索引值),第二个是复制的起始位置(可选),如果为负数,则相当于从后往前数,第三个为结束位置,不包含此索引的位置(可选),起始位置不可小于结束位置,否者方法无效。并返回这个数组。

const arr1 = ["March", "Jan", 6, 2, "A", "a"];
//从索引为三个位置开始复制,到索引为5的位置,但不包含5,从索引为1的位置粘贴并覆盖
const newArr = arr1.copyWithin(1, 3, 5);
console.log(arr1,newArr);//[ 'March', 2, 'A', 2, 'A', 'a' ] [ '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 填充

对数组内容进行覆盖填充,有三个参数,第一个为填充的值,第二个为起始位置(可选),第三个为结束位置,不包含此索引位置(可选)。与copyWithin比较类似,只不过一个是移动数组内的元素,一个填充数组的内的元素,不会改变数组的长度。并返回这个数组

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' ]

不改变原数组 (11个)

filter 数据过滤

需要一定条件返回对应的数据,接收一个回调函数,有回调函数有三个参数,第一个是当前遍历的元素,第二个为当前索引,第三个是数组本身,需要一个返回值,filter方法会根据符合这个返回值条件的数据返回一个新数组

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

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会大大减少代码量。接收两个参数,第一个为回调函数,回调函数有四个参数,第一个参数为上一次回调函数return的结果,首次默认为第二个参数值,如果没有第二个参数值,则默认当前数组下标为0的参数,第二个参数为当前元素,第三个为当前索引值,第四个为数组本身,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 从右开始 数据累加

这个是reduce的右边开始一种写法,运算时会从右向左执行,参数与使用方法和reduce一致。适用于当你想对一个数组进行反转加过滤等操作的时候,这个方法就完全突出了他的便携

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 数组截取

可以对一个数组进行浅拷贝,接收两个参数,第一个为截取的初始位置,第二个为终止位置(不包括此索引值),如果只填一个参数则从当前索引值截取到最后一位

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 数组合并

需要两个或以上的数组合并的时候就可以使用cancat快速合并,当然在ES6之后大多都使用扩展运算符进行数组合并了,此方法接收一个或以上得任意类型参数

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: '男' } ]

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 修改指定索引值得复制方法

此方法兼容性不好,暂时不推荐使用,node版本需要20.0.0以上,浏览器就不用说了

我们都知道,我们再修改数组中得某一个值得时候可以使用arr[index]=xxx 来进行修改,但是这样是改变了原数组,当我们既想使用索引值来改变某一个值,还不想改变原数组得时候就可以使用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() 转换成数组

此方法可以将一些可迭代的以及为数组的数据转换成真正的数组,并返回一个那个新数组,比如字符串,dom伪数组等,接收两个参数,第一个为要转化的参数,第二个是一个回调函数(可选),回调函数有两个参数当前遍历的对象和索引

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() 迭代异步可迭代对象的方式与 for await...of 很相似。Array.fromAsync() 在行为上与 Array.from() 几乎等价

  • Array.fromAsync() 可以处理异步可迭代对象。
  • Array.fromAsync() 返回一个会兑现为数组实例的 Promise。
  • 如果使用非异步可迭代对象调用 Array.fromAsync(),则要添加到数组中的每个元素(无论是否为 Promise)都会先等待其兑现。
  • 如果提供了 mapFn,则其输入和输出会在内部等待兑现。

Array.fromAsync() 和 Promise.all() 都可以将一个 promise 可迭代对象转换为一个数组的 promise。然而,它们有两个关键区别:

  • 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本身也是使用递归方法来达到数组扁平化的,接收一个number类型的参数,参数是几就可以扁平几层,在不确定有几维数组的情况下,参数为Infinity(无限大),可以扁平任意层次的数组

const arr = [[[[["March"]]]], [[["Jan"]]], [[6]], [[2]], "A", ["a"]];
//扁平参数对等的层数
const newArr = arr.flat(2);
console.log(newArr);//[ [ [ 'March' ] ], [ 'Jan' ], 6, 2, 'A', 'a' ]
//使用Infinity关键字 可以扁平化任意层数数组
const newArr = arr.flat(Infinity);
console.log(newArr);//[ 'March', 'Jan', 6, 2, 'A', 'a' ]

every 所有元素是否通过测试

every用于所有元素是否都能通过测试,返回一个布尔值,只有当所有元素都通过了测试,才会返回true,接收一个回调函数,回调函数有三个形参,第一个为当前元素,第二个为当前索引,第三个为数组本身,另外,当数组为空的时候使用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,不论判断条件如何,都会返回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用于将数组转换成字符串的方法,接收一个参数(可以为任意类型,但引用类型则会默认转换成[object Object]等),为数组元素转换成字符串的间隔符,不传参数默认以 ‘,’号隔开

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 arr = ["March", "Jan", 6, 2, "A", "a"];
const newArr = arr.toString();
console.log(newArr);//March,Jan,6,2,A,a

//不论是几维数组,在toString的时候都会转化成字符串,在使用字符串方法转成数据就可以了
//弊端是因为转的时候是toString转换成了字符串,任意值类型到最后都是字符串形式,undefined和null则会转换成空字符串
const arr = [[["March"]], [[[["Jan"]]]], [[[6]]], [[2]], [[["A"]]], [[["a"]]]];
const newArr = arr.toString().split(",");
console.log(newArr);//[ 'March', 'Jan', '6', '2', 'A', 'a' ]

toLocaleString

此方法用于格式转换,最后返回字符串代表数组中所有的元素,接收两个参数第一个带有 BCP 47 语言标签的字符串,或者此类字符串的数组。对于 locales 参数的一般形式和说明,可以参见 Intl 主页面的参数说明。第二个,一个具有配置属性的对象。对于数字,请参见 Number.prototype.toLocaleString();对于日期,请参见 Date.prototype.toLocaleString()。

此方法的使用方法记得东西比较多,详细使用方法可以点击上面的链接查看

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 返回数组迭代器的对象,包含键和值

返回一个数组迭代器对象,数组迭代器( array[Symbol.iterator]),如果不太清楚的可以看一下Symbol篇章,或者点击数组迭代器查看

const arr = ["March", "Jan", 6, 2, "A", "a"];
//返回迭代器对象,有一个next方法,使用next方法会返回一个对象,里面value值就是我们想要的值
const newArr = arr.entries();
//查看的时候需要使用next,value为我们想要的值,done是否结束
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
console.log(newArr.next());//{ value: undefined, done: true }

//entries返回一个迭代器对象,所以可以被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

结尾

有很多方法也许我们平常根本用不到,但也可以相对得了解以下,还有几种最近新出的方法兼容性没那么好,在实际得开发环境中还是需要谨慎使用,如果有写的不对得地方欢迎纠正!

附送250套精选项目源码

源码截图

源码获取:

关注公众号「码农园区」,回复 【源码】,即可获取全套源码下载链接
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/243609.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python中的继承:概念、用法与示例

目录 一、引言 二、继承的概念 三、继承的用法 1、继承父类的属性和方法 2、添加新的属性和方法 3、覆盖父类的方法 四、示例代码展示 五、继承中的多态性 六、继承中的封装和抽象 七、继承中的多重继承 总结 一、引言 面向对象编程&#xff08;OOP&#xff09;是一…

构建VREP和MATLAB联合仿真实验平台,控制机械臂末端按照固定轨迹移动

构建VREP和MATLAB联合仿真实验平台&#xff0c;控制机械臂末端按照固定轨迹移动。主要工作如下&#xff1a; &#xff08;1&#xff09;solidworks构建机械臂模型&#xff1b; &#xff08;2&#xff09;将solidworks中构建的模型导入VREP中建立机械臂的多体动力学模型&#xf…

10 个顶级 iPhone 数据恢复软件工具评测

很多事情都可能导致 iPhone 数据丢失&#xff1a;iOS 更新失败、越狱错误、解锁问题等。如果您遇到类似情况并且想要访问您的文件&#xff0c;通常最好的解决方案是使用数据恢复工具。由于研究市场上可用的工具可能会花费您大量的时间&#xff08;在尝试从 iPhone 恢复数据时&a…

二、Java基础语法

day02 - Java基础语法 1. 注释 ​ 注释是对代码的解释和说明文字。 Java中的注释分为三种&#xff1a; 单行注释&#xff1a; // 这是单行注释文字多行注释&#xff1a; /* 这是多行注释文字 这是多行注释文字 这是多行注释文字 */ 注意&#xff1a;多行注释不能嵌套使用…

Java 入门第四篇 集合

Java 入门第四篇 集合 一&#xff0c;什么是集合 在Java中&#xff0c;集合&#xff08;Collection&#xff09;是一种用于存储和操作一组对象的容器类。它提供了一系列的方法和功能&#xff0c;用于方便地管理和操作对象的集合。集合框架是Java中非常重要和常用的一部分&…

番茄病虫害检测系统:融合感受野注意力卷积(RFAConv)改进YOLOv8

1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 研究背景与意义 番茄是全球重要的蔬菜作物之一&#xff0c;具有广泛的经济和营养价值。然而&#xff0c;番茄病虫害的严重威胁导致了产量和质量的损失。因此&#xff0c;开发一种…

hive聚合函数之排序

1 全局排序&#xff08;Order By&#xff09; Order By&#xff1a;全局排序&#xff0c;只有一个Reduce。 (1&#xff09;.使用Order By子句排序 asc&#xff08;ascend&#xff09;&#xff1a;升序&#xff08;默认&#xff09; desc&#xff08;descend&#xff09;&#…

C#- 代理模式(静态)

与装饰器模式类似&#xff0c;只继承接口&#xff1b; 示例代码&#xff1a; interface IStudent {public void GetInfo(); } class Student : IStudent {public void GetInfo(){Console.WriteLine("上小学中。。。");} } class ProxyStudent : IStudent {private …

纸质表格扫描转Excel的利器,让您省钱省劲

将纸质表格扫描到电脑Excel上是一种快捷而高效的数字化处理方法&#xff0c;使得数据可以方便地进行编辑、分析和共享。本文将介绍几种常用的方法来完成这项任务。 第一种方法是使用扫描仪。现代扫描仪具备较高的分辨率和颜色还原能力&#xff0c;可以将纸质表格转化为高质量的…

操作系统原理-作业三-存储器

某页式虚拟存储管理系统中&#xff0c;页面大小为 2KB &#xff0c;某一进程分配到的内存块数为 3 &#xff0c;并按下列地址顺序引用内存单元&#xff1a; 2531 、 6632 、 4140 、 3584 、 2892 、 5743 、 1700 、 2148 、 6940、 4345 、 3209 、 0732 、 6202 、 4541 。…

SAP ABAP 使用cl_md_bp_maintain=>maintain更新BP税号CN0的数据,更新结果都会变成CN5类型问题处理

SAP ABAP 使用cl_md_bp_maintain>maintain更新BP税号CN0的数据&#xff0c;更新结果都会变成CN5类型&#xff0c;CN1类型一切正常。 1、BP税号 2、跟踪方法中代码 查看底层逻辑&#xff0c;发现CN0都被强制替换成CN5了&#xff0c;BP GUI界面还能正常使用CN0. 查询NOTES&a…

机器学习:从概念到应用

机器学习&#xff1a;从概念到应用 一、引言 随着科技的飞速发展&#xff0c;人工智能已经渗透到我们生活的方方面面。作为人工智能领域的一个重要分支&#xff0c;机器学习正在改变我们的世界。它通过让计算机从数据中学习&#xff0c;实现自我优化和改进&#xff0c;为各行…

JS轮询任务查询订单退款状态

出现问题&#xff1a; 因为订单的支付不是普通的微信支付&#xff0c;是第三方支付&#xff0c;而且由于该三方支付自己内部设置的一些情况&#xff0c;导致退款的时候&#xff0c;发起了退款申请&#xff0c;但是会在15~20秒左右&#xff0c;才会返回结果&#xff0c;不像微信…

ISCTF2023 Reverse方向 WP

文章目录 ReversecrackmeEasyRebabyReeasy_z3FloweyRSAeasy_flower_teamfx_rez3_revengeWHERE Reverse crackme 、 加了UPX壳&#xff0c;可以看到EP Section处UPX标识被修改了 用WinHex修改 之后UPX脱壳 得到flag。 EasyRe 逆向一下&#xff0c;先逆序&#xff0c;再做一些…

台阶仪在大型基板应用有哪些

探针式轮廓仪&#xff08;台阶仪&#xff09;是一种用于测量物体表面轮廓和形状的仪器。在大型基板应用中&#xff0c;它可能被用于检测和分析半导体器件、平板显示屏、光伏电池板等大尺寸基板上的微小结构和形状。这样的测量对于确保生产质量、提高制造效率和优化工艺非常重要…

cfa一级考生复习经验分享系列(三)

从总成绩可以看出&#xff0c;位于90%水平之上&#xff0c;且置信区间全体均高于90%线。 从各科目成绩可以看出&#xff0c;所有科目均位于90%线上或高于90%线&#xff0c;其中&#xff0c;另类与衍生、公司金额、经济学、权益投资、固定收益、财报分析表现较好&#xff0c;目测…

张驰课堂:在线六西格玛认证,成就个人职业发展

随着数字化学习平台的兴起&#xff0c;六西格玛的学习方式更加灵活。以下是线上学习平台与传统面授培训的对比&#xff1a; 线上学习平台&#xff1a; 灵活性&#xff1a;学员可以根据自己的时间安排自学&#xff0c;不受地点限制。 成本效益&#xff1a;通常在线课程费用较低…

MySQL中的时间函数整理汇总

1.获取当前时间 -- 获取当前时间 SELECT NOW(); -- 获取当前日期 SELECT CURDATE(); -- 获取当前时分秒 SELECT CURTIME(); 2.获取对应日期对应的年/月/日/月份名/星期数 -- 返回对应日期对应的年/月/日/月份名/星期数 select year(now())as 年,month(now())as 月,day(now())…

迅速理解什么是通信前置机

通信前置机设在两个通信对象之间&#xff0c;是实质性的物理服务器&#xff0c;适应不同通信协议或数据格式之间的相互转换。 前置机的作用&#xff1a; 隔离——隔离客户端与服务端&#xff0c;保障后端安全减负——处理非核心业务&#xff0c;分担后端服务器压力&#xff0…

CBTC2024 • 零碳未来!CBTC上海储能技术展览会

国际氢能投融资与发展联盟、 湖南省电池产业协会 、沪粤储能产业联盟主办的一场备受瞩目的盛会——2024年CBTC上海国际储能技术展。储能技术是当今全球能源领域的核心热点之一&#xff0c;也是实现能源转型和可持续发展的重要途径。CBTC上海国际储能技术展是全球规模最大、最具…
最新文章