前端面试基础题-css/html/javascript/es6/ajax

• 1、html5中的新特性
  语义化标签：article、footer、header、nav、section…
  表单控件：date、time、email、url、search(input框type的取值)
  音视频：video、audio
  画布：canvas
  本地离线存储：localStorage

• 2、css3新增属性
  边框：border-radius【边框圆角】、box-shadow【边框阴影】
  背景：background-size【背景图片的尺寸】
  background-size:100% 100%;
  文本：text-shadow【文本阴影】
  text-shadow: 5px 5px 5px yellow; [水平距离、垂直距离、模糊距离、颜色]
  变换：transfrom
  过渡：transition
  动画：animation
  设置关键帧
  @keyframes animate {
  0%{
  margin-left:0px;
  }
  50%{
  margin-left:10px;
  }
  100%{
  margin-left:20px;
  }
  }
  使用动画
  div{
  animation:animate 3s infinite;
  }
  ===>
  animation-name:animate; 【动画名称】
  animation-duration:3s; 【动画时间】
  animation-iteration-count:infinite; 【动画次数】
  animation-direction 【动画方向】

   IE9之前的版本不支持动画
  

• 3、清除浮动的方式
  什么是浮动？
  元素使用了float:left/right；后，会脱离文档流，父元素因此会失去支撑(如果父元素中没有其他元素，并且没有设置宽高)，下面的元素就会紧贴着父元素上方的元素开始布局
  常用方式：
  1) 浮动元素的父元素
  overflow:hidden;
  2) 浮动元素的父元素
  .parent::after{
  clear:both;
  content:’’;
  display:block;
  }
  3) 浮动元素的兄弟元素(同级元素)
  添加一个空标签，设置clear:both;

• 4、浮动与绝对定位脱离文档流的区别【脱离文档流的元素内的文本】
  float:left/right
  其他的盒子会无视当前的盒子，从页面的左上方开始布局，但是对于盒子内的文本，依旧会为浮动的元素让出空间
  绝对定位：
  其他的盒子会无视当前的盒子，从页面的左上方开始布局，但是对于盒子内的文本，不会为浮动的元素让出空间
  参考：https://blog.csdn.net/qq_42720683/article/details/98513061

• 5、盒子模型
  盒子组成
  内容的width + padding + border + margin
  通过box-sizing可以设置不同的盒子模型
  box-sizing:content-box; 【默认值】 – 气球
  内容盒子(W3C标准盒子)
  盒子的总宽度 = margin + border + padding + width

   box-sizing:border-box;  --  铁盒子
       边框盒子(IE盒子)
       盒子的总宽度 = margin + width
  

  参考：https://blog.csdn.net/qq_42720683/article/details/83584970

• 6、块级元素与行内元素的区别
  块级元素
  div、h1~h5、p、html、body、ul、li…
  1) 独占一行
  2) 默认宽度为100%，默认的高度由内容决定
  3) 可以指定宽高

  行内元素
  span、a、img、strong、i
  1) 不独占一行，与其他元素共享一行
  2) 默认宽高由内容决定
  3) 不能指定宽高
  4) 行内元素不可以嵌套块级元素，但是块级元素可以嵌套行内元素

• 7、如何给行内元素设置宽高？ 将行内元素转换为块级元素、脱离文档流

  1. 使用display
     display:block/inline-block
  2. 使用position
     position:absolute/fixed
  3. 使用float
     float:left/right

• 8、块级元素如何在父元素中水平垂直居中？

  1. 父元素position
     1.
     父元素position:relative;
     子元素
     position:absolute;
     margin:auto;
     top:0;
     right:0;
     bottom:0;
     left:0;
     2.
     父元素position:relative;
     子元素
     position:absolute;
     left:50%;
     top:50%;
     margin-left:-子元素宽度的一半;
     margin-top:-子元素高度的一半;

  2. 父元素display
     *3.
     父元素
     display:flex;
     justify-content: center;
     align-items: center;
     子元素
     自动水平垂直居中
     4.
     父元素
     display:table-cell;
     vertical-align: middle;
     子元素
     display:inline-block;

  参考：https://blog.csdn.net/qq_42720683/article/details/83348894

• 9、元素隐藏的方式及其区别
  display:none; 浏览器不显示元素，也不占据页面空间
  opacity:0; 浏览器不显示元素，但是会占据页面空间，交互事件正常
  visibility:hidden; 浏览器不显示元素，但是会占据页面空间，交互事件失效
  
  123
  

  注意：当父元素使用opacity改变透明度的时候，子元素也会改变透明度，即使子元素设置了opacity: 1;也无效
  解决方法：父元素使用rgba(0,0,0,0.4)

