前端基础知识总结

ES6基础篇

ES6的新特性？

• let const
• 解构赋值
• 箭头函数
• … 展开运算符
• Set数据结构
• Symbol数据类型
• 模板字符串
• class类的继承
• 模块化
• for of循环
• import、export导入导出
• Proxy代理
• Promise
• async / await
  ES6新特性总结

Promise？

Promise是一种异步编程的解决方案，有三种状态，pending（进行中）、resolved（已完成）、rejected（已失败）
使用方法：

1. 创造一个Promise实例
2. Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数
3. 可用Promise的try和catch方法预防异常
   Promise的使用详解

箭头函数this的指向问题？

1. 箭头函数不具备独立的作用域
2. 箭头函数内部的this是由外层函数的this所决定，一层层向上找，找不到的情况下会指向window
3. 任何方法都改变不了其指向，如bind()/call()/apply()

JS基础篇

var、let、const的区别？

• var定义的变量，具有函数作用域，可以跨块访问（没有块的概念）, 不能跨函数访问，存在变量提升现象，且可多次声明。
• let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问，不存在变量提升现象，且只能声明一次。
• const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。

原型链？

当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。

①一直往上层查找，直到到null还没有找到，则返回undefined
②Object.prototype.__proto__ === null 表示延伸到原型链的顶端
③所有从原型或更高级原型中的得到、执行的方法，其中的this在执行时，指向当前这个触发事件执行的对象

实现继承的方法？

1. 原型链继承
2. 借用构造函数继承
3. 实例继承
4. 拷贝继承
5. 组合继承
6. 寄生组合继承
   继承的6种方式和其优缺点

原型链继承？

• 核心: 将父类的实例作为子类的原型

• 缺点:
  只能实现单继承
  引用属性也是共享的
  创建子类实例时, 无法向父类构造函数传参

  function Parent() {
         this.name = 'zhangsan';
         this.children = ['A', 'B', 'C'];
       }
       Parent.prototype.getName = function() {
         console.log(this.name);
       }
       function Child() {
       }
       Child.prototype = new Parent();
       var child = new Child();
       console.log(child.getName());
  

JS的数据类型？

• 基本类型：Boolean、Null、Undefined、Number、String、Symbol（es6新增）
• 引用类型：Object
  object的九个内置对象：String，Number，Boolean，Object，Function，Array，Date，RegExp，Error。

补充1：es6新增的原型数据类型Symbol，特点是什么；

• 表示独一无二的值；
• 声明时不能使用new Symbol()，而是 Symbol()；
• 声明时可以加参数，用于描述；
• 作为key时不能被遍历；

补充2：如何声明两个相等的Symbol变量？
使用Symbol.for来判断

let a = Symbol.for('a');

补充3：Undefined与Null的区别：
Undefined 其实就是已声明未赋值的变量输出的结果
null 其实就是一个不存在的对象的结果

补充4：栈（stack）为自动分配的内存空间，它由系统自动释放；而堆（heap）则是动态分配的内存，大小不定也不会自动释放。基本数据类型存放在栈中，引用类型存放在堆中。

判断数据类型的方法？

• typeof
• instanceof
• constructor
• Object.prototype.toString
  判断数据类型

浅拷贝和深拷贝的区别？

• 浅拷贝就是将一个对象（或数组）的内存地址『编号』复制给另一个对象（或数组）

理解为浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存

• 深拷贝就是增加一个指针，并且申请一个新的内存地址，使这个增加的指针指向这个新的内存，然后将原变量对应内存地址里的值逐个复制过去

理解为深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象

深拷贝的实现方法？

1. 递归
2. JSON对象
3. 通过jQuery的extend方法
4. Object.assign()拷贝（仅仅针对一级属性）
5. lodash.cloneDeep()

闭包原理？

官方”的解释是：闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。

通俗来说，JavaScript中所有的function都是一个闭包。不过一般来说，嵌套的function所产生的闭包更为强大，也是大部分时候我们所谓的“闭包”。

闭包就是可以访问另一个函数作用域中的变量函数。

// An highlighted block
 function a() { 
     var i = 0; 
     function b() { alert(++i); } 
     return b;
    }
    var c = a();
    c();

闭包的优点：
保护函数内的变量安全,加强了封装性，变量可以一直存储在内存中
避免变量的污染
使得Javascript的垃圾回收机制GC不会回收函数a所占用的资源

闭包的缺点：
内存浪费，不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。

setTimeout与循环闭包？

添加链接描述

call,apply的区别？

JavaScript中的每一个function对象都会有call和apply方法

