ES6里面的怪姿势
阅读原文时间:2021年06月22日阅读:1

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

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