如何写好JavaScript(下)| 青训营笔记

88 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第2天。 如何学好JavaScript(下)

需要注意从使用场景来评价所编写的代码是否好用,不能靠感觉来评判代码。

注意一些代码的性能优化,从代码的核心出发,将代码优化的更好。

例子:

交通灯:

优化方法,将原嵌套方法进行抽象化,方便后续的优化。

`const traffic = document.getElementById('traffic');

const stateList = [

  {state: 'wait', last: 1000},

  {state: 'stop', last: 3000},

  {state: 'pass', last: 3000},

];

function start(traffic, stateList){

//开始切换

  function applyState(stateIdx) {

    const {state, last} = stateList[stateIdx];

traffic.className = state;

//当前状态

    setTimeout(() => {

      applyState((stateIdx + 1) % stateList.length);

    }, last)

  }

//使用是递归的方法

  applyState(0);

} start(traffic, stateList);`

如果用过程优化可以使这段代码有更好的灵活性和扩展性。可以方便的用于其他的代码当中去。但是注意有些代码会过度抽象,使代码变得抽象。

(JavaScript的精度位数是54位)

判断是否是4的幂:

`function isPowerOfFour(num){

  num = parseInt(num);

 

  return num > 0 &&

         (num & (num - 1)) === 0 &&

         (num & 0xAAAAAAAAAAAAA) === 0;

} `` //第二个条件是让1的个数少1,能整除4和2的数是只有一个一的 整除4的偶数位上不能是1

num.addEventListener('input', function(){

  num.className = '';

});

 

checkBtn.addEventListener('click', function(){

  let value = num.value;

  num.className = isPowerOfFour(value) ? 'yes' : 'no';

});`

洗牌: sort():是两两交换位置的方法,用这个方法洗牌会让这个牌留在当前位置比与后面一个牌置换的概率要高。这个牌出现在每一个位置的概率是不一样的,所以这个方法是不科学的。

经典的洗牌算法:

 [a1,a2,...ak] // (1...1-k) p= (k-1)/k = 1/(k-1) = 1/k

关于每一张牌在每一个位置的概率是均等的

抽出来的洗牌生成器,只需要洗一部分的牌:          function * draw(cards){

    const c = [...cards];

 

  for(let i = c.length; i > 0; i--) {

    const pIdx = Math.floor(Math.random() * i);

    [c[pIdx], c[i - 1]] = [c[i - 1], c[pIdx]];

    yield c[i - 1];

  }

}

此代码是洗牌的关键。

分红包:(分出来的钱数是需要有一个数字的限制,不能太大,使后面的金额不够分)

         切西瓜法:每一次分为两边,之后,将大的那一个部分继续分,每一次拆分都选择大的值切分。取大的值放在max里面。但是算术复杂度不算理想。分出来的数值是比较均等的。

         抽牌法:列一个数列(1~9999),随机插入k-1个分隔符,然后排序,进行相减就是钱的数量。分出来的值不是很均等,但是空间复杂度比较高。

 

需要根据不同的场景来判断是否需要不一样的代码,每种代码的写法的优缺点都不一样,看场景是需要哪一种,就根据那个方向进行优化。