js面试题

程序员文章站 2022-06-01 16:43:04

...

canvas和svg区别

canvas是html5提供的新元素<canvas> ，是位图，不被浏览器抓取。canvas来做一些统计用的图表，如柱状图曲线图或饼状图。
svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言，是矢量图，无限放大而不会失真，可以和操作dom一样操作，支持事件的绑定。svg用做动态的小图标，和地图。
ECharts 支持以 Canvas、SVG（4.0+）、VML 的形式渲染图表。VML 可以兼容低版本 IE，SVG 使得移动端不再为内存担忧，Canvas 可以轻松应对大数据量和特效的展现。不同的渲染方式提供了更多选择，使得 ECharts 在各种场景下都有更好的表现。

js如何处理两个很大的数相加、

答：用字符串分别处理个位、十位...

js中的异步实现

答promise原理
现在回顾下Promise的实现过程，其主要使用了设计模式中的观察者模式：

通过Promise.prototype.then和Promise.prototype.catch方法将观察者方法注册到被观察者Promise对象中，同时返回一个新的Promise对象，以便可以链式调用。
被观察者管理内部pending、fulfilled和rejected的状态转变，同时通过构造函数中传递的resolve和reject方法以主动触发状态转变和通知观察者。

const promise = new Promise(function(resolve, reject) {
  resolve('ok');
  throw new Error('test');
});
promise
  .then(function(value) { console.log(value) })
  .catch(function(error) { console.log(error) });

你用过 vue 的组件吗？

使用slot分发内容

 Vue.component('mycomponent',{
    template: `<div>这是一个自定义组件</div>`,
    data () {
      return {
        message: 'hello world'
      }
    }
  }

 Vue.component('my-component4', {
     template: `<div>
       <slot :text="hello" message="world"></slot>
     </div>`,
     data () {
       return {
         hello: [1,'2']
       }
     }
   })
//按钮组件

React 组件定义的三种形式

函数式定义的无状态组件
es5原生方式React.createClass定义的组件
es6形式的extends React.Component定义的组件

React 组件

class Alert extends React.Component {
  static propTypes = {
    /**
     * @default 'alert'
     */
    bsPrefix: PropTypes.string,

    /**
     * The Alert visual variant
     *
     * @type('primary'|'secondary'|'success'|'danger'|'warning'|'info'|'dark'|'light')
     */
    variant: PropTypes.string,

    /**
     * Renders a properly aligned dismiss button, as well as
     * adding extra horizontal padding to the Alert.
     */
    dismissible: PropTypes.bool,

    /**
     * Controls the visual state of the Alert.
     *
     * @controllable onClose
     */
    show: PropTypes.bool,

    /**
     * Callback fired when alert is closed.
     *
     * @controllable show
     */
    onClose: PropTypes.func,

    /**
     * Sets the text for alert close button.
     */
    closeLabel: PropTypes.string,

    /** A `react-transition-group` Transition component used to animate the Alert on dismissal. */
    transition: elementType,
  };

  static defaultProps = {
    show: true,
    transition: Fade,
    closeLabel: 'Close alert',
  };

  handleClose = e => {
    this.props.onClose(false, e);
  };

  render() {
    const {
      bsPrefix,
      show,
      closeLabel,
      className,
      children,
      variant,
      dismissible,
      transition: Transition,
      onClose: _,
      ...props
    } = this.props;

    const alert = (
      <div
        role="alert"
        {...(Transition ? props : undefined)}
        className={classNames(
          className,
          bsPrefix,
          variant && `${bsPrefix}-${variant}`,
          dismissible && `${bsPrefix}-dismissible`,
        )}
      >
        {dismissible && (
          <CloseButton onClick={this.handleClose} label={closeLabel} />
        )}
        {children}
      </div>
    );

    if (!Transition) return show ? alert : null;

    return (
      <Transition unmountOnExit {...props} in={show}>
        {alert}
      </Transition>
    );
  }
}

const DecoratedAlert = uncontrollable(
  createBootstrapComponent(Alert, 'alert'),
  {
    show: 'onClose',
  },
);

const DivStyledAsH4 = divWithClassName('h4');

DecoratedAlert.Link = createWithBsPrefix('alert-link', {
  Component: SafeAnchor,
});

DecoratedAlert.Heading = createWithBsPrefix('alert-heading', {
  Component: DivStyledAsH4,
});

vue.js 框架实现原理，钩子函数之类的

你能说说事件监听吗？

这个我也是有准备的，我说大概有两种，一种是主流浏览器的冒泡机制，另一种是 IE8 以前的捕获机制（由于紧张说成了 EI，真的尴尬），反正说了一大堆。

怎么实现事件监听？

这个也是有准备的，我说了 addEventListener （）方法，如何传参数的，还提及了 IE8 以前的 attachEvent （）方法。至于他问了怎么确定哪个子标签发出的事件，我一时忘了说了用 id 来确定。。这里肯定扣分很严重，因为我真的很少用这么底层的方法。（正确答案是回调函数的参数 e 的 target 属性）。

css 中 position 有几种值？

四种 absolute，static，relative，fixed，他具体问了我 absolute 和 relative，这个问的真的很细，他还问了 absolute 的具体使用要求，static 意外，直接的父标签。relative 也很细，是相对于默认位置的偏移。

怎么确定标签内容覆盖的顺序？

z-index 嘛，这个很简单。但是他又来了一句，仅此而已吗？额，还看优先级吧（！ important 之类的）不考虑优先级吗？

编译原理学了什么？

词法分析，语法分析，中间代码生成，代码优化，最终代码生成。

语法分析的过程？做状态机？

（正确答案：自顶向下和自底向上法，具体事 LL 和 LR ）这我真的忘了，一年前的内容啊。

Huffman 树怎么实现的？

哈夫曼（Huffman）树又被称为最优二叉树，是一类带权路径长度最短的数

哪个项目给你留下的印象最深

强调了两点，一个是我从这个项目学到的东西最多，其次我在这个项目中还辅导过前端和后端，并且架构也是我做的（再一次紧张的说成构架...）

手机号正则表示

        var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;

面试官：（你感觉你自己对哪个语言比较熟悉？）

css.html、javascript等比较基础的吧。

有关css动画的。请用CSS动画画一个旋转的三角形。说一下大概用到哪些属性，自己的思路。

#Arrow{
    width:0px;
    height:0px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top:5px solid #fff; 
}

