1.增加

1.push() //从尾部添加

  1.     <script>
  2.         var arr = [1,2,3]
  3.         /* push 
  4.         从数组的最后面增加一个值,可以一次性添加多个
  5.         */
  6.         arr.push(4,5,6)
  7.         console.log(arr)  //[1,2,3,4,5,6]
  8.     </script>
  10. push不能添加数组
  11.     <script>
  12.         var arr =[1,2,3];
  13.         var obj = [4,5,6];
  14.         arr.push(obj);
  15.         console.log(arr)   // [1, 2, 3, Array(3)]
  16.     </script>
  17. 解决：
  18.     <script>
  19.         var arr = [1, 2, 3];
  20.         var obj = [4, 5, 6];
  21.         /* 展开 */
  22.         //console.log(...arr)
  23.         arr.push(...obj)
  24.         console.log(arr)  //[1,2,3,4,5,6]
  25.     </script>

2.unshift() //从头部添加

  1.     <script>
  2.         var arr = [1,2,3]
  3.         /* push 
  4.         从数组的最后面增加一个值,可以一次性添加多个
  5.         */
  6.         arr.unshift(4,5,6)
  7.         console.log(arr)  //[4,5,6,1,2,3]
  8.     </script>

3.concat() //拼接两个数组

  1.     <script>
  2.         /*
  3.         concat  拼接两个数组,但是不能改变原数组的结构
  4.         */
  5.         var arr =[1,2,3];
  6.         var obj = [4,5,6];
  7.         arr.push(obj);
  8.         var newArray = arr.concat(obj)
  9.         console.log(newArray)  //[1,2,3,4,5]
  10.     </script>

4.splice() //定点增加

  1.     <script>
  2.         /* splice(index,0,parmas)  从index的前面增加 */
  3.         var skills=["html","css","jq","js"]
  4.         skills.splice(0,0,"vue","react")
  5.         console.log(skills)  //["vue", "react", "html", "css", "jq", "js"]
  6.      </script>

2.删除

1.pop() //从后面删除

  1.     <script>
  2.         var arr =[1,2,3,4]
  3.         arr.pop();
  4.         console.log(arr)  //[1,2,3]
  5.     </script>

2.shift() //从前面删除

  1.     <script>
  2.         var arr =[1,2,3,4]
  3.         arr.shift();
  4.         console.log(arr)  //[2,3,4]
  5.     </script>

3.splice(index,howmany) index从哪个下标开始,howmany删除多少个

  1.     <script>
  2.         var app = [1,2,3,4,5,6]
  3.         app.splice(2,3);
  4.         console.log(app)  //[1,2,6]
  5.     </script>

3.修改

  1.     <script>
  2.         /* splice(index,howmany,params) */
  3.         var arr = ['html','css','javascript']
  4.         arr.splice(1,2,"vue","react")
  5.         console.log(arr)  //["html", "vue", "react"]
  6.     </script>

4.查询

1.indexOf()

  1.     <script>
  2.         var arr = ['html','css','javascript']
  3.         console.log(arr.indexOf('css'))   //1
  4.     </script>

2.slice()

  1.     <script>
  2.         var app = [1,2,3,4,5,6,7]
  3.         console.log(app.slice(1,4))  //[2, 3, 4]
  4.     </script>

3.includes() 判断数组是否包含某个值

  1.     <script>
  2.         var arr = ['html','css','javascript']
  3.         console.log(arr.includes("javascript"))  //true
  4.     </script>

5.遍历

1.for循环

  1.     <script>
  2.         var arr=[1,2,3,4,5]
  3.         for(i=0;i<arr.length;i++){
  4.             console.log(arr[i])
  5.         }
  6.     </script>

image.png

2.for- in

  1.     <script>
  2.         var obj={
  3.             name:"test",
  4.             color:'red',
  5.             day:'sunday',
  6.             number:5
  7.         }
  8.         for(var value in obj){
  9.             console.log(obj[value])
  10.         }
  11.     </script>