/*call()方法*/
function.call(thisObj[, arg1[, arg2[, [,...argN]]]]);
/*apply()方法*/
function.apply(thisObj[, argArray])

相同点:
都是为了解决改变 this 的指向，作用一致
不同点:
传参的方式不同

1. call则可以传递多个参数，第一个参数是新this对象，后边是参数列表。
2. apply最多只能有两个参数——新this对象和一个数组argArray，如果arg不是数组则会报错TypeError；

this是如何工作的？

this 永远指向函数运行时所在的对象，而不是函数被创建时所在的对象。匿名函数或不处于任何对象中的函数指向 window 。函数中的this的值取决于函数调用的模式：
① 方法调用模式：
函数是对象的一个属性时候（函数为该对象的方法），此时函数中的this=该对象
② 函数调用模式：
当函数并不是对象的属性。函数中this=全局对象
note：某个方法中的内部函数中的this的值也是全局对象，而非外部函数的this
③ 构造器调用模式：
即使用new调用的函数，则其中this=新构造的对象。
④ 使用apply或call调用模式：
该模式调用时，函数中this被绑定到apply或call方法调用时接受的第一个参数

Ajax相关？

1、概念：
Ajax代表异步JavaScript和XML，用于异步显示数据

2、原理：
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面

3、包含的技术：

• 使用CSS和XHTML/HTML来显示内容和样式
• 使用DOM模型来数据交互和动态显示
• 使用XML用于与服务器之间传送数据
• 使用XMLHttpRequest来和服务器进行异步通信(最重要)
• 使用javascript来绑定和调用

4、XMLHttpRequest
javascript可以及时向服务器提出请求和处理响应，而不阻塞用户，达到无刷新的效果，通过XMLHttpRequest对象，可以在页面加载以后进行页面的局部更新。

5、优点：

• 页面无刷新，用户的体验非常好
• 使用异步方式与服务器通信，具有更加迅速的响应能力
• 前端和后端负载平衡
• 基于标准化的并被广泛支持的技术

6、 缺点：

• 安全问题，暴露了与服务器交互的细节
• 对搜索引擎的支持比较弱
• ajax不支持浏览器back按钮
• 不容易调试

Ajax的基本原理总结

dva的异步操作？

第一步、定义model来处理数据和逻辑
同步更新 state 的 reducers
处理异步逻辑的 effects，返回请求的数据
订阅数据源的 subscriptions
第二步、在component层使用dispatch调用model中方法，取到model中state的值来来显示数据

CSS基础篇

盒子模型？

• 有两种， IE 模型和标准模型；IE的content部分包含了 border 和 pading
• 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).

块元素和内联元素的区别？

块元素：

• 默认会占一行
• 可以设置宽、高属性，外边距和内边距
• 可以使用display:block声明块元素
• 常见块元素有div，ul（无序列表），ol，li，dl（自定义列表），dt（自定义列表项），dd（自定义列表项的定义），p，h1-h6，blockquote（块引用）

内联元素：

• 默认不会换行，直到当前这一行占满才换行
• 内联元素不能直接设置宽和高，可以使用display::inline声明块元素
• 常见内联元素a，b，span，img，input，strong，label，button，select，textarea，em

弹性布局？

是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

1:所有浏览器都支持
2:容器和项目
① 容器(Flex container)： 需要添加弹性布局的父元素；
设置 display 属性的值为 flex(块级元素) 或 inline-flex(行级元素)将其定义为弹性容器
② 项目(Flex item)： 弹性布局容器中的每一个子元素，称为项目；

3：了解两个基本方向，这个牵扯到弹性布局的使用：
① 主轴： 在弹性布局中，我们会通过属性规定水平/垂直方向为主轴(flex-direction)；
② 交叉轴： 与主轴垂直的另一方向，称为交叉轴

设为 Flex布局后，子元素的float、clear和vertical-align属性将失效。但是position属性，依然生效。

CSS常用单位？

• 绝对长度单位：
  px：绝对单位，页面按精确像素展示

• 与字体相关的相对长度单位：
  em：相对长度单位，相对于当前对象内文本的字体尺寸。
  rem：是相对于根元素html的font-size属性的计算值，chrome/firefox/IE9+支持

vw、vh：与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度

CSS3新特性？

1. 选择器
2. 边框
3. 背景
4. 渐变
5. 文字效果
6. 2D
7. 3D
8. 动画
   等等

CSS选择器？

通配符选择器（*）
id选择器（#classId）
类选择器（.className）
标签选择器（div，h1，p，span，table）
子选择器（ul > li）
后代选择器（li a）
伪类选择器（a:hover，li:nth-child）
补充：权重和优先级

