JS学习日记 Day 6

学习视频是Link老师的教程：黑马程序员前端JavaScript入门到精通全套视频教程，javascript核心进阶ES6语法、API、js高级等基础知识和实战教程_哔哩哔哩_bilibili

---

一、进阶——内存

0、存储机制
    //简单数据类型存储于栈中，复杂数据类型存储于堆中
1、垃圾回收机制
    1.1、引用计数法
        //观察对象是否有指向他的引用，没有了就回收（不再使用的对象）
        //手动释放：数组/对象 = null
        //问题：循环引用会导致无法回收，以至于内存泄漏
        //现代浏览器已不再使用引用计数法
    1.2、标记清除法
        //从根部触发扫描内存中的对象，若找不到则回收（无法达到的对象）
2、闭包
    //指内层函数访问外层函数的变量
    //作用：使外部能访问函数内部的变量
    //使用结构:
    //function outer(){
    //    let a=10;
    //        functioin fn()
    //        {
    //               console.log(a)         
    //        }
    //        return fn                        
    //}
2.1、闭包的应用
    //实现数据的私有：调用一次使数据自增一次
    //function count(){
    //    let i = 0;
    //    function zz(){
    //         i++;
    //       cousole.log(i);
    //    }
    //    return dy;
    //}
    //问题：同样是容易引起内存泄漏

二、进阶——参数

1、用于接收任意长度形参的伪数组
    arguments[]：
    //注：没有数组的pop、push等方法
    //    但是可以用length
    //用于实参数量不确定时
2、剩余参数
    ...name：
    //同样是用于数组长度不确定时
    //是一个真数组
3、展开运算符
    ...name：
    //用在数组前，用于将数组的每一项展开
    //是一个很强大的功能
4、箭头函数
    =>：
    const fun = () =>{console.log(1)}
    const fun = x =>{console.log(x)}
    const fun = (x,y) =>{console.log(x+y)}
    //注：只有一行代码时，大括号可省略
    const fun = (x,y) =>console.log(x+y)
    //注：箭头函数可以直接返回一个对象
    const fun = (uname) =>({name:uname})
    //注：箭头函数中没有arguments，但是有展开
    null
    //注：箭头函数的this并不指向调用它的对象
    //    而是使用上一层作用域的this

三、进阶——解构

1、数组解构
    const arr = [100,60,80];
    const [max,min,avg] = arr;
    //也可使用剩余参数
    const arr = [1,2,3,4,5]
    const [a,b,...c]=arr;
    //c=[3,4,5]
    //也可使用二维数组
    const arr = [1,2[3,4]];
    const [a,b,[c,d]] = arr;
    //也可跳过参数
    const arr = [1,2,3];
    const [a,,c] = arr;
    //a=1,c=3
2、对象解构
    //解构属性和方法
    const{uname,age} = {uname:'pink', age:18}
    //等价于 const uname = obj.uname
    //变量名和属性必须一模一样
    //解构的变量名不能和外面的变量相同
    const{uname:username,age} = {uname:'pink',age:18}
    //可以用:改名

3、数组对象解构
    const person = [
        {
            name:'佩奇';
            family:{
                mother:'dad';
                father:'father'; 
                sister:'qiaozhi';      
            },
            age:6;                    
        }    
    ]
    
    const [{name,family:{mother}}] = person;
