js基础总结

js事件类型

        事件的概念：用户和浏览器交互的一瞬间就形成了一个事件

常用的js事件

        鼠标事件

        click：鼠标点击事件

        dblclick:双击事件

        mousedown：鼠标按下事件

        mousemove:鼠标移动事件

        mouseup：鼠标抬起事件

        mouseenter 鼠标进入

        mouseleave 鼠标离开

        mouseout 鼠标离开

        键盘事件

         

keyup 键盘抬起

keydown 键盘按下 按下任意键触发

keypress 键盘按下 按下字符键触发

         表单事件

blur 文本框失去焦点

submit 表单提交事件

reset 表单重置

focus 表单获取焦点

change事件

input 事件

        UI事件

 

scroll 页面滚动事件

resize 改变窗口的大小

load 加载页面

unload 卸载页面触发

js事件流+事件代理

        事件流：

                页面上事件执行的先后顺序就形成了事件流

        事件冒泡：

                 事件由内向外依次触发，默认的事件流，阻止事件冒泡：event.stopPropagation()

        事件捕获：

                事件由外向内触发，addEventListener的第三个设置为True，设置事件捕获

        事件代理：

                事件代理又称之为事件委托，利用到的原理事件冒泡

                提高页面性能，减少事件的循环次数，把事件作用到父元素，减少事件执行次数

js数据类型

        基本数据类型：number boolean string null undefined，基本数据类型存储在栈中，复制数据相当于深拷贝

        引用数据类型：object对象，存储在堆中，复制数据相当一浅拷贝

浅拷贝变成深拷贝的方式：

        JSON.stringify, JSON.parse()

        扩展运算符

        如果对象的层次比较深的情况下，可以自定义递归函数实现深拷贝

js作用域的理解

        变量起作用的范围就是作用域，es5中变量起作用的范围是以函数作为分界线

        作用域分为全局作用域和局部作用域

        全局作用域：在全局都可以进行访问，定义在函数外部

        局部作业域：定义在函数内部的局部变量，只在函数内部可以进行访问

作用域链的理解        

         作用域链就是我们访问函数内部的变量的时候，先从当前函数内部查找，如果没有找到继续向函数外部查找，直到最后找到window顶层对象，还找不到的话，提示报错信息，变量不存在

 创建对象方式

        1.字面量的方式， 变量赋值的方式

let obj = {username:"admin"，pwd:"admin888",sex:"未知"};

        2.实例化对象方式 

let obj = new Object();
obj.name="张屠夫";
obj.skill="杀猪";

        3.构造函数的方式创建对象

function Person(){
    this.name="张三";
    this.sex="男";
    this.love="吃饭";
    this.run = function(){
        console.log("能跑会跳很活泼");
    }
}
var person = new Person();

        4.工厂模式的方式创建对象

function Computer(){
    let obj = new Object();
    obj.brand="联想";
    obj.memory = "16G";
    obj.color="粉色”
    
    return obj;
}

var computer = new Computer();

工厂模式对象和构造函数的模式区别? 

1. 构造函数内部需要this指向，工厂模式不需要，

2. 构造函数外部函数需要实例化，工厂模式直接调用函数即可

3. 工厂模式内部需要实例化空对象，并且需要返回，构造函数不需要返回数据

js数组的方法

push 把元素添加到数组的尾部 【1】

pop 删除数组尾部的元素 【1】

shift 删除数组的第一个元素 【1】

unshift 把元素插入到数组的第一个 【1】

indexOf 判断一个元素是否在数组中 下标或者-1

include 判断一个元素是否在数组中 返回一个布尔值true/false

splice(index,1) 修改或者删除数组中的元素 【1】

slice(start,end) 截取数组中的一部分

sort() 排序方法， 会影响元素的内容 【1】

join("") 把数组的元素凭借字符串

reverse() 实现数组的翻转

forEach() 数组循环

filter(func) 数组过滤，不会影响元素组，返回一个新的数组

map(()) 修改数组的内容，去数组对象中返回一个新数组 【1】

find() 对复杂的数组，数组中嵌套对象的内容，查找元素是否存在，返回存在的对象

findIndex() 对复杂的数组，数组中嵌套对象的内容，查找元素是否存在，返回存在元素下标或者-1

isArray 判断是否是一个数组

ArrayOf() 把伪数组转化成真实数组

js字符串方法

split("") 字符串分割成数组

replace(匹配格式, 字符串/回调函数) 字符串进行数据替换

search() 

match()

