js数组的多变方法,Vue不能够体察到数组length的浮

2019-05-25 18:38 来源:未知

前言

Vue 包蕴壹组旁观数组的产生方法,所以它们也将会触发视图更新。这么些措施如下:

由于 JavaScript 的限定,Vue 无法检验以下改造的数组: 当你使用索引直接设置贰个项时,举个例子:vm.items[indexOfItem] = newValue 当你改改数组的长度时,比方:vm.items.length = newLength

日前在看vue的教学录像,正好学到的数组对象排序方法,在那跟大家享受一下,如有不足之处,请赐教。

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

因为vue的响应式是透过 Object.defineProperty 来落到实处的,可是数组的length属性是不可能增多getter和setter,全数不恐怕透过旁观length来判别。

图片 1

都有如何意义?出手试验了一晃:

何以Vue无法观测到数组length的变迁

平时数组的排序

<body>
  <div id="app">
   <div>
    push方法:
    <input type="text" v-model="text" @keyup.enter="methodByPush">
    <input type="button" value="测试功能" @click="methodByPush">
    <ul>
     <li v-for="item of items">

     </li>
    </ul>
   </div>
    <div>
    pop方法:
    <input type="button" value="测试功能" @click="methodByPop">
    <ul>
     <li v-for="item of items">

     </li>
    </ul>
   </div>
   <div>
    shift方法:
    <input type="button" value="测试功能" @click="methodByShift">
    <ul>
     <li v-for="item of items">

     </li>
    </ul>
   </div>
    <div>
    unshift方法:
    <input type="text" v-model="text" @keyup.enter="methodByUnshift">
    <input type="button" value="测试功能" @click="methodByUnshift">
    <ul>
     <li v-for="item of items">

     </li>
    </ul>
   </div>
   <div>
    splice方法:
    <input type="button" value="测试功能" @click="methodBySplice">
    <ul>
     <li v-for="item of items">

     </li>
    </ul>
   </div>
   <div>
    sort方法:
    <input type="button" value="测试功能" @click="methodBySort">
    <ul>
     <li v-for="item of items">

     </li>
    </ul>
   </div> 
   <div>
   reverse方法:
    <input type="button" value="测试功能" @click="methodByReverse">
    <ul>
     <li v-for="item of items">

     </li>
    </ul>
   </div>
   result显示的地方:<br>

  </div>


<script>
  var vm = new Vue({
   el: '#app',
   data: {
    items: [],
    text: '',
    result: ''
   },
   methods: {
    methodByPush: function () {
     this.result = this.items.push(this.text)
     this.text = ''
    },
    methodByPop: function () {
     this.result = ''
     this.result = this.items.pop()
    },
    methodByShift: function () {
     this.result = ''
     this.result = this.items.shift()
    },
    methodByUnshift: function () {
     this.result = ''
     this.result = this.items.unshift(this.text)
     this.text = ''
    },
    methodBySplice: function () {
     this.result = ''
     this.result = this.items.splice(2,1,'yovan')
    },
    methodBySort: function () {
     this.result = ''
     this.result = this.items.sort()
    },
    methodByReverse: function () {
     this.result = ''
     this.result = this.items.reverse()
     alert(this.result)
    }
   }
  })
</script>

正如代码,尽管看起来数组的length是10,但是for in的时候只得遍历出0, 一, 二,导致了只有前多少个目录被抬高了getter 和setter

先看代码:

获得下边包车型客车下结论:

var a = [0, 1, 2]
a.length = 10
// 只是显示的给length赋值,索引3-9的对应的value也会赋值undefined
// 但是索引3-9的key都是没有值的
// 我们可以用for-in打印,只会打印0,1,2
for (var key in a) {
 console.log(key) // 0,1,2
}
<div class="app">
   <h1>v-for实例</h1>
   <hr>
   <ol>
     <li v-for="number in numbers">{{number}}</li>
   </ol>
 </div> 
 <script>
 new Vue({
   el:'.app',
   data:{
     numbers:[5 ,88, 43, 56, 28, 61, 9],
   },
   computed:{
     numbers:function(){
       return this.numbers.sort(numbers);
     },
   }
 })

