2021/11/29(作用域)

JS作用域：

就是代码名字在某个范围内起作用和效果  目的是为了提高程序的可靠性 更重要的是减少命名冲突
            2.Js的作用域（ES6）之前 ：全局作用域 ，局部作用域
            3.全局作用域：整个script标签 或者是一个单独的js文件
            var num=10；
            4.局部作用域 在函数内部就使局部作用域 这个代码的名字只在函数内部起效果和作用
            function fn（）{
                <!--局部作用域-->
            }
        
        变量的作用域：更具作用的不同我们变量分为全局变量和局部变量
            1.全局变量：在全局作用域下的变量  在全局下都可以使用
            注意：如果函数内部 没有申明直接赋值的变量也属于全局变量  
                  函数的形参实际上就是局部变量
            2.局部变量：在局部作用域下的变量 后者在函数内的变量就是局部变量
                局部变量外部是无法调用的
            3.从执行效率来看全局变量和局部变量
                ①全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
                ②局部变量 当我们程序执行完毕就会销毁 比较节约内部资源
    
        

作用域链    
        

只要是代码，就至少有一个作用域
        写在函数内部的局部作用域
        如果函数中还有函数。那么在这个作用域中就可以有诞生一个新的作用域
        根据在内部函数可以访问外部函数变量的这种机制，用力按时查找决定哪些数据能被内部函数访问，就称作作用域链
        作用域链：内部函数访问外部函数的变量，采取的是链式查找的方式来决定去哪个值 这种结构我们称为作用链域  就近原则

1.我们JS引擎运行JS分为两步：  预解析    代码执行
        ①.预解析   JS引擎会把js里面所有的var 还有 function 提到当前作用域的最前面    
        ②.代码执行 按照代码书写的顺序从上往下执行
        
        2.预解析分为 变量预解析(变量提升)和 函数预解析（函数提升）
            ①变量提升 就是把所有的变量声明提升到当前的作用域最前面  不提升赋值操作
            ②函数提升 就是把所有的函数声明提升到当前作用域的最前面   不调用函数

对象

对象：对象是一个具体的事物（独特的）
            在JS中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等
            对象是由属性和方法组成的
            属性：事物的特征，在对象中用属性来表示（常用名词）
            方法：事物的行为，在对象中用方法来表示（常用动词）
            
        为什么需要对象
            保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。如果要保存一个人的完整信息？
        
        创建对象
            ①利用字面量来创建对象
            对象字面量：就是花括号{}里面包含了表达这个事物的具体属性和方法
            var obj={}；<!--创建了一个空的对象-->
            var obj={
                uname：'张赛凤',
                age:18,
                sex:'男',
                sayHi:function(){
                    console.log('hi---');
                }
            }
            ①里面的属性或者方法我们采用键值对的形式   键  属性名： 值 属性值
            ②多个属性或者方法中间用逗号隔开的
            ③方法冒号后面跟的是一个匿名函数
        
        使用对象
            ①调用对象的属性 我们采取 对象名.属性名    可以类比于数组的长度  数组名.length
            console.log(obj.uname);
            ②对象名['属性名']   属性名必须加引号
            console.log(obj['uname'])；
            ③调用对象的方法 sayHi  对象名.方法名
            
            变量、属性、函数、方法的区别
            变量和属性的相同点：
            他们都是用来存储数据的
            var num=10；
            var obj={
                age：18
                fn：function（）{
                    
                }
            }
            变量 单独声明并赋值 使用的时候直接写变量名 单独存在
            属性 在对象里面的不需要声明的 使用的时候必须是 对象.属性
            
            2.函数和方法的相同点
            函数是单独声明 并且调用的 函数名（）单独存在的
            方法 在对象里面 调用的时候 对象.方法名（）
            
            利用 new Object 创建对象
            var obj=new Object（）；
            obj.uname='张三丰';
            obj.sayHi=function(){
                console.log('hi---');
            }
            
            ①我们利用的是 等号= 赋值的方法 添加对象的属性和方法；
            ②每个属性和方法之间用 分号结束
            
            利用构造函数创建对象
                前两种创建对象方式一次只能创建一个对象
            
                我们一次创建一个对象，里面很多的属性和方法是大量相同的 我们只能负值
                因此我们可以利用函数的方法  重复这些相同代码  我们就把这个函数称为 构造函数，因为这个函数不一样，里面封装的不是普通代码，而是  对象
                构造函数 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面
                function 构造函数名（uname，age，sex）{
                    this.name=uname;
                    this.age=age;.
                    this.sex=sex;
                        
                    <!--this.属性 =值；-->
                    <!--this.方法=function（）-->{}
                }
            new 构造函数名（）；
            function Star（）{
                
            }
            new Star('刘德华'，18，男);  调用函数返回的是对象
            ①构造函数的名字首字母要大写
            ②构造函数不需要return 就可以返回结果

            ③我们调用函数  必须使用new
            ④我们只要new Star（）调用函数就创建一个对象
            ⑤我们的属性和方法前面必须有this；

       

 注意此时的Hero只是构造函数名，并不是对象名，不然在调用函数时无法使用

