2021-08-11

day02-js笔记

复习拓展

01-变量的类型

基础类型

一、数字类型的拓展：
1)使用num.toFixed(n) 保留多少位小数；
2)Infinity 表示无穷大；
3)-Infinity 表示最小值；
注：任意数字/0 都可以得到无穷

二、字符串（string）拓展：
1.在进行+运算的时候，优先考虑字符串；
2.字符串可以直接作为数组使用；
3.可以使用split把字符串分割成数组；
试例代码如下：

<script>
//把字符串分隔成数组
        var students = '海绵宝宝,派大星,章鱼哥';
        console.log(students.split(","));
</script>

三、布尔Boolean值：
返回false的所有情况：
0、-0、’’、null、undefined、false、NaN

四、undefined类型拓展：
所有返回undefined的情况：
1)声明的变量没有赋值；
2)访问数组不存在的下标；
3)访问对象不存在的属性；
4)如果函数没有返回值，那么他的返回值是undefined；
5)没有给函数的形参传实参；
6)Typeof 一个没有声明的变量（了解）；

五、null：
null：空，typeof null 返回的是 object
注意：如果将js代码放在scri标签中写在需要拿到的标签的前面时，会报错，如以下代码：先遇到script标签，执行完js代码之后才往下执行，所以无法获取到’input’

<script>
        var tag = document.querySelector('input');//先遇到script标签，执行完js代码之后才往下执行，所以无法获取到'input'
        console.log(tag);//null
        tag.onfocus = function() {
            console.log('获取到焦点了');//报错
        }
    </script>

    <input type="text" name="" id="">

报错：

六、基础类型的特征
1，值不可改变；
2，改变的是引用空间

引用类型

一、数组的拓展
1)push()：在尾部追加元素；
2)pop()：删除尾部元素并返回；
3)shift():删除第一个元素；
4)unshift()：在开始位置追加元素；
5)join():使用指定的字符连接元素；
代码：

<script>
var arr = [1, 2, 3];
        arr.push('a', 4); //追加元素
        console.log(arr);
        var r = arr.pop(); //删除 数组的最后一个元素，并返回被删除的元素
        console.log(r);

        arr.unshift(100,200,300);
        console.log(arr);

        console.log(arr.join('---'));
    </script>

二、数组的方法：
1.isArray()方法。这个方法主要用来判断变量是否是一个js数组。结果返回true 或者 false。
2.forEach()方法，这个方法主要用于遍历数组。
3.map()方法，主要用于对每个数组里面的元素执行相同的函数来创建新的数组。
4.filter()方法，与map方法类似，也是对数组中的每个元素执行相同的函数，将结果组合成一个新数组。
5.reduce()方法，主要是对数组中的每个元素执行函数，生成一个值。
6.every()方法，主要用于检查数组中每个元素是否符合函数的条件，如果其中有一个不符合，则返回false。
7.indexOf()访求 ，主要用于在数组中查找元素，并把元素的位置返回来。

三、对象
js里面一切皆为对象，对象用于描述一个事物；
构造函数；类；对象；
构造函数：通过 new 函数名 来实例化对象的函数叫构造函数，构造函数首字母一般大写

四、JSON格式的数据
本质上就是个对象；

五、函数
js函数定义方式：
　1.声明式函数定义： function 函数名 （）{}；这种定义方式，会将函数声明提升到该函数所在作用域的最开头。
　2.函数表达式：let fun = function(){}; 此方式定义的函数，只能在该作用域中，这段赋值代码执行之后才能通过fun（）调用函数，否则，由于变量声明提升，fun === undefined。
　3.new Function 形式： var fun1 = new Function (arg1 , arg2 ,arg3 ,…, argN , body )；Function构造函数所有的参数都是字符串类型。除了最后一个参数, 其余的参数都作为生成函数的参数即形参。

js函数的执行：
函数名后面跟小括号，表示函数的执行；
使用return返回函数的执行结果；
如果没有renturn来返回值，那么他的返回值是undefined；
Length是形参个数；

变量的作用域

作用域：我声明了一个变量，可以在什么地方使用；

一、变量的作用域：包括函数
1，全局变量：在顶层代码里面声明的变量我们称为全局变量，在任何地方都可以使用，包括函数内部；
2，局部变量：在函数内部声明的变量我们称为局部变量，只能在函数内部使用；
3，块级作用域：ES6里面的{}里面使用let声明的变量；var声明的变量不存在块级作用域；

注意：如果没有使用var 来声明，就是全局变量，会追加到顶层window身上，用 window. 来访问，window默认可以省略。
代码：

<script>
        var a = 100;
        console.log(a);

        function fn() {
            console.log(a);
            var b = 200;
            console.log(b);

            //如果没有使用var 来声明，就是全局变量，会追加到顶层window身上
            c = '局部的没有使用var的变量';
            console.log(c);
        }
        fn();
        console.log(window.c);//window默认可以省略
    </script>

二、变量提升：
只提升声明，不提升赋值；

三、JS解释器执行js代码的步骤：
1，语法检查：大小写、括号匹配等语法检查；
2，预编译：
a)全局预编译：
1）创建一个GO对象，即GlobalObject，执行期上下文；
2）把声明的全局变量作为属性追加到该对象里面；
3）把函数声明作为对应的属性值；
b)局部预编译：在函数调用的前一刻开始预编译 AO；
1）创建一个AO对象，即ActiveObject，函数的执行期上下文；
2）把函数内部声明的变量、函数名和形参作为属性追加到该执行期上下文对象里面；
3）把实参的值赋值给对应的属性；
4）把函数内部声明的函数作为值赋值给对应的属性；
注：
1.函数每调用一次，就会产生一个执行期上下文， 即AO
2.变量解析的顺序是优先使用自己的AO里面的值，如果找到就停止，否则就继续向上找，直到GO

四、作用域链：
1.AO、GO组成执行期上下文队列，我们称为作用域链
2.作用域链是函数被创建的作用域中对象的集合。作用域链可以保证对执行环境有权访问的所有变量和函数的有序访问。

五、执行语句：
赋值语句、函数调用语句、循环语句、判断语句等；

5，作用域链及引用类型综合理解

代码分析及截图分析：

<script>
        /* GO： {
            fn:function (o) {
            o.siteUrl = 'a';
            o = new Object();
            o.siteUrl = 'b'
            }

            cr:undefined ---->执行后为cr{}  //空对象
        } */
        function fn(o) {  //此时cr和o指向的都是同一个地址
            o.siteUrl = 'a';
            o = new Object();//新建了一个空间，里面为空对象，让o指向这个空间的地址
            o.siteUrl = 'b'
        }
        var cr = new Object();//创建一个空间，里面为空对象，cr指向它
        fn(cr);

        /* AO: {
            o:undefined ---->执行后为cr{}  //空对象
        } */
        console.log(cr.siteUrl);
    </script>