ECMAScript基础知识总结

计算机=硬件+软件（操作系统—+应用软件）
浏览器包括：渲染引擎、JS引擎

一、JavaScript是什么

HTML\CSS——标记语言
JavaScript——编程语言

Java语言——运行在服务端的语言
JavaScript——运行在客户端（浏览器）的语言

JavaScript发展到现在几乎无所不能：
（1） 网页特效
（2） 服务端开发(Node.js)
（3）命令行工具(Node.js)
（4）桌面程序(Electron)
（5） App(Cordova)
（6）控制硬件-物联网(Ruff)
（7）游戏开发(cocos2d-js)

JS三部分：
（1）ECMAScript——JS的基本语法
（2）DOM——document object model 文档对象模型 操作页面上的元素的
（3）BOM——browser object model 浏览器对象模型 操作浏览器的

JS是什么？！！
（1）JS是一门脚本语言
（2）JS是一门解释性语言
（3）JS是一门动态类型语言
（4）JS是一门基于对象的语言

脚本语言：不需要编译，直接执行的
编译语言：需要将代码编译转换成计算机认识的二进制，才能运行

JS的原名叫LiveScript

发明JS语言的目的：解决浏览器和用户直接的交互问题！！！

html——标记语言，是用来展示数据的，搭建页面结构的
css——美化页面的
js——用户和浏览器进行交互的

二、JavaScript的书写位置

一个页面中有哪些代码？！！
html
css
js

JS代码的书写位置由三个地方：
（1）JS代码可以写在HTML标签中
（2）JS代码可以写在HTML页面中，在script标签中写JS代码
（3）JS代码可以写在外部的JS文件中，需要在HTML中引入，使用script的src属性

三、JS书写注意事项

（1）在同一对script标签中有js的错误代码，那么该错误的代码后面的代码都不会执行了；
（2）在一个页面中可以出现多对script标签；
（3）如果第一对script标签中有错误，不影响后面的（其他的）script标签中的代码；
（4）script标签中可以省略type=“text/javascript” language=“javascript”
（5）script标签一搬都是写在body标签的最后。

四、变量

变量：是计算机内存中用来存储数据的标志符

作用：
（1）保存数据
（2）读取数据

（1）Java变量：
在程序运行过程中其值会发生变化的量
变量实际上就是一个可以存储数据的容器
（2）JS变量：
在程序运行过程中其值会发生变化的量
变量实际上就是一个可以存储数据的容器

1、变量声明
var 变量名;
在JS中声明变量都是使用var

2、变量的负值

3、变量的初始化
var number = 11;

4、JS中的变量区分大小写

5、JS中的字符串可以使用双引号，也可以使用单引号

标识符的命名规则
（1）由字母、数字、下划线、美元符号组成
（2）不能以数字开头
（3）变量名要有意义（见名知意）
（4）遵循驼峰式命名（如果变量名是由多个英文单词组成的，第一个首字母小写,其余的首字母大写）
（5）变量名不能使用关键字和保留字

四、案例—交换两个变量的值

<script>
        /*
        * 方式一：使用第三方的变量进行交换   -----重点-----
        * */
        var num1 = 10;
        var num2 = 20;
        //把num1中的值取出来存到temp变量中
        var temp = num1;
        //把num2中的值取出来存放到num1中
        num1 = num2;
        //把num2中的值存放到num2中
        num2 = temp;
        console.log(num1,num2);//20  10

        /*
        * 方式二：一般适用于数字交换
        * */
        var a = 10;
        var b = 20;
        a = a+b;
        b=a-b;
        a=a-b;
        console.log(a,b);//20  10

        /*方式三：位运算*/
        var m = 10;
        var n = 20;
        m=m^n;
        n=m^n;
        m=m^n;
        console.log(m,n);//20  10
    script>

五、注释

（1）单行注释 //
（2）多行注释 /**/

六、数据类型

JS中的原有数据类型
number、string、boolean、null、undefined、object
（1）number—数字类型（小数和整数）
（2）string—字符串类型的，可以使用双引号和单引号，凡是用双引号和单引号引起来的变量都是字符串类型的
（3）boolean—布尔类型的值只有两个：true false
（4）null—空类型的，值只有一个：null
（5）undefined—未定义 值也只有一个：undefined
（6）object—对象

如何获取变量的数据类型？使用typeof获取
语法：
（1）typeof 变量名
（2）typeof(变量名)

1、number

