乐趣区

2019js基础面试题整理复习

jiezi

由于最近快要秋招，想巩固一下 js 基础知识，整理了一下网上的面试题，以下包括 css、js 和 html

复习整理

html

1.html5 有什么新特性？

 新增语义化标签 <header></header>、<nav></nav> 等

​ 新增用于绘画的 <canvas> 元素

​ 用于媒介回放的 video 和 audio 元素

​ 本地缓存有更好支持（localStorage 和 sessionStorage）

css

1. 简述 flex 布局

flex 布局：弹性布局，设置间距相同的布局、单行单列布局的时候相当好用
display 可以设置为 flex、inline-flex。

设置 display：flex 的时候，子元素的 float、clear、vertical-align 属性都将全部失效。

容器属性：

flex-direction 设置主轴的排列方向，有 row（竖直向下排列）、row-reverse（竖直向上排列）、column（垂直向右排列）、column-reverse（垂直向左排列）

flex-wrap 设置是否排列在一条线上，有 nowrap、wrap 和 warp-reverse 三个选项

flex-flow 是 flex-direction 和 flex-wrap 的简写

justify-content 定义项目在主轴上的对齐方式有 flex-start | flex-end | center | space-between | space-around

align-items 定义交叉轴的对齐方式 flex-start | flex-end | center | baseline | stretch

align-content 定义多跟轴线的对齐方式

项目属性：

align-self（改项目的对齐方式）

order（项目排列顺序）

flex-grow（项目放大比例）

flex-shrink（项目缩小比例）

flex-basis（在分配多余空间时，项目占据的主轴空间）

flex（flex-grow，flex-shrink，flex-basis 的缩写）

2. 简述 grid 布局

​ 网格布局

3. 几种实现水平垂直居中的方法

  • 使用 display：flex，justify-content：center，align-item：center 实现

  • 确定高宽情况下
    .test {

    position: absolute;
margin:auto;
left:0;
top:0;
right:0;
bottom:0;
}，或者
.test {
position: absolute;
margin:auto;
left:50%;
top:50%;
margin-top：-height/50；margin-left：-width/50；}，

  • 不确定高宽
    .test {

    position: absolute;
margin:auto;
left:50%;
top:50%;
transform：translate（-50%，-50%）}，

4. 常见块级元素和内联元素

块级元素：div、form、table、p、h1-h6、dl、li、ul、ol 等
内联元素：a、strong、br、img、i、span、label、input、textarea、select 等

5. position 定位有哪些

​ absolute（绝对定位，相对于值不为 static 的第一个父元素进行定位）

relative（相对定位，相对于其正常位置进行定位）fixed（相对于浏览器窗口进行定位）static（默认值，没有定位，元素出现在正常的流中）inherit（继承父元素 position 属性的值）sticky（relative 和 fixed 的结合体，当元素在屏幕内饰 relative，滚出屏幕时显示为 fixed）

6. css3 的新属性

 1. transfrom（对元素进行旋转、缩放、移动或倾斜）、animation（动画效果）和 transition（添加过渡效             果）2. 三个边框效果：border-radius（创建圆角边框）、border-shadow（阴影）、border-image（使用图片绘制边框）3. 文字效果新增 word-wrap、text-overflow 和 text-shadow，以上等等

7.block、inline 和 inline-block 的区别

  • display：block

    1. block 元素又叫做块级元素，它独占一行，多个 block 元素各占一行。默认情况下 block 元素 宽度自动填满父元素宽度
    2. 可以设置 weight 和 width 属性，块级元素设置了 width 还是独占一行
    3. 可以设置 padding 和 margin 属性
  • display：inline
    1.inline 元素又叫内联元素，不会占一行，多个内联元素会排列在一行，一行排列不下去才会 行，，宽度随元素的内容变化
    2. 设置 width 和 weight 属性无效
    3.inline 元素的 margin 和 padding 属性，水平方向上都能产生边距效果，竖直方向上不会产生 效果

  • display：inline-block

    1. 内联块级元素拥有 inline 元素的多个占据同行特性和 block 元素的设置高度宽度特性和设置 padding 和 margin 特性

8. display：none 和 visiblity：hidden 的区别

​ 为 none 的时候不占空间，为 hidden 的时候隐藏元素依然占据空间

​ 为 none 的会产生回流和重绘，visiblity：hidden 的时候只产生重绘

​ visiblity：hidden 的子孙元素设置 visiblity：hidden 时会失效

9. 什么是 BFC，BFC 用来解决什么问题

格式化上下文：特点是内部的子元素不会影响外部的元素，可以用来解决 margin 穿透和清除浮动

一个块格式化上下文由以下之一创建：

1)根元素或其它包含它的元素
2)浮动元素 (元素的 float 不是 none)
3)绝对定位元素 (元素具有 position 为 absolute 或 fixed)
4)内联块 (元素具有 display: inline-block)
5)表格单元格 (元素具有 display: table-cell，HTML 表格单元格默认属性)
6)表格标题 (元素具有 display: table-caption, HTML 表格标题默认属性)
7)具有 overflow 且值不是 visible 的块元素，8)display: flow-root
9)column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。

10. 盒子模型有哪些，如何设置

iE 盒子模型：内容（content+padding+border）+ 边界 margin 高宽包含 padding 和 border

标准盒子模型：content+padding+border+ 边界 margin 高宽指的是 content

通过 box-sizing：content-box 设置标准盒子模型，box-sizing：border-box 设置 ie 盒子模型

