var source_array = [1,2,3,4,5]

function shuffle(source_array) {
  var target_array = []
  while(source_array.length) {
    var random_index = Math.floor(Math.random() * source_array.length)
    target_array.push(source_array[random_index])
    source_array.splice(random_index, 1)
    console.log(random_index, source_array)
  }
  return target_array
}

var result = shuffle(source_array)

console.log(result)

var arr1 = [2, 7, 15, 23]
var arr2 = [8, 9, 10, 11]

function sort_2_ordered_array(arr1, arr2) {
  var result = [];
  var index1 = 0, index2 = 0, len1 = arr1.length, len2 = arr2.length
  while (index1 < len1 && index2 < len2) {
      if (arr1[index1] < arr2[index2]) {
        result.push(arr1[index1])
        index1 ++
      } else {
        result.push(arr2[index2])
        index2 ++
      }
  }
  
  while (index1 < len1) {
    result.push(arr1[index1])
    index1 ++
  }
  
  while (index2 < len2) {
    result.push(arr2[index2])
    index2 ++
  }
  
  return result
}

var result = sort_2_ordered_array(arr1, arr2)

console.log(result)

// 在初始化属性时，初始化观察者，并且遍历属性，使其成为响应属性
initState
-> initData
  -> observe(data, true)
    -> new Observer(data)
      -> walk
        -> defineReactive(obj, keys[i])
          -> new Dep () // 一个属性对应一个Dep实例
-> new Watcher (vm, updateComponent, noop) // 运行updateComponent进行求值，updateComponent返回值始终为undefined，由依赖触发其更新
  -> watcher.get() // 执行updateComponent函数，此时第一次运行render

// 渲染函数运行时，触发各个属性的getter
reactiveGetter[ defineReactive ]
  -> dep.depend()
    -> watcher.addDep() // 收集render中用到的各个属性对应的dep，保存到watcher.deps组数中
      -> dep.addSubs() // 此时watcher被收集为订阅者

// 属性发生变更时，触发对应属性的setter
reactiveSetter[ defineReactive ]
  -> dep.notify() // 发布消息
    -> subs[i].update()
      -> queueWatcher
        -> flushSchedulerQueue
          -> watcher.run()

value: any;
dep: Dep;
vmCount: number; // 某个JS对象被作为data的vm个数

observe(data, true)
  -> new Observer(data)
    -> walk to defineReactive


defineReactive
  -> reactiveGetter
    -> dep.depend()
      -> Dep.target.addDep(this)

  -> reactiveSetter
    -> dep.notify()
      -> subs[i].update()
        -> queueWatcher(this)
          -> nextTick
            -> watcher.run()
              -> this.getAndInvoke(this.cb) // 运行expOrFn，收集依赖，执行$watch的回调

vm: Component,
expression: string,
cb: Function,
id: number,
deep: boolean, // 是否监听一个对象内的属性变更
user: boolean, // options default false
computed: boolean, // 监听的是否为计算属性
sync: boolean, // options default false
dirty: boolean,
active: boolean,
dep: Dep,
deps: Array<Dep>, // 用于记录依赖
newDeps: Array<Dep>, // 记录reactiveGetter每次执行获取的依赖，和deps对比，移除不再需要的订阅器
depIds: SimpleSet,
newDepIds: SimpleSet,
before: ?Function,
getter: Function,
value: any

new Watcher(vm, expOrFn, cb, opitons)
  -> this.value = this.get()
    -> pushTarget(this)
    -> value = this.getter.call(vm, vm) // 运行expOrFn，将触发reactiveGetter收集依赖    
    -> popTarget()
    -> this.cleanupDeps()

-> nextTick
-> watcher.run()
  -> this.getAndInvoke(this.cb) // 运行expOrFn，将触发reactiveGetter收集依赖 ，执行$watch的回调

static target: ?Watcher,
id: number,
subs: Array<Watcher>

new Dep()

watcher.update()
  - has <Map> 多次set触发的更新去重
  - circular <Map>
  - index <Number> 当前正在运行中的侦听器队列索引
  - waiting <Boolean> 不同侦听器进行更新操作时，在上个侦听器完成更新之前，等待
  - flushing <Boolean> 是否正在运行队列中的任务
  - queueWatcher(this)
    -> waiting = true
    -> nextTick(flushSchedulerQueue)
      -> flushing = true
      -> queue.sort((a, b) => a.id - b.id)
      -> has[id] = null
      -> watcher.run()
      -> resetSchedulerState()
        -> waiting = flushing = false