1：十进制 45
2：二进制 01010
3：八进制 以0开头
4：十六进制 以0x开头
十进制转二进制（除2取余，除到商为0，从下向上取余）
二进制转十进制（从右向左，让每一位上的数字乘以2的n次方，n是从0开始，依次加1）

<script>
        /*
        * 数字类型的取值范围
        * */
        console.log(Number.MAX_VALUE);//1.7976931348623157e+308
        console.log(Number.MIN_VALUE);//5e-324

        /*
        * 因为JS是十天发明的，有bug，不要用小数去验证小数
        * */
        var a = 0.1;
        var b = 0.2;
        var sum = a+b;
        console.log(sum);//0.30000000000000004
        console.log(sum==0.3);//false

        /*
        * NaN  not a number
        * 能不能用NaN去验证NaN?   不能！！！
        * */
        var num;
        console.log(num);//undefined
        console.log(num+10==NaN);//false

        /*
        * 如果要验证结果是不是NaN,应该使用isNaN();
        * isNaN  是不是不是一个数字  不是一个数字吗
        * */
        console.log(isNaN(10));//false
    script>

2、string类型

（1）获取字符串的长度
Str.length
（2）字符串的拼接（+）

可以使用+号进行字符串的拼接。
1：如果只要有一个字符串，其他的都是数字，那么结果也是拼接的，不是相加
2：如果一个是字符串，另一个是数字，如果是减号、乘号，此时会进行计算。

<script>
        /*
        * 获取字符串长度
        * */
        var str = "good good study day day up";
        console.log(str.length);//26

        /*
        * 字符串的拼接
        * */
        var num1 =11;
        var num2 = 22;
        console.log(num1+num2);//33
        var str1 = "hello";
        console.log(str1+num1);//hello11

        var str2 = "30";
        //浏览器会自动的把字符串类型转换为数字类型：隐式转换
        console.log(str2-num2);//8

        var str3 = "10";
        console.log(str3*str2);//300

        console.log("你好"+"我好"+20);//你好我好20

    script>

七、数据类型转换

1、其他类型转数字型

 <script>
   
        //方式一：parseInt()  转整数
        console.log(parseInt("10"));//10
        console.log(parseInt("10abcd"));//10
        console.log(parseInt("ab10"));//NaN
        console.log(parseInt("10.98"));//10
        console.log(parseInt("10.98abcd"));//10

        //方式二：parseFloat()    转小数
        console.log(parseInt("10"));//10
        console.log(parseInt("10abcd"));//10
        console.log(parseInt("ab10"));//NaN
        console.log(parseInt("10.98"));//10.98
        console.log(parseInt("10.98abcd"));//10.98

        //方式三：Number()   转数字
        console.log(parseInt("10"));//10
        console.log(parseInt("10abcd"));//NaN
        console.log(parseInt("ab10"));//NaN
        console.log(parseInt("10.98"));//10.98
        console.log(parseInt("10.98abcd"));//NaN

        /*
        * 总结：
        * 字符串转整数使用parseInt()
        * 字符串转小数使用parseFloat()
        * 字符串转数字使用Number()------------>>要比上面的两个方法更加严格！！！！
        * */
    script>

2、其他类型转字符串类型

<script>

        //方式一：.toString();
        var num = 10;
        console.log(num.toString());

        //方式二：String
        console.log(String(num));
    script>

3、其他类型转布尔类型

<script>

        //方法：Boolean();
        console.log(Boolean(1));//true
        console.log(Boolean(0));//false
        console.log(Boolean(11));//true
        console.log(Boolean(-11));//true
        console.log(Boolean("哈哈"));//true
        console.log(Boolean(""));//false
        console.log(Boolean(null));//false
        console.log(Boolean(undefined));//false
        console.log(Boolean(NaN));//false
        
        console.log(10+"");
        
        /*
        * 总结：
        * 0 、““、null 、 undefined 、NaN都会转换成false，其他的都会转成true.
        * */

    script>

八、操作符

1、算数运算符
+ - * / %

2、一元运算符

<script>

        //i++   ++i

        var a = 10;
        a++;
        console.log(a);//11

        var b = 10;
        ++b;
        console.log(b);//11

        var c = 10;
        c = c++;
        console.log(c);//10

        var d = 10;
        d = ++d;
        console.log(d);//11
        
        var m = 1;
        var n = ++m + ++m;//2+3
        console.log(n);//5
        
        var i = 1;
        var j = i++ + ++i;//1+3
        console.log(j);//4
        
        /*
        * 总结：
        * num++,   先参与运算，然后再加1
        * ++num,   先加1，然后再参与运算
        * */
    script>

