vue 数组操作

Posted 2021-11-27 zhengxiaoxiao

  1 <template>
  2 <div>
  3   <h3>所有注册用户</h3>
  4   <ul>
  5     <li v-for="(item,index) in list" v-bind:key="index">
  6  {{item}}
  7     </li>
  8   </ul>
  9 
 10   <p>变异方法，改变原来的数组</p>
 11   <button v-on:click="addsplice">splice</button>
 12   <button v-on:click="addpop">pop</button>
 13   <button v-on:click="addpush">push</button>
 14   <button v-on:click="addshift">shift</button>
 15   <button v-on:click="addunshift">unshift</button>
 16   <button v-on:click="addset">set</button>
 17   <button v-on:click="addsort">sort</button>
 18   <button v-on:click="addreverse">reverse</button>
 19   <button v-on:click="addremove">remove</button>
 20   <button v-on:click="obset">objset</button>
 21   <p>非变异方法，不改变原来的数组，但是会返回一个数组</p>
 22   <button v-on:click="addfilter1">filter</button>
 23   <button v-on:click="addfilter2">filter2</button>
 24   <button v-on:click="addcontant">contant</button>
 25   <button v-on:click="addslice">slice</button>
 26   <button v-on:click="addmap">map</button>
 27   <button v-on:click="addinclude">include</button>
 28   <button v-on:click="addevery">evey</button>
 29   <button v-on:click="addsome">some</button>
 30   <button v-on:click="addfind">find</button>
 31   <button v-on:click="addreduce">reduce</button>
 32   <button v-on:click="addfor">for</button>
 33   <button v-on:click="addforeach">foreach</button>
 34   <button v-on:click="addforof">forof</button>
 35   <button v-on:click="addforobj">forobj</button>
 36 </div>
 37 </template>
 38 <script>
 39 export default{
 40   data(){
 41     return {
 42        list:[{messsage:"aa",username:"ff"},{messsage:"bb",username:"fb"}],
 43        items:[{id:1},{id:2},{id:3},{id:4}],
 44        rr:{  lie:""},
 45        num:[1,3,2,8,5,9,0]
 46       }
 47 },
 48 methods:{
 49 addsplice(){//有问题,居然把单词splice拼成了slice，结果导致一直报错，也是醉了，调了一天多
 50    //let s=this.list.slice(0)
 51    // let ff={messsage:"ab",username:"fg"}
 52    // s[2]=ff
 53    // this.list=s
 54    console.log(this.list)
 55    this.list.splice(1,0,{mee:"llll"})
 56    var jj=JSON.stringify(this.list)
 57     console.log(JSON.stringify(this.list))
 58     console.log(JSON.parse(jj))
 59 },
 60 addpop(){
 61   this.list.pop();
 62   console.log(JSON.stringify(this.list))
 63 },
 64 addpush(){
 65   this.list.push({messsage:"ss"});
 66   console.log(JSON.stringify(this.list))
 67 },
 68 addshift(){
 69   this.list.shift();
 70   console.log(JSON.stringify(this.list))
 71 },
 72 addunshift(){
 73   this.list.unshift({messsage:"ss"});
 74   console.log(JSON.stringify(this.list))
 75 },
 76 addset(){
 77    this.$set(this.list,0,{messsage:"11"})
 78   console.log(JSON.stringify(this.list))
 79 },
 80 addsort(){
 81   console.log(this.num)
 82   this.num.sort()
 83   console.log(this.num)
 84 },
 85 addreverse(){//倒序输出数组,适用于对象数组和元素数组
 86   console.log(JSON.stringify(this.list))
 87   this.list.reverse()
 88   console.log(JSON.stringify(this.list))
 89  // console.log(this.list)
 90 },
 91 addremove(){//无效？？？？？
 92    this.list.$remove({message:"11"})
 93   console.log(JSON.stringify(this.list))
 94 },
 95 obset(){
 96 this.$set(this.rr,"lie","kkk")
 97  console.log(JSON.stringify(this.rr))
 98 },
 99 addfilter1(){
100 this.list=this.list.filter(function(item){
101   return item.messsage
102 })
103  console.log(JSON.stringify(this.list))
104 },
105 addfilter2(){
106   var gh= this.num.filter(function(number){
107     return number%2===0
108   })
109  console.log(JSON.stringify(gh))
110 },
111 addcontant(){
112  console.log(this.num)
113  var dd=this.num.concat(2,4,5)
114  console.log(dd)
115   var dd=this.num.concat([2,4,5],[2,3,4])
116  console.log(dd)
117 },
118 addslice(){
119   var dd=this.num.slice()//返回所有元素
120   console.log(dd)
121   var dd=this.num.slice(1,2)//返回index为1的值
122   console.log(dd)
123   var dd=this.num.slice(-3,1)//空值
124   console.log(dd)
125    var dd=this.num.slice(-3)//倒数三个元素
126   console.log(dd)
127 },
128 addmap(){
129   console.log(this.num)
130  let dd=this.num.map(function(item,index){return item*=3})
131   console.log(dd)
132 },
133 addinclude(){
134   console.log(this.num)
135  let d1=this.num.includes(5)
136   console.log(d1)
137    let d2=this.num.includes(20)
138   console.log(d2)
139 },
140 addevery(){
141   console.log(this.num)
142  let d1=this.num.every(
143    function(item,index){
144      console.log(item)
145    return item.toString().indexOf(1)>-1
146    })
147   console.log(d1)
148 },
149 addsome(){
150  let d1=this.num.some(function(item,index)
151  {
152       console.log(item)
153    return item.toString().indexOf(1)>-1
154    })
155   console.log(d1)
156 },
157 addfind(){
158   console.log(this.num)
159  let d1=this.num.find(function(item,index){
160    return item.toString().indexOf(3)>-1
161  })
162   console.log(d1)
163 },
164 addreduce(){
165   console.log(this.num)
166  let d1=this.num.reduce(function(item,index){
167    return item.toString().indexOf(3)>-1
168  })
169   console.log(d1)
170 },
171 addfor(){
172   console.log(this.num)
173  for(let i=0;i<this.num.length;i++)
174   console.log(this.num[i])
175 },
176 addforeach(){
177   console.log(this.num)
178  this.num.forEach(function(item,index){console.log(item)})
179 },
180 addforof(){
181   console.log(this.num)
182   for(let d1 of this.num){console.log(d1)}
183 },
184 addforobj(){
185   let obj={school:"name",age:8}
186   for(let d1 of Object.keys(obj)){console.log(d1+":"+obj[d1])}
187 },
188 }
189 }
190 </script>