image.png

3.forEach

  1.     <script>
  2.         var arr= ['html','css','vue','react'];
  3.         arr.forEach(function(item){
  4.             console.log(item)
  5.         })
  6.     </script>

image.png

4.for-of

  1.     <script>
  2.         var arr= ['html','css','vue','react'];
  3.         for(var value of arr){
  4.             console.log(value)
  5.         }
  6.     </script>

5.map

  1.     <script>
  2.         var newArray = arr.map((item)=>{
  3.             return item+"1"
  4.         })
  5.         console.log(newArray)
  6.     </script>

image.png

6.from

  1. <script>
  2.         var arr = [1,2,3,4];
  3.         Array.from(arr,item=>{
  4.             console.log(item)
  5.         }) 
  6. </script>

image.png

6.其他方法

  • join(separator) //将数组拼接成字符串

    1.   <script>
    2.       var elements = ['Fire', 'Air', 'Water'];
    3.       console.log(elements.join());  //Fire,Air,Water
    4.       console.log(elements.join(''));  //FireAirWater
    5.       console.log(elements.join('-'));  //Fire-Air-Water
    6.   </script>

  • sort() //排序

    1. 升序
    2.   <script>
    3.       var arr = [21, 12, 1, 3, 4];
    4.       arr.sort((a,b)=>{
    5.           return a-b;
    6.       })
    7.       console.log(arr)  //[1,3,4,12,21]
    8.   </script>
    9. 降序
    10.   <script>
    11.       var arr = [21, 12, 1, 3, 4];
    12.       arr.sort((a,b)=>{
    13.           return b-a;
    14.       })
    15.       console.log(arr)  //[21, 12, 4, 3, 1]
    16.   </script>

  • reduce() //求和 ```javascript

