想啥写啥

问题：
javascript 由什么组成：
　　ECMAScript / DOM / BOM
javascript 原始类型：
　　string number boolean null undefined object
　　demo:  '11'，11，true ， null ， undefined， let obj = {}
基本类型：
　　string ,number,boolean,null,undefined
　　demo:  '11'，11，true ， null ， undefined，

复杂类型：
　　object,
　　demo: let obj = {}

javascript undefined null的区别

　　undefined:
　　　　1.声明变量，没有赋值
　　　　　　demo: var a 
　　　　　　　　　cosole.log(a)　// undefined

　　　　2.函数参数，在调用时，没有带参
　　　　　　demo: 
　　　　　　　　function add (id){
　　　　　　　　　　console.log(id)　　// undefined
　　　　　　　　}
　　　　　　　　add() // 调用没有带参
　　　　3.对象没有赋值的属性
　　　　　　demo:
　　　　　　　　let o  = {}
　　　　　　　　console.log(o.p)　// undefined　
　　　　　　　　let a = new Object();
　　　　　　　　console.log(a.x)　 // undefined　
　　　　4.函数没有返回值时
　　　　　　demo:
　　　　　　　　function too(x=11){
　　　　　　　　　　console.log(x)
　　　　　　　　}
　　　　　　　　let x = too();
　　　　　　　　console.log(x) // undefined
　　
　　　　　　　　以下是 一个有返回值的demo　　　　　　
　　　　　　　　function foo(x=11){
　　　　　　　　　　return x 
　　　　　　　　}
　　　　　　　　let y = foo();
　　　　　　　　console.log(y) // 11
　　null:表示被定义了，但是这个值为空
javascript 隐式转换：
　　false : 0 , true :1 , " " : 0
　　demo:
　　　　let t = true
　　　　if(t==1){
　　　　　　alert("我是true但是我转换成1") // 我是true但是我转换成1
　　　　}
　　　　let t = false
　　　　if(t==0){
　　　　　　alert("我是false但是我转换成0") // 我是false但是我转换成0
　　　　}

　　　　// 字符串
　　　　let b = ""
　　　　if(b==0){
　　　　　　alert("我是空但是我转换成0") // 我是空但是我转换成0
　　　　}
　　　　// 对象和布尔比较
　　　　let t = [];　
　　　　if(t==false){
　　　　　　// 对象转换成空字符串 ，然后再转成数字0 ，false 转换成0再做比较
　　　　　　alert("我是一个对象，但是我先转换为空（' '）在转换成数字") // 我是一个对象，但是我先转换为空（' '）在转换成数字
　　　　}
　　　　// 对象和字符串比较
　　　　let t = [1,2,3]
　　　　if(t=="1,2,3"){
　　　　　　alert("对象和字符串比较，先把对象转换成字符串'1,2,3' ,然后再做比较")
　　　　}
　　　　// 对象和数字比较
　　　　let t = [1];
　　　　if(t==1){
　　　　　alert("我是先转成'1'再比较")
　　　　}
　　　　// 字符串和数字比较
　　　　'1' == 1 // true
　　　　// 字符串布尔
　　　　’1‘ == true // true

　　　　'0' == false // true
　　　　// 特殊比较
　　　　undefined == null // true

什么事编程面向对象：
　　面向对象：是一种设计思想，简称：OOP,把公共的事物抽象成属性和方法进行编程
原型链和作用域链有什么区别：
　　原型链：针对构造函数；例如：我们创建一个函数，这个函数通过__proto__ 或 prototype 绑定属性，然后通过new这个函数，那么这个被new 出来的新函数就会继承该函数的属性。
　　　　通过新函数访问，但是新函数没有这个属性，所以要通过链式向上查找，这就是原型链

　　demo:  
　　　　　　function Add () {}
　　　　　　Add.prototype.id = "1111"
　　　　　　let a = new Add()
　　　　　　console.log(a.id)  // "1111"
　　作用域链：是针对变量；分有全局和局部，如果局部没有就向全局查找
　　demo:　　　　
　　　　　　let a = "你这个老头坏滴狠";
　　　　　　function too(){
　　　　　　　　console.log(a)  // "你这个老头坏滴狠";
　　　　　　}

