别想她

文章 评论 浏览 27

别想她╰ 2022-05-04 13:55:34
/*
* 已知数据格式,实现一个函数 fn 找出链条中所有的父级 id 
* 实现: 通过es6的class实现,思路:递归调用,下传当前的父辈的id
*/
class FindFather{
    constructor() {
        this.data = this.init(),
        this.target = null;
    }
    dfs(value,data,idArr) {
        var that = this;
        data.forEach((item, index) => {
            item.idArr = idArr.concat(item.id)
            if(item.id === value) {
                this.target = item.idArr;
            }
            if(item.children){
                return this.dfs(value, item.children, item.idArr)
            }
        })
    }
    result() {
        return this.target;
    }
    init() {
        return [{
            id: '1',
            name: 'test1',
            children: [
                {
                    id: '11',
                    name: 'test11',
                    children: [
                        {
                            id: '111',
                            name: 'test111'
                        },
                        {
                            id: '112',
                            name: 'test112'
                        }
                    ]

                },
                {
                    id: '12',
                    name: 'test12',
                    children: [
                        {
                            id: '121',
                            name: 'test121'
                        }
                    ]
                }
            ]
        }];
    }
    
}
var find = new FindFather();
find.dfs('112',find.data, [])
console.log(find.result())  //["1","12","121"]

第 92 题:已知数据格式,实现一个函数 fn 找出链条中所有的父级 id

别想她╰ 2022-05-04 13:52:37

我之前没想通为什么vue会数组方法进行变异,能变异到哪里去,pop()还是pop()呀,看了诸位的回答明白了。vue是通过Object.defineProperty来监听数据的变化,但是这个方法并不能监听数组长度的变化等,所以要对数组进行hack,让vue检测到内部的变化

动态检测数组原型

	/*
	 * not type checking this file because flow doesn't play well with
	 * dynamically accessing methods on Array prototype
	 */

	var arrayProto = Array.prototype;
	var arrayMethods = Object.create(arrayProto);
        var methodsToPatch = [
		'push',
		'pop',
		'shift',
		'unshift',
		'splice',
		'sort',
		'reverse'
	];

	/**
	 * Intercept mutating methods and emit events
	 */
	methodsToPatch.forEach(function(method) {
		// cache original method
		var original = arrayProto[method];
		def(arrayMethods, method, function mutator() {
			var args = [],len = arguments.length;
			while (len--) args[len] = arguments[len];

			var result = original.apply(this, args);
			var ob = this.__ob__;
			var 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
		});
	});

	/**
	 * Observe a list of Array items.
	 */
	Observer.prototype.observeArray = function observeArray(items) {
		for (var i = 0, l = items.length; i < l; i++) {
			observe(items[i]);
		}
	};

这是源码,还不是很理解。
大概意思就是调用数组的原型方法,如果推入了一个对象, 那么会调动observe的方法将对象改成响应式对象,然后再通知观察者进行更新

第 123 题:Vue 是如何对数组方法进行变异的?例如 push、pop、splice 等方法

更多

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文