push() 往数组最后边增加2个成分,成功再次来到当前数组的长度

那就是说vue提供了一些减轻措施

原来本人认为会出来结果,可结果不均等。。

pop() 删除数组的最终一个要素,成功再次回到删除成分的值

应用内置的Vue.$set

图片 2

shift() 删除数组的率先个要素,成功重返删除成分的值

让数组显式的进展某些索引的洞察 Vue.set(array, indexOfItem, newValue)

新生自身想了瞬间,发现了中间的难点,sort方法会调用每一种数组项的toString()方法,获得字符串,然后再对获得的字符串举办排序。sort()方法的参数就起到了遵守,大家把那些参数叫做比较函数。

unshift() 往数组最前头增多2个因素,成功重临当前数组的尺寸

其实是调用了

化解办法

splice() 有四个参数,第二个是想要删除的要素的下标(必选),第四个是想要删除的个数(必选),第四个是剔除
后想要在原来的地方置沟通的值(可选)

Object.defineProperty(array, indexOfItem, {
 enumerable: true,
 configurable: true,
 get() { },
 set(newVal) { }
})

加三个相比函数

sort() 使数组根据字符编码默许从小到大排序,成功再次来到排序后的数组

诸如此类能够手动钦定要求重点的key,那么就能够高达预期的效用。

function sortNumbers(a,b){
    return a-b;
  }

reverse() 将数组倒序,成功重返倒序后的数组

重写了 push, pop, shift, unshift, splice, sort, reverse方法

嗬,怎么结果要么没出来??原来自己是出口的时候忘记吧numbers换到sortNumbers。那是从小到大出口,那么从大到小吗?很轻松正是return b-a,

新兴开掘那一个本该都以javascript本来的格局吗?从前javascript没学好,正好趁这一次把这个方法的用法都给捡回来!

Vue源码

结果如图所示:

您只怕感兴趣的篇章:

  • Vue监听数组变化源码解析
  • Vue 获取数组键名的章程
  • vue数组对象排序的实当代码
  • Vue不可能观测到数组length的变动
  • vue源码学习之Object.defineProperty 对数组监听
  • 浅谈Vue响应式(数组变异方法)
  • vue.js移动数组地点,同不时间立异视图的主意
  • vue检查实验对象和数组的更换加深入分析
const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)

/**
 * Intercept mutating methods and emit events
 */
;[
 'push',
 'pop',
 'shift',
 'unshift',
 'splice',
 'sort',
 'reverse'
]
.forEach(function (method) {
 // cache original method
 const original = arrayProto[method]
 def(arrayMethods, method, function mutator (...args) {
  const result = original.apply(this, args)
  const ob = this.__ob__
  let inserted
  switch (method) {
   case 'push':
   case 'unshift':
    inserted = args
    break
   case 'splice':
    inserted = args.slice(2)
    break
  }
  if (inserted) ob.observeArray(inserted)
  // notify change
  ob.dep.notify()
  return result
 })
})

图片 3

那几个是在Array.__proto__上 举办了艺术重写恐怕增添

完整代码如下:

而且对增添属性的办法如 push,unshift,splice 所增加进去的新属性实行手动观看,源码为

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-for</title>
  <script src="http://www.dongyuqing.com/uploads/allimg/190525/1SP5GG-3.jpg"></script>
</head>
<body>
 <div class="app">
   <h1>v-for实例</h1>
   <hr>
   <ol>
     <li v-for="number in sortNumbers">{{number}}</li>
   </ol>

 </div> 
 <script>
 new Vue({
   el:'.app',
   data:{
     numbers:[5 ,88, 43, 56, 28, 61, 9],

   },
   computed:{
    sortNumbers:function(){
       return this.numbers.sort( sortNumbers);
     },

   }
 });
  function sortNumbers(a,b){
      return a-b;
    }

</script>
</body>
</html>
if (inserted) ob.observeArray(inserted)

数组对象的排序

对上述措施开始展览了手动的进展音信触发