• 10、link和@import的区别

  1. 所属范围
     @import 是css的语法，只能导入样式
     link是html的标签，不仅可以加载样式，还可以定义rel属性
     rel="stylesheet"表示调用外部样式表
  2. 加载顺序
     页面加载的时候，link标签引入的css被同时加载
     @import引入的css在页面加载完毕后再被加载
  3. 兼容性
     @import需要兼容IE5+
     link标签，不存在兼容性问题

• 11、如何让一个元素使用margin:0 auto;水平居中
  margin:0 auto只对块级元素生效

  1. 块级元素【只用设置宽度】
     div {
     width:200px;
     margin:0 auto;
     }
  2. 行内元素【需要将行内元素设置为块级元素，再加宽度】
     span {
     display:block;
     width:200px;
     margin:0 auto;
     }
  3. 行内块元素(内联元素) button、input、textarea【需要将行内块元素设置为块级元素，可以不加宽度】
     input {
     display:block;
     margin:0 auto;
     }

• 12、overflow的三种取值及其含义
  使用前提：父元素需要设置一个高度，这样子元素超出给定的高度后，才能做如下操作
  auto 自适应，内容如果溢出，会自动生成滚动条
  scroll 将溢出的部分进行裁剪(也就是不显示)，并以滚动条的形式显示超出的部分(如果不设置滚动条隐藏，滚动条一直存在)
  hidden 将溢出的部分进行裁剪，不会出现滚动条

• 13、js的数据类型

  1. 基本数据类型
     number、string、boolean、null、undefined
  2. 引用数据类型
     对象、数组、函数(可以统称为 对象)

• 14、变量的提升
  用来描述变量和函数移动到当前作用域的最顶部的术语
  全局作用域
  函数作用域
  块级作用域
  编译：编译阶段，js会获取到所有的函数声明、使用var关键字声明的变量，将其提升到作用域的顶部
  注意：
  1、只有使用var声明的变量、或者是函数声明才会被提升
  2、箭头函数、let和const声明的变量都不会发生变量的提升

• 15、null与undefined的区别
  undefined：变量声明但是未被初始化、访问对象中不存在的属性、函数没有显示的返回值
  let a = ()=>{}
  console.log(a())
  null代表没有任何值的值

  null == undefined // true
  null === undefined // false

• 16、== 与 === 的区别
  == 用于一般的比较，在比较的时候会自动进行数据类型的转换
  === 用于严格比较，不会进行数据类型的转化，只要两个变量的数据类型不一样，直接返回false

• 17、js数据类型的检测

  1. typeof
     语法：typeof A
     返回值：number、string、boolean、undefined、object、function
     结论：对于数组、对象、null检测的结果都是object

     对于基本数据类型来说，除了null其他的都可以正常的检测
     对于引用数据类型来说，除了函数都会显示成object

  2. instanceof
     含义：用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上
     也就是判断A是否为B的实例
     语法：A instanceof B【如果A是B的实例，则返回true】
     返回值：true/false
     console.log(1 instanceof Number); // false
     console.log([] instanceof Array); // true
     console.log({} instanceof Object); // true
     console.log(function(){} instanceof Function); // true
     结论：无法判断基本数据类型，对于引用数据类型无法准确定位

  3. Array.isArray()
     含义：检测一个变量是否是数组
     语法：Array.isArray(A)
     返回值：true/false
     console.log(Array.isArray([])); // true
     console.log(Array.isArray({})); // false
     结论：可以准确的检测数组

  4. Object.prototype.toString.call()
     含义：判断某个变量属于哪个内置的类型
     语法：Object.prototype.toString.call(A)
     返回值： [object Number] [object String]…
     结论：可以检测所有的数据类型

     js的内置数据类型：null、string、boolean、number、undefined、array、function、object、date、math

• 18、如何判断对象中是否存在某个属性？

  1. in操作符
     var obj = {
     name:‘tom’
     }
     console.log(‘name’ in obj); // true
     console.log(‘age’ in obj); // false

  2. hasOwnProperty()
     var obj = {
     name:‘tom’
     }
     console.log(obj.hasOwnProperty(‘name’)); // true
     console.log(obj.hasOwnProperty(‘age’)); // false

  in操作符可以检测到继承的属性，而hasOwnProperty不能