函数和对象
          

               1.函数 泛指的是某一大类 它类似于Java语言里面的 类（class）
            2.对象 特指 是一个具体的事物
            3.利用构造函数创建对象的过程也称为对象的实例化
            
            new在执行时做的四件事：
            ①在内存中创建一个新的对象
            ②让this指向这个新的对象
            ③执行构造函数里面的代码，给这个新对象添加属性和方法
            ④返回这个新对象
            
            遍历对象属性
            for   in 遍历我们的对象
            for（变量 in 对象）{
                
            }
            例：for(var k in obj){
                console.log(k); k 变量 输出 得到的是 属性名
                console.log(obj[k]);obj[k]得到的是  属性值
                
                我们使用for in 里面的变量 我们喜欢写的是 k 或者 key
            }
        
        
      

 内置对象
        
            

JS中的对象分为3种：自定义对象、内置对象、浏览器对象
            前面两种对象是JS基础内容，属于ECMAscript；第三个浏览器对象属于我们JS独有
            内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的伙食最基本而必要的功能（属性和方法） 其能帮我们进行快速开发
            JS中提供了多个内置对象：Math、Date、Array、String等
            
            Math对象  不是一个构造函数 ，所以我们不需要new来调用 而是直接使用里面的属性和方法即可
            1.绝对值方法
                console.log(Math.abs(1));   1
                console.log(Math.abs(-1));   1
                console.log(Math.abs('-1'));   隐式转换 会把字符串型 -1 转换为数字型
                console.log(Math.abs('.pink'));  NaN
            
            2.三个取整方法
                （1）Math.floor() 向下取整   往小的取值  []
                （2）Math.ceil()向上取整  往大的取值   进一法
                （3）Math.round() 四舍五入  注意：.
                5很特殊，其在四舍五入中往大的取
                例console.log(Math.round(-1.5));    -1

