【前端面经1】京东一面

最新推荐文章于 2024-08-13 11:12:51 发布

ByeByeWorld02

最新推荐文章于 2024-08-13 11:12:51 发布

阅读量986

点赞数 29

文章标签：前端面试

本文链接：https://blog.csdn.net/m0_66681776/article/details/136188580

版权

本文详细介绍了CSS的各种选择器类型，包括类选择器、ID选择器等，探讨了BFC的概念、触发条件和作用，还涵盖了JavaScript的原型链继承、Promise和实现POW的不同方法。

摘要由CSDN通过智能技术生成

题目来源：牛客网

自我介绍

CSS选择器

类选择器
id选择器
标签选择器
分组选择器：用,隔开，一次性选择多个DOM元素
后代选择器：用空格隔开，选择某个标签的所有后代
子代选择器：用div :nth-child(n)表示，选择标签的特定子代
属性选择器：用[]书写，类似div[name="app"]
通用选择器：*选择所有标签
相邻兄弟选择器：用+隔开，选择相邻同级标签
通用兄弟选择器：用~隔开，选择同级标签
父子选择器：用>隔开，选择直系标签
伪类选择器：用:隔开，用于特定样式
为元素选择器：用::隔开，用于特定不存在的元素

CSS单位

相对单位
- 相对字体
  - em：1em等于元素的font-size
  - rem：1rem等于页面根元素的font-size
  - ex：所用字体小写字母x的高度
  - ch：所用字体0的宽度
- 相对视窗
  - vw：视窗宽度的百分比
  - vh：视窗高度的百分比
  - vmax：max(vh,vw)的百分比
  - vmin：min(vh,vw)的百分比
绝对单位
- px：像素，但并不严格等于显示器的像素，在某些情况下可能会缩放
- pt：点，多用于印刷排版，可以忽略分辨率的影响
- pc：派卡，相当于我国新四号铅笔的尺寸，等于16点
- cm：厘米，等于37.8像素
- mm：毫米
- in：英寸，等于96像素
频率单位
- Hz
- kHz
时间单位
- s
- ms
分辨率单位：多用于媒体查询
- dpi
- dpcm
- dppx
角度单位：多用于旋转
- deg
- grad
- rad
- turn
百分比单位
- %

BFC

介绍

全称为块级格式化上下文。BFC是一个完全独立的布局环境，让空间里的子元素的布局不会影响到外界环境

触发条件

overflow: hidden
display: inline-block
position: absolute
poxition: fixed
display: table-cell
display: flex

作用

使Float脱离文档流，解决高度塌缩
解决上下margin边距重叠
实现两栏布局

CSS预处理器

用一种专门的编程语言，为CSS增加一些编程特性，以CSS作为目标生成文件。核心功能围绕嵌套、变量、混入、运算、模块化等

当下流行的有SASS(SCSS)、Less、Stylus等

伪元素选择器、伪类选择器

伪类选择器是用来向某些选择器来添加效果，不修改DOM容器
伪元素选择器是用来将特殊的效果添加在选择器上，可能改变DOM结构，创建了虚拟DOM

z-index

z-index属性指定了元素及其子元素的z顺序，而z顺序会影响层叠时哪个元素在上面显示，通常会覆盖z-index低的那个

JS继承的方式有哪些

原型链继承

function Parent() {
    this.name = "hjh";
}
function Child() {
    this.age = 23;
}
Child.prototype = new Parent();
console.log(new Child());

构造函数继承

function Parent() {
    this.name = "hjh";
}
Parent.prototype.getName = function () {
    return this.name;
}
function Child() {
    Parent.call(this);
    this.type = "child";
}
const child = new Child();
console.log(child);
console.log(child.getName()); // ERROR

组合继承

function Parent() {
    this.name = "hjh";
}
Parent.prototype.getName = function () {
    return this.name;
}
function Child() {
    Parent.call(this);
    this.type = "child";
}
Child.prototype = new Parent();
Child.prototype.constructor = Child;

const child = new Child();

原型式继承

const Parent = {
    name: "hjh",
    getName: function () {
        return this.name;
    }
}
const child = Object.create(Parent);

寄生式继承

const Parent = {
    name: "hjh",
    getName: function () {
        return this.name;
    }
}

function clone(original) {
    const clone = Object.create(original);
    clone.getChild = function () {
        return this.name + "的儿子";
    }
    return clone;
}
const child = clone(Parent);

寄生组合式继承

如何判断是否是类数组，怎么创建一个类数组

使用toString

const obj = {
    id: 1,
    name: "hyq",
    age: 23
};
const arr = [1, 2, 3, 4, 5];

// [object Object]
console.log(Object.prototype.toString.call(obj));
// [object Array]
console.log(Object.prototype.toString.call(arr));

使用isArray

const obj = {
    id: 1,
    name: "hyq",
    age: 23
};
const arr = [1, 2, 3, 4, 5];

// false
console.log(Array.isArray(obj));
// true
console.log(Array.isArray(arr));

使用instanceof

const obj = {
    id: 1,
    name: "hyq",
    age: 23
};
const arr = [1, 2, 3, 4, 5];

// false
console.log(obj instanceof Array);
// true
console.log(arr instanceof Array);

使用constructor属性

const obj = {
    id: 1,
    name: "hyq",
    age: 23
};
const arr = [1, 2, 3, 4, 5];

// false
console.log(obj.constructor === Object);
// true
console.log(arr.constructor === Array);

使用isPrototypeOf

const obj = {
    id: 1,
    name: "hyq",
    age: 23
};
const arr = [1, 2, 3, 4, 5];

// false
console.log(Array.prototype.isPrototypeOf(obj));
// true
console.log(Array.prototype.isPrototypeOf(arr));

如何创建一个原型是null的对象

Object.create(null)

如何用js获取ul中最后一个li

const ul = document.querySelector("ul");
const lis = ul.children;
const li__last = lis[lis.length - 1];

变量提升

变量提升是指咋JS代码执行过程中，JS把变量的声明部分和函数的声明部分提升到代码开头的行为，并把值设置成ubdefined。如果是声明式函数，那么会把声明的函数内容同样提升，使得函数在具体代码运行前就可以使用，但是变量定义的函数就只会设置成undefined

预编译顺序

找变量声明
传递变量实参
找函数声明
自顶向下执行

普通函数的this指向

箭头函数：创建函数时就已确定指向外层this
new: 指向创建的新对象
bind: 多次bind只认第一次
apply/call: 区别只在参数的传递
对象方法: 指向对象
直接调用: 指向全局对象

promise

用于处理回调函数，有三种状态：pending/fulfilled/rejected。

怎么实现POW

function POW(n, k) {
    if (k > 0) {
        return n * POW(n, k - 1);
    } else if (k === 0) {
        return 1;
    } else {
        return 1.0 / POW(n, -k);
    }
}