html布局的。说一下自己的大致思路，如何在一个带有下拉框的页面右上角定义一个固定的文本框？

JS有关的----正则表达式。如何判断用户输入手机号是正确的？

针对简历以前写过的一个项目，问了我什么是MVC架构模式？优缺点？问了我个人觉得react是属于哪架构模式？

MVC ，用户操作> View (负责接受用户的输入操作)>Controller（业务逻辑处理）>Model（数据持久化）>View（将结果通过View反馈给用户）.
MVC 模式代表 Model-View-Controller（模型-视图-控制器）模式。这种模式用于应用程序的分层开发。
MVVM是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双喜那个的，因此试图的数据的变化会同事修改数据源，而数据源数据的变化也会立即反应到View上。

优缺点

MVC模式的好处：

1.各施其职，互不干涉

在MVC模式中，三个层各施其职，所以如果一旦哪一层的需求发生了变化，就只需要更改相应的层中的代码而不会影响到其它层中的代码。

2.有利于开发中的分工

在MVC模式中，由于按层把系统分开，那么就能更好的实现开发中的分工。网页设计人员可以进行开发视图层中的JSP，对业务熟悉的开发人员可开发业务层，而其它开发人员可开发控制层。

3.有利于组件的重用

分层后更有利于组件的重用。如控制层可独立成一个能用的组件，视图层也可做成通用的操作界面。

MVC模式的不足

MVC的不足体现在以下几个方面：

(1)增加了系统结构和实现的复杂性。对于简单的界面，严格遵循MVC，使模型、视图与控制器分离，会增加结构的复杂性，并可能产生过多的更新操作，降低运行效率。

