Array类拓展方法

var arr=[
       {name:'one',sex:'girl',handsome:true},
       {name:'two',sex:'girl',handsome:false},
       {name:'thr',sex:'boy',handsome:true}
]

我需要根据这个人帅不帅来决定,筛选后的结果

Array.prototype.removeItemByAttr=function (attr) {
         var that=this;
         var temp=[];
          for(var i=0; i<that.length; i++){
                if(that[i][attr]){
                temp.push(that[i])
          }
      }
      return temp;
}
var newArr=arr.removeItemByAttr('handsome');
console.log(newArr)



我需要只显示学生的姓名,组成的一维数组

Array.prototype.singleDimensionalByAttr=function (attr) {
     var that=this;
     var temp=[];
     for(var i=0; i<that.length; i++){
         temp.push(that[i][attr])
     }
     return temp;
}
var newArr=arr.singleDimensionalByAttr('name');
console.log(newArr)

我需要赛选几个我愿意显示的属性

 Array.prototype.singleDimensionalByAttr=function (attrArr) {
      var that=this;
      var temp=[];
      for(var i=0; i<that.length; i++){
          var obj={};
          for(var j=0; j<attrArr.length; j++){
               obj[attrArr[j]]=that[i][attrArr[j]]
          }
          temp.push(obj)
      }
      return temp;
}
var newArr=arr.singleDimensionalByAttr(['name','sex']);
console.log(newArr)

重构数组

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            table{border-collapse:collapse ;}
            td,th{border: red solid 1px; width: 80px; text-align: left;}
        </style>
    </head>
    <body>
        <div class="wrapp"></div>
        <script>
            //list转treeList,type表示根绝什么类型重构treeList
            Array.prototype.creatTree=function(type){
                var that=this;
                var temp = {},
                newTree = [];
                for(var i = 0; i < that.length; i++){
                    var ai = that[i];
                    var aiType=ai[type];
                    if(!temp[aiType]){
                        var dt={};
                        dt.data=[ai];
                        dt[type]=aiType;
                        newTree.push(dt);
                        temp[aiType] = ai;
                    }else{
                        for(var j = 0; j < newTree.length; j++){
                            var dj = newTree[j];
                            if(dj[type] == aiType){
                                dj.data.push(ai);
                                break;
                            }
                        }
                    }
                }
                return newTree;
            }
            
            
            
            
            
            
            
            
            
            
            function creatDom(){
                //转换数据结构
                var oldData=[
                    {id:201701,clas:1,name:'丁少',age:20},
                    {id:201702,clas:2,name:'王新',age:21},
                    {id:201703,clas:1,name:'张三',age:20},
                    {id:201704,clas:2,name:'李四',age:18}
                ];
                var newData=oldData.creatTree('clas');
                console.log(newData)
                
                //拼接渲染dom
                var str1='';
                for (let i=0; i<newData.length; i++) {
                    str1+= `<fieldset>  
                        <legend>${newData[i].clas}年级</legend>
                        <table >
                            <thead>
                                <tr>
                                    <th>姓名</th>
                                    <th>年龄</th>
                                </tr>
                            </thead>
                            <tbody>
                                ${
                                    (function(){
                                        var str2='';
                                        for(let j=0; j<newData[i].data.length; j++){
                                            str2+=`<tr>
                                                <td>${newData[i].data[j].name}</td>
                                                <td>${newData[i].data[j].age}</td>
                                            </tr>`
                                        }
                                        return str2;
                                    }())
                                }
                            </tbody>
                        </table>
                    </fieldset> ` ;
                }
                var dom=document.querySelector('.wrapp');
                dom.innerHTML=str1;
                
            }
            
            
            
            creatDom()
            
        </script>
    </body>
</html>

当然啊,如果你不想拼接字符串,你可以用vue、angular。如果你项目比较简单,不想用这些沉重的js框架,那你可以尝试字符串模板,我这里有介绍http://www.cnblogs.com/flyings/p/7639323.html

去重1

<script>
     Array.prototype.unique=function(){
         var that=this;
         var temp={};
         var tempArr=[];

                
         for (let i=0; i<that.length; i++) {
            let b=temp.hasOwnProperty(that[i]);//hasOwnProperty检测对象是否包含该属性
            if(!b){
               temp[that[i]]=true;
               tempArr.push(that[i]);
            }
         }
                
         return tempArr;
      }
            
     var oldArr=[2,8,5,6,5];
     var newArr=oldArr.unique();
     console.log(newArr)
</script>

去重2

        <script>
            Array.prototype.unique=function(){
                let that=this;
                
                //set返回的是一个对象,为es6新增数据结构,Set不保存重复的元素
                let temp=new Set(that);
                //ES6为Array增加了from函数用来将其他对象转换成数组
                let tempArr=Array.from(temp);

                return tempArr;
            }
            
            var oldArr=[2,8,5,6,5];
            var newArr=oldArr.unique();
            console.log(newArr)
        </script>

js的数据结构是在向java靠拢,而且本身js的数据结构也不完善,所以直接看java即可,一下是java的数据结构

移除指定元素

    <script>
            var arr=['123','456','789'];
            Array.prototype.removeByVal=function(item){
                var that=this;
                for(var i=0; i<that.length; i++) {
                    if(that[i] == item) {
                        that.splice(i, 1);
                        break;
                    }
                }
            }
            arr.removeByVal('456')
            console.log(arr)
        </script>

判断数组是否存在某个元素(对象)

            Array.prototype.hasItem=function (attr,val) {
                var that=this;
                var temp=false;
                for(var i=0; i<that.length; i++){
                    if(that[i][attr]==val){
                        temp=true;
                        break;
                    }
                }
                return temp;
            }
            
            var arr=[
               {id:'123',name:'one',sex:'girl'},
               {id:'456',name:'two',sex:'girl'},
               {id:'789',name:'thr',sex:'boy'}
            ]
            console.log(arr.hasItem('id','456'))//true
            console.log(arr.hasItem('id','666'))//fasle

判断数组是否存在某个元素(元素简单类型)

        <script>
            Array.prototype.hasItem=function (val) {
                var that=this;
                var i=that.length;
                var temp=false;
                while (i--) {  
                    if (that[i] == val) {  
                        temp=true;  
                        break;
                    }  
                }    
                return temp;
            }
            
            var arr=[123,'one','girl',false]
            console.log(arr.hasItem('456'))//false
            console.log(arr.hasItem('one'))//true
        </script>
原文地址:https://www.cnblogs.com/dshvv/p/7570020.html