• 19、如何判断一个对象是空对象？
  1)
  var obj = {}
  console.log(JSON.stringify(obj) == ‘{}’)

  2. Object.keys()返回一个由给定对象的可枚举属性组成的数组
     var obj = {}
     console.log(Object.keys(obj).length == 0)

• 20、this指向
  如何判断this的指向：this的指向与该函数的调用方式有关
  函数名(实参)
  函数名.call(this,实参列表)
  函数名.apply(this,实参数组)

  1. 如果函数使用()直接调用，看函数名之前有没有对象
     有：this指向该对象【谁调用了该函数，this就指向谁】
     没有：全局对象
  2. 如果函数通过call、apply调用，this为用户手动指向的那个对象【更改this的指向】
  3. 箭头函数中的this指向该箭头函数外部函数的this

• 21、数组常用api
  push
  pop
  shift
  unshift
  sort排序
  比较器函数
  当a>b时返回1，从小到大排序
  当a<b时返回-1，从大到小排序
  var arr = [1,3,21,13,2]
  var res = arr.sort(function(a,b){
  if(a>b){
  return 1;
  } else {
  return -1;
  }
  })
  toString 将数组转换为字符串，通过逗号连接
  join(s) 将数组转换为字符串，通过s连接
  JSON.stringify 将数组转换为json字符串
  concat 合并数组
  slice 从数组中截取一个子数组
  splice 从数组中删除、插入元素
  forEach(function(item,index,arr){}) 遍历当前数组
  返回值：无
  every()
  返回值：true/false
  some()
  返回值：true/false
  filter()
  返回值：数组
  map() 【映射】
  返回值：一个处理后的数组

  注意：
  1. 不会改变原数组
  2. 对于空数组map方法不会检测

• 22、类数组对象转换为数组
  类数组对象的特征：【arguments】
  1. 具有索引
  2. 具有length属性
  方法：
  1) […arguments]【前提：只对拥有遍历器对象的有效】
  2) Array.from(arguments)
  3) Array.prototype.slice.call(arguments)

• 23、正则表达式

  1. 正则表达式的定义
     var pattern = new RegExp(‘正则表达式’,‘正则表达式修饰符’)
     var pattern = /ab/img;

     正则表达式修饰符
     i 忽略大小写
     g 全局
     m 多行

  2. 正则表达式方法
     test() 检测正则表达式是否匹配某个字符串，如果匹配到返回true
     exec() 检测正则表达式是否匹配某个字符串，如果匹配到将该字符串返回到一个数组中

  3. 正则表达式
     .
     \d [0-9]
     \D [^0-9]

  4. 贪婪匹配与非贪婪匹配
     贪婪匹配 – 尽可能多的匹配
     /\D{2,}/
     非贪婪匹配 – 尽可能少的匹配
     /\D{2,}?/

• 24、包装器类型
  基本包装器 Number() String() Boolean() Math() Date()

  1. String.prototype.xxx
     length 字符串长度
     indexOf() 字符首次出现时的索引
     concat() 连接字符串
     slice() 截取子字符串
     trim() 去除字符串两边空格
     match() 找出匹配的内容
     split() 将字符串分割为字符串数组

  2. Math
     Math.floor() 向下舍入
     Math.ceil() 向上舍入
     Math.round() 四舍五入
     Math.random() 随机数【0-1】

  3. Date
     var date = new Date();
     getFullYear() 年
     getMonth() 月
     getDay() 日
     getHours() 时
     getMinutes() 分
     getSeconds() 秒
     getTime() 时间戳

     补全位数
     .toString.padStart(2,‘0’)

  4. 日期格式转换

     1. 自己写
     2. moment
        var date = new Date();
        var res = moment(date).format(‘YYYY-MM-DD hh:mm:ss’);

• 25、数组去重

  1. indexOf() 可返回数组中某个元素首次出现时的索引
  2. ES6的Set，Set集合中不存在重复的元素
  3. […new Set(arr)]

