9月10日前端学习笔记

今天去了招聘会，和同学聊天，他们说我直接按热门100题的集合去刷比较好。好，我重新开始。

1. 算法题

1.1 最长回文子串

题目描述：给你一个字符串 s，找到 s 中最长的回文子串。

 解法1-暴力解法

使用双重循环遍历字符串，将每个字符i作为回文字符串的起始字符，然后依次添加字符j并判断是不是回文，使用s==s.split("").reverse().join("")来判断。

解法2-中心扩散法

var longestPalindrome = function(s) {
    let res='';
    for(let i=0;i<s.length;i++){
        // 回文子串位奇数
        expandCenter(i,i)
        expandCenter(i,i+1)
    }


    function expandCenter(m,n){
        // 左右元素相等，且不能越界，m左移，n右移
        while(m>=0 && n<s.length && s[m]==s[n]){
            m--;
            n++;
        }
        if(n-m-1>res.length){
            res=s.slice(m+1,n);
        }
    }
    return res;
};

1.2 热门100题-哈希

哈希：hash函数就是根据key计算出应该存储地址的位置，哈希表就是根据关键码的值而直接进行访问的数据结构。

用法：一般哈希表都是用来快速判断一个元素是否出现集合里。目前只接触过hash map。

1.2.1 两数之和

昨天写过了这题，9月9日前端找工作学习-优快云博客

1.2.2 字母异分词分组

题目描述：给你一个字符串数组，请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。字母异位词 是由重新排列源单词的所有字母得到的一个新单词。

解法1：排序

字母异位词的字符串是一样的，只是顺序不同，可以将每个字符串进行排序（先转为数组再排序），然后比较。将排序之后的字符串作为哈希表的键，字母异位词的字符串数组作为值。

var groupAnagrams = function(strs) {
    const map= new Map();  // 初始化一个空的 HashMap map
    for(let str of strs) {
        let array =Array.from(str);  // 转数组
        array.sort();
        let key=array.toString();   //  转字符串
        let list=map.get(key)?map.get(key):new Array();
        list.push(str);
        map.set(key,list)
    }
    return Array.from(map.values());
};

1.2.3 最长连续序列

题目：给定一个未排序的整数数组 nums ，找出数字连续的最长序列（不要求序列元素在原数组中连续）的长度。

请你设计并实现时间复杂度为 O(n) 的算法解决此问题。

思路：需要使用到set集合去重

解法1：去重+排序

先将数组使用set集合进行去重，然后再进行排序，再找出连续的最长序列

var longestConsecutive = function(nums) {
    let max_len=1;
    let curr_len=1;
    if(nums.length == 0){
        return 0
    }
    let new_nums=[...new Set(nums)]
    new_nums.sort((a,b)=>a-b);
    for(let i=0;i<new_nums.length-1;i++){
        if(new_nums[i+1]-new_nums[i]===1){
            curr_len++;
        }else{
            max_len=Math.max(curr_len,max_len)
            curr_len=1
        }
    }
    // 还需要考虑最后的情况
    max_len=Math.max(curr_len,max_len)

    return max_len
};

解法2：去重

var longestConsecutive = function(nums) {
    let new_nums=new Set(nums)
    let max_len=0
    for(let num of new_nums){
        // 说明当前元素是一个连续序列的起点,找到这个序列的长度
        if(!new_nums.has(num-1)){
            let currNum=num;
            let currStreak=1;
            
            // 找到这个序列的长度
            while(new_nums.has(currNum+1)){
                currNum++;
                currStreak++;
            }

            max_len=Math.max(max_len,currStreak)
        }
    }
    return max_len
};

总结

1. 字符串反转

2. for of遍历可迭代对象,JavaScript中的for...of循环的用法详解_javascript for of-优快云博客

3.map，set

// 字符串反转
let str = "hello world";
let newStr = str.split("").reverse().join("");



// for of
const map = new Map([
  ["key1", "value1"],
  ["key2", "value2"],
  ["key3", "value3"],
]);
 
for (const [key, value] of map) {
  console.log(key + " = " + value);
}

const set = new Set([1, 2, 3]);
 
for (const element of set) {
  console.log(element);
}


// map
map.get(key)
map.set(key,value)
map.has(key)
map.size

//set
let array=[1,2,2,2]
const arr=[...new Set(array)]
set.has(key)
set.add(key)
set.clear()

2. 前端八股

前端充电宝公众号-Vue2

1. Vue的基本原理

2. 双向数据绑定原理

3. 使用 Object.defineProperty() 来进行数据劫持有什么缺点

面试鸭-Vue

1. Vue计算属性的函数名和data中的属性名可以同名吗？为什么

2. Vue中的v-show和v-if有什么区别，使用场景分别是什么

3. Vue组件中写name选项有什么作用

4. Vue2.0支持哪个版本以上的IE浏览器

5. 为什么不建议同时使用v-for和v-if

6. 在Vue渲染模板时，如何保留模板的html注释