不定时总结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}`
});
...有新发现了在补充,如果 客观 有不同想法,留下你笔墨!