javascript 多态继承：
　　同一个事物：发出不同的形态
　　继承：同一个事物，继承相同的形态，

javascript 闭包：
　　1.读取其他函数内部变量的函数，

　　2.子函数调用父函数的变量，变量不会被释放

javascript 类

　　function Person(name){

     // 共用属性
    this.name = name;
    // 共用实例
    this.userName = function(){
        console.log(this.name+'是我的爱人');
     }
    this.totalNum = function(){
        console.log("我共用")
    }
}

Person.prototype.Add = function(){
    console.log(this.name+"我添加了");
}

let b = new Person("LING");

b.userName();
b.Add();


// 想要继承类通过prototype new一个新的类
function ClassNameTest(){}
// 例子
ClassNameTest.prototype = new Person();
const tt = new ClassNameTest();
tt.totalNum();

/**
 *  获得的思想
*  创建一个类，首字母要大写
*  可以把共同的可复用性的放在类里面
*  独立状态的可用portotype 点来继承
*  使用类可以用new 一个变量来使用
*
 *  子类继承父类可以用通过prototype来实现
*  也要new 一个新的类通过变量调用类的方法
*  缺点：无法继承多个类
*
 * **/

javascript 变量提升：
　　var a = "1"；
　　function foo(){
　　　　let a = "44"
　　　　console.log(a) // 44
　　　　return a
　　}
　　foo()
javascript let const var 的区别：
　　let 是一个块级作用域，在函数内定义，对外部无影响；
　　demo:　　
　　　　let a = "444";
　　　　function foo(){
　　　　　　let a = "我是谔谔"
　　　　　　console.log(a)　//  "我是谔谔"
　　　　}
　　　　console.log(a)　　//  "444"
　　const 是一个常量,定义后不能修改   
　　var 是一个全局，可以修改，不初始化会得到undefined
javascript  __proto__  protoType的关系：
　　
　　　　

   function Person (){}
   let person = new Person();
   console.log(person.__proto__ == Person.prototype); // true
   console.log(Person.prototype.constructor==Person); // true

javascript 手写实现一个xhr：

　　// 创建一个xhr对象

　　var xhr = new XMLHttpRequest()

　　xhr.open ("get","文件名地址","布尔，false表示同步请求，true表示异步请求")

　　xhr.onreadystatechange = function(){
　　　　// readystate 

　　　　// 0 表示未初始化，xhr对象已调用，open方法没有执行

　　　　// 1表示初始化，send方法没有执行

　　　　// 2表示发送数据，http请求头未知

　　　　// 3表示数据发送中，但是http请求头不全，导致responseBody和responseText报错

　　　　// 4表示数据接收完毕，responseBody和responseText回应请求的数据
　　　　console.log(xhr.readystate)

　　　　if(xhr.readystate==4 && xhr.status==200){
　　　　　　// 表示数据接收完毕 ，http状态200
　　　　　　

　　　　}
　　}

　　xhr.send()

　　post 请求

　　let xhr = new XMLHttpResquest();

　　xhr.open('post','aa.text?parmes=1&id=2');

　　xhr.onreadystatechange = function(){
　　　　if(xhr.readystate==4 && xhr.status==200){
　　　　　　alert("成功")
　　　　}
　　}

　　xhr.setRequsetHeader ('Content-Type','applicaiton/x-www-form-urlencoded');

　　xhr.send("?parmes=1&id=2");

　　使用promise 封装ajax
　　let fetch = (method,url)=>{
　　　　rerurn new Promise((reject,resolve)=>{
　　　　　　let xhr = new XMLHttpRequest();

　　　　　　xhr.open(method,url);
　　　　　　xhr.responseType = "json";
　　　　　　xhr.setRequsetHeader ("Accept","application/json");
　　　　　　xhr.readystatechange = function(){
　　　　　　　　if(xhr.readystate==4 && xhr.status==200){
　　　　　　　　　　resolve(this.response)
　　　　　　　　}else{
　　　　　　　　　　reject(this.response)
　　　　　　　　}
　　　　　　}
　　　　　　xhr.send();
　　　　})
　　}
　　　　
　　fetch('get','https://www.baidu.com').then(({code,msg,res})=>{
　　　　console.log(code,msg,res)
　　}).catch(()=>{});