//进阶 arr.reduce(function(prev,cur,index,arr){ … }, init); //arr 表示原数组； //prev 表示上一次调用回调时的返回值，或者初始值 init; //cur 表示当前正在处理的数组元素,item； //index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1； //init 表示初始值。

  2. - reverse()   //反转函数
  3. ```html
  4.     <script>
  5.         var arr = [11,23,13];
  6.         arr.reverse();
  7.         console.log(arr)  // [13, 23, 11]
  8.     </script>
  • Math.max(…arr); //获取数组最大的值
  • Math.min(…arr); //获取数组最小的值
  1.     <script>
  2.         var arr = [1,2,3,4];
  3.         var max = Math.max(...arr);
  4.         var min = Math.min(...arr);
  5.         console.log(max)   //4
  6.         console.log(min)   //1
  7.     </script>

  • filter()

    1.   <script>
    2.       var arr = [1,2,3,4,5];
    3.       var newArr = arr.filter(item=>{
    4.           return item>3;   //返回大于3的数组
    5.       })
    6.       console.log(newArr)   //[4, 5]
    7.   </script>

  • entries() 方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。

    1.   <script>
    2.       var arr =['html','css','javascript','vue']
    3.       var newArr=arr.entries();
    4.       console.log(newArr.next().value) //[0,'html']
    5.       console.log(newArr.next().value) //[1,'css']
    6.   </script>

  • copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。

    1.   <script>
    2.       var array1 = ['a', 'b', 'c', 'd', 'e'];
    3.       // copy to index 0 the element at index 3
    4.       console.log(array1.copyWithin(0, 3, 4));
    5.   </script>

  • some()

  • every()

  • find()

    1.   <script>
    2.       var arr = [1,2,3,4];
    3.       var num = arr.some(item=>{
    4.           return item>3;
    5.       })
    6.       var str = arr.every(item=>{
    7.           return item>1;
    8.       })
    9.       var value = arr.find(item=>{
    10.           return item>2;
    11.       })
    12.       console.log(num)   //true
    13.       console.log(str)   //false
    14.       console.log(value)  //3
    15.   </script>

  • findIndex

    1. var arr=[{id:001,content:"vue"},{id:002,content:"react"},{id:003,content:"small"}]
    2. var index=arr.findIndex(item=>item.id==001)
    3. console.log(index)

    7.应用

    1. //每个月份下各等级预警数量
    2. let list = [
    3. {
    4.   "periodName": "LastMonth",  //月份
    5.   "levelWithCounts": [{
    6.       "warnLevel": "0",  //预警等级
    7.       "count": 2
    8.   }, {
    9.       "warnLevel": "4",
    10.       "count": 6
    11.   }, {
    12.       "warnLevel": "3",
    13.       "count": 3
    14.   }]
    15. },
    16. {
    17.   "periodName": "LastTwoMonth",
    18.   "levelWithCounts": [{
    19.       "warnLevel": "1",
    20.       "count": 10
    21.   }, {
    22.       "warnLevel": "2",
    23.       "count": 3
    24.   }, {
    25.       "warnLevel": "3",
    26.       "count": 8
    27.   }]
    28. },
    29. {
    30.   "periodName": "LastThreeMonth",
    31.   "levelWithCounts": [{
    32.       "warnLevel": "0",
    33.       "count": 6
    34.   }, {
    35.       "warnLevel": "3",
    36.       "count": 5
    37.   }, {
    38.       "warnLevel": "4",
    39.       "count": 2
    40.   }]
    41. }
    42. ]
    43. //取单月下所有等级相加总数最大
    44. let maxCount = Math.max(...list.map((a) => {
    45.   return a.levelWithCounts.length < 1 ? 0 : (a.levelWithCounts.reduce((pre, item) => {
    46.       return pre + (item.warnLevel=='0'? 0 : item.count)
    47.   }, 0))
    48. }))
    1. //对数组或对象进行排序
    2. let listTypes = [
    3.   [
    4.       {name:"warningLevel",label:"预警级别",sortNum:10},
    5.       {name:"zhlx",label:"灾害类型",sortNum:9},
    6.       {name:"city",label:"所在市",sortNum:8},
    7.       {name:"zq",label:"所在区县",sortNum:7},
    8.       {name:"town",label:"所在乡镇",sortNum:6}
    9.   ],
    10.   [
    11.       {name:"jd",label:"经度",sortNum:10},
    12.       {name:"wd",label:"纬度",sortNum:9},
    13.       {name:"dd",label:"监测点地点",sortNum:8},
    14.       {name:"wgy",label:"区域负责人",sortNum:7},
    15.       {name:"fzrdh",label:"联系电话",sortNum:6}
    16.   ],
    17.   [
    18.       {name:"dlwz",label:"预警点位置",sortNum:10}
    19.   ]
    20. ],
    21. let data = {
    22.   "warningLevel": "0",
    23.   "warningTime": "2021-12-10 13:44:36",
    24.   "id": "3311230101",
    25.   "mc": "苏村滑坡",
    26.   "dlwz": "丽水市遂昌县北界镇苏村",
    27.   "wgy": "",
    28.   "jd": 119.2982726,
    29.   "wd": 28.78027178,
    30.   "fzrdh": "13695786238",
    31.   "zhlx": "滑坡",
    32.   "city": "丽水市",
    33.   "town": "北界镇苏村村",
    34.   "zq": "遂昌县",
    35.   "dd": "苏村"
    36. }
    37. listTypes[0].map(item=>{
    38.   if(data.hasOwnProperty(item.name)){
    39.       item.value = data[item.name]
    40.   }
    41. })
    42. listTypes[1].map(item=>{
    43.   if(data.hasOwnProperty(item.name)){
    44.       item.value = data[item.name]
    45.   }
    46. })
    47. listTypes[2].map(item=>{
    48.   if(data.hasOwnProperty(item.name)){
    49.       item.value = data[item.name]
    50.   }
    51. })
    52. listTypes.map(item=>{
    53.   item = item.sort((a,b)=> b.sortNum-a.sortNum)
    54. })