前端常见算法总结

1.判断一个字符串是否是回文

1.1 利用Array中的Array.reverse()反转数组的特性

function isPalindRome(str) {

   return str.split('').reverse.join('') === str;

}

1.2 直接将字符串按照倒叙的方式创建一个新的额字符串

function isPalindRome(str) {

   let newStr = '';

   for (let i = str.length - 1; i. = 0; i--) {

      newStr = newStr + str[i]

   }

   return newStr === str;

}

1.3 从字符串的头跟尾开始，一次进行比较，判断是否相等，直至字符串中间

function isPalindRome(str) {

   let length = str.length；

for (let i = 0; i <= Math.floor(length / 2)；i++)
   {

      if (str[i] !== str[length - 1 - i]) {

         return false

      }

   }

   return true;

}


2.数组去重

2.1 利用ES6新增的Set直接进行数组的去重

function deduplicate(arr) {

   return Array.from(new Set(arr))

}

2.2 创建一个新数组，只包含源数组非重复的

function deduplicate(arr) {

   let newArray = [];

   for (ler i
   of
   arr
)
   {

      if (newArray.indexof(i) === -1) {

         newArray.push(i);

      }

   }

   return newArray;

}

2.3

function deduplicate(arr) {

   var hash = {}, newArr = {};

   for (var i = 0; i < arr.length; i++) {

      if (!hash[arr[i]) {

         hash[arr[i]] = true;

         newArr.push(arr[i]);

      }

   }

   return newArr;

}

2.4

function deduplicate(arr) {

   for (var i = 0; i < arr.length; i++) {

      for (var j = 0; j < arr.length; j++) {

         if (arr[i] === arr[j] && i != j) {

            arr.splice（i, 1）

         }

      }

   }

}

3.统计字符串中出现最多次数的字符及次数

function getMaxCount(str) {

   let resultMap = new Map();

   for (let letter of str) {

      if (resultMap.has(letter)) {

         resultMap.set(letter, result.get(letter) + 1)

      } else {

         resultMap.set(letter, 1)

      }

   }

//利用ES6解构，从而可以使用Math.max()

   let maxCount = Math.max(...resultMap.values());

//可能会存在几个字符同时出现次数最多的情况，所以用一个 Array去装这些字符

   resultMap.forEach(（value, key, mapself）=>
   {

      if (value === maxCount) {

         maxCountLetters.push(key);

      }

   }
)
   ;

   return {maxCountLetter: maxCountLetters, maxCount: maxCount}

}

4.生成某个整数范围内的随机数

利用Math.random()这个方法，可以生成0 - 1范围的小数

4.1利用Math.round()进行四舍五入

function randomInt(min, max) {

   return Math.round(Math.random() * (max - min) + min);

}

4.2利用Math.ceil()向上取整
Math.ceil(num)返回比num大的最小整数

function randomRang(mix, max) {

   return Math.ceil(Math.random() * (max - min) + min);

}

4.3利用Math.floor()向下取整
Math.floor(num)返回小于num的最大整数

function randomRang(mix, max) {

   return Math.floor(Math.random() * (max - min) + min);

}

5.二分查找

二分查找的前提是有序数组，该算法的思想是：

1.将需要查找的元素和数组的中间元素做比较，如果相等则返回对应的坐标。否则。

2.如果需要查找的值比中间元素小，则在数组的前半部分继续采用步骤一的方法查找。

3.如果需要查找的值比中间元素大，则在数组的后半部分继续采用步骤一的方法查找。

4.进行递归

5.如果数组中不包含需要查找的元素，返回 - 1。

function binarySeach(target, arr, startIndex, endIndex) {

   let length = arr.length;

   if (target < arr[0] || target > arr[length - 1]) {

      return -1;

   }

   let pivotIndex = startIndex + Math.floor((endIndex - startIndex) / 2);

   let pivot = arr[pivotIndex];

   if (pivot === target) {

      return pivotIndex；

   } else if (target < pivot) {

//递归

      return binarySeach(target, arr, startIndex, pivotIndex - 1);

   } else {

      return binarySeach(target, arr, pivotIndex + 1, endIndex);

   }

}

6.使用闭包获取每个li的index

在ES6之前，由于没有块级作用域，在循环体内创建的函数，常常的不到我们想要的结果。

例如:

   let fun = function () {

      let lists = document.getElementsByTagName('li');

      for (var index = 0, index<
      lists.length;
      i++
   )
      {

         lists[index].onclick = function () {

//点击每一个li，输出的结果都是5

            console.log(`index:${index}`)

         }

      }

   }

上面的fun的这种写法不对的原因：循环中的每次迭代都会共享一个index，循环内部创建的函数都会保留对同一变量的引用，当循环结束的时候，index的值已经变成5了。



解决方案：
1.利用块级作用域

let fun1 = function（）{

   let lists = document.getElementsByTagName('li');

   for (let index of lists) {

      lists[index].onclick = function () {

         console.log(`index:${index}`)

      }

   }

}

2.利用闭包的特性

let fun2 = function () {

   ley
   lists = document.getElemetsByName('li');

   for (var index = 0; index < lists.length; index++) {

      (function (index))
      {

         lists[index].onclick = function () {

            console.log(`index:${index}`)

         }

      }
   )(index)

}

}

7.将数组换成前端更易解析的树状结构的方法

function getTree(data) {

   var newData = [], hash = {};

   for (var i = 0; i < data.length; i++) {

      if (!hash[data[i].province]) {

         hash[data[i].province] = {

            'provice': data[i].provice

         }

         hash[data[i].province]['city'] = [{

            'name': data[i].city,

            'code': data[i].code

         }]

         newData.push(hash[data[i].province);

      } else if (hash[data[i].province == data[i].province) {

         hash[data[i].province]['city'].push({

            'name': data[i].city,

            'code': data[i].code

         })

      }

   }

   return newData;

}

8.不借助临时变量，进行两个整数的交换

8.1 ES6：

[a, b] = [b, a];

8.2 加减法：

a = a - b;
b = a + b;
a = b - a;

8.3 异域

a = a ^ b, b = a ^ b;
a = b ^ a;