http请求状态码：

• 100 Continue 初始的请求已经接受，客户应当继续发送请求的其余部分
• 101 Switching Protocols 服务器将遵从客户的请求转换到另外一种协议
• 200 OK 一切正常，对GET和POST请求的应答文档跟在后面。
• 201 Created 服务器已经创建了文档，Location头给出了它的URL。
• 202 Accepted 已经接受请求，但处理尚未完成。
• 203 Non-Authoritative Information 文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝
• 204 No Content 没有新文档，浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的
• 205 Reset Content 没有新的内容，但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容
• 206 Partial Content 客户发送了一个带有Range头的GET请求，服务器完成了它
• 300 Multiple Choices 客户请求的文档可以在多个位置找到，这些位置已经在返回的文档内列出。如果服务器要提出优先选择，则应该在Location应答头指明。
• 301 Moved Permanently 客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL。
• 302 Found 类似于301，但新的URL应该被视为临时性的替代，而不是永久性的。
• 303 See Other 类似于301/302，不同之处在于，如果原来的请求是POST，Location头指定的重定向目标文档应该通过GET提取
• 304 Not Modified 客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。
• 305 Use Proxy 客户请求的文档应该通过Location头所指明的代理服务器提取
• 307 Temporary Redirect 和302（Found）相同。许多浏览器会错误地响应302应答进行重定向，即使原来的请求是POST，即使它实际上只能在POST请求的应答是303时才能重定向。由于这个原因，HTTP 1.1新增了307，以便更加清除地区分几个状态代码：当出现303应答时，浏览器可以跟随重定向的GET和POST请求；如果是307应答，则浏览器只能跟随对GET请求的重定向。
• 400 Bad Request 请求出现语法错误。
• 401 Unauthorized 客户试图未经授权访问受密码保护的页面。应答中会包含一个WWW-Authenticate头，浏览器据此显示用户名字/密码对话框，然后在填写合适的Authorization头后再次发出请求。
• 403 Forbidden 资源不可用。
• 404 Not Found 无法找到指定位置的资源
• 405 Method Not Allowed 请求方法（GET、POST、HEAD、Delete、PUT、TRACE等）对指定的资源不适用。
• 406 Not Acceptable 指定的资源已经找到，但它的MIME类型和客户在Accpet头中所指定的不兼容
• 407 Proxy Authentication Required 类似于401，表示客户必须先经过代理服务器的授权。
• 408 Request Timeout 在服务器许可的等待时间内，客户一直没有发出任何请求。客户可以在以后重复同一请求。
• 409 Conflict 通常和PUT请求有关。由于请求和资源的当前状态相冲突，因此请求不能成功。
• 410 Gone 所请求的文档已经不再可用，而且服务器不知道应该重定向到哪一个地址。它和404的不同在于，返回407表示文档永久地离开了指定的位置，而404表示由于未知的原因文档不可用。
• 411 Length Required 服务器不能处理请求，除非客户发送一个Content-Length头
• 412 Precondition Failed 请求头中指定的一些前提条件失败
• 413 Request Entity Too Large 目标文档的大小超过服务器当前愿意处理的大小。如果服务器认为自己能够稍后再处理该请求，则应该提供一个Retry-After头
• 414 Request URI Too Long URI太长
• 416 Requested Range Not Satisfiable 服务器不能满足客户在请求中指定的Range头
• 500 Internal Server Error 服务器遇到了意料不到的情况，不能完成客户的请求
• 501 Not Implemented 服务器不支持实现请求所需要的功能。例如，客户发出了一个服务器不支持的PUT请求
• 502 Bad Gateway 服务器作为网关或者代理时，为了完成请求访问下一个服务器，但该服务器返回了非法的应答
• 503 Service Unavailable 服务器由于维护或者负载过重未能应答。例如，Servlet可能在数据库连接池已满的情况下返回503。服务器返回503时可以提供一个Retry-After头
• 504 Gateway Timeout 由作为代理或网关的服务器使用，表示不能及时地从远程服务器获得应答
• 505 HTTP Version Not Supported 服务器不支持请求中所指明的HTTP版本