常见的页面布局？

固定布局
流式布局
弹性布局
浮动布局
定位布局
margin和padding

响应式布局？

• 优点：面对不同分辨率设备，灵活性强，能够快捷地解决设备显示适应问题。
• 缺点：兼容各种设备时所需工作量大、效率低下、代码累赘，会隐藏无用的元素，加载时间延长，其实这是一种折中性质的十设计解决方案，由于多方面元素影响而达不到最佳效果，在一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。

清除浮动的方法？

• 父级div定义 height：
  缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题，尽量少用
• 结尾处加空div标签，使用clear:both：
  缺点：如果页面浮动布局多，就要增加很多空div，造成结构的混乱
• 父级div定义 伪类:after 和 zoom
• 父级div定义 overflow:hidden

CSS预处理器/后处理器？

CSS预处理器是一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，例如Less、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。

CSS后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

display的值？

值	描述
inline	默认。显示为内联元素
block	显示为块级元素
none	隐藏
inline-block	行内块元素
list-item	列表显示
table	作为块级表格来显示（类似table），表格前后带有换行符

浏览器

输入url到展示页面过程发生了什么？

1. 输入地址
2. 浏览器查找域名的 IP 地址
3. 浏览器向 web 服务器发送一个 HTTP 请求
4. 服务器的永久重定向响应
5. 浏览器跟踪重定向地址
6. 服务器处理请求
7. 服务器返回一个 HTTP 响应
8. 浏览器显示 HTML
9. 浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）

服务端与网络

如何解决跨域问题？

1. jsonp（jsonp 的原理是动态插入 script 标签）
2. document.domain + iframe
3. window.name、window.postMessage
4. 服务器上设置代理页面

GET与POST方法的区别？

1. get主要是从服务器获取资源，post主要是像服务器发送数据
2. get传输数据通过url请求，利用k=v的形式放在url后面，用?连接，多个用&连接而post是存放在，ajax中的data中的
3. get传输的过程使用户可见的，而post是对用户不可见的。
4. get传输的数据量小，因为受url的长度限制，但是效率高，post能上传的数据量大
5. post较get更安全一些
6. get方式传递的中文字符可能会乱码，post支持标准字符集，可以正确传递中文字符

算法

冒泡排序？

原理：不断比较相邻元素，如果前一个比后一个大，就元素交换，直到没有需要比较的元素。

function sort(arr) {
    var len = arr.length;
    for (var i = 0; i < len; i++) {
        for (var j = 0; j < len - 1; j++) {
            if (arr[j] > arr[j+1]) {  // 比较相邻元素                
                var temp = arr[j+1];   //元素交换                
                arr[j+1] = arr[j];                
                arr[j] = temp;            
            }        
        }
    }
    return arr;
}

选择排序？

原理：每一次从待排序的数据元素中选出最小（或最大）的一个元素，存放在序列的起始位置，直到全部待排序的数据元素排完。

function sort(arr) {
    var len = arr.length;
    var minIndex, temp;
    for (var i = 0; i < len - 1; i++) {
        minIndex = i;
        for (var j = i + 1; j < len; j++) {
            if (arr[j] < arr[minIndex]) {  //寻找最小的数
                minIndex = j;   //将最小数的索引保存
            }
        }
        temp = arr[i];
        arr[i] = arr[minIndex];
        arr[minIndex] = temp;
    }
    return arr;
}

快速排序？

原理：在数组中找到基准点（比如中间位置的数字），其他数与之比较，新建两个数组，小于基准点的数存储在左边数组，大于基准点的数存储在右边数组，拼接数组，然后左边数组与右边数组继续比较存储，直到最后完成数组排序。

function sort(arr){        
    if(arr.length<=1){            
        return arr  // 如果数组长度小于或等于1，则直接返回数组
    } 
    // 找到数组中间的索引，如果是浮点数，则向下取整  
    var num = Math.floor(arr.length/2);  
    var centerVal = arr.splice(num,1);  // 找到数组中间索引的值
    var left = [];        
    var right = [];        
    for(var i=0;i<arr.length;i++){            
        if(arr[i]<centerVal){
            left.push(arr[i])  // 基准点左边的数放到左边数组
        }else{
            right.push(arr[i]) // 基准点右边的数放到右边数组
        }
    }    // 利用concat拼接数组，并调用sort方法
    return sort(left).concat([centerVal],sort(right)) 
}

React

必须要会的50个React面试题

未完待续…