240303Note: 金山云前端一面

1.flex布局实现垂直置顶，靠右对齐

创建一个容器
设置flex方向

垂直对齐

.container{
display: flex;
align-items: flex-start; 
justify-content: flex-end;
}

水平对齐

2.align-content和align-self的区别

align-content控制的是多行或多列的整体对齐方式，align-self控制的是容器内单个项目的对齐方式 3.箭头函数和普通函数的区别
```
const square = function(x){
return x * x;
}
```

const squareArrow = x => x *x;

- 语法简洁
    - 箭头函数简洁
    - this的绑定，箭头函数不绑定自己的this，捕获上下文的this。function函数有自己的this
    - 构造函数
        - 箭头函数不能作为构造函数，不能使用new，没有自己的this，也没有prototype属性
        - 普通函数可以作为构造函数
    - arguments对象
        - 剪头函数没有自己的arguments对象，但是可以访问外围的函数的arguments对象
        - 普通函数有自己的arguments
    - 返回值
        - 箭头函数允许使用简洁语法直接返回表达式结果，无需使用return
        - 普通函数需要使用return语句返回
4.看了几个题目 说this的指向  
- 全局上下文，this指向的全局对象。在浏览器中，全局对象是window
- 函数调用，当一个函数不作为任何对象调用时，this指向的是全局对象
- 方法调用，当函数作为方法被调用时，this指向该方法所述绑定的对象
```js
const obj = {
    method: function(){
        console.log(this === obj);
    }
};
obj.method();

构造函数调用当一个函数通过new被作为够着函数调用时，this指向新创建的对象
显示绑定
- 通过call，apply，bind方法可以显示的指定this的指向
箭头函数
- 剪头函数不绑定自己的this，会捕获所在上下文的this。 5.了解promise么
Promoise是js中异步编程的一个重要的概念。代表了一种尚未完成但预期将会完成的操作结果。Promise可以处于以下三种状态
- Pending初始状态，也不是成功也不是失败
- Fulfilled成功态，操作成功
- Rejected失败态基本用法创建一个Promise
```
const promise = new Promoise((resolve, reject)=>{
const success = true;
if (success){
resolve("succ")
} else{
reject("failed")
}
```

})


```js
promise.then(
(value)=>{console.log(value);}
(error)=>{console.log(error);}
)

链式调用

promise
.then((value)=>{
    console.log(value);
    return "doing next operation";
})
.then((nextValue)=>{

})
.catch((error)=>{
    console.log(error);
})

错误处理

promise
.then(()=>{

})
.catch((error)=>{

})

优势：

提供一种更优雅的方式来处理异步操作，避免了回调地狱
支持链式调用
同意了异步操作的处理方式

6.看一道promise代码输出题（涉及微任务和宏任务）

console.log("1");

setTimeout(()=>{
    console.log("2");
    Promise.resolve().then(()=>{
        console.log("3");
    })
}, 0);

Promose.resolve().then(()=>{
    console.log("4");
    setTimeout(()=>{
        console.log("5");
    }, 0)

})

console.log("6");

同步代码1,6
微任务Promise4
宏任务输出

微任务
- Promise
宏任务
- setTimeout回调
事件循环
- 同步代卖
- 宏任务加入宏任务队列，微任务加入微任务队列
- 先执行微任务，再执行宏任务

7.写两道题，一道正则，一道时间戳转年月日

function timestampToYMD(timestamp){
    const date = new Date(timestamp);
    const year = date.getFUllYear();
    const month = (date.getMonth() + 1).toString().padStart(2, "0")
    const day = date.getDate().toString().padStart(2, "0");
    return "${year}-${month}-${day}";
}

8.封装一个通用的fetch请求

async function fectchReq(url, options={}){
    const method = options.method || "GET";
    const headers = {
    "Content-Type": "application/json",
    ...options.headers
        }
    const config = {
        method,
        header
    }
    if (method === "POST" && options.body) {
        config.body = JSON.stringify(options.body);
    }
    try{
        const res = await fetch(url, config);
        if(!response.ok){
            throw new Error("HTTP error! status: ${res.status}");
        }
        return await response.json();
    }catch(error){
        throw error;
    }

}

9.说说es6的class和构造函数

function Person(name, age){
    this.name = name;

}

Person.prototype.sayHello = function(){
    console.log("Hello, my name is ${this.name}");
}

const person1 = new Person("Alice", 30);
person1.sayHello()
class Person {
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    sayHello(){
        console.log("Hello, my name is ${this.name}");
    }
}
const person1 = new Person("bob", 25);
person1.sayHello();

对比
- 语法简洁性
- 继承
- 静态方法
- 生命方式 class仍是基于原型，class只是原型模型的一个语法糖

9.手写一个react手动计数组件

import React, {useState} from "react";

funtion Counter(){
    const [count, setCount] = useState(0);
    const increment =()=>{
        setCount(count + 1);
    }
    const decrement=()={
        setCount(count - 1);
    }

    return (
    <div>
    {count}
        <button onClick={increment}>+</button>
        <button onClick={decrement}>-</button>
    </div>
    )

}

export default Counter;

10.点击一个button，另一个button也计数怎么实现
11.实习中哪里用到了状态提升
状态提升是一种数据流管理技术，用于在组件中共享状态。当多个组件需要访问和修改同一个状态时，将状态提升到这些组件的最近共同父组件中，然后通过props将状态和用于修改状态的函数传递到需要他们的子组建中

表单输入同步


import React, {useState} from "react";
import InputComponent from "./InputComponent";

function Form(){ const [inputValue, setInputValue] = useState("");

const handleInputChange = (e) =>{
    setInputValue(e.target.value);
}
return (
...
)

}

function InputComponent({value, onChange}){ return ; }


12.手写一个自定义hooks 
自定义hooks是一种在多个组件之间或者不同项目中共享逻辑。
useFormInput自定义Hook
```js
import {useState} from "react";

function useFormInput(initialValue){
    const [value, setValue] = useState(initialValue);
    const handleChange = (e) => {
        setValue(e.target.value);
    }
    const reset = () => {
        setValue(initialValue);
    }
    return {
        value,
        onChange: handleChange,
        reset
    }

}
export default useFormInput

import React from "react";
import useFormInput from "./useFormInput";

function FormComponent(){
    const name = useFormInput();
    const handleSubmit = (event) => {
        event.preventDefault();
        alert(`a name was submitted: ${name.value}`);
        name.reset()
    }
    return (
        <form onSubmit={handleSubmit}>
            <label>
                <input type="text">
            </label>

        </form>
    )
}

13.函数式组件怎么暴露自己的数据和方法给父组件使用

回调函数
- props
- 父传函数，子传数据
react context
refs

Geekiter / geekiter.github.io

240303Note: 金山云前端一面 #16

Geekiter / geekiter.github.io

240303Note: 金山云 前端 一面 #16

240303Note: 金山云前端一面 #16