3.随机数
                ①Math对象随机数方法  random()返回一个随机的小数   0<=x<1
                ②这个方法里面不跟参数
                ③代码验证
                console.log(Math.random());
                ④我们想要得到两个数之间的随机整数 并且 包含2个整数
                函数:function getRandom(min,max){
                    return Math.floor(Math.random()*(max-min+1))+min;
                    
                }
                console.log(getRandom(1,10));
            4.随机点名
            var arr=['张三','张三等','张三丰子','李四'];
            console.log(arr[getRandom(0,arr.length-1)]);
            
            日期对象
            Date() 日期对象 是一个构造函数 必须使用new来调用创建我们的日期对象
            var arr=new Array();
            var obj=new Object();
                1.使用Date
                var date=new Date();
                2.参数常用的方法 数字型 2019,10,09 或者是字符串型'2019-10-1 8:8:8'
                数字型的输入会有问题 ,最常用的是字符串类型
                3.日期的格式化
                格式化日期  年月日
                var date=new Date();
                console.log(date.getFullYear());  返回当前日期的年份
                console.log(date.getMonth()+1); 月份 返回的月份小1个月 记得月份+1   因为从0开始
                console.log(date.getDate()); 返回的是 几号
                console.log(date.getDay));  周一返回的是1  周六返回的是6 但是周日返回的是 0
                例:
                var year=date.getFullYear();
                var month=date.getMonth();
                var dates=date.Date();
                var arr=['星期日'，'星期一'，'星期二'，'星期三'，'星期四'，'星期五','星期六'];
                var day=date.getDay();
                console.log('今天是：'+year+'年'+month+'月'+dates+'日'+arr[day]);
            
                var date=new Date  ();
                console.log(date.getHours);   时
                console.log(date.getMinutes);   分
                console.log(date.getSeconds);    秒
                
                4.获取总的毫秒形式(时间戳)
                Date对象是基于1970年1月1日开始 
                距离1970年1月1日过了多少毫秒数
                ①通过valueOf() getTime()
                var date=new Date();
                console.log(date.getTime());
                console.log(date.valueOf);
                ② 简单的写法(最常用的写法)
                var date1=+new Date() 返回的是总的毫秒数
                ③H5新增的 获得的总的毫秒数
                console.log(Date.now());
                
                例:倒计时效果
                1.核心算法:输入的时间减去现在的时间就是剩余的时间,即倒计时,但是不能拿着时分秒相减,比如05分减去25分,结果是负数
                2.用时间戳来做.用户输入时间总的毫秒数减去现在时间的总的毫秒数,得到的就是剩余时间的毫秒数
                3.把剩余时间总的毫秒数转换为天  时  分  秒(时间戳转换为时分秒)
                转换公式如下:
                d=parseInt(总秒数/60/60/24)    //计算天数
                h=parseInt(总秒数/60/60%24)        //计算小时
                m=parseInt(总秒数/60%60)            //计算分数
                s=parseInt(总秒数%60)            //计算当前秒数
                
                function conutDown(time){
                    var nowTime=+new Date();  //返回的是当前时间总的毫秒数
                    var inputTime=+new Date(time);  //返回的是用户输入时间总的毫秒数
                    var times=(inputTime-nowTime)/1000;    //time是剩余时间总的毫秒数
                    var d=parseInt(总秒数/60/60/24);
                }
                
            数组对象
                创建数组的两种方式
                1.利用数组字面量
                var arr=[1,2,3];
                console.log(arr[0]);
                
                2.利用new Array()
                var arr1=new Array(); //创建了一个空的数组
                var arr1=new Array(2); //数组的长度为2  里面有两个空的数组元素
                var arr1=new Array(2,3);  //等价于[2,3]这样写表示  里面有2个数组元素  是2和3
                tips:当方括号内部写有大于等于1个元素的时候,此时则表示数组元素;只有1个元素的时候,此时表示的是数组长度
                
            检查是否为数组
            ①instanceof  运算符 可以用它来检测是否为数组
            例:var arr=[];
            console.log(arr instanceof Array);
            ②Array.isArray();  H5中新增的方法,ie9以上版本支持
            
            添加删除数组元素的方法
            push
                1.push()在我们数组的末尾  添加一个或者多个数组元素
                2.push()参数直接写  数组元素就可以了
                3.push完毕之后,返回的结果是 新数组的长度
                4.原数组也会发生变化
            
            unshift
                1.unshift是可以给数组前面追加新的元素
                2.unshift()参数直接写 数组元素就可以了
                3.unshift完毕之后 ,返回的结果是 新数组的长度
                4.原数组也会发生变化
                
            pop() 它可以删除数组的最后一个元素
                console.log(arr.pop())
                1.pop是可以删除数组的最后一个元素  一次只能删除一个元素
                2.pop()没有参数
                3.pop完毕之后,返回的结果是 伤处的那个元素
                4.原数组也会发生变化
            
            shift()它可以删除数组的第一个元素
                console.log(arr.shift());
                1.shift是可以删除数组的第一个元素  一次只能删除一个元素
                2.shift()没有参数
                3.shift完毕之后,返回的结果是 删除的那个元素
                4.原数组也会发生变化
            
            数组排序
                1.翻转数组
                var arr=['pink','red','blue','green'];
                arr.reverse();
                console.log(arr);
                
                2.数组排序(冒泡排序)
                var arr=[13,4,7,11];
                arr.sort(function(a,b){
                    return a-b;         升序的顺序排列,反之亦然    
                })
                console.log(arr);
                
            数组索引方法
            1.返回数组元素索引号方法 indexOf(数组元素) 作用就是返回该数组元素的索引号
            2.他只返回第一个满足条件的索引号
            3.他如果在该数组里面找不到元素,则返回的是-1
            4.indexOf从前查找索引号  lastindexOf从后查找索引号
            var arr=[2,4,5,6,8,4];
            console.log(arr.indexOf(5));
            
            数组去重
            ['c','d','c','b','a','x','a','a']要求去除数组中重复的元素
            1.目标:把旧数组里面不重复的元素选取出来放到新数组中,重复的元素只保留一个,放到新数组中去重
            2.核心算法:我们遍历旧数组,然后拿着旧数组元素去查询新数组,如果该元素在新数组里面没有出现过,我们就添加,否则不添加
            3.我们怎么知道该元素没有存在?利用新数组.indexOf(数组元素)如果返回时-1就说明新数组里面没有该元素
            封装一个 去重的函数unique 独一无二的
            function unique(arr){
                var newArr=[];
                for(var i=0;i<arr.length;i++){
                    if(newArr.indexOf(arr[i]===-1)){
                        newArr.push(arr[i]);
                    }
                }
                return newArr;
            }
             var demo=unique['c','d','c','b','a','x','a','a']
             console.log(demo);
             
             数组转换为字符串

 1.toString() 将我们的数组转换为字符串
             var arr=[1,2,3];
             console.log(arr.toString)
             2.join(分隔符)
             var arr1=['green','blue','pink'];
             console.log(arr1.join());  green,blue,pink
             console.log(arr1.join('-'));  // green-blue-pink
             
        字符串对象
            基本包装类型
            var str='andy';
            console.log(str.length);
                对象才有  属性和方法  复杂数据类型才有  属性和方法
            基本包装类型:  就是把简单数据类型 包装成为了  复杂数据类型
            (1)把简单数据类型包装为复杂数据类型
                var temp= new String('andy');
            (2)把临时变量的值给 str
            str=temp;
            (3)销毁这个临时变量
            temp=null;
            
            为了方便操作基本数据类型,Javascript还提供了三个特殊的引用类型:String Number  BOOlean.
            基本包装类型就是把简单数据类型包装为复杂数据类型,这样基本数据类型有了属性和方法
            
            字符串的不可变性
            指的是里面的值不可变,虽然看上去可以改变内容,但其实是地址变了,内存中新开辟了一个内存空间
            不要大量拼接字符串
            
            根据字符返回位置  str.indexOf('要查找的字符',[往后的位置])
            字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串
            var str='改革春风吹满地，春天来了';
            console.log(str.indexOf('春'));
            console.log(str.indexOf('春',3));     从索引号是 3的位置开始往后查找
            
            
            简单类型与复杂类型
            简单类型又叫基本数据类型或者值类型  复杂类型又叫做引用类型
            
            根据位置返回字符
            1.charAt(index) 根据位置返回字符
            var str='andy';
            console.log(str.charArt(3));
            可以利用遍历整个数组
            
            2.charCodeAt(index) 返回相应索引号的字符ASCII值  目的:判断用户按下了哪个键
            console.log(str.charCodeAt(0));
            
            3.str[index] H5 新增的
            console.log(str[0]);