preface

This article explores Array, and the realization of Vue Array subscript operation responsivity, Vue Array operation can see this article Vue Array operation and source analysis

What is the Array

JavaScript Array objects are global objects used to construct arrays, which are higher-order objects similar to lists.

Arrays are reference data types that can be created using literals and the Array() constructor, which generates an empty Array with length as that argument if the value is passed in as a number.

Array subscript operation

Remark: There’s a little bit of an incident here when I’m writing the example, I’m on The Chrome Console, and I’m done with the code and then I open the folded output, so Chrome should read variable A after I click on which triangle, so it prints the same thing, Nothing to do with Array, nothing to do, just a note, okay

The method of Array

The Array method is already very clear in MDN, so here I will make some understanding and summary

  1. Arrays are also objects, and the prototype objects for arrays areArray.prototypewithlengthProperties.

  1. The subscript of an array is actually a string, as you can see from the above example, so let’s define a possessionlengthObject, and then change the stereotype to Array.prototypeIt is also possible to get an array object, but it is not the same as an array defined using literals or constructors, as can be demonstrated by some examples

As you can see in the figure, we define array A as a literal. We make array A as we did in 1, but when we operate on Length, the property with subscript 10 is not truncated because length changes, but as an object property. The other engines were not tried, because this difference is useless anyway.

  1. The length of the array is zerolengthIt’s not how many elements are in it, of course, the number of elements in the array is less thanlength, using some methods involving array lengths is based onlengthTo operate, for examplepopA pop-up is[length -1]Element, if the subscript element is emptyundefined

Simple implementation of reactive subscript operation in Vue2

As we learned earlier, elements in arrays can be analogous to key-value pairs, and responsivity in Vue sets the property descriptor to the accessor descriptor via Object.defineProperties(). Overrides get() and set() on properties, and listens for subscripts on arrays by reactingthem, overrides get() and set() on subscripts

var Observer = function Observer (value) {
  this.value = value;
  this.dep = new Dep();
  this.vmCount = 0;
  def(value, '__ob__'.this);
  if (Array.isArray(value)) {
    if (hasProto) {
      protoAugment(value, arrayMethods);
    } else {
      copyAugment(value, arrayMethods, arrayKeys);
    }
    // this.observeArray(value);
    this.walkArray(value)
  } else {
    this.walk(value); }}; Observer.prototype.walkArray =function walkArray (obj) {
  obj.forEach((item, index) = > {
    defineReactive$$1(obj, index) // The subscript is reaction-oriented here
  });
}
Copy the code

But length cannot be responsified because the attribute descriptor of Length cannot be modified