অ্যারে পরিবর্তনগুলি কীভাবে দেখবেন?

Question 1

জাভাস্ক্রিপ্টে, ধাক্কা, পপ, শিফট বা সূচক-ভিত্তিক অ্যাসাইনমেন্ট ব্যবহার করে কোনও অ্যারে সংশোধিত করার জন্য কি কোনও উপায় অবহিত করার উপায় আছে? আমি এমন কিছু চাই যা এমন একটি ইভেন্ট আগুন যা আমি পরিচালনা করতে পারি।

আমি watch()স্পাইডারমনকির কার্যকারিতা সম্পর্কে জানি তবে এটি কেবল তখন কার্যকর হয় যখন পুরো ভেরিয়েবলটি অন্য কোনওটিতে সেট করা থাকে।

Question 2

কয়েকটি অপশন আছে...

1. পুশ পদ্ধতিটি ওভাররাইড করুন

দ্রুত এবং নোংরা রুটে গিয়ে আপনি আপনার অ্যারে ^{1 এর} জন্য `পুশ ()` পদ্ধতিটি ওভাররাইড করতে পারেন :

Object.defineProperty(myArray, "push", {
  enumerable: false, // hide from for...in
  configurable: false, // prevent further meddling...
  writable: false, // see above ^
  value: function () {
    for (var i = 0, n = this.length, l = arguments.length; i < l; i++, n++) {          
      RaiseMyEvent(this, n, this[n] = arguments[i]); // assign/raise your event
    }
    return n;
  }
});

_{¹ বিকল্পভাবে, আপনি যদি সমস্ত অ্যারে লক্ষ্যবস্তু করতে চান তবে আপনি ওভাররাইড করতে পারেন Array.prototype.push()। সতর্কতা ব্যবহার করুন, যদিও; আপনার পরিবেশের অন্যান্য কোডগুলি এ জাতীয় পরিবর্তন পছন্দ করতে বা আশা করতে পারে না। এখনও, যদি একটি ক্যাচ-সব শব্দ মর্মস্পর্শী শুধু প্রতিস্থাপন myArrayসঙ্গে Array.prototype।}

এখন, এটি কেবল একটি পদ্ধতি এবং অ্যারে সামগ্রী পরিবর্তন করার প্রচুর উপায় রয়েছে। আমাদের সম্ভবত আরও বিস্তৃত কিছু দরকার ...

2. একটি কাস্টম পর্যবেক্ষণযোগ্য অ্যারে তৈরি করুন

