面试某公司前端（复试二）

1. 根据不同设备尺寸展示不同效果，

   • 手机：屏幕宽度 < 768px，背景为红色；
   • 平板：屏幕宽度 >= 768px, 背景为蓝色；
   • 桌面显示器：屏幕宽度 >= 992px, 背景为绿色；
   • 大型屏幕：屏幕宽度 >= 1200px,背景为黄色；

   // 答案在此填写
   //css
   @media (max-width: 768px) { 
       body{
           background-color: red;
       }
    }
   
   @media (min-width: 768px) { 
       body{
           background-color: blue;
       }
    }
   
   @media (min-width: 992px) { 
       body{
           background-color: green;
       }
    }
    @media (min-width: 1200px) { 
       body{
           background-color: yellow;
       }
    }

2. 用过vuex或者redux吗，如果有，谈谈你使用的经历，它们和 localstorage 有什么区别？

   // 答案在此填写
   用过vuex，当组件间传递数据比较频繁时，特别是兄弟间组件和隔代组件，非常麻烦，vuex统一管理和维护各个vue组件的可变化状态，五个属性分工明确，方便处理数据。
   vuex和localStorage区别
   1.localStorage永久保存，除非主动删除，vuex存储数据刷新丢失；
   2.localStorage主要用于同一网站不同页面传值，vuex用于不同组件间传值；
   3.vuex传递数据源可以响应式变化，而localStorage做不到
   

3. 请从下文找出频率最高的前10个单词

      There are moments in life when you miss someone so much that you just want to pick them from your dreams and hug them for real! Dream what you want to dream;go where you want to go;be what you want to be,because you have only one life and one chance to do all the things you want to do.
   
   　　May you have enough happiness to make you sweet,enough trials to make you strong,enough sorrow to keep you human,enough hope to make you happy? Always put yourself in others’shoes.If you feel that it hurts you,it probably hurts the other person, too.
   
   　　The happiest of people don’t necessarily have the best of everything;they just make the most of everything that comes along their way.Happiness lies for those who cry,those who hurt, those who have searched,and those who have tried,for only they can appreciate the importance of people
   
   　　who have touched their lives.Love begins with a smile,grows with a kiss and ends with a tear.The brightest future will always be based on a forgotten past, you can’t go on well in lifeuntil you let go of your past failures and heartaches.
   
   　　When you were born,you were crying and everyone around you was smiling.Live your life so that when you die,you're the one who is smiling and everyone around you is crying.
   
   　　Please send this message to those people who mean something to you,to those who have touched your life in one way or another,to those who make you smile when you really need it,to those that make you see the brighter side of things when you are really down,to those who you want to let them know that you appreciate their friendship.And if you don’t, don’t worry,nothing bad will happen to you,you will just miss out on the opportunity to brighten someone’s day with this message.

// 答案在此填写 
/*
{word: "you", counts: 32}
{word: "to", counts: 19}
{word: "the", counts: 10}
{word: "who", counts: 10}
{word: "those", counts: 9}
{word: "and", counts: 8}
{word: "have", counts: 7}
{word: "that", counts: 6}
{word: "want", counts: 6}
{word: "make", counts: 6}
*/
const article = '...'
  function findMostWord(article) {
  // 合法性判断
  if (!article) return;
  // 参数处理去除空格，全部转为小写
  article = article.trim().toLowerCase();
  let wordList = article.match(/[a-z]+/g)
  let visited = []
  let wordNum=[] 
  article = " " + wordList.join("  ") + " "; 
  // 遍历判断单词出现次数
  wordList.forEach(function(item) {
    if (visited.indexOf(item) ==-1) {
      // 加入 visited 
      visited.push(item);
      let word = new RegExp(" " + item + " ", "g"),
        num = article.match(word).length;
        const obj = {}
        obj.word=item
        obj.counts=num
        wordNum.push(obj)
    }
  });
  return wordNum.sort((a,b)=>{
    return b.counts-a.counts
  });
}
// 全部排序
const numMax = findMostWord(art)
//前十排序
const wordSolt= numMax.slice(0,10)
console.log(wordSolt)

1. vue组件之间的通信方式有哪些？

   // 答案在此填写
   1.父组件传递数据给子组件:props传递数据;
   2.子组件传递数据给父组件:$emit触发自定义事件，设置子组件ref来获取数据;
   3.兄弟组件传值：EventBus
   4.复杂关系的组件数据传递用vuex
   
   

2. 为什么vue项目渲染数组要用key，而不是数组的自身的索引?

   // 答案在此填写
   当数组元素添加，删除，移动时，原来元素索引和现在元素索引可能有部分不一样，这样导致数据更新错乱。
   假设有数组[A，B，C]，对应key为0,1,2。
   删除B，变为[A,C]，对应key为0,1。
   旧列表B的key为1，新列表C的key为1，C直接复用B就可以了，显然复用出错

3. 单页应用时常会造成样式命名冲突，谈谈你是怎么解决的。

   // 答案在此填写
   1.可以增加标签属性利用属性选择器
   2.通过使用组合器将选择器的描述写得更加精确
   3.若是组件化开发单页面可以利用<style scoped>设置样式
   

4. 有一m*n的网格，左上角为起点，右下角为终点，输入m，n，输出起点到终点的所有路径数。
   以m=3,n=2为例，总共3条路径:

向右 -> 向右 -> 向下
向右 -> 向下 -> 向右
向下 -> 向右 -> 向右

   | 起点 |      |      |
   | ---- | ---- | ---- |
   |      |      | 终点 |

// 答案在此填写
function getRoutCount(m,n){
    if (m == 1 || n == 1){
    return 1
  }
    var total = getRoutCount(m - 1, n) + getRoutCount(m, n - 1);
    return total;
}