3、逻辑运算符
&& || ！

4、关系运算符

<script>
        
        /*
        *    >  <  >= <= == === != !==
        * 
        * 结果的类型是布尔类型
        * 
        * ==与=== 的区别：
        *      ==：比较的是值，只进行值的比较
        *      ===：比较的是值与数据类型，只有当值和数据类型都一样的时候才相等，更加严格
        * */
        console.log( 5 == 5);//true
        console.log(5 == "5");//true
        console.log(5 === "5");//false
        
    script>

5、三元运算符

<script>
        /*
        * 格式： var 变量 = 表达式1 ？ 表达式2：表达式3;
        * */
        var age = 10;
        var result = age >= 18 ? "成年":"未成年";
        console.log(result);
    script>

6、运算符优先级
（1）（）
（2）一元运算符 ++ - -
（3）算术运算符 先* / 后+ -
（4）关系运算符 > < <= >=
（5）相等于运算符 == !=
（6）逻辑运算符 && ||
（7）赋值运算符 =

<script>
        
        var result = 4 >= 6 || '人' != '狗' && !( 12*2 ==144) && true;
        console.log(result);//true


        var num = 10;
        var result2 = num / 2 == 5 && (2 + 2 * num).toString() === "22";
        console.log(result2);//true
    script>

九、表达式和语句

（1）表达式：
一个表达式可以产生一个值，有可能是运算、函数的调用。
表达式可以放在任何需要的地方。
（2）语句：
Var num = 10;

十、流程控制语句

1、顺序语句
从上而下执行的语句

2、分支语句
（1）if语句

<script>
        //润年：  能被4整除 并且 不能被100整除 或者  能被400整除
        var year = prompt("请输入年份");
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
            console.log("是闰年");
        }else {
            console.log("不是闰年");
        }
    script>

（2）switch分支语句

<script>
        
        /*
        * 执行流程：
        *   表达式的值与case后面的值进行比较，如果发现有相等的，则执行里面的代码，之后跳出分支语句
        * 
        * 注意：
        *   -在进行值的比较时，与case的顺序无关
         *  -default是可以删除的
         *  -break的作用是结束分支语句
         *  -在进行值的比较时采用的是全等于===    例如： 10  ”10“
        * */
        var num = 30;
        switch (num) {
            default:
                alert(40);
                break;
            case 20:
                alert(20);
                break;
            case 10:
                alert(10);
                break;
            case '30':
                alert(30);
                break;

        }
    script>

3、循环语句
（1）while循环

<script>
        /*
        * 格式：
         *      while(循环的条件){
         *          循环体
         *
         *      }
         *  执行流程：
         *      先判断后执行
        * */
        //计算1-100之间偶数的和，将和输出打印
        var i= 0;
        var sum = 0;
        while(i < 101){
            //判断是否是偶数
            if (i % 2 == 0){
                sum+=i;
            }
            i++;
        }
        console.log(sum);
    script>

（2）do-while

<script>
        /*
        * 格式：
         *      do{
         *          循环体；
         *      }while(条件);
         *
         *  执行流程：
         *      先执行一次循环体，然后再判断条件，不成立，则跳出循环
        * */
        var num = 10;
        do{
            alert("哈哈。我又执行了");
        }while (num > 20);
    script>

3）for循环

