const arr = reactive(['foo'])

effect(() => {
  console.log(arr[0]) // 'foo'
})
arr[0] = 'bar' // 能够触发响应

const arr = reactive(['foo'])

effect(() => {
  console.log(arr[0]) // 'foo'
})
arr[0] = 'bar' // 能够触发响应

const obj = readonly({ foo: 1 })

obj.foo = 2

// 增加第三个参数isReadonly 代表是否只读，默认为false,即非只读
function createReactive(obj, isShallow = false, isReadonly = false) {
  return new Proxy(obj, {
    // 拦截设置操作
    set(target, key, newVal, receiver) {
      if (isReadonly) {
        console.warn(`属性 ${key}是只读的`)
        return true
      }
      // 先获取旧值
      const oldVal = target[key]
      // type看看操作类型是添加新属性还是设置已有属性
      const type = Object.prototype.hasOwnProperty.call(target, key)
        ? 'SET'
        : 'ADD'
      // 拿到执行结果
      const res = Reflect.set(target, key, newVal, receiver)
      // 如果两者相等，说明receiver是target的代理对象
      if (target === receiver.raw) {
        if (oldVal !== newVal && (oldVal === oldVal || newVal === newVal)) {
          trigger(target, key, type)
        }
      }
      return res
    },
    deleteProperty(target, key) {
      // 如果是只读的，则打印警告信息并返回
      if (isReadonly) {
        console.warn(`属性 ${key}是只读的`)
      }
      // 检查被操作的属性是否是对象自身的属性
      const hadKey = Object.prototype.hasOwnProperty.call(target, key)
      // 使用Reflect.deleteProperty完成属性的删除
      const res = Reflect.deleteProperty(target, key)

      if (res && hadKey) {
        // 只有当被删除的属性是自身属性且成功被删除时，才触发更新
        trigger(target, key, 'DELETE')
      }
      // 返回结果
      return res
    },
  })
}

const obj = reactive({ foo: { bar: 1 } })

effect(() => {
  console.log(obj.foo.bar)
})
obj.foo.bar = 2

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      if (key === 'raw') {
        return target
      }
      track(target, key)

      return Reflect.get(target, key, receiver)
    },
  })
}

const obj = { name: '张三' }
const p = new Proxy(obj, {
  /** ... */
})

effect(() => {
  console.log(p.name)
})

p.name = '张三'

const p = new Proxy(obj, {
  set(target, key, newVal, receiver) {
    // 先获取旧值
    const oldVal = target[key]

    // 看看操作类型是设置已有属性还是添加新属性
    const type = Object.prototype.hasOwnProperty.call(target, key)
      ? 'SET'
      : 'ADD'
    // 拿到执行结果
    const res = Reflect.set(target, key, newVal, receiver)
    // 比较新值与旧值 只要当不全等的时候才会触发响应
    if (oldVal !== newVal) {
      trigger(target, key, type)
    }

    return res
  }
})

effect(() => {
  'foo' in obj
})

const obj = { name: '张三' }

const p = new Proxy(obj, {
  get(target, key, receiver) {
    // 建立联系
    track(target, key)
    // 返回属性值
    return Reflect.get(target, key, receiver)
  },
})

const obj = { name: '张三' }

const p = new Proxy(obj, {
  has(target, key) {
    track(target, key)
    return Reflect.has(target, key)
  },
})

effect(() => {
  'name' in p // 建立依赖关系
})

const p = new Proxy(obj, { /** ... */ })
p.foo

const obj = { foo: 1 }
const p = new Proxy(obj, {
    deleteProperty(target, key) {
        return Reflect.deleteProperty(target, key)
    }
})
console.log(obj.foo) // 1
delete p.foo
console.log(p.foo) // 未定义

obj.name // 读取属性name属性值
obj.name = 'lisi' // 读取和设置属性name的值

const p = new Proxy(obj, {
    get() {
        /*... */
    },
    set() {
        /*... */
    }
})

const fn = (name) => {
    console.log('我是：', name)
}
// 调用函数是对对象的基本操作
fn()

const p2 = new Proxy(fn, {
    appy(target, thisArg, argArray) {
        target.call(thisArg, ...argArray)
    }
})

p2('guozhaoxi') // 输出：'我是：guozhaoxi'

obj.fn()

Reflect.get()
Reflect.set()
Reflect.apply()
// ...

const obj = { count: 1 }
// 直接读取
console.log(obj.count) // 1
//使用Reflect.get读取
console.log(Reflect.get(obj, 'count')) // 1

const obj = { count: 1 }
console.log(Reflect.get('obj', 'count', { count: 2 })) // 输出2 而不是1

const obj = { count: 1 }