• 26、高级面向对象

  1. 工厂函数模式
     function factory(){
     return {}
     }

     1. 类型无法区分
     2. 函数重复的创建

  2. 构造函数模式
     function Test(){}
     var test = new Test()

     1. 构造函数的执行过程
        1、创建新对象
        2、将当前构造函数的作用域赋值给新的对象【也就是this的指向】
        3、给新的对象添加属性和方法
        4、将新的对象返回

     2. 构造函数与普通函数的区别
        构造函数：function Test(){}
        普通函数：function test(){}

        1、构造函数的首字母大写【习惯上】，但是本质上也是一个普通函数
        2、调用方式
        普通函数：直接调用test()
        构造函数：使用new关键字调用，new Test()
        3、返回值
        普通函数：没有返回值
        构造函数：对象

     3. 问题：函数重复的创建

  3. 构造函数与原型结合
     属性保存在实例中，方法保存在构造函数的原型上
     function Dog(){name,age,gender}{
     this.name = name;
     this.age = age;
     this.gender = gender;
     }
     Dog.prototype.sayGender = function(){
     console.log(‘xxx’)
     }

     var dog1 = new Dog();
     var dog2 = new Dog();
     dog1.sayGender()
     dog2.sayGender()

  4. 原型链继承 【子构造函数的原型指向父构造函数的实例】
     Person1
     function Person1(name){
     this.name = name;
     }
     Person1.prototype.money = function(){
     console.log(‘xx’)
     }
     var per1 = new Person1(‘tom’);
     per1.money();
     Person2
     function Person2(name){
     this.name = name;
     }
     var per2 = new Person2(‘larry’);
     larry.money(); // 报错

     解决：【写在Person2构造函数创建的代码之上】
     Person2.prototype = new Person1()
     Person2.prototype.constructor = Person2;【解决分类问题】

  5. 借用构造函数【不仅仅可以继承方法，也可以继承属性】
     Person1.call(this,name,age)

      function Person1(name){
          this.name = name;
      }
      Person1.prototype.money = function(){
          console.log('xx')
      }
      var per1 = new Person1('tom');
      per1.money();
     
      Person2.prototype = new Person1()
      Person2.prototype.constructor = Person2;
     
      function Person2(name,age){
          Person1.call(this,name) 【将Person1中的this指向了Person2】
          this.age = age;
      }
      var per2 = new Person2('larry');
      larry.money(); // 报错
     

• 27、什么是DOM【文档对象模型】
  同时也是用于html编程的接口，通过dom来操作页面中的元素。当html页面被实现加载的时候，浏览器会创建一个dom，给文档提供了一种新的逻辑结构，并且可以改变内容和结构。 DOM是面向对象，并且定义了修改文档所需要的对象，各个对象之前的关系，我们可以也页面上的dom看成一个树状结构，通过js，对html文档进行添加排版，js要想访问html中的元素，就要通过对象模型来获得。

  vue与jQuery的区别？
  vue零dom操作
  jQuery是依赖于dom操作的

• 28、节点操作

  1. 节点的创建
     var dom = document.createElement(‘标签名’)
  2. 节点的追加
     1. parent.appendChild(dom)
     2. parent.insertBefore(dom,index)
        dom – 节点
        index – 位置
  3. 节点的复制【克隆】
     1. 浅复制
        cloneNode() / cloneNode(false)
        只复制标签，不复制内容
     2. 深复制
        cloneNode(true)
        复制标签及内容
  4. 节点的删除
     parent.removeChild(item)

• 29、事件三要素
  事件目标、事件处理程序、事件对象

• 30、事件冒泡和事件捕获的区别
  前提：
  1. 元素需要嵌套
  2. 每层元素上需要绑定相同类型的事件

  1. 事件流
     页面中元素接收事件的顺序

  2. 事件冒泡【由内向外】
     事件发生在具体的元素上，然后逐级向上传播到不具体的元素
     可以通过event.stopPropagation()阻止事件冒泡
     inner.onclick = function(){
     event.stopPropagation();
     }

  3. 事件捕获【由外向内】
     事件发生在不具体的元素上，然后逐级向下传播到具体的元素

• 31、event.stopPropagation()、event.preventDefault()、return false的区别
  event.stopPropagation()阻止事件冒泡，元素的默认行为仍然会发生
  event.preventDefault()阻止元素的默认行为【a标签的默认跳转、form表单的默认提交】，仍然会发生事件冒泡
  return false 同时阻止事件冒泡和默认事件
  参考：https://blog.csdn.net/Dailoge/article/details/89356970

• 32、事件的绑定

  1. on
     dom.onclick = function(){}
     dom.onmouseleave = function(){}
  2. addEventListener
     dom.addEventListener(‘click’,function(){})
     dom.addEventListener(‘mouseleave’,function(){})
  3. attachEvent
     兼容性较差(IE低版本下才兼容)

