前言数组是开发中常用的集合。除了for循环遍历，还有很多内置的对象方法，包括map和arrayfilterelementfilter。注：文末附上深度数组展平方法操作。Array作为一种引用数据类型，在处理Array时，需要考虑深拷贝和浅拷贝的情况。你可以参考下面的文章。javaScript中深拷贝和浅拷贝的简单组合操作方法push在末尾追加元素/***@parampush在数组末尾添加一个或多个元素并返回数组的新长度**setapplyandcall合并数组**/letuser=["zhangsan","lisi"];console.log(user.push("xiaoming"));//3console.log(用户);//["zhangsan","lisi","xiaoming"]letuser1=["xiaowang","xiaoming"];letuser2=["zhangsan","lisi"];console.log(Array.prototype.push.apply(user1,user2));//4console.log(user1);//["xiaowang","xiaoming","zhangsan","lisi"]pop删除数组末尾元素/****@parampop方法删除数组最后一个元素，返回值为元素。**如果数组为空数组，则返回undefined**/letuser=["zhangsan","lisi"];console.log(user.pop());//lisiconsole.log(user);//["zhangsan"]letempArray=[];console.log(empArray.pop());//undefinedsort排序/****@paramsort**使用就地算法对数组的元素进行排序并返回数组。*默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16编码单元值序列时构造的*由于取决于具体实现，无法保证排序的时间和空间复杂度。**arr.sort([compareFunction])**@paramcompareFunction**用于指定一个函数按照一定顺序排序。*如果省略，则根据转换后的字符串的每个字符的Unicode位置对元素进行排序。**如果未指定compareFunction，则元素按转换后字符串字符的Unicode位置排序。*例如，“香蕉”将排在“樱桃”之前。*当数字从小到大排序时，9出现*在80之前，但是因为（没有指定compareFunction），比较的数字会先转换为字符串，所以“80”在Unicode顺序上比“9”高前进。*如果指定了compareFunction，数组将按照函数调用的返回值排序。即a和b是要比较的两个元素：*如果compareFunction(a,b)小于0，则a排在b之前；*如果compareFunction(a,b)等于0，a和b的相对位置常量。*备注：ECMAScript标准不保证此行为，并非所有浏览器都会遵守（例如Mozilla2003之前的版本）；*如果compareFunction(a,b)大于0，b将排在a之前。*compareFunction(a,b)必须始终对相同的输入返回相同的比较结果，否则排序的结果将是未定义的。**firstEl*要比较的第一个元素。*secondEl*比较的第二个元素**//****基本用法***/constuser=["zhangsan","lisi","xiaoming","xiaowang"];user.sort();console.log(用户);//["lisi","xiaoming","xiaowang","zhangsan"]constarray1=[1,30,4,21,100000];array1.sort();console.log(array1);//[1,100000,21,30,4]/****自定义排序方法***/varnumbers=[4,2,5,1,3];letsortFun=function(a,b){返回a-b;};numbers.sort(sortFun);console.log(numbers);//[1,2,3,4,5]将元素添加到shift数组的开头&&unshift数组的开头Deleteelement/****@paramshift*从数组中删除第一个元素并返回元素的值。如果删除一个空数组，则返回值未定义**@paramunshift*方法向数组开头添加一个或多个元素，并返回数组的新长度***/letuser=["zhangsan","lisi"];console.log(user.shift());//zhangsanconsole.log(user);//["lisi"]letempArray=[];console.log(empArray.shift());//undefinedletuser1=["xiaoming","xiaowang"];console.log(user1.unshift("小明1","小王1"));//4console.log(user1);//["xiaoming1","xiaowang1","xiaoming","xiaowang"]数组合并concat/****@paramconcat**方法用于合并两个或多个数组返回值是一个新数组，不会改变原数组**注：数组合并是浅拷贝**/letuser=["zhangsan","lisi"];letuser1=[["xiaowang"],{name:"xiaoming"}];console.log(user.concat(user1));//["zhangsan","lisi",["xiaowang"],{name:"xiaoming"}]console.log(user);//["zhangsan","lisi"]indexOf查找元素&&包括查找元素是否存在/****@paramindexOf**返回数组中可以找到给定元素的第一个索引，如果不存在，则返回-1，*常用于判断数组中是否存在元素**@paramincludes**判断数组是否包含指定值，返回值为布尔值true或者false**/letuser=["zhangsan","lisi"];console.log(user.indexOf("lisi"));//1console.log(user.indexOf("xiaoming"));//-1letuser1=["zhangsan",["xiaowang"],{name:"xiaoming"}];console.log(user1.includes("zhangsan"));//trueconsole.log(user1.includes(["xiaowang"]));//falseconsole.log(user1.includes({name:"xiaoming"}));//错误的reverse反转数组/****@paramreverse**反转数组的元素，将原数组倒转显示，改变元素的元素位置**/letuser=["zhangsan","lisi",“小明”];console.log(user.reverse());//["xiaoming","lisi","zhangsan"]console.log(user);//["xiaoming","lisi","zhangsan"]letuser1=["zhangsan",["xiaowang","lisi"],{name:"xiaoming"}];console.log(user1.reverse());//[{name:"xiaoming"},["xiaowang","lisi"],"zhangsan"]数组切割成字符串join/****@paramjoin**根据传入的参数字符串，数组被切割，返回值是使用参数对元素的拼接String*如果数组只有一个元素，则不使用分隔符**/letuser=["zhangsan","lisi","xiaoming"];console.log(user.join(""));//zhangsanlisixiaomingconsole.log(user.join(""));//zhangsanlisixiaomingconsole.log(user.join(","));//zhangsan,lisi,xiaomingconsole.log(user.join({a:1}));//张an[objectObject]lisi[objectObject]xiaomingconsole.log(user);//["zhangsan","lisi","xiaoming"]slice操作数组，替换，删除，newslice的使用范围很广，不同的参数可以实现数组的删除，添加和替换等。当使用它，需要注意参数的具体使用方法/****@paramslice**返回一个新的数组对象，*这个对象是一个由begin和end确定的原数组的浅拷贝（包括begin，不包括end）原数组不会改变。**@parambegin*提取起始索引（从0开始），从中提取原始数组元素。*如果参数为负数，表示从原数组的倒数第二个元素开始提取，slice(-2)表示从原数组的倒数第二个元素开始提取到最后一个元素（包括最后一个元素）。*如果省略begin，则切片从索引0开始。*如果begin超出原数组的索引范围，则返回一个空数组**@paramend**提取结束的索引（从0开始),原始数组的元素结束于此。*slice会提取原数组中从begin到end的索引中的所有元素（包括begin，不包括end）。*slice(1,4)会提取原数组中从第二个元素到第四个元素的所有元素（索引为1、2、3的元素）。*如果该参数为负数，表示提取原数组的最后几个元素结束。*slice(-2,-1)表示提取原数组中倒数第二个元素到最后一个元素（不包括最后一个元素，即只提取倒数第??二个元素）。*如果省略end，切片将被提取到原数组的末尾。如果end大于数组长度，切片也会被提取到原数组的末尾。**/constanimals=["蚂蚁","野牛","骆驼","鸭子","大象"];安慰。日志（动物。切片（2））；//数组["camel","duck","elephant"]console.log(animals.slice(2,4));//数组["camel","duck"]console.log(animals.slice(1,5));//数组[“野牛”、“骆驼”、“鸭子”、“大象”]console.log(animals.slice(-2));//数组["duck","elephant"]console.log(animals.slice(2,-1));//数组["camel","duck"]console.log(animals.slice());//数组["ant","bison","camel","duck","elephant"]/****@paramsplice(start[,deleteCount[,item1[,item2[,...]]]])**通过删除或替换现有元素或在原地数组中添加新元素进行修改，并将修改后的内容作为数组返回。这个方法改变了原来的数组**一个由被删除的元素组成的数组。如果只删除了一个元素，则返回一个只包含一个元素的数组。如果没有删除任何元素，则返回一个空数组。**@paramstart**指定修改的起始位置，默认从下标0开始。*如果超出数组长度，则从数组末尾开始添加元素；*如果是负值，则表示从数组末尾开始数（从-1开始算起，也就是说-n是倒数第n个元素，相当于array.length-n）；*如果负数的绝对值大于数组长度，则表示起始位置为第0个位置。**@paramdeleteCount**整数，表示要移除的数组元素个数。*如果deleteCount大于start之后的元素总数，start之后的所有元素都会被删除（包括start位）。*如果省略deleteCount，*或其值大于等于array.length-start（即大于等于start后所有元素的个数），则start后数组的所有元素将被删除。**如果deleteCount为0或负数，则不删除任何元素。在这种情况下，至少应添加一个新元素。*@paramitem1,item2,...**要添加到数组的元素，从起始位置开始。如果没有指定，splice()只会移除数组元素**/constmonths=["Jan","March","April","June"];months.splice(1,0,"Feb");//下表是1，插入一个元素console.log(months);//["一月","二月","三月","四月","六月"]months.splice(4,1,"五月");//将元素替换为下标4console.log(months);//["一月","二月","三月","四月","五月"]letdel=months.splice(1,1);//删除console.log(del);//["二月"]console.log(月);//["Jan","April","May"]every检查数组的所有元素/****@paramevery*测试数组中的所有元素是否能通过指定函数的测试，返回值是布尔值true或false*备注：如果接收到空数组，将使用此方法，无论如何都会返回true。**arr.every(callback(element[,index[,array]])[,thisArg])*callback*用于测试每个元素的函数，它可以接收三个参数：**@paramelement用于测试的当前值。*@paramindex可选用于测试的当前值的索引。*@paramarrayoptional要调用的当前数组。**every方法对数组中的每个元素执行一次回调函数，直到找到导致回调返回false的元素。*如果找到这样的元素，every方法将立即返回false。*否则，回调为每个元素返回true，every返回true。**只会为那些已经分配的索引调用回调。不会为已删除或从未分配的索引调用。*callback在调用时可以传入三个参数：元素值、元素索引、原始数组。*如果每个都带有一个thisArg参数，就是调用回调时this的值。*如果省略此参数，调用回调时this的值在非严格模式下为全局对象，在严格模式下传入undefined。***every不会改变原来的数组。*every遍历的元素范围是在第一次调用回调之前确定的。*调用every后添加到数组的元素将不会被回调访问。*如果数组中现有的元素发生变化，则它们传递给回调的值是每次访问它们时的值。*将不会访问被删除或从未赋值的元素。***/constisBelowThreshold=(currentValue)=>currentValue<40;constarray1=[1,30,39,29,10,13];console.log(array1.every(isBelowThreshold));//truesome测试数组至少有1个元素通过了提供的函数测试。返回值为布尔值/****@paramsome测试数组中是否至少有1个元素通过提供的函数测试。返回值为布尔值***/constarray=[1,2,3,4,5];consteven=(element)=>element%2===0;//确认偶数console.log(array.some(even));//真的;deep-levelrecursivearrayflat/***@paramflat按照指定的深度递归遍历数组，并将遍历的子数组中的所有元素和元素合并为一个新的数组返回。**varnewArray=arr.flat([depth])*@depth指定提取嵌套数组的结构深度，默认值为1。**/让arr1=[1,2,[3,4]];console.log(arr1.flat());//[1,2,3,4]让arr2=[1,2,[3,4,[5,6]]];console.log(arr2.flat());//[1,2,3,4,[5,6]]让arr3=[1,2,[3,4,[5,6]]];控制台日志（arr3.flat（2））；//[1,2,3,4,5,6]//使用Infinity，可以展开任意深度的嵌套数组letarr4=[1,2,[3,4,[5,6,[7,8,[9,10]]]]];console.log(arr4.flat(Infinity));//[1,2,3,4,5,6,7,8,9,10]letobjArray=[{name:"zhangsan",children:["Zhangsan"]}];console.log(objArray.flat(Infinity));//[{name:"zhangsan",children:["zhangsan"]}]map遍历数组/***@parammap**创建一个新数组，这个新数组由原数组中的每个元素组成返回调用一次提供的函数后的值组合***/constarray1=[1,4,9,16];constmap1=array1.map((x)=>x*2);控制台日志（地图1）；//[2,8,18,32]reduce和filterreduce和filter的基本操作方法在上一篇已经讲过，这里不再赘述。文章地址：JavaScript数组方法filter和reduce数组操作示例：数组对象根据属性组织数组/***根据数组对象的某个属性组织数据***/letuser1=[{name:"张三",age:21},{name:"lisi",age:20},{name:"小明",age:20},];functiongroupBy(objectArray,property){returnobjectArray.reduce(function(acc,obj){letkey=obj[property];if(!acc[key]){acc[key]=[];}acc[key].push(obj);returnacc;},{});}letageList=groupBy(user1,"age");console.log(ageList);//{[{name:"lisi",age:20},{name:"xiaoming",age:20}],[{name:"zhangsan",age:21}]}分组持平-深层次函数展平（数组）{varflattend=[];(functionflat(array){array.forEach(function(el){for(letiinel){if(Object.prototype.toString.call(el[i])==="[objectArray]")flat(el[i]);}flattend.push(el);});})(数组);returnflattend;}letuser2=[{name:"zhangsan",age:20,child:[{name:"xiaoming"}],child1:[{name:"xiaowang"}],},];letflattenArray=展平（user2）；console.log（展平A数组）；最后，以上是JavaScript中数组比较常用的方法。其他没有提到的方法，需要的同学可以参考相关文章，或者留言。后续文章会整理出来作为补充源码地址码云https://gitee.com/lewyon/vue-notegithubhttps://github.com/akari16/vue-note文章博客地址：解析JavaScript数组常用方法及深入js数组扁平化欢迎关注公众号：程序员布欧，时不时更新一些文章创作不易，转载请注明出处和作者。
