写功能时的小技巧

一、数组赋值数组

1、扩展运算符

const arr1 = [1,2,3,4,5,6,7];
const arr2 = [];
arr2 = [...arr1];//[1,2,3,4,5,6,7]

注 ：只针对arr2没有数据的情况下。

2、slice方法

const arr1 = [1,2,3,4,5];
const arr2 = [a,b,c,b];
arr2 = arr1.slice();//[1,2,3,4,5]

3、splice、push结合

const arr1 = [1,2,3,4,5,6,7];
const arr2 = [a,d,c,b];
//先清空arr2
arr2.splice(0,arr2.length);
arr1.forEach(item => arr2.push(item));

二、判断两个数组是否一致

1、sort方法

const arr1 = [a,b,c,d];
const arr2 = [a,d,c,b];
const arr3 = [a,d,c,b]
const isConsisient = function (arr1,arr2) {
	return JSON.stringify(arr1.sort()) === JSON.stringify(arr2.sort());
};
isConsisient(arr1,arr2);//false
isConsisient(arr2,arr3);//true

三、数组中添加时若id重复则覆盖更新，否则新增元素

find、push方法

 const newIt = 数据
 const index = arr.findIndex(item => item.playerID === player.playerID);
  if (index !== -1) {
    // 存在则更新当前项
    arr[index] = newIt;
  } else {
    // 不存在则添加新项
    arr.push(newIt);
  }

四、倒计时代码结构

requestAnimationFrame作用：

①在下一次重绘前调用指定的回调函数，自动适配显示器刷新率(通常为60Hz，即每约16.67ms一次)。
②页面不可见时自动暂停，节省CPU/GPU资源和电池消耗。
③提供高精度时间戳，便于实现基于时间的平滑动画。

requestAnimationFrame代码实现（举例：倒计时器）：

let lastTimestamp;
function animateCountdown(timestamp) {
  if (!lastTimestamp) lastTimestamp = timestamp;
  const elapsed = timestamp - lastTimestamp;
  if (elapsed >= 1000) {
    lastTimestamp = timestamp;
  }
  requestAnimationFrame(animateCountdown);
}
requestAnimationFrame(animateCountdown);

注意点：requestAnimationFrame与setTimeout/setInterval区别：

• 帧率控制方面：

  前者：手动设定时间； 后者：会自动匹配显示器刷新率

• 性能优化方面：

  前者：即使页面不可见也会运行； 后者：页面不可见时自动暂停，节省资源

• 流畅度方面：

  前者：与屏幕刷新不同步，出现卡顿； 后者：与浏览器渲染同步，更流畅

• 性能消耗方面：

  前者：性能消耗较高； 后者：性能消耗较低

五、算法技巧

1、遇到类似棋盘游戏，判断棋子上下左右等方向的元素时

let arr = [...........];//棋盘数组
let t_pos = [x,y];//目标棋子
let dirs = [[-1,0],[1,0],[0,-1],[0,1]];
for([dx,dy] of dirs){
	const newX = t_pos[0]+dx;
    const newY = t_pos[1]+dy;
    //边界处理，别线性搜索超过棋盘的宽度
    if(x>0&&x<arr.length-1&&y>0&&y<arr.length - 1){
    	//这是找到目标棋子的上下左右方向的所有元素
    }
}

2、遇到手动完成数组reverse的类似的需要交换数组的元素时

不要用双for遍历，所有交换错误，用双针遍历
let arr = [1,2,3,4,5];
let c=0,n = arr.length - 1;
while(c<n){
	const temp = arr[c];
    arr[c] = arr[n];
    arr[n] = temp;
	c++;
    n--;
}

注意：本文归作者所有，未经作者允许，不得转载