• 33、常用事件类型
  onload
  window.onload = function(){} 页面加载完毕
  click 点击
  mouseover 光标移入，支持子元素
  mouseout 光标移出，支持子元素

  mouseenter 光标移入，不支持子元素
  mouserleave 光标移出，不支持子元素
  scroll 页面滚动
  keyup 键盘抬起
  keydown 键盘落下
  focus 聚焦
  blur 失焦

• 34、事件代理(事件委托)
  起因：
  dom节点需要事件处理程序时，直接给它绑定即可。但是如果很多的dom都需要绑定事件处理程序，可以使用for循环，遍历出所有的dom，然后依次给它们绑定事件，但是对于该方法来说，需要不断的与dom节点交互，从而使浏览器的渲染速度变慢，降低效率
  解决：
  通过事件代理将事件绑定在当前元素的父元素上，这样与dom只需要交互一次即可
  原理：
  事件冒泡
  div > table > tr > td > a/span
  当点击当前元素(a/span)时，将逐级向上冒泡到父元素，执行父元素上绑定的事件处理程序。在父元素中可以通过event.target获取当前元素

• 35、event.target与event.currentTarget
  event.target 事件触发的源头元素
  event.currentTarget 当前触发事件的元素

• 36、use strict是什么意思？
  是es5特性，使代码在整个脚本中处于严格模式

  严格模式一些限制：
  1. 变量必须声明后再使用
  2. 函数的参数不能有同名的，否则报错
  3. 不能删除不可删除的属性
  4. 不能使用arguments.callee
  5. 禁止this指向全局
  …
  好处：
  1. 消除js语法中的一些不合理的、不严谨的地方
  2. 消除代码运行的不安全之处
  3. 提高编译效率

• 37、BOM【浏览器对象模型】

  1. 超时调用
     var id = setTimeout(function(){},time)
     clearTimeout(id)

  2. 间歇调用
     var id = setInterval(function(){},time)
     clearInterval(id)

  3. Location对象
     assign(url) 加载新的url，在浏览记录中生成一条记录【可以前进、回退】
     replace(url) 用新的url替换旧的url，不会在浏览记录中生成记录【不可以前进、回退】
     reload() 刷新当前页面

  4. 存储对象
     localStorage
     长久的保存数据，保存的数据没有过期时间，除非手动删除
     sessionStorage
     临时保存数据，保存的数据在浏览器或浏览器选项卡关闭时丢失
     localStorage的方法
     localStorage.setItem(key,val) 设置键值
     localStorage.getItem(key) 获取键
     localStorage.removeItem(key) 移除键
     localStorage.clear() 清空键

      存储一个对象时，首先需要将该对象序列化，获取的时候反序列化即可
      localStorage.setItem('userInfo',JSON.stringify(this.obj))             
     

     localStorage、 sessionStorage、 cookies的区别

• 38、get和post的区别

  1. 在浏览器地址栏中输入一个网址访问页面时，一般是get请求
  2. form表单，可以通过method指定提交的方式为get、post
  3. 请求由请求头、请求行、请求数据组成

  区别：
  1) 请求形式
  get把请求的数据放在url上，以？分割url和请求数据
  post把请求的数据放在http的请求体内
  2) 传输数据的大小
  get请求，传输的数据大小有限制
  post请求，传输的数据大小没有限制
  3) 安全性
  post比get请求安全
  4) 发送数据的过程【了解】
  get请求，浏览器会将http header 和data一并发送，服务器响应200
  post请求，会先将http header发送，服务器响应100 conitune，浏览器再发送data，服务器响应200

• 39、ajax与axios的区别
  ajax 【默认请求格式application/x-www-form-urlencoded】
  ajax({
  url,
  method:‘post’,
  data:login_form, // 参数默认为键值对形式【查询字符串】key1=val1&key2=val2
  success:()=>{}
  })
  如何利用ajax向后台发送json字符串？
  ajax({
  url,
  method:‘post’,
  data:JSON.stringify(login_form),
  contentType:‘application/json’,
  success:()=>{}
  })
  axios 【默认请求格式application/json】
  axios({
  url,
  method:‘post’,
  data:login_form, // 参数默认为json字符串’{“key1”:“val1”,“key2”:“val2”}’
  success:()=>{}
  })
  如何利用axios向后台发送查询字符串？
  axios({
  url,
  method:‘post’,
  data:qs.stringify(login_form),
  contentType:‘application/x-www-form-urlencoded’,
  success:()=>{}
  })