(2)视图与控制器间的过于紧密的连接。视图与控制器是相互分离，但确实联系紧密的部件，视图没有控制器的存在，其应用是很有限的，反之亦然，这样就妨碍了他们的独立重用。

(3)视图对模型数据的低效率访问。依据模型操作接口的不同，视图可能需要多次调用才能获得足够的显示数据。对未变化数据的不必要的频繁访问，也将损害操作性能。

(4) 目前，一般高级的界面工具或构造器不支持MVC模式。改造这些工具以适应MVC需要和建立分离的部件的代价是很高的，从而造成使用MVC的困难。

Model（模型） - 模型代表一个存取数据的对象或 JAVA POJO。它也可以带有逻辑，在数据变化时更新控制器。
View（视图） - 视图代表模型包含的数据的可视化。
Controller（控制器） - 控制器作用于模型和视图上。它控制数据流向模型对象，并在数据变化时更新视图。它使视图与模型分离开。

React 和 Vue 有许多相似之处，它们都有：

使用 Virtual DOM
提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。
将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。

JSX vs Templates

在 React 中，所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 JavaScript 的一种语法糖。

使用 JSX 的渲染函数有下面这些优势：

你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面。比如你可以使用临时变量、JS 自带的流程控制、以及直接引用当前 JS 作用域中的值等等。
开发工具对 JSX 的支持相比于现有可用的其他 Vue 模板还是比较先进的 (比如，linting、类型检查、编辑器的自动完成)。

事实上 Vue 也提供了渲染函数，甚至支持 JSX。然而，我们默认推荐的还是模板。任何合乎规范的 HTML 都是合法的 Vue 模板，这也带来了一些特有的优势：

对于很多习惯了 HTML 的开发者来说，模板比起 JSX 读写起来更自然。这里当然有主观偏好的成分，但如果这种区别会导致开发效率的提升，那么它就有客观的价值存在。
基于 HTML 的模板使得将已有的应用逐步迁移到 Vue 更为容易。
这也使得设计师和新人开发者更容易理解和参与到项目中。
你甚至可以使用其他模板预处理器，比如 Pug 来书写 Vue 的模板。

React 组件生命周期

组件的生命周期可分成三个状态：

Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM
生命周期的方法有：

componentWillMount 在渲染前调用,在客户端也在服务端。

componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。

componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。

flex

一。 flex-direction的值有:

row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

二。  justify-content: flex-start | flex-end | center | space-between | space-around
三。 align-items: flex-start | flex-end | center | baseline | stretch
四。 flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse -反转 wrap 排列。
五。  align-content: flex-start | flex-end | center | space-between | space-around | stretch
各个值解析:

stretch - 默认。各行将会伸展以占用剩余的空间。
flex-start - 各行向弹性盒容器的起始位置堆叠。
flex-end - 各行向弹性盒容器的结束位置堆叠。
center -各行向弹性盒容器的中间位置堆叠。
space-between -各行在弹性盒容器中平均分布。
space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
 六。align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

语法
align-self: auto | flex-start | flex-end | center | baseline | stretch

媒体查询

@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
    }
}

css3 过度

transition:width 1s linear 2s;

css3动画

animation:myfirst 5s linear 2s infinite alternate(交替);
@keyframes myfirst
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

Http、Https 和 Socket 的区别与联系

全性上却有很大问题，列举如下：

1.HTTP协议在传输数据时是明文的，任何人通过一个简单的抓包工具，就可以截获到所有传输数据。

2.HTTP协议在传输数据时无法保证数据的完整，在截获到明文数据后，很容易就可以将其篡改，这也是一些网页总是被植入恶意广告的原因。

3.HTTP协议在传输数据时无法保证真实性，这也是最恐怖的一点。误入了域名欺骗的钓鱼网站，极容易对用户带来财产损失。

