--- highlight: a11y-light theme: github --- ##### 有关增的方法 ###### 1.push 注意点1：它是将新增的元素添加到数组的尾部
注意点2：它会改变原数组
注意点3：并且返回的值为新数组的长度
举例： ```js var arr=[1,2,3] var newarr = arr.push(4) console.log(arr); //[1,2,3,4] console.log(newarr);//4 ``` ###### 2.unshift 注意点1：它是将新增的元素添加到数组的头部
注意点2：它会改变原数组
注意点3：并且返回的值为新数组的长度 ```js var arr=[1,2,3] var newarr = arr.unshift(5) console.log(arr);//[5,1,2,3] console.log(newarr);//4 ``` ###### 3.splice > 重量级的人物来了，它不仅可以添加元素，删除，还可以替换，我们先来说它的添加用法
注意点1：可以添加元素至任意位置
注意点2：它会改变原数组
注意点3：参数1为你要添加的位置start的index（会添加到这个的前面），参数2为0，参数3为你要添加的元素（是添加元素时各个参数代表的意义哦！！） ```js var arr=[1,2,3] var newarr = arr.splice(0,0,1) console.log(arr);//[1,1,2,3] console.log(newarr);//[] ``` ###### 4.concat > 这个方法常常用了拼接数组注意点1：这个方法不会改变原数组 ```js var arr=[1,2,3,2,9] var newarr = arr.concat(1,2) console.log(arr);//[1,2,3,2,9] console.log(newarr);//[1,2,3,2,9,1,2] var arr2=[1,0] var newarr2 = arr.concat(arr2) console.log(newarr2);//[1,2,3,2,9,1,0] ``` ##### 有关删的方法 ###### 1.pop 注意点1：删除尾部的元素
注意点2：改变原数组
注意点3：返回的是删除的那个元素 ```js var arr=[1,2,3] var newarr = arr.pop() console.log(arr);//[1,2] console.log(newarr);//3 ``` ###### 2.shift 注意点1：删除的是头部元素
注意点2：改变原数组
注意点3：返回的是被删除的那个元素 ```js var arr=[1,2,3] var newarr = arr.shift() console.log(arr);//[2,3] console.log(newarr);1 ``` ###### 3.splice > 老盆友又见了，这次来看下删除的用法注意点1：删除任意位置的元素
注意点2：改变元素组
注意点3：返回的是删除元素数组（你没看错是数组！！）
注意点4：参数1：为从哪开始删start的index，参数2：删除几个元素 ```js var arr=[1,2,3] var newarr = arr.splice(0,1) console.log(arr);//[2,3] console.log(newarr);[1] ``` ###### 4.slice > 这个更像是截取，暂且归到这一类吧注意点1：参数1为start的index，参数2为end的index(前包后不包哦)
注意点2：他不会改变原数组，并且将截取的元素新数组返回 ```js var arr=[1,2,3,2,9] var newarr = arr.slice(1,2) console.log(arr);//[1,2,3,2,9] console.log(newarr);//[2] ``` ##### 改的方法 ###### 1.splice 注意点1：改任意位置的元素
注意点2：改变原数组
注意点3：返回的新数组为替换下来的元素
注意点4：参数1：如上，参数2：删除几个，参数3：要填上去的元素 ```js var arr=[1,2,3] var newarr = arr.splice(0,1,4) console.log(arr);//[4,2,3] console.log(newarr);//[1] ``` ##### 查的操作 ###### 1.indexOf 注意点1：传入的为你要查找的元素，找到返回该元素在数组中的索引，没找到返回-1 ```js var arr=[1,2,3] var newarr = arr.indexOf(1) console.log(newarr);// 0 ``` ###### 2.includes 注意点1：传入你要查找的元素，返回true/false ```js var arr=[1,2,3] var newarr = arr.includes(1) console.log(newarr);//true ``` ###### 3.find 注意点：传入的是一个函数，返回第一个匹配的元素 ```js var arr=[1,2,3,2,9] var newarr = arr.find((item,index)=>{ return item>2 }) console.log(newarr);//3 ``` ###### 排序方法 ###### 1.sort 注意点：将原数组排序 ```js var arr=[1,2,3,2,9] arr.sort() console.log(arr);//[1,2,2,3,9] ``` 也可以自定义 ```js var arr=[1,2,3,2,9] //e1表示前一个元素，e2表示后一个元素 arr.sort((e1,e2)=>{ return e1-e2 }) console.log(arr);//[1,2,2,3,9] ``` ###### 2.reverse 注意点：将原数组倒序 ```js var arr=[1,2,3,2,9] arr.reverse() console.log(arr); ``` ##### 转换方法 ###### 1.join 注意点：将数组转化为字符串，不改变原数组 ```js var arr=[1,2,3,2,9] var newarr= arr.join(',') console.log(newarr);//1,2,3,2,9 console.log(arr);//[1,2,3,2,9] ``` ##### 迭代方法 ###### 1.some 注意点：将数组每一项传入函数中，如果有一个符合添加就返回true ```js var arr=[1,2,3,2,9] var newarr= arr.some((item,index)=>{ return item>2 }) console.log(newarr);//true ``` ###### 2.every 注意点：将数组每一项传入一个函数，如果每一项都符合条件才返回true ```js var arr=[1,2,3,2,9] var newarr= arr.every((item,index)=>{ return item>2 }) console.log(newarr);//false ``` ###### 3.forEach 注意点1：forEach(function(){},obj)方法仅仅是一种快速迭代数组的方式，首先会遍历数组的每一个元素传入到函数中
注意点2：该方法不需要返回值
注意地3：参数二为this指向
```js var arr=[1,2,3,2,9] var newarr= arr.forEach(element => { console.log(element); }) console.log(newarr);//undefined ``` ###### 4.map 注意点1:提供的是一种映射函数,将数组的每一项传入到函数
注意点2：元素会经过函数中的指令进行各种变换，生成新的元素，并且将新的元素返回
注定点3：最终会将返回的所有元素形成一个新的数组，该数组就是map()最终返回的值
```js var arr=[1,2,3,2,9] var newarr= arr.map(element => { return element*2 }) console.log(newarr);//[2, 4, 6, 4, 18] ``` ###### 5.reduce arr.reduce(callback, initialValue)
callback（一个在数组中每一项上调用的函数，接受四个函数分别为：
previousValue（上一次调用回调函数时的返回值，或者初始值）
currentValue（当前正在处理的数组元素）
currentIndex（当前正在处理的数组元素下标）
array（调用reduce()方法的数组）
initialValue（可选的初始值。作为第一次调用回调函数时传给previousValue的值）
reduce应用：1.做累加2.数组扁平化3.属性对object分类4.数组去重等等 ## 常见数组面试题 ### 1.数组去重 #### (1)利用set ```js var arr=[1,2,3,2,9] var newarr = [...new Set(arr)] console.log(newarr);//[1, 2, 3, 9] ``` #### (2)利用indexOf ```js var arr=[1,2,3,2,9] function fn(arr){ var newarr=[] arr.filter((item,index)=>{ if(newarr.indexOf(item)==-1){ newarr.push(item) } }) return newarr } console.log(fn(arr));//[1, 2, 3, 9] ``` #### (3)利用includes ```js var arr=[1,2,3,2,9] function fn(arr){ var newarr=[] arr.filter((item,index)=>{ if(!newarr.includes(item)){ newarr.push(item) } }) return newarr } console.log(fn(arr)); ``` #### (4)利用reduce ```js var arr=[1,2,3,2,9] function fn(arr){ var newarr=[] arr.sort().reduce((pre,value,index)=>{ //比较pre中最后一个元素和当前的值是否相等，不相等加入新数组 if (pre[index-1]!==value) { newarr.push(value) } return newarr },[]) return newarr } console.log(fn(arr)); ``` ### 2.数组扁平化 #### （1）利用flat 注意此api不传参数就只能深度到1，参数代表着深度，当不知道深度时可以传Infinity ```js var arr=[1,2,3,2,9,[2,3,[1]]] console.log(arr.flat());//[1, 2, 3, 2, 9, 2, 3, Array(1)] var arr=[1,2,3,2,9,[2,3,[1]]] console.log(arr.flat(Infinity));//[1, 2, 3, 2, 9, 2, 3, 1] ``` #### （2）利用reduce ```js var arr=[1,2,3,2,9,[2,3,[1]]] function flat(arr){ return arr.reduce((pre,value,index)=>{ return pre.concat(Array.isArray(value)?flat(value):value) },[]) } console.log(flat(arr));//[1, 2, 3, 2, 9, 2, 3, 1] ``` #### （3）将数组转为字符串，再转为数组 ```js var arr=[1,2,3,2,9,[2,3,[1]],[2,3]] //数组转为字符串，再将字符串转为数组 var newarr = arr.join(',').split(',').map((item,index)=>{ return parseInt(item) }) console.log(newarr);//[1, 2, 3, 2, 9, 2, 3, 1, 2, 3] ``` ### 3.判断数组元素出现个数例如：var arr=['name','age','hhh','hhh']各出现多少次 ```js var arr=['name','age','hhh','hhh'] var newarr = arr.reduce((pre,item,index)=>{ if (!pre[item]) { pre[item]=1 }else{ pre[item]++ } return pre },{}) console.log(newarr); ``` ### 4.判断数组中出现次数最多的元素在统计个元素出现个数的基础上 ```js var arr=['name','age','hhh','hhh'] var newarr = arr.reduce((pre,item,index)=>{ if (!pre[item]) { pre[item]=1 }else{ pre[item]++ } return pre },{}) var max=0//最多的数量 var attr//最多的属性是什么 for (const key in newarr) { //key为属性 console.log(newarr[key]); if (newarr[key]>max) { max=newarr[key] attr=key } } console.log(max,attr); ``` ### 5.统计数组中重复的元素 ```js var arr=[1,2,6,2,9,1] console.log(arr.sort()); var arr2=[] arr.sort().sort((e1,e2)=>{ e1===e2?arr2.push(e2):'' }) console.log(arr2); ``` ### 6.在a不在b 现在两个数组，判断在a中的元素，不在b中 const a = [1,2,3,5] const b=[1,3,5,6] ```js const a = [1,2,3,5] const b=[1,3,5,6] const newarr = a.filter((item,index)=>{ //将在a不在b中的筛选出来 return b.indexOf(item)==-1 }) console.log(newarr); ``` ### 综合习题公司前后招聘了10个员工(性别,年龄, 月薪各不相同),有以下需求
1). 列表显示所有员工的所有信息
2). 对员工进行年薪降序列表显示
3). 得到男员工的总月薪
4). 查找一个月薪只比12000高一点点的员工
5). 查找出所有月薪高于12000的员工
```js const employees = [ {name: 'A', sex: '男', age: 21, salary: 10000}, {name: 'B', sex: '女', age: 25, salary: 12000}, {name: 'C', sex: '男', age: 24, salary: 13000}, {name: 'D', sex: '男', age: 24, salary: 12500}, {name: 'E', sex: '女', age: 21, salary: 14000}, {name: 'F', sex: '男', age: 24, salary: 16000}, {name: 'G', sex: '男', age: 23, salary: 9000}, {name: 'H', sex: '女', age: 21, salary: 11000}, {name: 'I', sex: '男', age: 23, salary: 13200}, {name: 'J', sex: '男', age: 23, salary: 15000} ] ``` ```js 1)employees.forEach((item,index)=>{ console.log(item); }) 2)var newArr= employees.sort((e1,e2)=>{ return e2.salary-e1.salary }) console.log(newArr); 3)var newArr= employees.reduce((pre,item)=>{ return pre = item.sex==='男'?pre+item.salary:0 },0) console.log(newArr); 4)var newArr= employees.sort((e1,e2)=>{ return e1.salary-e2.salary }).find((item,index)=>{ return item.salary>12000 }) console.log(newArr); 5)var newArr = employees.filter((item,index)=>{ return item.salary>12000 }) console.log(newArr); ```