javascript section cookies localStorage sessionStorage：

　　

/*
* 保存状态：cookie 存在浏览器端，session 存在服务端，
*
* 使用方式：
*
* cookie 分两种：
* 1.如果没有设置过时间，随着浏览器的关闭而消失
* 2.如果设置过期时间，过期时间到，cookie会自动消失
* cookie 是以文本方式保存在客户端，每次请求都带上它
*
* session 有没有sessionId 有这个返回一个session对象，没有这个创建一个新的session对象
* 分三种情况：禁用cookie则重写response.encodeURL(url)
*           不支持cookie 将会重写url把sessionId拼接搭到url后面
*           支持则url不做任何处理
*
*
* 存储内容：
* cookie 以文本格式存储， session 类似hashtable数据格式存储，可以存储多个对象（session）
*
* 存储的大小
* cookie 单个不能超过4kb, session 没有大小限制
*
* 安全性
* cookie 容易被拦截，欺骗， session 的sessionId是保存在cookie里的，所以安全大于cookie
*
* 应用场景：
*   cookie 用户登陆过，下次可以记住用户信息，方便登陆;保存上次的登录时间；保存上次查看的页面；统计查看次数
*
*缺点：
*   cookie 大小限制，不安全
*   session 不利于用户量多使用，占服务器内存
*
*
*localStorage:存在本地，永久性存储,大小5mb,没有跟服务器接触
*
*sessionStorage:仅在当前会话，浏览器关闭就结束，大小5mb,没有跟服务器接触
*
*
* */

javascript 重绘和回流，防抖,节流

重绘：不改变布局大小，只改变样式和文本，

回流：改变页面布局，重新计算文档元素

防抖：多次触发事件，事件之执行一次，并且是在事件结束后执行
应用场景：比如按钮，多次点击，将多次操作合并成一次操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container {
             100%;
            height: 80px;
            line-height: 80px;
            background-color: black;
            color: #fff;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script>
    const container = document.getElementById("container");
    let count = 1;
    function add(e){
        console.log(e,"getHtml")
        container.innerText = count++;
    }
    function getHtml(func,wait,isflag) {
        let time,result;
        return function () {
            time && clearTimeout(time);
            let context = this;
            let arg = arguments;
            if(isflag){
                let callnow = !time;
                time = setTimeout(()=>{
                    time = null
                },wait);
                if(callnow) result=func.apply(context,arg)
            }else {
                time = setTimeout(()=> {
                    func(context, arg)
                }, wait)
            }
            return result;
        }
    }
    container.onclick = getHtml(add,300);

</script>
</body>
</html>

 

 

 

节流：在规定时间内，只执行一次，一定时间内只触发一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节流</title>
    <style>
        #content{
            80px;
            height: 60px;
            background-color: black;
            overflow: auto;
        }
    </style>
</head>
<body>
<div id="content">gggggggggggggggggggggggggggggggggggggggggggggggggggggg
    gggggggggggggggggggggggggggggggggggggggggggg</div>
<script>
    let content = document.getElementById('content');
    let falg = true;
    content.onscroll = function () {
        if(!falg) return;
        falg = false;
        setTimeout(function () {
            console.log("函数节流");
            falg = true
        },300)
    }
</script>
</body>
</html>

应用场景：滚动条，缩放页面
javascript DOM有哪些api

nodeType:

html:<div id="container"></div>

　　let container = document.getEleMentById('container');
　　container.nodeType // 判断是什么元素 
　　1.表示标签元素
　　2.表示元素属性
　　3.表示文本
　　8.表示注释
　　9.表示文档 （document)
　　11.表示轻量级文档 （DocumentFragment）
nodeValue:获取内容

