8.8 虾皮提前批一、14 二面

一面

手撕 

一个盒子 鼠标经过时面积增大，旋转

const objA = { a: 1 };
const objB = { b: 2 };
const arrA = [objA];
const arrB = [objB];
 
const v1 = arrA.concat(arrB);
const v2 = arrA.concat(...arrB);
const v3 = arrA.push(arrB);
const v4 = arrA.push(...arrB);

console.log(v1);
console.log(v2);
console.log(v3);
console.log(v4);

二分查找

数据结构、应用场景    队列、栈

js 数据类型的缺点   -- typescript

csrf 防御

隐藏元素的方法

H5、C3 新方法   语义化标签的意义

flex弹性布局的space-around/space-between

localStorage和sessionStorage

怎么主动删除    与cookie的区别

深拷贝--注意的问题、浅拷贝

二面

 手撕：

1、两类布局，一列固定宽度，一列自适应铺满

2、实现一个红绿灯，定时、循环

定时器 + 嵌套函数：  （效果都是：红、等3s、黄、等2s、绿、等1s 、红循环）

function light(){       
    console.log('red');
    setTimeout(()=>{
        console.log('yellow');
        setTimeout(()=>{
            console.log('green');
            setTimeout(light, 1000)   //嵌套
        }, 2000)
    }, 3000)
}                              

利用Promise + 嵌套函数：

// sleep 函数可以链式调用
function sleep(time) {
    return new Promise((resolve,reject)=>{
        setTimeout(resolve, time)
    })
}

// 嵌套函数
function light() {
    console.log('red');
    sleep(3000).then(() => {
        console.log('yellow');
        return sleep(2000);
    }).then(() => {
        console.log('green');
        return sleep(1000);
    }).then(() => {
        light();
    })
}

aysnc / await

function changeColor(color, t){
    return new Promise((resolve,reject)=>{
        console.log(color);
        setTimeout(resolve,t)
    })
}

async function light() {
    while(1){
        await changeColor('red', 3000);
        await changeColor('yellow', 2000);
        await changeColor('green', 1000);
    }
}

//(用 Promise的链式调用)
function light() {
    changeColor('red', 3000).then(() => {
        return changeColor('yellow', 2000);
    }).then(() => {
        return changeColor('green', 1000);
    }).then(() => {
        light();
    })
}

项目：mock、优化

首屏加载、列表的优化

vue合成API的优点