indexOf 判断一个字符串是否在另一个字符串中

原型和原型链

        原型：

        每个函数都有一个prototype属性，这个属性称之为函数的显示原型，这个prototype又有一个construtor属性，这个属性指向函数自身的定义

        每个对象都有一个__proto__属性，这个属性就称之为隐式原型，后续通过隐士原型查找对象的属性，这个隐士原型指向函数本身的显示原型

        原型链

           访问对象中的属性，先从对象自身查找，找不到的话，再去对象的原型proto属性中查找，如果还找不到继续通过proto继续查找，最后找到Object顶层对象，如果找不到返回null或者undefined;

 

对象继承

         为什么要继承？

                继承可以直接使用父方法和对象中的属性和方法，提高代码的复用，减少代码冗余

        对象继承的方式：

                 原型链继承、构造函数继承

        原型链继承

        

        利用方法的原型属性继承，可以使用父方法中自身属性，也可以使用父方法中原型中的属性

把父方法中实例化对象赋给字方法的原型即可，不可以进行传参

//父方法，定义一个属性属性
        function Person(){
            this.name = "张三";
        }
        Person.prototype.sex="男";
        Person.prototype.say = function(){
            console.log('我会说汉语');
        }
        //子方法
        function Student(){
            this.work = "学生";
        }
        //原型链继承的核心
        Student.prototype = new Person();

        let student = new Student();
        console.log(student);

        构造函数继承

        

        通过改变this指向来继承的方法操作，call, apply, bind(), 把方法中的属性直接拿过来使用

可以方法父方法中的属性，但是无法访问方法原型中的属性无法访问，但是可以传参

 //父方法，定义一个属性属性
        function Person(sex){
            this.name = "张三";
            this.sex = sex;
        }
        Person.prototype.sex="男";
        Person.prototype.say = function(){
            console.log('我会说汉语');
        }
        //子方法
        function Student(){
            this.work = "学生";
            //核心代码
            Person.call(this,"男");
        }

        let student = new Student();
        console.log(student);

 call、apply、bind的区别？

        call和apply区别在于传递参数的方式不同，call接收的参数是在逗号后传递

        apply传递的参数是在一个函数中

        bind是作为一个函数进行传递参数，传递参数的方式跟call方式相同，不过需要在最后加一个（）触发函数

        共同点：都是改变this指向

函数中new关键字的作用？

   

创建一个空对象

this只指向这个空对象

将属性和方法挂载到这个空对象上

将这个对象return出来

      

闭包

         概念：

                内部函数可以访问外部函数及其参数的函数就是闭包，函数嵌套函数，闭包可以形成封闭的作用域空间，类似于块级作用域

        缺点：

                会导致内存泄漏，每调用一次就会形成一个新的闭包

es6的新特性     

• let const定义变量

• 解构赋值

• 扩展运算符

• 箭头函数

• ES6模块化

• set/map数据结构

• Promise异步处理

• Class语法糖

• for ... of

• ES6数组方法，对象方法

• Proxy代理

• generator代码生成器

• 函数省略参数，参数默认值    

let const定义   

        块级作用域，以{} 作为分界线

        const定义常量，值不能修改，对象，对象某个属性可以修改

        let const 不存在变量声明提升，const声明的变量必须赋值。

        const > let > var var能不用尽量不用

箭头函数

    1.箭头函数主要是用来解决this指向的问题，

    2.箭头函数本身不具备this，this指向函数所在的所用域。

    3.箭头不能当成构造函数使用，无法实例化，argments参数也是父函数的参数

 ES6的模块化

        export default 抛出的对象可以不适用{} 导入的名字可以随便使用，无需跟抛出的一致

        export 抛出的对象必须使用{} 导入的名字必须跟抛出的名字要一致

 promise理解

        同步和异步， Promise 是ES6中异步回调的处理方法，主要是ES5地狱回调的问题。

        promise有三种状态：pedding（准备中） fullfilled（ 已完成 ）rejected（失败）

        他只有两种可能，要么成功，要么失败

        promise有两个参数，reverse reject resverse返回时成功的数据，调用的是then方法，reject返回的是失败的结果，调用的是catch方法

        常见的API有then catch、 all、fanlly

为什么要使用async await？

         async await 其实也是异步得操作，用同步的方法解决异步方法，一般我们在写接口的时候用的比较多，我们也可以使用axios.then方法，不过.then方法我们在使用时，他不会等我们接口请求成功再返回数据，而是会直接返回数据，所以用await会更好，async await返回的时promise对象