若果数组项是指标,大家须求依附数组项的有个别属性对数组进行排序,要如何是好呢?其实和前边的可比函数也大都。所以自身就只把有个别代码分享出去了。

ob.dep.notify()

哪些对这么些数组举行age排序呢

结论

     students:[
        {name:'cjk',age:'38'} ,
        { name:'xxf',age:'29'},
        {name:'zk',age:'26'},
     ]

vue对数组的length直接退换无法直接进行察看,提供了vue.$set 实行显式观看,并且重写了 push, pop, shift, unshift, splice, sort, reverse方法来进展隐式观察。

比较函数:

如上所述是小编给大家介绍的Vue不能够观测到数组length的生成,希望对大家有所支持,假如我们有此外疑问请给本身留言,小编会及时苏醒我们的。在此也非常感激我们对台本之家网址的扶助!

function sortByKey(array,key){
  return array.sort(function(a,b){
    var x = a[key];
    var y = b[key];
    return((x<y)?-1:((x>y)?1:0));
  })
}

您也许感兴趣的篇章:

  • Vue监听数组变化源码分析
  • 浅析vue.js数组的演进方法
  • Vue 获取数组键名的点子
  • vue数组对象排序的贯彻代码
  • vue源码学习之Object.defineProperty 对数组监听
  • 浅谈Vue响应式(数组变异方法)
  • vue.js移动数组地点,相同的时间更新视图的措施
  • vue检查评定对象和数组的变动解析

此地自个儿是用安慕希函数来推断的,也和下部这些代码效果一样

var compare = function (prop) {
  return function (obj1, obj2) {
    var val1 = obj1[prop];
    var val2 = obj2[prop];if (val1 < val2) {
      return -1;
    } else if (val1 > val2) {
      return 1;
    } else {
      return 0;
    }      
  } 
}

自小编觉着这一个代码有一点糊涂,所以自个儿就用了长富运算符来决断输出。

结果:

图片 4

任何项目文件:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-for</title>
  <script src="http://www.dongyuqing.com/uploads/allimg/190525/1SP5GG-3.jpg"></script>
</head>
<body>
 <div class="app">
   <h1>v-for实例</h1>
   <hr>
   <ol>
     <li v-for="number in sortNumbers">{{number}}</li>
   </ol>
   <hr>
   <ul>
    <li v-for="(student,index) in sortstudents">{{index 1}}:{{student.name}}-{{student.age}}</li>
   </ul>
 </div> 
 <script>
 new Vue({
   el:'.app',
   data:{
     numbers:[5 ,88, 43, 56, 28, 61, 9],
     students:[
        {name:'cjk',age:'38'} ,
        { name:'xxf',age:'29'},
        {name:'zk',age:'26'},
     ]
   },
   computed:{
    sortNumbers:function(){
       return this.numbers.sort( sortNumbers);
     },
     sortstudents:function(){
       return sortByKey(this.students,'age')
     }
   }
 });
function sortNumbers(a,b){
    return a-b;
  }
  //数组对象排序
function sortByKey(array,key){
  return array.sort(function(a,b){
    var x = a[key];
    var y = b[key];
    return((x<y)?-1:((x>y)?1:0));
  })
}
</script>
</body>
</html>

结果:

图片 5

目的在于那篇小说对菜鸟有用,也意在你们能和自己一齐享用文化,一齐成人。也期望我们多多支持脚本之家。

您或然感兴趣的稿子:

  • Vue监听数组变化源码深入分析
  • 浅析vue.js数组的形成方法
  • Vue 获取数组键名的法子
  • Vue不能观测到数组length的变型
  • vue源码学习之Object.defineProperty 对数组监听
  • 浅谈Vue响应式(数组变异方法)
  • vue.js移动数组地点,同一时间立异视图的章程
  • vue检查测试对象和数组的变动深入分析
TAG标签: 韦德娱乐1946
版权声明:本文由韦德娱乐1946_韦德娱乐1946网页版|韦德国际1946官网发布于韦德娱乐1946网页版,转载请注明出处:js数组的多变方法,Vue不能够体察到数组length的浮