写在前面。随着对前端的不断学习，发现数组这种数据结构在前端有相当的存在感。由于刚学前端的时候并没有系统学习数组，所以通过这篇文章和大家一起学习数组。希望我们共同进步，学会熟练操作阵法。数组基本操作创建一个数组vararr1=[];//通过字面量创建一个没有元素的空数组vararr2=newArray();//通过构造函数创建一个空数组vararr3=newArray(5);//创建一个有五个元素的数组，每个数组元素都是未定义的vararr4=[1,2,3,4,5];//创建一个有五个值的数组vararr5=[{id:1,name:'notsourlemon'},{id:2,name:'nolemon'}];//创建值为对象的数组创建数组有两种方法，分别是[]字面量方法、newArray()构造方法，本质上和创建方法是一样的。使用字面量的方法比构造函数的方法要简单得多。推荐给朋友使用。数组增删改push()、pop()、unshift()和shift()vararr=[];//创建一个没有元素的空数组arr[1]='notasourlemon';//写入第一个元素['不酸柠檬']arr.push('22岁');//在数组末尾添加一个元素['不酸柠檬','22岁']arr.pop();//删除数组末尾的元素['不是酸柠檬']arr.unshift('22岁');//在数组头部添加一个元素['22岁','不是酸柠檬']arr.shift();//删除数组头部元素['不酸柠檬']这里主要介绍最基本的两种增删元素方式，即push()在数组尾部添加，pop()删除末尾元素，unshift()添加在数组头部，shift()删除头部元素。这是数组中最常用的四种增删改查方法，一定要记住。splice()vararr=[0,1,2,3,4,5,6,7];arr.splice(4);//从下标4的元素开始删除到末尾，则arr为[0,1,2,3]arr.splice(1,2);//从下标为1的元素中删除两个元素，此时arr为[0,3]arr.splice(1,0,[1,2]);//从下标为1的元素向后删除0个元素，插入元素'1,2'，此时arr为[0,1,2,3]splice()是数组操作中非常重要的方法。使用splice()可以更自由地增删数组。Push()、pop()、unshift()和shift也可以通过splice()方法轻松实现()四种方法，大家可以自己尝试一下，加强对splice()方法的理解。删除和arr.length()varskill=['Vue','React','ES6'];deleteskill[0];//设置第一个元素为空，不改变数组长度[empty,'React','angular']skill.length=5;//设置数组长度为5[empty,'React','angular',empty,empty]skill.length=0;//设置数组长度为0，此时数组设置为空[]这里要注意delete和length的区别。使用删除操作后，数组元素会被置空，原数组长度不会改变。使用length操作后，如果设置的长度大于原数组长度，新加入的元素将被置为空；如果设置的长度小于原数组长度，则删除多余的元素，改变数组长度；如果设置的长度为0，数组将被清空。将数组长度更改为零。数组方法join()varskill=['Vue','React','angular'];技能.join();//"Vue,React,angular"skill.join('----');//《Vue----React----angular》通过arr.join()，可以将数组元素拼接成字符串，给每个元素添加指定的字符。如果不设置，默认添加一个逗号。反向（）vararr=[1,2,3,4,5];arr.reverse();//[5,4,3,2,1]可以通过arr.reverse()将数组中的每个元素调成顺序排列。sort()vararr=[5,4,3,2,1];arr.sort();//[1,2,3,4,5]vararr1=['a','c','e','d','b']arr1.sort();['a','b','c','d','e']arr.sort()可以将数组元素按顺序排列，比如数字顺序或者字母顺序。但是并不是按照编号的先后顺序排序的。为了使数组元素按序号排序，应按如下方式实现。vararr=[55555,44,3333,222,11111];arr.sort();//[11111,222,3333,44,55555]按照数字的顺序，没有比较大小arr.sort((a,b)=>{returna-b;//数字从小到大排列[44,222,3333,11111,55555]})arr.sort((a,b)=>{returnb-a;//数字从大到小排列[55555,11111,3333,222,44]})concat()vararr=[1,2,3];arr.concat(4,5);//[1,2,3,4,5]arr.concat([4,5]);//[1,2,3,4,5]arr.concat([4,5],[6,7]);//[1,2,3,4,5,6,7]arr.concat(4,[5,[6,7]]);//[1,2,3,4,5,[6,7]]通过arr。concat()可以向数组元素添加字符，或者向当前数组添加其他数组，但是如果是嵌套数组，concat()默认不会展平。slice()vararr=[1,2,3,4,5];arr.slice(0,3);//[1,2,3]三个元素arr从下标为0的元素开始。slice(3);//[4,5]从下标为3的元素到结束元素，可以通过arr.slice()查询数组。如果传入两个参数(x,y)，意思是从下标x开始，向后数y个元素；如果传入一个参数(x)，则表示从下标x到末尾的所有元素。filter(),every()和some()vararr=[1,2,3,4,5];varresarr1=arr.filter((x)=>{returnx>3;});//[4,5]过滤大于3的数组元素的结果varresarr2=arr.filter((x)=>{returnx%2==0;});//[2,4]通过arr过滤数组元素中的偶数.filter()可以对数组进行条件过滤，在filter()中写入对应的条件。这里需要注意的是，执行arr.filter()会返回一个数组，我们需要定义一个新的数组来接收它。vararr=[1,2,3,4,5];arr.every((x)=>{返回x>3;});//false如果不是arr数组中的每一项都大于3，则返回falsearr。每个((x)=>{返回x>0;});//false如果arr数组中的每一项都大于0，则返回truearr.some((x)=>{returnx>3;});//falsearr数组中有一项大于3，返回true的方法用于判断数组中是否有对应的值。arr.every()判断的值必须全部满足条件才返回true，而arr.some()判断的值只有一个满足则返回true。reduce()vararr=[1,2,3,4,5];varsum=arr.reduce((x,y)=>{returnx+y//0+1+2+3+4+5=》15},0)varproduct=arr.reduce((x,y)=>{returnx*y//1*2*3*4*5=>120})varmax=arr.reduce((x,y)=>{return(x>y)?x:y//5})arr.reduce()方法会将传入的数组元素组合起来，比如例子中的x和y，在每个方法中的返回值都会被注入到x中，然后继续对下一个y值进行操作。所有操作完成后，返回最终结果。这个方法有第二个参数设置默认值x，但是默认值不是必须的。为了方便小伙伴们的理解，我以代码中的求和为例进行反汇编(x=0,y=1)=>0+1=1(x=1,y=2)=>1+2=3(x=3,y=3)=>3+3=6(x=6,y=4)=>6+4=10(x=10,y=5)=>10+5=15这个时候就方便了把数组元素全部整理完，返回值就是15。结语今天我们学习了数组操作的常用方法。知识点很多，连贯性不强，但是这些方法在我们日常工作中经常用到。希望你能多加练习，深入理解这些方法，你的前端水平一定会更上一层楼。还有很多操作数组的方法没有写出来。本文将持续更新。如果需要，可以点赞收藏。待我更新后，大家可以及时阅读学习！结语以上就是本文的全部内容，如有不妥之处还望指正。感谢阅读，觉得有用请点赞/转发。前端深入系列是一个踩坑系列。是对自己在工作学习中遇到的问题和踩过的坑的探索和总结。在此记录和分享，也是对自己技术的反思和质疑。.前路漫漫，陷阱不断。前端深入系列持续更新中……以上2019-11-04。