11.css 选择器有哪些

选择器有 id 选择器、元素选择器、属性选择器、类选择器、后代选择器、子元素选择器、相邻兄弟选择器、伪类和伪元素。

js

1. addEventListener 的第三个参数的作用

指定事件是否在捕获或者冒泡阶段执行，true 为在捕获阶段执行，false 默认，在冒泡阶段执行

2. 什么是事件冒泡，什么是事件捕获

事件冒泡指事件从发生的目标开始，沿着文档逐层向上冒泡，到 documnent 为止，事件捕获则相反，从 documnet 开始，沿着文档向下，直到目标事件为止，

3. 如何阻止事件冒泡和事件捕获

ie 下设置 e.cancelBubble = true，在符合 w3c 的浏览器设置 e.stopProgation()阻止事件冒泡，也可以通过 preventDefault 阻止默认行为，因为事件处理的默认行为就是冒泡或者通过 return false

使用 stopImmediatePropagation() 阻止事件捕获，需要注意的是 stopImmediatePropagation() 也能阻止事件冒泡，调用后，不仅父类元素冒泡被阻止，同时该元素绑定的同类事件也会执行

4.typeof 返回的数据类型

string、number、boolean、undefined、object、function

5. 列举三种强制类型转换和 2 种隐式类型转换

强制（parseInt、parseFloat、number）

隐式（== ===）

6.split（）join（）区别

前者将字符串切割成数组形式，后者将数组转为字符串

7. ajax 请求 get 和 post 方法的区别

  1. get 主要是获取资源，post 请求服务器端资源
  2. get 传输数据通过 url，post 通过 http 的 post 机制，将要传输的数据放在请求实体中发送给服务器
  3. get 传输数据量小，post 传输数据量大
  4. get 不安全，post 安全性较高
  5. get 只能支持 ASCII 字符传输，传递中午字符会乱打；post 支持标准字符集，可以传递中文字符

8.call、apply 和 bind 的区别

call 和 apply 都可以改变 this 的指向，区别在于传入 apply 的第二个参数是一个数组，call 后面是对象

bind 后面的参数也是对象，但是 bind 不会立即执行

9.ajax 请求时，如何解析 json 数据

使用 JSON.parse()把 json 数据转化为 js 对象，使用 JSON.Stringify()把 js 对象转化为 json 对象

10. 闭包是什么，有什么特性

闭包就是能够读取函数内部变量的函数，使得函数不被 GC 回收，如果过多使用，就会造成内存泄露

11. 添加 删除 替换 插入到某个节点的方法

  1. 创建新节点

    createElement（）// 创建一个具体元素

    createTextNode（）// 创建一个文本节点

  2. 添加、移除、替换、插入

    appendChild（）// 添加

    removeChild（）// 移除

    replaceChild（）// 替换

    insertBefore（）// 插入

  3. 查找 dom

    getElementsById（）// 通过 id，拿到的是个对象

    getElementsByTagName（）// 通过 标签名称，拿到的是一个数组

    getElementsByName（）// 通过元素的 name 属性获得，拿到的是一个 HTMLCollection 对象，类似于一个集合

    getElementsByClassName（）// 通过 class 获得，拿到的是一个 HTMLCollection 对象，类似于一个集合

12.document load 和 doucment ready 的区别

load 是在结构和样式、外部 js 及图片加载好后执行 js，reade 是在 dom 树创建完成后就执行，是 jquery 里面的方法

13. 函数声明和函数表达式的区别

函数声明在 js 解析时就会进行函数提升，因此在同一作用域中，不管函数声明在哪定义，改函数都可以调用，函数表达式只有在执行到那一块后，才可以调用

14. null 和 undefined 的区别

​ null 表示‘空’的对象，转化为数值是 0，undefined 是一个表示无的原始值，转化为数值是 NAN，

​ 变量为声明，默认是 undefined，null 表示尚不存在的对象

​ undefined 表示为未初始化的变量返回的值，null 表示一个尚不存在的对象返回的值，undefined 可以看做空的变量，null 看做空的对象

15. new 操作符干了什么

  1. 创建了一个空对象。
  2. 把所创建的空对象的_ proto _指向构造函数的 prototype
  3. 执行构造函数中的代码，构造函数中的 this 指向对象
  4. 返回该对象（除非构造函数中返回一个对象或者函数）

16. 实现深度克隆

JSON.parse(JSON.stringify());

17. 什么是同源策略

它是浏览器的一种约定，脚本只允许访问同一站点的资源，协议相同，域名相同，端口号相同，就是同一站点

在浏览器中，<script>、<img> <link> 等标签都可以跨域加载资源，cookie 和 ajax 都不能跨域加载资源

18.ajax 如何跨域

服务器端设置

res.header(‘Access-Control-Allow-Credentials’, true);

res.header(‘Access-Control-Allow-Origin’, ‘*’); // 设置允许所有源访问

res.header(‘Access-Control-Allow-Headers’, ‘content-type’); // 设置请求类型

res.header(‘Access-Control-Allow-Methods’, ‘PUT,POST,GET,DELETE,OPTIONS’); // 设置 允许的方法

res.header(‘X-Powered-By’, ‘ 3.2.1’);

res.header(‘Content-Type’, ‘application/json;charset=utf-8’);

有时间在整理下框架方面的知识，最后祝大家都能找到好工作哈哈哈哈哈。

退出移动版