<script>
        /*
        *    格式：
         *      for(初始化变量；循环的条件；循环后执行的代码){
         *          循环体；
         *      }
         *   执行流程：
         *
         *
         *   注意：
         *      for循环中可以嵌套for循环
         *
         *    向页面输入内容：
         *      document.write();
        * */

        //打印一个5行5列的矩形
        for (var i = 0 ; i < 5 ;i++){//控制行数
             for (var j = 0 ; j < 5;j++){//控制列数
                 //console.log("*");
                 document.write("*");
             }
             //换行
             document.write("
")
         }
        

        /**
         *   *
         *   **
         *   ***
         *   ****
         *
         */
        for(var i = 0 ; i< 4 ;i++){//控制行数
             for (var j = 0 ;j <=i ;j++){//
                 document.write("*");
             }
             document.write("
")
         }


        /**
         *  ****
         *  ***
         *  **
         *  *
         */
         for(var i = 0 ; i < 4 ; i++){
             for (var j = 0 ; j < 4-i ;j++){
                 document.write("*");
             }
             document.write("
")
         }
    script>

九九乘法表

<script>
        document.write("");for(var i =1; i <=9; i++){//控制行数
          document.write("");for(var j =1; j <= i ; j++){
            document.write("")}
          document.write("")}
        document.write("

            

            
");
            document.write(i + "x" + j + "=" + i*j);
            document.write("
          
        
")

    script>

十一、break关键字

<script>

        //计算1-100之间7的倍数的和

        //找出100-200之间第一个被7整除的数  105
        for (var i = 100 ; i <= 200 ; i++){
            if (i % 7 == 0){
                console.log(i);
                //结束当前的循环
                break;
            }
        }
    script>

十二、continue关键字

<script>
	/**
         * continue关键字
         *
         * 继续
         *
         * 结束当前这次循环，继续下一次循环
         */
         
         //计算100-200之间所有奇数的和，使用continue
         
script>

十三、debug调试

代码调试是基本功

之前的调试方法：
（1）alert();
（2）console.log();

断点调试：断点就是在某一行代码的前面设置的一个点。调试的时候，程序运行到这一行会停住，然后就可以一步一步的进行调试了，调试的过程
中，可以看每个变量的值，如果出错了，调式到出错的地方。

调试的步骤： 浏览器中——>右键——>检查——>sources——>双击代码——>在某一行上设置断点

操作：
单步调试：F11 代码会一行一行的执行
从一个断点跳到下一个断点处，F8
watch:监视 可以查看每个变量的值

十四、数组

1、为什么要学习数组？
Js中的数据类型包括6种。
存储数据的时候，变量只能存一个值。

2、数组的概念
数组的作用：可以一次性存储多个数据。
所谓的数组，就是将多个元素（通常指的是同一种数据类型的数据）按照一定的顺序存储到一个容器中。

3、字面量的方式创建数组
（1）数组中存储的数据是有一定的顺序的
（2）数组中的每个元素都对应着一个下标索引index,第一个元素的索引值是0，第二个元素的索引值是1，最后一个元素的索引值是长度-1

<script>
        //创建了一个空数组
        var arr = [];
        console.log(arr);

        //创建了一个包含3个number类型的数据的数组，数据之间用逗号隔开
        var arr2 = [1,2,3];
        console.log(arr2);

        //创建了一个包含3个String类型的数据的数组
        var arr3 = ["小苏","小三","小四"];
        console.log(arr3);

        //可以使用length获取数组的长度
        console.log(arr3.length);
    script>

4、构造方法创建数组

<script>
        //通过构造方法的方式创建了一个空数组
        var arr = new Array();
        console.log(arr);
        
        //通过构造方法的方式创建了一个数组，数组的长度是5 ，此时数组中的每个元素都是undefined
        var arr2 = new Array(5);
        console.log(arr2);
        
        //通过构造方法的方式创建了一个数组，数组的长度是5，此时数组中有元素
        var arr3 = new Array(1,2,3,4,5);
        console.log(arr3);
    script>

5、获取数组中的元素
语法：
var num = 数组名[下标];

<script>
    
        //获取数组中的元素
        console.log(arr[0]);
        console.log(arr[1]);
        console.log(arr[2]);
        console.log(arr[3]);//undefined

        //向数组中添加新的数据
        var arr2 = new Array("小苏");
        
        //向数组中添加新的元素
        arr[2] = "扎根三";
        console.log(arr2);
        
        //替换数组中的数据-----》下标
        arr2[0] = "张三";
        console.log(arr2);
    script>

6、数组中需要注意的问题
（1）数组中存储的数据的数据类型可以不一样。
（2）数组的长度可以发生改变。

<script>
        var arr = [1,2,"小苏",true,null,undefined,new Object()];
        console.log(arr);
 script>

7、数组总结
（1）数组：存储一组有顺序的数据; 数组可以一次性存储多个数据。
（2）数组的定义方式：
------字面量
var 数组名 = [];
------构造方法
var 数组名 = new Array();
var 数组名 = new Array(数字);
var 数组名 = new Array(值1，值2，值3);
（3）数组的长度：
数组名.length; 从0开始，到长度-1结束；
（4）获取数组中的数据：数组名[index]
（5）设置数组中数据：数组名[index] = 值；
（6）注意的问题
-------数组中存储的数据的数据类型可以不一样。
--------数组的长度可以发生改变。

8、数组案例

<script>
        /*
        * 案例一:计算数组中所有元素的和
        * */
        var arr1 = [1,2,3,4];
        var sum1 = 0;
        for (var i=0;i<arr1.length;i++){
            sum1+=arr1[i];
        }
        console.log(sum1);

        /*
        * 案例二:计算数组中所有元素的平均值
        * */
        var arr2 = [1,2,3,4];
        var sum2 = 0;
        for (var j=0;j<arr2.length;j++){
            sum2+=arr2[i];
        }
        console.log(sum2/arr2.length);

        /*
        * 案例三:输出打印数组中的最大值
        * */
        var arr3 = [13,3,21,324,434];
        var max = arr3[0];
        for (var i=0;i<arr3.length;i++){
            if (max<arr3[i]){
                max = arr3[i];
            }
        }
        console.log(max);

        /*
        *案例四：打印数组中的最小值
        * */
        var arr4 = [13,3,21,324,434];
        var min = arr4[0];
        for (var i=0;i<arr4.length;i++){
            if (min>arr4[i]){
                min = arr4[i];
            }
        }
        console.log(min);

        /*
        * 案例五:去除数组中的重复元素，把其他的数据放在一个新的数组中
        * */
        var arr5 = [12,3,1,0,4,0,6,0];
        var newArr =[];
        for (var i=0;i<arr5.length;i++){
            if (arr5[i]!=0){
                newArr[newArr.length] = arr5[i];
            }
        }
        console.log(newArr);

        /*
        * 案例六:冒泡排序----把所有的数据按照一定的顺序进行排列（从小到大，从大到小）
        * */
        var arr6 = [5,4,3,2,1];
        for (var i=0;i<arr6.length-1;i++){
            for (var j=0;j<arr6.length-1-i;j++){
                if (arr6[j]>arr6[j+1]){
                    var temp = arr6[j];
                    arr6[j] = arr6[j+1];
                    arr6[j+1] = temp;
                }
            }
        }
        console.log(arr6);
    script>

十五、函数

1、函数
（1）什么是函数：函数（方法）就是一段相对独立的具有特定功能的代码块，里面封装了代码，就形成了一个独立的实体，就是函数！！！
（2）函数的作用：封装代码，可以重复使用，减少重复代码。

<script>
        /*
        * 声明一个函数
        *   function 函数名() {
        *       函数体
        *   }
        * */
        //计算1——100之间的偶数和
        function getSum() {
            var sum = 0;
            for (var i=0;i<100;i++){
                if (i%2==0){
                    sum+=i;
                }
            }
            console.log(sum);
        }
        getSum();
    script>

2、函数的注意
（1）函数名一旦重复，后面的就会覆盖前面的方法------>>我们自己在定义方法的时候不要和系统提高的方法重名，
（2）一个方法只需要有一个功能就行了
（3）函数声明的时候，函数名要遵循驼峰式命名
（4）函数声明的时候，函数里面的代码不会执行
（5）函数只有调用的时候才会执行

3、函数练习

<script>
        //求两个数的和
        function getSum() {
            var num1 = 10;
            var num2 = 20;
            console.log(num1+num2);
        }
        getSum();

        //求两个数的最大值
        function getMax() {
            var num1 = 10;
            var num2 = 20;
            console.log(num1>num2?num1:num2);
        }
        getMax();

        //求三个数的最大值
        function  getMax2() {
            var num1 = 10;
            var num2 = 20;
            var num3 = 30;
            console.log(num1>num2?(num1>num3?num1:num3):(num2>num3?num2:num3));
        }
        getMax2();

        //求一个数组中所有元素的和
        function getSumArray() {
            var arr = [1,2,3];
            var sum = 0;
            for (var i=0;i<arr.length;i++){
                sum+=arr[i];
            }
            console.log(sum);
        }
        getSumArray();
    script>

4、函数的参数
语法：
function 函数名（形参1，形参2，…）{
封装的代码；
}
函数名（1，2，3）；//实参
（1）形式参数：在声明一个函数的时候，为了函数的功能更加灵活，有些值是无法固定的，对于这些无法固定的值，我们可以给函数设置参数，此时这个参数没有具体的值，仅仅起到了一个占位的功能，我们通常称之为形式参数，简称形参。
（2）实际参数：如果在函数声明的时候，设置了参数，那么在函数调用的时候就行需要传入对应的参数，我们把传入的参数通常称之为实际参数，简称实参。

<script>
        /*
        * 计算两个数组种元素的和
        * */
        function getSum(array) {
            var sum = 0;
            for (var i =0;i<array.length ;i++){
                sum+=array[i];
            }
            return sum;
        }
        var array1 = [1,2,3];
        var array2 = [2,3,4];

        var num1 = getSum(array1);
        var num2 = getSum(array2);
        console.log(num1+num2);
    script>

5、函数的返回值
（1）当函数执行完毕的时候，并不是所有的结果都需要打印，而是，我们希望调用完函数后给我一个结果，结果就是执行完函数的返回值。
（2）返回值使用return返回。
（3）声明带有返回值的方法的语法：
function 函数名（形参1，形参2）{
封装的代码；
return 返回值；
}
（4）方法的调用：
Var result=函数名（实参1，实参2）；
（5）注意事项：
1：如果函数没有使用return，就是没有返回值，函数有默认的返回值：undifined
2：如果一个函数使用了return，而且return后面跟了值，函数就有返回值了。
3：如果一个函数使用了return，但是return后面没有值（return;）函数的默认的返回值也是undefined，此时，函数执行到这行代码就会立即结束。

十六、arguments

在js中，arguments是一个特殊的对象，所有的函数都有这个对象.
arguments对象是一个伪数组---->可以遍历

<script>
        /*求n个数的和*/
        function getSum() {
            var sum = 0;
            for (var i=0;i<arguments.length;i++){
                sum+=arguments[i];
            }
            console.log(sum);
        }
        getSum(1,2,3,4);
    script>

十七、函数的定义方式

1、命名函数
函数如果有名字，就是命名函数！！！
声明：
function 函数名（）{
函数体；
}
函数名（）；

<script>
        function f1() {
           console.log("红烧班主任");
        }
        f1();
        function f1() {
            console.log("清蒸班主任");
        }
        f1();
    script>

2、匿名函数
（1）函数如果没有名字就是匿名函数！！
（2）语法：
Var 变量名 = function (){
}
变量名（）；
（3）如果函数是一个函数表达式，那么此时前面的变量中存储的是一个函数，就可以直接加小括号调用了！
（4）匿名函数不能够直接调用！！！

<script>
       var fn = function () {
            console.log("哈哈，你好");
       };
        fn();


        var f2 = function () {
            console.log("你好");
        }
    script>

十八、函数也是一种数据类型

函数也是一种数据类型，数据类型是function。

<script>

        function f1() {
            console.log("函数也是一种数据类型");
        }
        console.log(typeof f1);//function

    script>

十九、作用域

作用域就是变量起作用的范围。

1、块级作用域
一对花括号{}中的语句属于一个块。在这之中定义的变量在代码块之外是无法访问调用的===》块级作用域
js是没有块级作用域！！！

<script>
        {
            var number = 10;
        }
        console.log(number);

        if (true){
            var num = 20;
        }
        console.log(num);

        for (var i = 0 ; i <5 ;i++){
            var num2 = 30;
        }
        console.log(num2);
    script>

2、全局变量和局部变量
（1） 全局变量：
在一个页面中的任何一个地方能够访问的变量。
除了在函数内部中定义的变量，其他的都是全局变量。
（2）局部变量：
只有在固定的代码块中能访问的变量。
在函数中定义的变量就是局部变量。
（3）全局变量和局部变量的区别：
局部变量退出作用域之后就会销毁。
全局变量只有当关闭网页或浏览器的时候才销毁。

二十、预解析

（1）把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值。
（2）把函数的声明提升到当前 作用域的最前面，只会提升声明，不会提升调用。

<script>
        // function f1() {
        //     console.log(num);//undefined
        //     var num = 10;
        // }
        // f1();

        // function f1() {
        //     console.log("小苏真的好帅")
        // }
        // function f1() {
        //     console.log("小苏真的好猥琐")
        // }
        // f1();
        //
        // f1();


        f2();
        var a = 30;

        function f2() {
            console.log(a);//  undefined
            var a = 20;
        }
    script>

二十一、对象

1：分析对象
（1）编程思想：把一些生活中做事的经验或者方法或者是步骤融到项目中转换成代码。
（2）面向过程：凡是都是亲历亲为，每件事情的具体过程都需要参与，注重的过程。
（3）面向对象：根据需求找合适的对象，所有的事情都是对象来做，注重的结果。

类：鼠标、车 -----------》一类事物
对象：张三的鼠标、楼下停的白色的车--------》一类事物中特指的那个 对象：
张三是一个对象： 分析对象： 姓名、年龄、身高、体重------》对象的特征----》在代码中使用属性来表示
打篮球、跑、跳、吃-------》对象的行为-----》在代码中使用方法来表示

（1）如果一个变量属于一个对象所有，那么该变量就是该对象的属性，属性一般都是名词，用来描述对象的特征的。
（2）如果一个函数属于一个对象所有，那么该函数就是该对象的一个方法，方法一般都是动词，用来描述对象的行为和功能的。

2：创建对象

（1）通过调用系统的构造方法

<script>
        //创建对象
        var obj = new Object();

        //添加属性
        obj.name = "jack";
        obj.age = 30;
        obj.sex = "女";

        //添加方法
        obj.eat = function () {
            console.log("你好");
        }
        obj.play = function () {
            console.log("hello");
        }

        //获取对象属性
        console.log(obj.name);
        console.log(obj.age);
        console.log(obj.sex);

        //调用对象方法
        obj.eat();
        obj.play();
    script>

（2）工厂模式创建对象

<script>
        //人的对象
        var person = new Object();
        person.name = "小苏";
        person.eat = function () {
            console.log("小苏喜欢吃榴莲");
        }

        //学生对象
        var stu = new Object();
        stu.name = "消防";
        stu.study = function () {
            console.log("小法该学习");
        }

        //狗对象
        var dog = new Object();
        dog.name = "旺柴";
        dog.say = function () {
            console.log("旺旺");
        }

        /**
         * 获取对象是不是属于什么类型的？
         *
         * 语法：
         *      变量 instanceof 类型的名字；----》返回值的数据类型布尔
         */

        console.log(person instanceof Object);
        console.log(stu instanceof Object);
        console.log(dog instanceof Object);

        /*
        * 工厂模式创建对象
        * */
        function createObject(name,age) {
            var obj = new Object();
            obj.name = name;
            obj.age = age;
            obj.eat = function () {
                console.log("我叫"+this.name+",今年："+this.age);
            }
            return obj;
        }
        var per = createObject("小苏",19);
        per.eat();
        var dog = createObject("旺柴",13);
        dog.eat();
    script>

二十二、new关键字

构造函数是一种特殊的函数，主要用来在创建对象的时候初始化对象的，总是与new关键字一起使用创建。
New关键字在执行的时候会做四件事：
（1）new会在内存中创建一个新的空对象
（2）new会让this指向这个新的对象
（3）执行构造函数 目的：给这个对象添加属性和方法
（4）new会返回这个新对象

1、通过系统的构造方法
如上工厂方式创建对象

2、自定义构造方法创建对象

<script>
        /**
         * 不是调用系统的构造方法，而是我们自己定义一个构造方法，然后通过这个自定义的构造方法创建对象
         *
         * Object();---->首字母是大写的
         * 普通方法的方法名首字母是小写
         */
        //自定义构造方法
        function Person(name,age) {
            this.name = name;
            this.age = age;
            this.eat = function () {
                console.log(this.name+"好好吃饭");
            }
        }
        //创建对象
        var p1 = new Person("小苏",10);
        p1.eat();
        var p2 = new Person("张三",13);
        p2.eat();

        console.log(p1 instanceof Object);
        console.log(p2 instanceof Person);
    script>

3、字面量的方式创建对象

<script>
        var obj = {
            name:"小苏",
            age:19,
            say:function () {
                console.log("大家好");
            },
            eat:function () {
                console.log("吃饭");
            }
        };
        console.log(obj.name);
        obj.say();
    script>

二十三、JSON格式的数据

Json格式的数据：一般都是成对的，是键值对。Key-value
JSON也是一个对象，数据都是成对的，
一般json格式的数据键是使用双引号引起来的，值可以使用双引号也可以不使用。

<script>
        var json = {
            "name":"小苏",
            "age":"13",
            "sex":"女"
        };
        console.log(json.name);
        for (var key in json){
            console.log(json[key]);
        }
    script>

二十四、数据类型存储位置

JS原始数据类型6种：
Number string Boolean null undfined Object
细分3种：
（1）基本类型（简单类型、值类型）：number string Boolean
（2）复杂类型（引用数据类型）：object
（3）空类型：null undefined
--------值类型的值在栈内存空间存储
--------引用数据类型的对象在堆内存种存储，地址在栈内存中存储。

二十五、内置对象

Js种的对象可以分为3种：
（1）内置对象-----》系统自带的对象
（2）自定义对象-----》自己定义的构造方法创建的对象
（3）浏览器对象----》BOM

如何学习内置对象？
对象是有属性和方法的！
学会这个对象有哪些属性和哪些方法！！！！

网站：
Iconfont
Icomoon
Bitbug—favicon.ico
W3C
MDN

（1）实例对象：就是通过构造方法创建实例化的对象
（2） 静态对象：不需要通过构造方法创建，直接就是一个对象，属性和方法都是直接通过这个对象的名字调用。

1、Math
（1）属性：
Math.PI：圆周率，一个圆的周长和直径之比，约等于 3.14159。
（2）方法：
Math.abs(x)—>取绝对值
Math.ceil(x)---->返回大于一个数的最小整数，即一个数向上取整后的值。
Math.floor(x)—>返回小于一个数的最大整数，即一个数向下取整后的值。
Math.max([x[, y[, …]]])—>返回零到多个数值中最大值。
Math.random()：---->返回一个 0 到 1 之间的伪随机数。
Math.random() 函数返回一个浮点数, 伪随机数在范围从0到小于1，也就是说，从0（包括0）往上，但是不包括1（排除1），然后您可以缩放到所需的范围。
Math.round(x)-----》返回四舍五入后的整数。

<script>
	//输出[1,5]
        console.log(parseInt(Math.random()*5)+1);// 0<= a < 1     0<= a < 5   1<= a < 6
        //输入[1,100]
        console.log(parseInt(Math.random()*100)+1);

        //不小于 min（有可能等于），并且小于（不等于）max。
        function getRandomArbitrary(min, max) {
            return Math.random() * (max - min) + min;
        }
        console.log(getRandomArbitrary(2,10));
script>

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        #root {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    style>
    <script>
        /**
         * 需求：随机产生一个十六进制的颜色值，修改div的背景颜色
         *
         *  #ff0000   每一个颜色值组成：#000000    #ffffff   0-9 a-f
         */
        function getColor() {
            var str = "#";
            var arr = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
            for (var i = 0 ;i<6;i++){
                var num = parseInt(Math.random()*16);
                str = str+arr[num];
            }
            return str;
        }
        console.log(getColor());
        window.onload = function () {
            var color = document.getElementById("root");
            color.style.backgroundColor = getColor();
        }
    script>
head>
<body>
    <div id="root">div>
body>
html>

2、Date

<script>
        
        var now = new Date();
        console.log(now);//Mon Oct 25 2021 15:34:30 GMT+0800 (中国标准时间)
        console.log(now.valueOf());//1635147323839----->获取的是现在距1970年1月1日零点的毫秒数
        console.log(now.getFullYear());//2021  年
        console.log(now.getMonth()+1);//月
        console.log(now.getDate());//25   日期
        console.log(now.getDay());//1   星期
        console.log(now.getHours());//小时
        console.log(now.getMinutes());//分钟
        console.log(now.getSeconds());//秒
        console.log(now.getMilliseconds());
        console.log(now.getTime());
        console.log(now.getTimezoneOffset());
        console.log(now.getUTCFullYear());
        console.log(now.getUTCHours());


        // var now2 = new Date(1635147323839);
        // console.log(now2);
        //
        // var now3 = Date.now();//h5提出的，兼容性问题
        // console.log(now3);
        //
        // var now4 = + new Date();
        // console.log(now4);


        //可以定义一个方法格式化时间   格式：yyyy-MM-dd HH:mm:ss   2021-10-25 16:00:10   2021-08-09 05:05:05
        function formatDate() {
            var d = new Date();
            var y = d.getFullYear();
            var m = d.getMonth()+1;
            var date = d.getDate();
            var hours = d.getHours();
            var minutes = d.getMinutes();
            var seconds = d.getSeconds();

            m = m < 10 ? "0"+m : m;
            date = date < 10 ? "0"+date :date;
            hours = hours < 10 ? "0"+hours:hours;
            minutes = minutes < 10? "0"+minutes:minutes;
            seconds = seconds < 10?"0"+seconds:seconds;
            return y+"-"+m+"-"+date + " " + hours+":"+minutes+":"+seconds;


        }
        console.log(formatDate());

    script>

3、String
String----》字符串，也可以看成一个对象
字符串可以看成是多个字符组成的数组。

<script>
         var str1 = "abcd";
         str1= "nkfjfj"//重新赋值
         console.log(str1);
         /**
          * 当重新给str赋值的时候，”abcd“不会被修改，依然保存在内存里面
          * 重新给字符串赋值，会重新在内存中开辟一个新空间，存储新的值，打印输出 的时候输出的时候是新值，是因为指向变了。
          */

         var  str2 = new String("小苏");
         console.log(str2);

    script>

创建字符串：
方式1：var str = “”;
方式2：var str2 = new String(“hello“);

常用的方法： 字符串所有的方法，都不会修改字符串本身（因为字符串是不可变的），操作完毕后都会返回一个新的字符串！！！！

4、Array

二十六、基本包装类