数组

1.push() 后增
        push()方法可以向数组后添加一个新的元素，并返回新数组的长度。
        末尾添加，返回长度，改变原数组
        var a = [1,2,3]
        var b = a.push(4)
        console.log(a)  // [1,2,3,4] 
        console.log(b)  // 4
    2.unshift() 前增
        unshift()可以向数组前添加一个或多个元素，并返回新的长度
        首部添加，返回长度，改变原数组
        var a = [2,3,4]
        var b = a.unshift(0,1)
        console.log(a)  // [0,1,2,3,4]
        console.log(b)  // 5
    3.pop() 后删
        pop() 用于删除并返回最后一个元素。
        尾部删除，返回被删除的元素，改变原数组
        var a = [1,2,3]
        var b = a.pop()
        console.log(a) // [1,2]
        console.log(b) // 3
    4.shift() 前删
        shift() 用于删除并返回首个元素
        删除首部元素，返回被删元素，改变原数组
        var a = [1,2,3]
        var b = a.shift()
        console.log(a) // [2,3]
        console.log(b) // 1
    5. splice() 修该删除
        splice(index,length,增加的元素1,增加的元素2…,增加的元素N)
        表示从index开始删除length个元素，并从index开始新增元素1~N
        放回被删除的元素组成的组
        对数组进行删除修改，返回被删除的元素组成的数组，改变原数组
        var a = [1,2,3]
        var b = a.splice(1,1,3,[2,3,4],5)
        console.log(a)  // [1,3,[2,3,4],5,3]
        console.log(b)  // [2]
    6.concat() 拼接
        concat() 方法用来合并两个或多个数组
        合并两个或多个数组，返回新数组，不会改变原数组
        var a = [1,2,3]
        var b = [4,5]
        var c = a.concat(b)
        console.log(a) // [1,2,3]
        console.log(b) // [4,5]
        console.log(c) // [1,2,3,4,5] 
    7.slice() 剪切
        slice(startIndex,endIndex)
        返回从startIndex开始(包括)，到endIndex(不包括)之间的原属组成的数组
        返回新数组，不改变原数组
        var a = [1,2,3]
        var b = a.slice(0,1)
        // 不填参数则表示剪切整个数组  
        var c = a.slice() 
        console.log(a) // [1,2,3] 
        console.log(b) // [1]
        console.log(c) // [1,2,3]    
    8.join()
        join() 方法用来将数组转换为字符串
        不改变原数组，返回转换后的字符串
        var a = [1,2,3,4,5]
        console.log(a.join(','))  // 1,2,3,4,5
        console.log(a)  // [1,2,3,4,5]
    9.sort() 排序
        改变原数组，返回排序后的数组
        var a = ['a','b','d','c']
        console.log(a.sort())  // ['a','b','c','d']
        console.log(a)  // ['a','b','c','d']
        10.reverse() 颠倒顺序
        reverse() 方法用于颠倒数组中元素的顺序。
        返回的是颠倒后的数组，会改变原数组。
        var a  = [1,3,2,7,6]
        console.log(a.reverse())  // [6,7,2,3,1]
        console.log(a)  // [6,7,2,3,1]
     10.ES5新增的遍历数组方法
        1. forEach( )
         该方法等同于for循环,没有返回值
         arr.forEach(function(item,index,arr){ 
         //里面的function是一个回调函数, 
         //item: 数组中的每一项; 
         //index:item 对应的下标索引值 
         //arr: 就是调用该方法的数组本身 
         })
        2.map( )
        ,该方法使用和forEach大致相同,但是该方法有返回值,返回一个新数组,新数组的长度和原数组长度相等
        //里面的function是一个回调函数,  
        //item: 数组中的每一项;  
        //index:item 对应的下标索引值  
        //arr: 就是调用该方法的数组本身
            let arr = [1,32,54,6,543]; 
            let res = arr.map(function(item,index,arr){ return item*2; })
         ***** 3. filter( ) ****
             有返回值, 过滤出符合条件的元素
             let arr2 = [0, "", false, 1, 3, 4]; 
             let res4 = arr2.filter(function(item, index) 
             { return item==0; }); 
             console.log(res4); //res4=> [0]
          4. some
          判断数组中有没有符合条件的项(只要有,就返回true),如果一个都没有,才返回false;
              let arr3 = [              { name: "zs", age: 18, done: "notYet" },              { name: "ls", age: 20, done: true },              { name: "ww", age: 22, done: true }              ];
            let res5 = arr3.some(function(item) {
              return item.done;
            });
            console.log(res5);
         5. every
             判断数组中所有的项是否满足要求,如果全都满足,才返回true,否则返回false
             let res6 = arr3.every(function(item) { return item.done; }); 
             console.log(res6);
         6. find
             找到符合条件的项,并且返回第一项
             let arr4 = [              { id: 3, name: "ls", done: false },              { id: 1, name: "zs", done: true },              { id: 2, name: "ww", done: true }                ];
                // var res7 = arr4.find(function(item) {
                //   return item.done;
                // });
                // console.log(res7);
           7.findIndex
               找到符合条件的项的下标,并且返回第一个
               var res8 = arr4.findIndex(function(item)
               { return item.done; }); 
               console.log(res8);
           8.reduce
               1.求和计算
                ​ *第一次：pre–>1 next–>2 index–>1
                pre+next=1+2=3
                *第二次：pre–>3 next–>3 index–>2
                pre+next=3+3=6
                *第三次：pre–>6 next–>4 index–>3
                pre+next=6+4=10
                *第四次：pre–>10 next–>5 index–>4
                var arr1 = [1,2,3,4,5] ;
                var new1 = arr1.reduce(function(pre,next,index){
                                return pre+next ;
                                 //pre+next=10+5=15
                })
                console.log(new1);
                2.扁平化数组(拼接数组)
                    var arr2 = [[1,2,3],[4,5],[6,7]] ;
                    var new2 = arr2.reduce(function(pre,next,index){
                                    return pre.concat(next);	//前数组拼接后数组 .concat()
                    })
                    console.log(new2);
                 3.  对象数组叠加计算
                     var arr3 = [                        {price:10,count:1},                                                {price:15,count:2},                                                {price:10,count:3}                                            ];
                    var new3 = arr3.reduce(function(pre,next,index){
                                    return pre+next.price*next.count;
                    },0)	
                    //在原数组第一项添加为0，不改变原数组，则可不操作第一项
                    console.log(new3);
                  应用 : 计算数组中每个元素出现的次数  
                        投票板
                        var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
                        var countedNames = names.reduce(function (allNames, name) {
                            // console.log(allNames, '| ' + name);
                            if (name in allNames) {
                              allNames[name]++;
                            } else {
                              allNames[name] = 1;
                            }
                            return allNames;
                        }, {});
                        console.log(countedNames);
   
           