创建api:
　　createElement 创建标签元素
　　createTextNode 创建文本

　　cloneNode 复制一个节点副本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content">
    <span>我可以复制哦</span>
</div>
<button id="btn">复制</button>
<script>
    let content = document.getElementById('content');
    let btn = document.getElementById("btn");
    btn.onclick = function () {
        let content1 = content.cloneNode(true);
        content1.id="content1";
        document.body.appendChild(content1);
    }
    /**
     * 获取id
     * 通过点击事件触发
     * id.cloneNode(true) // 复制节点副本
     * 添加id
     * 使用appendChild 插入到body
     *
     *
     * **/
</script>
</body>
</html>
createDocumentFragment() 文档片段

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="list"></ul>
<input type="button" value="点我" onclick="handleClick()"/>
<input type="button" value="爱我" onclick="handleBtn()"/>
<script>
    let listID = document.getElementById("list");
    // function handleBtn(){
    //     console.time("antzone");
    //     for (let i =0;i<10;i++){
    //         let lis = document.createElement('li');
    //         lis.textContent = i;
    //         listID.appendChild(lis);
    //
    //     }
    //     console.timeEnd("antzone"); 
    //
    // }
    let Fragment = document.createDocumentFragment();
    function handleClick() {
        console.time("antzone");
        for(let i =0;i<10;i++){
            let list = document.createElement('li');
            list.textContent = i;
            // 先放进片段
            Fragment.appendChild(list)
        }
        // 后面一次性再加入片段
        listID.appendChild(Fragment);
        console.timeEnd("antzone"); //antzone: 
    }
    /**
     * 获取id
     * 通过点击事件处理
     * 使用createElement创建元素
     * textContent 文本内容
     * 性功能要求：
     * 第一个方案：每次都会创建一个新的元素，然后添加到文档树中，造成浏览器回流
     * 第二个方案：每次先添加到Fragment,然后再一次性添加到ul中
     *
     *
     * **/
</script>
</body>
</html>
appendChild 在后插入
inserBefor 在前面插入
removeChild 删除
replaceChild 替换一个元素

查找api:
　　getElementById()　　　// 查找id
　　getElementsClassName()// 查找class
　　getElementsByTagName()// 查找标签元素
　　querySelectorAll()// 通过class 查找所有
　　querySelector（） // 查找一个

修改属性：

setAttribute ('name',value) // 修改属性
getAttribute('name') // 获取属性

 

javascript mvc mvvm mvp的区别

　　mvc:module-view-controller   
　　用户操作（view）=>业务逻辑处理（controller）=>数据持久化（module）=>用户视图(view)

　　

　　mvp:module-view-Presenter

　　用户视图（view）=>Presenter=>数据持久化（module）

　　应用到：.net 

　　
　　mvvm:module-view-viewModule
　　用户视图（view）<=>viewModule<=module(数据持久化)
　　好处：可实现数据绑定

　　应用到：angular vue 

　　

地址参考：https://www.cnblogs.com/guwei4037/p/5591183.html