四、进阶——对象
1、创建
    1.1、const obj = {name

四、进阶——对象

1、创建
    1.1、const obj = {name:"谷歌"}
    1.2、const obj = new Object()
    1.3、构造函数创建法
         1.3.1、用于快速创建类似的对象
             function Pig(name,age,gender){
                 this.name = name;
                 this.age = age;
                 this.gender = gender;             
             }
             
             const Peppa = new Pig('佩奇',6,女);
             const George = new Pig('jo治',3,男);
             
             //注：只能由new来实例化
             //    开头要用大写字母
2、构造函数
    //没有参数时可以省略()
    //内部无需写return，返回值为新创建的对象
3、new实例化
    //实例化过程：
    //    1、创建空对象
    //    2、构造函数this指向新对象
    //    3、执行构造函数代码
    //    4、返回新对象
4、内置构造函数
    4.1、Object
        4.1.1、Object.keys(对象)：获取对象中的所有属性(键)
               返回的是一个数组
        4.1.2、Object.values(对象)：获取对象中的所有值()
        4.1.3、Object.assign(新对象，原对象)：拷贝()
               //常用于给对象添加属性
               //Object.assign(new,{gender:'女'})
    4.2、Array
        4.2.1、forEach()：遍历数组，不返回数组
        4.2.2、filter()：过滤数组，返回满足条件的数组元素
        4.2.3、map()：迭代数组，返回新数组
        4.2.4、reduce()：累计器，返回累计处理的结果
               arr.reduce(function(){},起始值)
               arr.reduce(function(上一次值,当前值){},起始值)
               //若对对象使用，则必须设置初始值
               //如：
               const arr = [{
                   name:'张三',
                   salary:10000               
               },{
                   name:'李四',
                   salary:10000               
               }]
               const total = arr.reduce((prev,current)=>{
                   return prev + current.salary               
               },0)
        4.2.5、方法汇总
                join：将数组元素拼接为字符串*
                find：查找并返回第一个符合条件的元素值，没有则返回underfined*
                every：检测是否所有元素都符合条件，若都符合则true，否则false*
                some：检测是否有元素满足条件，若有则true，否则false*
                sort：排序
                splice：删除或替换原数组单元
                findIndex：查找索引值
        4.2.6、部分方法示例
               1、find
                   arr.find(function(item){
                       return item.name==='华为';             
                   })
                   arr.find(item => item.name === '小米')
                2、every
                    arr.every(function(a,b){
                        return a>b;                    
                    })
                    arr.every((a,b) => a>b)
                3、Array.from()
                    Array.from(伪数组)
                    //将伪数组转换成真数组
    4.3、String
        4.3.1、常见方法
                length：获取长度*
                split('分隔符')：用于将字符串拆成数组*
                substring(开始索引，结束索引)：用于字符串截取*
                str.startsWith(要搜索的字符串，str搜索的起始位置)
                str.includes(要搜索的字符串，str搜索的起始位置')：判断数组中是否有指定的值（区分大小写）
                toUpperCase：小写转大写
                toLowerCase：大写转小写
                indexOf：检测是否包含某字符
                replace：用于替换字符串
    4.4、Number
        .toFixed(number)：保留几位小数

五、进阶——对象（续）

1、prototype(原型对象)
    //每个构造函数都有一个prototype属性，它指向另一个对象
    //这个对象可以挂载函数，对象实例化不会多次创建原型上函数，节约内存
    //建议将不变的方法定义在prototype上，这样所有对象的实例都可以共享这些方法
    function Star(uname,age){
        this.uname = uname;
        this.age = age;
        //this.sing = function(){
        //    console.log('唱歌')}
        //方法建议不要写在构造函数里                         
    }
    Star.prototype.sing = function(){
        console.log('唱歌')
        //建议将方法以及要共享或不需要修改的属性挂在原型上
    }
2、constructor
    //每一个原型对象都有一个指向它自身的构造函数，即是constructor
    //若直接以
        Star.prototype = {
             sing:function(){
                 console.log('唱歌')             
             },
             dance:function(){
                 console.log('跳舞')             
             },       
        }                    
    //对原型函数赋值的话，会直接覆盖constructor，使其失去
    //所以若要以直接赋值来写原型函数，需要加上constructor: Star
    //即：
         Star.prototype = {
             constructor:Star;
             sing:function(){
                 console.log('唱歌')             
             },
             dance:function(){
                 console.log('跳舞')             
             },       
        }      
        或者
        Star.prototype.constructor = Star
              
3、__proto__
    //对象原型，指向原型对象
    //用来指明当前实例对象指向哪个原型对象prototype
    //__proto__内部也有一个constructor，指向创建该实例的构造函数
    //在浏览器里显示是[[Prototype]]

六、进阶——继承

1、思想：增加封装性，提升代码复用性
     如：
        function Person(){
            this.eyes = 2;
            this.head = 1;  
        }

        function Woman(){
        }

        function Man(){
        }

        Woman.prototype = new Person();
        //将Person的实例挂到Woman上
        Woman.prototype.constructor = Woman;
        //使Woman的原型函数的构造函数重新指回自身
        Man.prototype = new Person();
        Man.prototype.constructor = Man;

        Woman.prototype.baby = function(){
            console.log('baby');
        }

        const red = new Woman();
        console.dir(red);

七、进阶——原型链（说实话这块我做的很烂，建议直接看pink老师的视频……）

 //首先，我们使用
     function Person(){}
     //创建了一个对象
     Person.prototype.sing = function(){
         console.log('baby');     
     }
     //然后，我们使用
     const red = new Person();
     //创建了对象的实例
     
     随后，
     console(red.__proto__)
     //相当于Person.prototype
     //指向原型对象
     console(red.__proto__.constructor)
     //指向Person构造函数本身
     //相当于Person.prototype.constructor
     console(Person.prototype.__proto__)
     //相当于Object.prototype
     //因为__proto__指向创建它的原型对象
     //而Person是自定义的函数，创建它的原型对象便是Object
     console(Object.prototype.__proto__)
     //得到null
     
     red.__proto__ === Person.prototype
     //指向它的原型对象
     Person.prototype.__proto__ === Object.prototype
     //指向原型对象
     Object.prototype.__proto__ === null
     //到头了，所以返回null

2、instanceof：用于检测某个原型函数的prototype属性是否出现在某个实例对象的原型链上
    //如：
    red instanceof Person
    //因为red是Person的实例，在Person的原型链上，所以返回true
    [1,2,3] instanceof Array
    1 instanceof Number
    {a:"a"} instanceof Object
    //都为true
    
    function C(){}            
    const o = new C();
    o instanceof C     //true