const p = new Proxy(obj, {
    get(target, key) {
        track(target, key)

        // 这里没有使用Reflect.get完成读取
        return target[key]
    },
    set(target, key, newVal) {
        // 这里没有使用Reflect.set完成设置
        target[key] = newVal
        trigger(target, key)
    }
})

const obj = {
    foo: 1,
    get bar() {
        return this.foo
    }
}

effect(() => {
    console.log(bar) // 1
})

p.foo++

const obj = {
    foo: 1,
    get bar() {
        // 这里的this指向的是谁
        return this.foo
    }
}

const p = new Proxy(obj, {
    get(target, key) {
        track(target, key)
        return target[key]
    }
})

effect(() => {
    // obj是原始对象，不是代理对象，这样的访问不能建立响应联系
    obj.foo
})

const p = new Proxy(obj,{
    get(target, key, receiver) {
        track(target, key)
        return Reflect.get(obj, key, receiver)
    }
})

p.bar // 代理对象p在读取bar属性

const obj = {
    foo: 1,
    get bar() {
        // 这里的this指向的是代理对象p
        return this.foo
    }
}

let str = 'hello'

str = 'wolrd'

const wrapper = {
  value: 'hello',
}
const name = reactive(wrapper)
name.value // hello
// 修改值可以触发响应
name.value = 'world'

function ref(val) {
  const wrapper = {
    value: val,
  }
  return reactive(wrapper)
}

// 创建原始值的响应式数据
const refVal = ref(1)

effect(() => {
  // 在副作用函数中通过value属性读取原始值
  console.log(refVal.value)
})
// 修改值能够触发副作用函数的重新执行
refVal.value = 2

const refVal1 = ref(1)
const refVal2 = reactive({ value: 1 })

function ref(val) {
  const wrapper = {
    value: val,
  }
  // 使用Object.defineProperty()在wrapper对象上定义一个不可枚举的属性__v_isRef，并且值为true
  Object.defineProperty(wrapper, '__v_isRef', {
    value: true,
  })
  return reactive(wrapper)
}

const twoSum = (nums, target) => {
    // 声明一个map 用来存储
    // 它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
    // Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。
    // 如果你需要“键值对”的数据结构，Map 比 Object 更合适。
    // map.size | map.set() map.get() map.has() map.delete() map.clear()
    // map.keys() | map.entries() | map.values() | map.forEach()
    let map = new Map()
    for (let i = 0; i<nums.length;i++) {
        // 计算target 和数组中每一个元素的差值
        const differenceValue = target - nums[i]
        // 如果map中已经有这个差值了，我们直接拿出来并且找到它的索引，和当前数值的索引，返回出去
        if (map.has(differenceValue)) {
            return [map.get(differenceValue), i]
        }
        // 把数组每一项存进map中去 以值,索引 2， 1 这样的形式存进去
        map.set(nums[i], i)
    }
    return []
}

const isPalindrome = function(x) {
    const arr = String(x).split("")
    for (let i = 0; i<arr.length/2;i++) {
        if (arr[i]!== arr[.length - (i + 1)]) {
            return false
        }
    }
    return true
}

const romanToInt = function(s) {
    const romanMap = {
        'I': 1,
        'V': 5,
        'X': 10,
        'L': 50,
        'C': 100,
        'D': 500,
        'M': 1000,
        'IV': 4,
        'IX': 9,
        'XL': 40,
        'XC': 90,
        'CD': 400,
        'CM': 900
    }
    let result = 0
    const romanSplit = s.match(/(CM)|(CD)|(XC)|(XL)|(IX)|(IV)|(\W)/g)
    for (const v of romanSplit) {
        result+=romanMap[v]
    }
    return result
}

const longestCommonPrefix = function(strs) {
    if (strs.length === 0 || strs === null) {
        return ''
    }
    let prefix = strs[0]
    for (let i = 0; i<prefix.length; i++) {
        let c = prefix.charAt(i)
        for (let j = 0; j < strs.length; j++) {
            if (i === prefix.length || strs[j].charAt(i) !== c) {
                return prefix.substring(0, i)
            }
        }
    }
    return prefix
}

const removeDuplicates = function(nums) {
    if(nums.length === 0) {
        return 0
    }
    let slow = 0
    for (let fast = 0; fast < nums.length; fast++) {
        if (nums[fast] !== nums[slow]) {
            slow++
            nums[slow] = nums[fast]
        }
    }
    return slow + 1
}

const removeElement = function(nums,val) {
    let i = 0
    for (let j = 0; j < nums.length; j++) {
        if (nums[j] !== val) {
            nums[i] = nums[j]
            i++
        }
    }
    return i
}