收录了，更多的分类了之前的好评文章，也整理了很多我的文档和教程资料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。数组是JS中广泛使用的数据结构。数组对象提供了大量有用的方法，如array.forEach()、array.map()等来操作数组。在实战中，我常常对数组可能的操作以及相应的使用哪种方法比较茫然，所以本文列出了15种常用的数据方法，让我们回顾一下，加强记忆。1、数组遍历1.1for..of循环for(constitemofitems)循环遍历数组items，如下遍历colors列表：constcolors=['blue','green','white'];for(constcolorofcolors){console.log(color);}//'blue'//'green'//'white'提示：我们可以随时使用break语句停止遍历。1.2for循环for(leti;i[1,3,5]提示：array.map()在不改变原始数组的情况下创建一个新的映射数组。2.2Array.from()方法Array.from(arrayLike[,callback])方法通过使用对每个数组项的回调调用的结果创建一个新数组。在每个遍历回调（项目[，索引[，数组]]）调用参数：当前项目，索引和数组本身，并应返回新项目。我们将每个数组元素递增1，如下所示：constnumbers=[0,2,4];constnewNumbers=Array.from(numbers,functionincrement(number){returnnumber+1;});newNumbers;//=>[1,3,5]提示：Array.from()创建一个新的映射数组而不改变原始数组。Array.from()更适合从类似数组的对象进行映射。3.数据简化3.1Array.reduce()方法array.reduce(callback[,initialValue])通过调用回调函数将数组归约为一个值。callback(accumulator,item[,index[,array]])在每次传递中被调用时带有参数：累加器、当前项、索引和数组本身，并且应该返回累加器。经典的例子是对一个数字数组求和：constnumbers=[2,0,4];functionsummarize(accumulator,number){returnaccumulator+number;}constsum=numbers.reduce(summarize,0);和;//=>6第一步是将累加器初始化为0。然后，为每个对数字求和的数组项调用汇总函数。提示：如果不使用initialValue设置初始值，默认使用数组的第一个元素作为初始值。4.数据连接4.1array.concat()array.concat(array1[,array2,...])方法将一个或多个数组连接到原始数组。连接两个数组如下：constheroes=['Xiaozhi','FrontendXiaozhi'];constvillains=['老王','小三'];consteveryone=heroes.concat(反派);everyone//["小智","前端小智","老王","小三"]提示：concat()创建新数组，不改变原数组array.concat(array1[,array2,...])接受多个数组连接。4.2扩展运算符符号我们使用扩展运算符和数组文字来连接数组：[...array1,...array2]。constheroes=['小智','前端小智'];constvillains=['老王','小三'];constnames=[...英雄，...反派];姓名；//["小智","前端小智","老王","小三"]提示：[...arr1,...arr2,...arrN]：我们可以使用展开运算符来连接所需数量的阵列。获取数组的切片5.1array.slice()方法array.slice([fromIndex[,toIndex]])返回数组的切片，从fromIndex开始到toIndex结束（不包括toIndex本身）。fromIndex可选参数默认为0，toIndex可选参数默认为array.length。constnames=["小智","前端小智","老王","小三"]constheroes=names.slice(0,2)constvillains=names.splice(2)heroes//["小智","前端小智"]villains//["老王","小三"]提示：array.slice()创建新数组，不改变原数组。6.数组的复制6.1展开运算符复制数组的一种简单方法是使用展开运算符：constclone=[...array]，如下所示，复制颜色数组：constcolors=['white','黑色'，'灰色'];constclone=[...颜色];克隆;//=>['white','black','gray']colors===clone;//=>falsehint:[...array]创建一个浅拷贝。6.2array.concat()方法[].concat(array)是另一种复制数组的方法。constcolors=['白色','黑色','灰色'];constclone=[].concat(颜色);克隆;//=>['white','black','gray']colors===clone;//=>falsehint:[].concat(array)创建一个浅拷贝。6.3array.slice()方法array.slice())是另一种复制数组的方法。constcolors=['白色','黑色','灰色'];常量克隆=颜色。片（）;克隆;//=>['white','black','gray']colors===clone;//=>错误提示：colors.slice()创建一个浅拷贝。7、查找数组7.1array.includes()方法array.includes(itemToSearch[,fromIndex])返回一个布尔值，数组是否包含itemToSearch。可选参数fromIndex，默认为0，表示从哪个索引开始搜索。如下图：判断一组数中是否存在2和99：constnumbers=[1,2,3,4,5];数字.包括（2）；//=>truenumbers.includes(99);//=>false7.2array.find()方法array.find(predicate)方法返回数组中第一个满足提供的测试函数的元素的值。否则返回未定义。查找数组中的第一个偶数，如下所示：constnumbers=[1,2,3,4,5];functionisEven(number){returnnumber%2===0;}constevenNumber=numbers.find(isEven);evenNumber;//=>27.3array.indexOf()方法array.indexOf(itemToSearch[,fromIndex])返回数组中第一次出现itemToSearch的索引。可选参数fromIndex，默认为0，表示从哪个索引开始搜索。如下图，找到前端小智的索引：constnames=["小智","前端小智","老王","小三"]constindex=names.indexOf('前端xiaozhi')index//1提示：array.indexOf(itemToSearch)如果没有找到item返回-1array.findIndex(predicate)是使用predicate函数查找索引的替代方法。8.查询数组8.1array.every()方法如果每一项都通过predicate检查，array.every(predicate)返回true。在每个遍历谓词(item[,index[,array]])上，谓词函数被调用时带有参数：当前遍历项、索引和数组本身。如下，判断数组是否只包含偶数：constevens=[0,2,4,6];常量数字=[0,1,4,6];functionisEven(number){returnnumber%2===0;}evens.every(isEven);//=>truenumbers.every(isEven);//=>false8.2array.some()方法如果每个项目只需要通过谓词检查，那么array.every(predicate)返回true。在每个遍历谓词(item[,index[,array]])上，谓词函数被调用时带有参数：当前遍历项、索引和数组本身。如下：判断数组是否至少包含一个偶数：constnumbers=[1,5,7,10];const赔率=[1,3,3,3];functionisEven(number){returnnumber%2===0;}numbers.some(isEven);//=>trueodds.some(isEven);//=>错误9。数组过滤9.1array.filter()方法array.filter(predicate)方法创建一个新数组，它包含由提供的函数实现的测试的所有元素。在每个遍历谓词(item[,index[,array]])上，谓词函数被调用时带有参数：当前遍历项、索引和数组本身。如下：过滤一个数组只包含偶数：constnumbers=[1,5,7,10];functionisEven(number){返回数字%2===0;}constevens=numbers.filter(isEven);evens;//=>[10]提示：array.filter()创建一个新数组而不改变原始数组。10.数组插入10.1array.push()方法array.push(item1[...,itemN])方法将一个或多个项目附加到数组的末尾并返回新的长度。如下图，在names数组末尾添加'小智'constnames=['小智']names.push('FrontendXiaozhi')names//["小智","FrontendXiaozhi"]hint:array.push()会改变原来的数组array.push(item1,item2,...,itemN)可以添加多个元素。10.2array.unshift()方法array.unshift(item1[...,itemN])方法将一个或多个项目附加到数组的开头，并返回数组的新长度constnames=['Xiaozhi']names。unshift('前端小智')names//["前端小智","小智"]提示：array.unshift()会改变原来的数组array.unshift(item1,item2,...,itemN)可以添加更多元素。10.3展开运算符你可以通过组合展开运算符和数组字面量来不可变地将项目插入到数组中。在数组末尾添加一项：constnames=['小智','大智']constnames2=[...names,'王大业']names2//["小智","大智","王Daye"]在数组开头添加一项：constnames=['小智','大智']constnames2=['王大业',...names]names2//["王大业","小智"","大智"]在任意索引处插入元素：constnames=['小智','大智']constindexToInsert=1constnames2=[...names.slice(0,indexToInsert),'前端小智',...names.slice(indexToInsert)]names2//["小智","前端小智","大智"]11.删除数组元素11.1array.pop()方法array.pop()方法从数组中删除最后一个元素并返回该元素。删除颜色数组的最后一个元素，如下所示：constcolors=['blue','green','black'];constlastColor=colors.pop();lastColor;//=>'黑色'颜色；//=>['blue','green']提示：array.pop()会改变原来的数组。11.2array.shift()方法array.shift()方法从数组中删除第一个元素并返回该元素。constcolors=['蓝色','绿色','黑色'];constfirstColor=colors.shift();第一种颜色；//=>'蓝色'颜色；//=>['green','black']提示：array.shift()将更改原始数组。array.shift()具有O(n)复杂度。11.3array.splice()array.splice(fromIndex[,removeCount[,item1[,item2[,...]]]])方法从数组中移除元素并插入新元素。比如我们从索引1中删除2个元素：constnames=['张三','李四','王五','赵六']names.splice(1,2)names//=>["张三","赵六"]names.splice(1,2)删除元素'张三'和'赵六'。names.splice()可以插入新元素而不是删除的元素。我们可以替换从索引1开始的两个元素，然后插入一个新元素'小智'：constnames=['张三','李四','王舞','赵六']names。splice(1,2,'小智')names//["张三","小智","赵六"]提示：array.splice()会改变原来的数组。11.4扩展运算符通过将扩展运算符与数据文字相结合，可以从数组中不可变地删除一个项目。constnames=['张三','李四','王舞','赵六']constfromIndex=1constremoveCount=2constnewNames=[...names.slice(0,fromIndex),...names.slice(fromIndex+removeCount)]newNames//["张三","赵六"]12.清空数组12.1array.length属性array.length是保存数组长度的属性。除此之外，array.length是可写的。如果我们写一个小于当前长度的array.length=newLength，多余的元素将从数组中移除。像这样：使用array.length=0删除数组中的所有项目：constcolors=['blue','green','black'];colors.length=0;colors;//[]12.2array.splice()方法array.splice(fromIndex[,removeCount[,item1[,item2[,...]]]])从数组中移除元素并插入新元素。如果省略removeCount参数，array.splice()将移除数组中从fromIndex开始的所有元素。我们用它来删除数组中的所有元素：constcolors=['blue','green','black'];颜色拼接（0）；颜色;//[]13.填充数组13.1array.fill()方法array.fill(value[,fromIndex[,toIndex]])用fromIndex到toIndex（不包括toIndex本身）的值填充数组。fromIndex可选参数默认为0，toIndex可选参数默认为array.length。例如，用零值填充数组使用：constnumbers=[1,2,3,4];数字.填充（0）；数字；//=>[0,0,0,0]不仅如此，你还可以使用Array(length).fill(initial)来初始化一个特定长度和初始值的数组。constlength=3;constzeros=Array(length).fill(0);zeros;//[0,0,0]提示：array.splice()将更改原始数组。13.2Array.from()Array.from()函数帮助初始化一个具有特定长度对象的数组：constlength=4;constemptyObjects=Array.from(Array(length),function(){return{};});emptyObjects;//[{},{},{},{}]14.数组的展平14.1array.flat()方法array.flat([depth])方法递归展平属于数组的item，直到一定深度才创建一个新数组。depth可选参数默认为1：constarrays=[0,[1,3,5],[2,4,6]];constflatArray=arrays.flat();平面阵列；//[0,1,3,5,2,4,6]数组包含数字和数字数组的混合。arrays.flat()将数组展平，使其只包含数字。提示：array.flat()会在不改变原始数组的情况下创建一个新数组。15.数组排序15.1array.sort()方法array.sort([compare])方法对数组的元素进行排序。可选参数compare(a,b)是自定义排序顺序的回调函数。如果比较compare(a,b)返回的结果：如果a小于b，则a在排序后的数组中应该出现在b之前，返回一个小于0的值。如果a等于b则返回0。如果a大于b，则返回大于0的值。如下图，数组编号排序时constnumbers=[4,3,1,2];数字.排序（）；数字；//=>[1,2,3,4]numbers.sort()以升序排列数字。使用比较函数将偶数排在奇数之前：constnumbers=[4,3,1,2];函数比较（n1，n2）{如果（n1%2===0&&n2%2！==0）{返回-1；}如果(n1%2!==0&&n2%2===0){返回1;}return0;}numbers.sort(compare);numbers;//=>[4,2,3,1]提示：array.sort()将更改原始数组。原文：https://dmitripavlutin.com/op...代码部署后可能出现的bug无法实时获知。之后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的BUG监控工具Fundebug。交流文章每周更新。可以微信搜索“大千世界”阅读即时更新（比博文早一两篇）。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi。我的文档发表了很多，欢迎Star和完善，可以参考考试中心面试复习，关注公众号，后台会回复福利，福利可以看到，你知道。