ওভাররাইডিং পদ্ধতিগুলির পরিবর্তে, আপনি নিজের পর্যবেক্ষণযোগ্য অ্যারে তৈরি করতে পারেন। এই নির্দিষ্ট প্রয়োগটি একটি অ্যারেটিকে নতুন অ্যারে-জাতীয় বস্তুতে অনুলিপি করে এবং কাস্টম `পুশ ()`, `পপ ()`, `শিফ্ট ()`, ইউনশিফ্ট () `,` স্লাইস () `, এবং স্প্লাইস সরবরাহ করে ( ) `পদ্ধতিগুলি ** পাশাপাশি ** কাস্টম সূচক অ্যাক্সেসরগুলি (শর্তযুক্ত আকারটি কেবল পূর্বোক্ত পদ্ধতিগুলির মধ্যে একটি বা` দৈর্ঘ্যের সম্পত্তি দ্বারা পরিবর্তিত হয়)।

function ObservableArray(items) {
  var _self = this,
    _array = [],
    _handlers = {
      itemadded: [],
      itemremoved: [],
      itemset: []
    };

  function defineIndexProperty(index) {
    if (!(index in _self)) {
      Object.defineProperty(_self, index, {
        configurable: true,
        enumerable: true,
        get: function() {
          return _array[index];
        },
        set: function(v) {
          _array[index] = v;
          raiseEvent({
            type: "itemset",
            index: index,
            item: v
          });
        }
      });
    }
  }

  function raiseEvent(event) {
    _handlers[event.type].forEach(function(h) {
      h.call(_self, event);
    });
  }

  Object.defineProperty(_self, "addEventListener", {
    configurable: false,
    enumerable: false,
    writable: false,
    value: function(eventName, handler) {
      eventName = ("" + eventName).toLowerCase();
      if (!(eventName in _handlers)) throw new Error("Invalid event name.");
      if (typeof handler !== "function") throw new Error("Invalid handler.");
      _handlers[eventName].push(handler);
    }
  });

  Object.defineProperty(_self, "removeEventListener", {
    configurable: false,
    enumerable: false,
    writable: false,
    value: function(eventName, handler) {
      eventName = ("" + eventName).toLowerCase();
      if (!(eventName in _handlers)) throw new Error("Invalid event name.");
      if (typeof handler !== "function") throw new Error("Invalid handler.");
      var h = _handlers[eventName];
      var ln = h.length;
      while (--ln >= 0) {
        if (h[ln] === handler) {
          h.splice(ln, 1);
        }
      }
    }
  });

  Object.defineProperty(_self, "push", {
    configurable: false,
    enumerable: false,
    writable: false,
    value: function() {
      var index;
      for (var i = 0, ln = arguments.length; i < ln; i++) {
        index = _array.length;
        _array.push(arguments[i]);
        defineIndexProperty(index);
        raiseEvent({
          type: "itemadded",
          index: index,
          item: arguments[i]
        });
      }
      return _array.length;
    }
  });

  Object.defineProperty(_self, "pop", {
    configurable: false,
    enumerable: false,
    writable: false,
    value: function() {
      if (_array.length > -1) {
        var index = _array.length - 1,
          item = _array.pop();
        delete _self[index];
        raiseEvent({
          type: "itemremoved",
          index: index,
          item: item
        });
        return item;
      }
    }
  });

  Object.defineProperty(_self, "unshift", {
    configurable: false,
    enumerable: false,
    writable: false,
    value: function() {
      for (var i = 0, ln = arguments.length; i < ln; i++) {
        _array.splice(i, 0, arguments[i]);
        defineIndexProperty(_array.length - 1);
        raiseEvent({
          type: "itemadded",
          index: i,
          item: arguments[i]
        });
      }
      for (; i < _array.length; i++) {
        raiseEvent({
          type: "itemset",
          index: i,
          item: _array[i]
        });
      }
      return _array.length;
    }
  });

  Object.defineProperty(_self, "shift", {
    configurable: false,
    enumerable: false,
    writable: false,
    value: function() {
      if (_array.length > -1) {
        var item = _array.shift();
        delete _self[_array.length];
        raiseEvent({
          type: "itemremoved",
          index: 0,
          item: item
        });
        return item;
      }
    }
  });

  Object.defineProperty(_self, "splice", {
    configurable: false,
    enumerable: false,
    writable: false,
    value: function(index, howMany /*, element1, element2, ... */ ) {
      var removed = [],
          item,
          pos;

      index = index == null ? 0 : index < 0 ? _array.length + index : index;

      howMany = howMany == null ? _array.length - index : howMany > 0 ? howMany : 0;

      while (howMany--) {
        item = _array.splice(index, 1)[0];
        removed.push(item);
        delete _self[_array.length];
        raiseEvent({
          type: "itemremoved",
          index: index + removed.length - 1,
          item: item
        });
      }

      for (var i = 2, ln = arguments.length; i < ln; i++) {
        _array.splice(index, 0, arguments[i]);
        defineIndexProperty(_array.length - 1);
        raiseEvent({
          type: "itemadded",
          index: index,
          item: arguments[i]
        });
        index++;
      }

      return removed;
    }
  });

  Object.defineProperty(_self, "length", {
    configurable: false,
    enumerable: false,
    get: function() {
      return _array.length;
    },
    set: function(value) {
      var n = Number(value);
      var length = _array.length;
      if (n % 1 === 0 && n >= 0) {        
        if (n < length) {
          _self.splice(n);
        } else if (n > length) {
          _self.push.apply(_self, new Array(n - length));
        }
      } else {
        throw new RangeError("Invalid array length");
      }
      _array.length = n;
      return value;
    }
  });

  Object.getOwnPropertyNames(Array.prototype).forEach(function(name) {
    if (!(name in _self)) {
      Object.defineProperty(_self, name, {
        configurable: false,
        enumerable: false,
        writable: false,
        value: Array.prototype[name]
      });
    }
  });

  if (items instanceof Array) {
    _self.push.apply(_self, items);
  }
}

(function testing() {

  var x = new ObservableArray(["a", "b", "c", "d"]);

  console.log("original array: %o", x.slice());

  x.addEventListener("itemadded", function(e) {
    console.log("Added %o at index %d.", e.item, e.index);
  });

  x.addEventListener("itemset", function(e) {
    console.log("Set index %d to %o.", e.index, e.item);
  });

  x.addEventListener("itemremoved", function(e) {
    console.log("Removed %o at index %d.", e.item, e.index);
  });
 
  console.log("popping and unshifting...");
  x.unshift(x.pop());

  console.log("updated array: %o", x.slice());

  console.log("reversing array...");
  console.log("updated array: %o", x.reverse().slice());

  console.log("splicing...");
  x.splice(1, 2, "x");
  console.log("setting index 2...");
  x[2] = "foo";

  console.log("setting length to 10...");
  x.length = 10;
  console.log("updated array: %o", x.slice());

  console.log("setting length to 2...");
  x.length = 2;

  console.log("extracting first element via shift()");
  x.shift();

  console.log("updated array: %o", x.slice());

})();

স্নিপেট প্রসারিত করুন

_{রেফারেন্সের জন্য দেখুন ।Object.defineProperty()}

এটি আমাদের কাছাকাছি পৌঁছেছে কিন্তু এটি এখনও বুলেট প্রুফ নয় ... যা আমাদের এনেছে:

3. প্রক্সি

একটি প্রক্সি অবজেক্ট আধুনিক ব্রাউজারে অন্য একটি সমাধান সরবরাহ করে । এটি আপনাকে মেথড কল, অ্যাকসেসর ইত্যাদি রোধ করতে দেয় সবচেয়ে গুরুত্বপূর্ণ, আপনি কোনও স্পষ্টত সম্পত্তি নাম না দিয়েই এটি করতে পারেন ... যা আপনাকে স্বেচ্ছাসেবী, সূচক-ভিত্তিক অ্যাক্সেস / অ্যাসাইনমেন্টের জন্য পরীক্ষা করতে দেয় allow এমনকি সম্পত্তি মুছে ফেলার ক্ষেত্রেও বাধা দিতে পারেন। প্রক্সিগুলি কার্যকরভাবে আপনাকে পরিবর্তনের অনুমতি দেওয়ার সিদ্ধান্ত নেওয়ার আগে এটি পরিদর্শন করার অনুমতি দেয় ... সত্যতার পরে পরিবর্তনটি পরিচালনা করার পাশাপাশি।

এখানে একটি প্রত্যাহার নিচে নমুনা:

(function() {

  if (!("Proxy" in window)) {
    console.warn("Your browser doesn't support Proxies.");
    return;
  }

  // our backing array
  var array = ["a", "b", "c", "d"];

  // a proxy for our array
  var proxy = new Proxy(array, {
    apply: function(target, thisArg, argumentsList) {
      return thisArg[target].apply(this, argumentList);
    },
    deleteProperty: function(target, property) {
      console.log("Deleted %s", property);
      return true;
    },
    set: function(target, property, value, receiver) {      
      target[property] = value;
      console.log("Set %s to %o", property, value);
      return true;
    }
  });

  console.log("Set a specific index..");
  proxy[0] = "x";

  console.log("Add via push()...");
  proxy.push("z");

  console.log("Add/remove via splice()...");
  proxy.splice(1, 3, "y");

  console.log("Current state of array: %o", array);

})();

স্নিপেট প্রসারিত করুন

Question 3

এখানে সমস্ত উত্তর পড়া থেকে, আমি একটি সরলিকৃত সমাধান একত্রিত করেছি যা কোনও বাহ্যিক গ্রন্থাগারের প্রয়োজন হয় না।

এটি পদ্ধতির জন্য সাধারণ ধারণাটি আরও ভালভাবে চিত্রিত করে:

function processQ() {
   // ... this will be called on each .push
}

var myEventsQ = [];
myEventsQ.push = function() { Array.prototype.push.apply(this, arguments);  processQ();};

Question 4

আমি নিম্নলিখিতগুলি পেয়েছি যা এটি সম্পাদন করে বলে মনে হচ্ছে: https://github.com/mennovanslooten/Observable-Ararays

পর্যবেক্ষণযোগ্য-অ্যারেগুলি আন্ডারস্কোর প্রসারিত করে এবং নিম্নলিখিত হিসাবে ব্যবহার করা যেতে পারে: (সেই পৃষ্ঠা থেকে)

// For example, take any array:
var a = ['zero', 'one', 'two', 'trhee'];

// Add a generic observer function to that array:
_.observe(a, function() {
    alert('something happened');
});

Question 5

অ্যারে পরিবর্তনগুলি শুনতে আমি নিম্নলিখিত কোডটি ব্যবহার করেছি।

/* @arr array you want to listen to
   @callback function that will be called on any change inside array
 */
function listenChangesinArray(arr,callback){
     // Add more methods here if you want to listen to them
    ['pop','push','reverse','shift','unshift','splice','sort'].forEach((m)=>{
        arr[m] = function(){
                     var res = Array.prototype[m].apply(arr, arguments);  // call normal behaviour
                     callback.apply(arr, arguments);  // finally call the callback supplied
                     return res;
                 }
    });
}

আশা করি এটি কার্যকর ছিল :)

Question 6

সবচেয়ে upvoted ওভাররাইড ধাক্কা পদ্ধতি @canon দ্বারা সমাধান কিছু পার্শ্ব প্রতিক্রিয়া যে আমার ক্ষেত্রে অসুবিধাজনক ছিল আছে:

এটি পুশ সম্পত্তি বর্ণনাকারীকে আলাদা করে তোলে ( writableএবং পরিবর্তে configurableসেট trueকরা উচিত false), যা পরবর্তী সময়ে ব্যতিক্রম ঘটায়।
এটি push()একাধিকবার আর্গুমেন্ট (যেমন myArray.push("a", "b")) দিয়ে একবার ডাকা হয় যখন ঘটনাটি একাধিকবার উত্থাপিত করে , যা আমার ক্ষেত্রে অপ্রয়োজনীয় এবং অভিনয় জন্য খারাপ ছিল।

সুতরাং এটি আমি সেরা সমাধানটি খুঁজে পেতে পারি যা পূর্ববর্তী সমস্যাগুলিকে সংশোধন করে এবং আমার মতে পরিষ্কার / সরল / বুঝতে সহজ।

Object.defineProperty(myArray, "push", {
    configurable: true,
    enumerable: false,
    writable: true, // Previous values based on Object.getOwnPropertyDescriptor(Array.prototype, "push")
    value: function (...args)
    {
        let result = Array.prototype.push.apply(this, args); // Original push() implementation based on https://github.com/vuejs/vue/blob/f2b476d4f4f685d84b4957e6c805740597945cde/src/core/observer/array.js and https://github.com/vuejs/vue/blob/daed1e73557d57df244ad8d46c9afff7208c9a2d/src/core/util/lang.js

        RaiseMyEvent();

        return result; // Original push() implementation
    }
});

আমার উত্সগুলির জন্য এবং কীভাবে পুশ ছাড়াও অন্যান্য পরিবর্তনকারী ফাংশনগুলি প্রয়োগ করতে হবে তার ইঙ্গিতগুলির জন্য দয়া করে মন্তব্যগুলি দেখুন: 'পপ', 'শিফট', 'আনশিফ্ট', 'স্প্লাইস', 'সাজান', 'বিপরীত'।

Question 7

if (!Array.prototype.forEach)
{
    Object.defineProperty(Array.prototype, 'forEach',
    {
        enumerable: false,
        value: function(callback)
        {
            for(var index = 0; index != this.length; index++) { callback(this[index], index, this); }
        }
    });
}

if(Object.observe)
{
    Object.defineProperty(Array.prototype, 'Observe',
    {
        set: function(callback)
        {
            Object.observe(this, function(changes)
            {
                changes.forEach(function(change)
                {
                    if(change.type == 'update') { callback(); }
                });
            });
        }
    });
}
else
{
    Object.defineProperties(Array.prototype,
    { 
        onchange: { enumerable: false, writable: true, value: function() { } },
        Observe:
        {
            set: function(callback)
            {
                Object.defineProperty(this, 'onchange', { enumerable: false, writable: true, value: callback }); 
            }
        }
    });

    var names = ['push', 'pop', 'reverse', 'shift', 'unshift'];
    names.forEach(function(name)
    {
        if(!(name in Array.prototype)) { return; }
        var pointer = Array.prototype[name];
        Array.prototype[name] = function()
        {
            pointer.apply(this, arguments); 
            this.onchange();
        }
    });
}

var a = [1, 2, 3];
a.Observe = function() { console.log("Array changed!"); };
a.push(8);

Question 8

এটি একেবারে সমস্ত কিছু কভার করে কিনা তা নিশ্চিত নন তবে অ্যারেতে কোনও উপাদান যুক্ত রয়েছে তা সনাক্ত করতে আমি এই জাতীয় কিছু (বিশেষত ডিবাগিংয়ের সময়) ব্যবহার করি:

var array = [1,2,3,4];
array = new Proxy(array, {
    set: function(target, key, value) {
        if (Number.isInteger(Number(key)) || key === 'length') {
            debugger; //or other code
        }
        target[key] = value;
        return true;
    }
});

Question 9

একটি আকর্ষণীয় সংগ্রহ গ্রন্থাগারটি https://github.com/mgesmundo/smart-colલેક્શન । আপনাকে অ্যারে দেখতে এবং সেগুলিতেও ভিউ যুক্ত করতে দেয়। আমি নিজেই এটি পরীক্ষা করে নিচ্ছি বলে পারফরম্যান্স সম্পর্কে নিশ্চিত নই। শীঘ্রই এই পোস্ট আপডেট করা হবে।

Question 10

আমি চারপাশে ঝাঁকুনি এবং এই নিয়ে এসেছি। ধারণাটি হ'ল এই অবজেক্টটিতে সমস্ত অ্যারে.প্রোটোটাইপ পদ্ধতি সংজ্ঞায়িত করা হয়েছে তবে সেগুলি একটি পৃথক অ্যারে অবজেক্টে চালিত করে। এটি শিফ্ট (), পপ () ইত্যাদির মতো পদ্ধতিগুলি পর্যবেক্ষণ করার ক্ষমতা দেয় যদিও কনক্যাট () এর মতো কিছু পদ্ধতি OArray অবজেক্টটি ফিরিয়ে দেয় না। যদি অ্যাক্সেসর ব্যবহার করা হয় তবে এই পদ্ধতিগুলিকে ওভারলোডিং অবজেক্টটিকে পর্যবেক্ষণযোগ্য করে তুলবে না। পরবর্তীটি অর্জনের জন্য, এক্সেসারগুলি প্রদত্ত ক্ষমতার মধ্যে প্রতিটি সূচকের জন্য সংজ্ঞায়িত করা হয়।

পারফরম্যান্স অনুযায়ী ... প্লে অ্যারে অবজেক্টের তুলনায় ওআরারি প্রায় 10-25 গুণ কম ধীর। 1 - 100 ব্যাপ্তির ক্যাপাসিটির জন্য পার্থক্যটি 1x-3x।

class OArray {
    constructor(capacity, observer) {

        var Obj = {};
        var Ref = []; // reference object to hold values and apply array methods

        if (!observer) observer = function noop() {};

        var propertyDescriptors = Object.getOwnPropertyDescriptors(Array.prototype);

        Object.keys(propertyDescriptors).forEach(function(property) {
            // the property will be binded to Obj, but applied on Ref!

            var descriptor = propertyDescriptors[property];
            var attributes = {
                configurable: descriptor.configurable,
                enumerable: descriptor.enumerable,
                writable: descriptor.writable,
                value: function() {
                    observer.call({});
                    return descriptor.value.apply(Ref, arguments);
                }
            };
            // exception to length
            if (property === 'length') {
                delete attributes.value;
                delete attributes.writable;
                attributes.get = function() {
                    return Ref.length
                };
                attributes.set = function(length) {
                    Ref.length = length;
                };
            }

            Object.defineProperty(Obj, property, attributes);
        });

        var indexerProperties = {};
        for (var k = 0; k < capacity; k++) {

            indexerProperties[k] = {
                configurable: true,
                get: (function() {
                    var _i = k;
                    return function() {
                        return Ref[_i];
                    }
                })(),
                set: (function() {
                    var _i = k;
                    return function(value) {
                        Ref[_i] = value;
                        observer.call({});
                        return true;
                    }
                })()
            };
        }
        Object.defineProperties(Obj, indexerProperties);

        return Obj;
    }
}

Question 11

আমি আপনাকে দেশীয় প্রোটোটাইপগুলি বাড়ানোর পরামর্শ দেব না। পরিবর্তে, আপনি নতুন-তালিকার মতো একটি লাইব্রেরি ব্যবহার করতে পারেন; https://github.com/azer/new-list

এটি একটি নেটিভ জাভাস্ক্রিপ্ট অ্যারে তৈরি করে এবং আপনাকে যে কোনও পরিবর্তনের জন্য সাবস্ক্রাইব করতে দেয়। এটি আপডেটগুলি ব্যাচ করে এবং আপনাকে চূড়ান্ত পার্থক্য দেয়;

List = require('new-list')
todo = List('Buy milk', 'Take shower')

todo.pop()
todo.push('Cook Dinner')
todo.splice(0, 1, 'Buy Milk And Bread')

todo.subscribe(function(update){ // or todo.subscribe.once

  update.add
  // => { 0: 'Buy Milk And Bread', 1: 'Cook Dinner' }

  update.remove
  // => [0, 1]

})