javascript require 和 import 加载模块的好处
　　require 是commonJs的语法
　　const {a,b,c,d} require('fs);
　　等于：
　　const _fs = require('fs');
　　const a = _fs.a
　　const b =_fs.b
　　const c = _fs.c
　　const d = _fs.d

　　

　　
javascript 浅拷贝和深拷贝
javascript alert的调用
javascript 跨域问题
javascript 当在浏览器输入url发生了什么

　　1、解析url

　　2、DNS解析(实际上是域名和ip对应的数据库)

　　3、浏览器与tcp建立三次握手

　　4、请求和传输数据

　　5、页面渲染
javascript tcp三次握手
　　1、客户端向服务器发送请求

　　2、服务器端接收到请求，返回一个指令

　　3、客户端接收到服务端回复指令并返回确认　　　
浏览器渲染页面：

　　1、解析html,创建dom树

　　2、解析css,创建style Rule　

　　3、合并dom树和style Rule，计算每个节点样式

　　4、绘制完成显示在屏幕上

渲染优化：
　　

1. HTML文档结构层次尽量少，最好不深于六层；

2. 脚本尽量后放，放在前即可；

3. 少量首屏样式内联放在标签内；

4. 样式结构层次尽量简单；

5. 在脚本中尽量减少DOM操作，尽量缓存访问DOM的样式信息，避免过度触发回流；

6. 减少通过JavaScript代码修改元素样式，尽量使用修改class名方式操作样式或动画；

7. 动画尽量使用在绝对定位或固定定位的元素上；

8. 隐藏在屏幕外，或在页面滚动时，尽量停止动画；

9. 尽量缓存DOM查找，查找器尽量简洁；

10. 涉及多域名的网站，可以开启域名预解析

　　
javascript 数组和对象的方法
　　数组：forEach,map,fillter,find，join,shift,unshift,push,concat,replase,sort,slice,reduer,indexOf,some,reverse(数组反转[1,2,3] =>[3,2,1])
javascript 设计模式有哪些
javascript splice和concat
　　array.splice(start,deteleCount,item,item1)
　　

　　　　let b = ['a','1','b','2','c','3','d','4']
　　　　b.splice(1,2) // ["1", "b"]
　　
　　　　b  // ["a", "2", "c", "3", "d", "4"]
　　　　b.splice(4,2) // ["d", "4"]
　　

　　start 相当于length,
　　deteleCount 删除多少位
　　splice 实现删除，替换，插入

　　concat 将参数添加到数组
　　slice：
　　　　

　　let c = [1,2,3,4,5,6];
　　c.slice(4)  // [5, 6]
　　c // 没有改变  [1,2,3,4,5,6]

　　

javascript this指向
javascript es6 promise
react : 专注于视图层（view）
如果不用jsx写，用json写react 
　　<div className="content">
　　　　<p>7777</p>

　　</div>
　　const DivContent = () =>{
　　　　return {
　　　　　　type:'div',
　　　　　　props:{
　　　　　　　　className:'content',
　　　　　　　　children:{
　　　　　　　　　　type:'p',
　　　　　　　　　　props:{
　　　　　　　　　　　　children: '你大爷的'
　　　　　　　　　　}　　
　　　　　　　　}
　　　　　　}
　　　　}
　　} 

react jsx组件内true简写
　　demo: <Checkbox checked />
　　<Checkbox checked = {false}/>

react jsx 自定义属性,react 不会渲染：
　　html元素使用data-
　　以aria-开头的网络无障碍属性同样不会渲染　　
　　const LeftComponent = <Add  data-init = "1"/>

react 属性表达式：

　　输入： <Add too={a ===1 ? '我爱你' : ' 不爱你'}/>
　　输出：const Add = React.createElement({
　　　　　　　　　Add,

　　　　　　　　　{too:a===1?'我爱你'：'不爱你'}
　　　　　　})
经典面试题：
　　function fn(){
　　　　for(var i =0;i<5;i++){
　　　　　　dubugger
　　　　　　setTimerout(()=>{
　　　　　　　console.log(i) // 5
　　　　　　},2000)
　　　　}
　　}
　　fn() // 

 

https:

　　get和post请求的区别
　　get和post都没有长度限制，长度限制是web浏览器的url限制
　　get可以是获取用户数据，所以不用每次和数据库连接，
　　post 是用户操作交互，删除和修改，所以每次都需要请插入和删除数据库

 

vue 实现数据绑定的做法：

发布者-订阅模式：sub/pub 实现数据和视图绑定，更新数据的方式用vm.set('property',value)

class类

class Person {
    constructor(val){
        this.name = val;
    }
    getName(){
        return this.name;
    }
    setName(val){
        this.name = val
    }
}

const person = new Person('我是一个类的变量，放置在constructor');
console.log(person.name);   // 我是一个类的变量，放置在constructor

person.setName('我是');
console.log(person.getName());// 我是