ES6里面的怪姿势

2021-06-21 18:33:02 阅读：101 来源： 互联网

标签：姿势 ES6 里面 ... random 40 item let data

不定时总结ES6里面的怪姿势！

1·变量

let url = _rural, method = `post`, loading = true, data = { page,page_size, rd_session},  params = { url, method, loading, data};

tips：在{}中写个变量名，默认为对象！

2·函数

page({
   ...Ani.methods, 
})

tips: ...Ani.methods 代表的方法相当于引入以下函数方法

/* 核心事件 */
    center(x, y,d, o, p){
      let duration = 3000, timingFunction = 'linear', ani = `{"${p}":""}`;
      let animation = wx.createAnimation({
        duration, timingFunction
      });
      return  new Promise(() => {
        animation.translate(x, y).opacity(o).rotate(d).step();
        ani = JSON.parse(ani);
        ani[p] = animation.export();
        this.setData({ani})
      })
    },
    /* 制造随机数值 */ 
    random(id, p) {
      // 转化 成 rpx 值 即 1rpx
      let rpx = 1/wx.getSystemInfoSync().windowWidth*750;
      let x = Math.round(Math.random() * rpx * 300), y = Math.round(Math.random() * rpx * 300);
      // 随机角度的产生
      let deg = this.randomdeg(-180, 180);
      // 获取 目标 view 宽高等值
      wx.createSelectorQuery().select( `#` + id).boundingClientRect( function(r) {
        let w = parseInt( r.width * rpx );
        if( w + x > 375 && y > 750) this.random(id);
        this.center(x, y, deg, 1, p);
      }.bind(this)).exec();
    },
    /* 制造随机角度 */
    randomdeg(minDeg, maxDeg){
      // tips: 角度取值范围[-π, π] 即 [-180, 180],在此范围内的随机数
      switch(arguments.length){ 
        case 1: 
            return parseInt(Math.random()*minDeg+1,10); 
        break; 
        case 2: 
            return parseInt(Math.random()*(maxDeg-minDeg+1)+minDeg,10); 
        break; 
            default: 
                return 0; 
            break; 
    } 
    }, 
    /* 动画循环效果 系列 函数 */ 
    MoveInterval(id, n, p) {
      // 清除 计时器
      clearInterval(this.data.timer);
      // 动画初始
      setTimeout(() => {
        this.random(id,p);
      },0)
      let num = !n ? this.data.num : n;
      // 制造 计时器
      this.data.timer = setInterval( () => {
        num--;
        if(num > 0){
          this.random(id,p);
        }else{
          clearInterval(this.data.timer);
        }
      }, 3000)
    }

3·ES6 里面的 map

    r.lists.map( item => {
        item.latitude = item.lat;
        item.longitude = item.lng;
        item.iconPath = `/images/location_icon.png`;
        item.width = 40;
        item.height = 40;
        markers.push(item);
      });

tips：item.XXX 相当于给数组对象添加新元素

4·ES6 获取数组多个对象中多个键值对

    r.lists.map( item => {
        item.latitude = item.lat;
        item.longitude = item.lng;
        item.iconPath = `/images/location_icon.png`;
        item.width = 40;
        item.height = 40;
        return { /* 你所选择的键 比如 id ,name 等 */}
      });

5·ES6 ... 的妙用

    r.lists.map( item => {
        item.latitude = item.lat;
        item.longitude = item.lng;
        item.iconPath = `/images/location_icon.png`;
        item.width = 40;
        item.height = 40;
        return {...item}；
      });

6·箭头函数比较常用

    fetch(parmas).then( r => {
      console.log(`map:`,r);
      let scenic_list = r.lists, {markers} = this.data;
      r.lists.map( item => {
        item.latitude = item.lat;
        item.longitude = item.lng;
        item.iconPath = `/images/location_icon.png`;
        item.width = 40;
        item.height = 40;
        markers.push(item);
      });

tips：fetch 是我封装的请求函数，里面有箭头函数就直接复制了

7·object 合并

let obj = {...data.list1, ...data.list2};

...有新发现了在补充，如果客观有不同想法，留下你笔墨！

标签：姿势,ES6,里面,...,random,40,item,let,data
来源： https://www.cnblogs.com/herotxl/p/14915090.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

ES6里面的怪姿势