ES6内置对象Proxy代理数据demo

首先在页面上定义几个按钮并绑定点击事件

<button onclick="asc()">升序</button>
<button onclick="desc()">降序</button>
<button onclick="reset()">重置</button>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

let proxy

window.onload = async function() {
  const data = await $.ajax({type: "GET", url: ""})
  proxy = new Proxy({}, {
    get(target, key) {
      if(key === 'asc') { //升序排序
        return [].concat(data).sort((a, b) => a.name > b.name ? 1 : -1)
      } else if(key === 'desc') { //降序排序
        return [].concat(data).sort((a,b) => b.name > a.name ? 1 : -1)
      } else { //默认
		return data
      }
    }
  })
}

function asc() {
  let a = proxy.asc
  console.log(a)
}

function desc() {
  let b = proxy.desc
}

function reset() {
  let c = proxy.default
}

点击按钮触发函数后执行proxy.asc会触发代理对象的get函数，返回的就是处理完成的数据