ES6里面的怪姿势

不定时总结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};

8·反单引号

     wx.showLoading({
        title: `正在上传:${i}/${arr.length}`
      });

 

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

 

ES6里面的怪姿势

上一篇:nginx 配置遇到问题并解决问题的过程


下一篇:Maven安装