reduce方法详解

reduce处理数据--方法详解

后端返回数据100+ 时页面-优化分页，后端没有进行分页处理

如图：

element ui 分页功能未能实现-原因---因为数据一下子返回，页面渲染卡顿，

可以用到数组方法 slice() 进行给数据剪切的操作，

 this.areaData = res.rows.slice(
            (this.queryParams.pageNum-1)*this.queryParams.pageSize,  //页码与本页条数
            this.queryParams.pageNum*this.queryParams.pageSize
          );

数据剪切成功 页面卡顿消失-

*******后端一次性传了10w条数据，前端该如何处理？ 面试题高频

   window.requestAnimationFrame()  来处理，

详情请见blog.csdn.net/qq_35942348…

冒泡排序

bubbleSort(arr) {
      var len = arr.length,
          i, j, tmp;
      for (i = 0; i < len - 1; i++) {
        for (j = 0; j < len - 1 - i; j++) {
          if (arr[j] > arr[j + 1]) {
            tmp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = tmp;
          }
        }
      }
      console.log('[ arr ] >', arr)
      return arr;
      
    }

递归树结构

    // 使用 this.handleTree(res.rows);
    handleTree(data, id, parentId, children) {
      let config = {
        id: id || "id",
        parentId: parentId || "parentId",
        childrenList: children || "children",
      };

      var childrenListMap = {};
      var nodeIds = {};
      var tree = [];

      for (let d of data) {
        let parentId = d[config.parentId];
        if (childrenListMap[parentId] == null) {
          childrenListMap[parentId] = [];
        }
        nodeIds[d[config.id]] = d;
        childrenListMap[parentId].push(d);
      }

      for (let d of data) {
        let parentId = d[config.parentId];
        if (nodeIds[parentId] == null) {
          tree.push(d);
        }
      }

      for (let t of tree) {
        adaptToChildrenList(t);
      }

      function adaptToChildrenList(o) {
        if (childrenListMap[o[config.id]] !== null) {
          o[config.childrenList] = childrenListMap[o[config.id]];
        }
        if (o[config.childrenList]) {
          for (let c of o[config.childrenList]) {
            adaptToChildrenList(c);
          }
        }
      }
      return tree;
    },

通过函数删除一个数组中多个元素，传入的参数是一个数组索引

// 通过函数删除一个数组中多个元素，传入的参数是一个数组索引

// function removeElements(array, indices) {  
//     // 将逗号分隔的字符串转换为索引数组  
//     var indexArray = indices.split(',').map(Number);  
  
//     // 使用filter方法过滤掉要删除的元素  
//     return array.filter(function(value, index) {  
//         return !indexArray.includes(index);  
//     });  
// }  
  
// var array = ['元素1', '元素2', '元素3', '元素4', '元素5'];  
// var indices = '1,3';  // 要删除的元素的索引  
  
// var newArray = removeElements(array, indices);  
// console.log(newArray);  // 


function removeElements(array, indices) {
    //1. 首先对索引数组进行升序排序，以便从后往前删除元素时不会影响后续元素的索引
    indices.sort((a,b)=>b-a)
    //2, 用for删除数据
    for(let i = 0; i < indices.length; i++){
        //3. 删除数组中的元素
        array.splice(indices[i],1)
    }
    return array
}

let array = ['1','2','3','4','5','6','7','8','9','10'];
let indices = [1,3,5];
let newArray = removeElements(array, indices);   //1, 3,  4, 5, 7, 9, 10

console.log(newArray);

多维数组转一维数组

flat()
let a=[1,2,[3,4,[5,6]]]
console.log('[ a.flat() ] >', a.flat(Infinity))  Infinity(无穷)  [1,2,3,4,5,6]