240303Note: 金山云 前端 一面

[Geekiter]

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指向该方法所述绑定的对象

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")
	}

})

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. 同步代码1,6
2. 微任务Promise4
3. 宏任务输出

• 微任务
  • 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 <input type='text' value={value} onChange={onChange}/>;
}

12.手写一个自定义hooks
自定义hooks是一种在多个组件之间或者不同项目**享逻辑。
useFormInput自定义Hook

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