基于上面3点安全性的考虑，一种更加安全的网络传输协议势必要推行，那就是HTTPS。

  要理解HTTPS协议，首先需要明白什么是SSL/TLS。SSL全称“Secure Sockets Layer”，意思为安全套接层。其实由网景公司为了解决HTTP传输协议在安全方面的缺陷而设计的。后来被标准化，更名为TLS，全称“Transport Layer Security”，意思为传输层安全协议。

    那么现在就好理解了，其实HTTPS就是将HTTP协议与TLS协议组合起来，在不改变HTTP协议原设计的基础上，为其添加安全性校验并对传输的数据进行加密。

二、Socket 连接

要想明白 Socket，必须要理解 TCP 连接。

TCP 三次握手：握手过程中并不传输数据，在握手后服务器与客户端才开始传输数据，理想状态下，TCP 连接一旦建立，在通讯双方中的任何一方主动断开连接之前 TCP 连接会一直保持下去。

Socket 是对 TCP/IP 协议的封装，Socket 只是个接口不是协议，通过 Socket 我们才能使用 TCP/IP 协议，除了 TCP，也可以使用 UDP 协议来传递数据。

gulp优化方案

这就是为什么 substack 写了 watchify 的原因，一个持续监视文件的改动，并且只重新打包必要的文件的 browserify 打包工具。用这种方法，第一次打包的时候可能会还是会花 30 秒，但是后续的编译打包工作将一直保持在 100 毫秒以下 —— 这是一个极大的提升。

loader原理

在解析对于文件，会自动去调用响应的loaderloader 本质上是一个函数，输入参数是一个字符串，输出参数也是一个字符串。当然，输出的参数会被当成是 JS 代码，从而被 esprima 解析成 AST，触发进一步的依赖解析。webpack会按照从右到左的顺序执行loader。

babel的工作原理

babel是一个转译器，感觉相对于编译器compiler，叫转译器transpiler更准确，因为它只是把同种语言的高版本规则翻译成低版本规则，而不像编译器那样，输出的是另一种更低级的语言代码。
此外，还要注意很重要的一点就是，babel只是转译新标准引入的语法，比如ES6的箭头函数转译成ES5的函数；而新标准引入的新的原生对象，部分原生对象新增的原型方法，新增的API等（如Proxy、Set等），这些babel是不会转译的。需要用户自行引入polyfill来解决

为什么虚拟dom会提高性能?

虚拟dom相当于在js和真实dom中间加了一个缓存，利用dom diff算法避免了没有必要的dom操作，从而提高性能。

具体实现步骤如下：

用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中

当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异

把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了。

jquery的几个常用方法

第一部份关键词：

.bind()

.unbind()

.css()

.removeclass

.parent()

.children()

.html()

.hide()

.show()

.attr()

.val()

第二部份关键词：

.find()

vue中所有的钩子函数：

beforeCreate（创建前）
created（创建后）
beforeMount（载入前）
mounted（载入后）
beforeUpdate（更新前）
updated（更新后）
beforeDestroy（销毁前）
destroyed（销毁后）

CI/CD持续集成/持续部署敏捷开发

Vue 性能优化经验总结

https://blog.csdn.net/crazywoniu/article/details/73480344

解决移动端Retina屏幕1px边框问题

https://www.jianshu.com/p/7e63f5a32636

vue组件详解—组件高级用法

一、递归组件
二、内联模板
三、动态组件
四、异步组件

vue高级组件的概念

高阶组件(HOC)是 React 生态系统的常用词汇，React 中代码复用的主要方式就是使用高阶组件，并且这也是官方推荐的做法。而 Vue 中复用代码的主要方式是使用 mixins，并且在 Vue 中很少提到高阶组件的概念，这是因为在 Vue 中实现高阶组件并不像 React 中那样简单，原因在于 React 和 Vue 的设计思想不同，但并不是说在 Vue 中就不能使用高阶组件，只不过在 Vue 中使用高阶组件所带来的收益相对于 mixins 并没有质的变化。https://blog.csdn.net/qq_33834489/article/details/79249088

高阶组件定义

高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。
https://blog.csdn.net/mapbar_front/article/details/79697863

高阶函数

高阶函数就是一个函数，且该函数接受一个函数作为参数，并返回一个新的函数。