前端笔试题

修改原代码，让输出结果为0-9

• 原始数据

for(var i = 0;i < 10;i++){
  setTimeout(()=>{console.log(i)},0) // 打印10次10
}

• 执行代码

<!-- 方案1：let -->

for(let i = 0;i < 10;i++){
  setTimeout(()=>{console.log(i)},0)
}

<!-- 方案2：自执行函数 -->

for(var i = 0;i < 10;i++){
  (function fn (i){
    setTimeout(()=>{console.log(i)},0)
  })(i)
}

<!-- 方案3：bind（） -->

function fn (i){
  console.log(i)
}
for(var i = 0;i < 10;i++){
  setTimeout(fn.bind(null,i),0)
}

冒泡排序

var array = [5, 4, 3, 2, 1];
var temp = 0;
for (var i = 0; i <array.length; i++){
  for (var j = 0; j <array.length - i; j++){
    if (array[j] > array[j + 1]){
      temp = array[j + 1];
      array[j + 1] = array[j];
      array[j] = temp;
    }
  }
}

用js计算1-10000中出现的0 的次数

<!-- 一大步 -->
new Array(10000)
.fill('')
.map((_, index) => index + 1)
.filter(item => /0/.test(item))
.reduce((count, item) => { return count + (String(item).match(/0/g) || []).length}, 0)

<!-- 三小步 -->
// 创建数组填充一万位数字
1. var arr = new Array(10000).fill('').map((item,index)=>index+1 )
// 过滤出来包含0的项
2. var arr_filter = arr.filter(item=>/0/.test(item))
// 使用reduce计算
3. var arr_reduce = arr_filter.reduce((count, item) => { return count + (String(item).match(/0/g) || []).length}, 0)

二维数组降维

var arr = [[1, 2], [3, 4]];
function Jw(obj){
    return Array.prototype.concat.apply([],obj);
}

Jw(arr); // [1, 2, 3, 4]

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

var str = 'a112ccaacsdwdcccacc2cc';
var recordObj = {};
for (var i = 0; i < str.length; i++) { // 次数赋值给对象
  if(!recordObj[(str.charAt(i))]){
    recordObj[(str.charAt(i))] = 1
  }else{
    recordObj[(str.charAt(i))]++
  }
}
var target='';
var leng=0;
for(var i in recordObj){ // 找出值和次数
  if(recordObj[i] > length){
    target = i;
    len = recordObj[i];
  }
}

数组去重

1.循环用includes判断数组是否包含某个值去重
2.用sort排序判断相邻是否相等去重；
3.ES6使用Array.from(new Set(arr))去重
4.ES5两层for循环splice去重
  var arr=[1,2,2,3,1,'a','1','3','b','a'];
  var newarr=[];
  for(var i=0; i<arr.length; i++){
    for(var j=i+1; j<arr.length; j++){
        if(arr[i]===arr[j]){//第一个等同于第二个，splice方法删除第二个
            arr.splice(j,1);
            j--;
        }
    }
  }

JS递归的方式1-100求和

function getReduce (num1,num2,maxNum){
  var num = num1*1 + num2*1;
  if(num2+1 > maxNum){
    return num
  }else{
    // num是前面所有的和 num2+1是下一个数字 maxNum是最大数
    return getReduce(num, num2+1, maxNum)
  }
}
console.log(getReduce(1,2,100)) // 5050

数组降维 + 去重 + 排序

<!-- 原数据 -->
var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];

<!-- 计算 -->
Array.from(new Set(arr.flat(Infinity))).sort((a,b)=>{return a-b})

// 结果：[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]

函数运算包含加减乘除的字符串

<!-- 原始数据 -->
var s = '3+6*7/3-2*2';

<!-- 计算函数 -->
var calculate = function(s) {
  s = s.trim();
  const stack = new Array();
  let preSign = '+';
  let num = 0;
  const n = s.length;
  for (let i = 0; i < n; ++i) {
      if (!isNaN(Number(s[i])) && s[i] !== ' ') {
          num = num * 10 + s[i].charCodeAt() - '0'.charCodeAt();
      }
      if (isNaN(Number(s[i])) || i === n - 1) {
          switch (preSign) {
              case '+':
                  stack.push(num);
                  break;
              case '-':
                  stack.push(-num);
                  break;
              case '*':
                  stack.push(stack.pop() * num);
                  break;
              default:
                  stack.push(stack.pop() / num | 0);
          }   
          preSign = s[i];
          num = 0;
      }
    }
    let ans = 0;
    while (stack.length) {
        ans += stack.pop();
    }
    return ans;
};

<!-- 测试结果 -->
calculate(s) // 13

数组扁平化

<!-- 数据 -->
var data = [
  {
    id: 1,
    title: "课程 1",
    children: [{
      id: 4, 
      title: "课程 1-1" 
    },{
      id: 5,
      title: "课程 1-2",
      children: [{ 
        id: 6, 
        title: "课程 1-2-1" 
      },{ 
        id: 7, 
        title: "课程 1-2-2" 
      }],
    }]
  },{ 
    id: 2, 
    title: "课程 2" 
  },{ 
    id: 3, 
    title: "课程 3" 
  }
];

<!-- 方法 -->
function formateList(currarr){
  var newarr=[];
  currarr.forEach((item,index)=>{
    if(item.children && item.children instanceof Array){
      let temp=item.children;
      delete item.children;
      newarr.push(item);
      newarr=[...newarr,...formateList(temp)]
    }else{
      newarr.push(item)
    }
  })
    return newarr;
}

<!-- 测试结果 -->
formateList(data)

求数组的交集

<!-- 数据 -->
let nums1 = [12,23,34,37,41,67,89,91];
let nums2 = [6,23,33,37,44,67];
var arr = [];

<!-- 查找 -->
nums1.forEach((item)=>{
  nums2.includes(item) ? arr.push(item) : null
})

<!-- 测试结果 -->
console.log(arr);  // [23, 37, 67]

字符串字母里面查找出现次数最多的字母

var str = 'abkckddckakahkjlklylkdlswklokl';
var obj = {};
var maxcount = 0;
var letter;
for(var i = 0;i < str.length;i++){
  if(obj[str[i]]){
    obj[str[i]]++;
  }else{
    obj[str[i]] = 1;
  }
}
for(var key in obj){
  if(obj[key] > maxcount){
    maxcount = obj[key]
    letter = key
  }
}
console.log(letter); // k

实现绑定点击事件打印li的index

<!-- Dom结构 -->
<div id="box">
  <li>第一个</li>
  <li>第2个</li>
  <li>第3个</li>
  <li>第一个</li>
  <li>第5个</li>
  <li>第一个</li>
  <li>第7个</li>
  <li>第一个</li>
  <li>第9个</li>
  <li>第一个</li>
</div>

<!-- JS写法 -->
var box = document.getElementById('box');
var nodelist = Array.prototype.slice.call(
  document.getElementsByTagName('li')
)
box.onclick=function(e){
  console.log(nodelist.indexOf(e.target))
}