刷前端面经笔记（十一）

1.栈的压入和弹出

输入两个整数序列，第一个序列表示栈的压入顺序，请判断第二个序列是否可能为该栈的弹出顺序。假设压入栈的所有数字均不相等。例如序列 1,2,3,4,5 是某栈的压入顺序，序列 5,4,3,2,1 或 3,2,1 是该压栈序列对应的一个弹出序列，但 4,3,5,1,2 就不可能是该压栈序列的弹出序列。

function IsPopOrder(pushV,popV){
    if(pushV.length === 0) return false;
    var stack = []; // 模拟栈
    for(var i = 0, j = 0; i < pushV.length;){
        stack.push(pushV[i]);
        i += 1;
        // 压入栈的值需要被弹出
        while(j < popV.length && stack[stack.length-1] === popV[j]){
            stack.pop();
            j++;
            if(stack.length === 0) break;
        }
    }
    return stack.length === 0;
}

2.利用栈模拟队列

思路：

• 对栈 A 添加数据。
• 如果栈 B 为空，循环将栈 A 中内容弹出放入栈 B ，并弹出栈 B 最后一项
• 如果栈 B 不为空，则直接弹出栈 B 的最后一项

var stackA = [];
var stackB = [];

function push(node){
    stackA.push(node);
}
function pop(){
    if(!stackB.length){
        while(stackA.length){
            stackB.push(stackA.pop());
        }
    }
    return stackB.pop();
}

3.连续最长不重复字符串

在一个字符串中找出连续的不重复的最大长度的字符串，解决这类问题的思路：

• 利用循环叠加字符串，直到出现重复为止
• 每一次叠加，记录下来最大长度的字符串

// 连续最长不重复字符串
function getMaxLenStr(str) {
    var cur = [];
    var maxLenStr = '';
    for(var i = 0; i < str.length; i++) {
        if(!cur.includes(str[i])) {
            cur.push(str[i]);
        } else {
            cur = []; // 置为空
            cur.push(str[i]);
        }
        
        // 存储最大长度的字符串
        if(maxLenStr.length < cur.length) {
            maxLenStr = cur.join('');
        }        
    }
    return maxLenStr;
}

getMaxLenStr('ababcabcde'); // abcde

4.求一个数组当中，连续子向量的最大和。

function FindGreatestSumOfSubArray(arr) {
    let sum = arr[0];
    let max = arr[0];
    for(let i = 1; i < arr.length; i++) {
        if(sum < 0) {
            sum = arr[i];
        }else{
            sum += arr[i];
        }
        // 记录最大值
        if(max < sum) {
            max = sum;
        }
    }
    return max;
}

5.给定一个编码字符，按编码规则进行解码，输出字符串

编码规则： coount[letter] ，将 letter 的内容 count 次输出， count 是 0 或正整数， letter 是区分大小写的纯字母。

实例：

• const s= 3[a]2[bc]; decodeString(s) ; // 返回 ‘aaabcbc’
• const s= 3[a2[c]]; decodeString(s); // 返回 ‘ accaccacc’
• const s= 2[ab]3[cd]ef; decodeString(s); // 返回 ‘ababcdcdcdef’

思路：

• 使用栈这种数据结构，如果 push 的内容为 ‘]’ ，则循环 pop 字符，直到碰到 ’[‘ ，然后将 pop 出来的字符串按规则整理后，重新 push 进栈中，最后将栈内的内容拼接成字符串输出即可。

function decodeString(str) {
    let stack = []; // 存储字符串的栈
    for (let i = 0; i < str.length; i++) {
        let cur = str[i];
        if (cur !== ']') {
            stack.push(cur);
        } else { // 弹出
            let count = 0;
            let loopStr = [];
            let popStr = '';
            while ((popStr = stack.pop()) !== '[') {
                loopStr.unshift(popStr);
            }
            count = stack.pop();
            // 添加结果
            let item = '';
            for (let i = 0; i < count; i++) {
                item += loopStr.join('');
            }
            stack.push(...(item.split('')));
        }
    }
    return stack.join('');
}

6.['1', '2', '3'].map(parseInt) 的运行结果

答案为： [1, NaN, NaN]
解析：

• arr.map(function callback(currentValue[, index[, array]]) { // Return element for new_array }[, thisArg])

这个 callback 一共可以接收三个参数，其中第一个参数代表当前被处理的元素，而第二个参数代表该元素的索引。

而 parseInt 则是用来解析字符串的，使字符串成为指定基数的整数。

- parseInt(string, radix)

接收两个参数，第一个表示被处理的值（字符串），第二个表示为解析时的基数。

• parseInt('1', 0) // radix 为 0 时，且 string 参数不以 “0x” 和 “0” 开头时，按照 10 为基数处理。这个时候返回 1
• parseInt('2', 1) //基数为 1 （1进制）表示的数中，最大值小于 2 ，所以无法解析，返回 NaN

- parseInt('3', 2) //基数为 2 （ 2 进制）表示的数中，最大值小于 3 ，所以无法解析，返回 NaN

map 函数返回的是一个数组，所以最后结果为 [1, NaN, NaN]

7.自定义事件

var content = document.querySelector('.content');
    // 自定义事件
    var evt = new Event('custom');
    var customEvt = new CustomEvent('customEvt', {
        // 通过这个属性传递参数
        detail: {
            name: 'tom',
            age: 12
        }
    });
    content.addEventListener('custom', (e) => {
        console.log('自定义事件被触发,无参数...');
        console.log(e);
    });
    content.addEventListener('customEvt', (e) => {
        console.log('自定义事件被触发,有参数...');
        console.log(e);
        console.log(e.detail);
    });
    // 点击时触发这个自定义事件
    content.addEventListener('click', (e) => {
        content.dispatchEvent(evt);
        content.dispatchEvent(customEvt);
    });