2021/08/05笔记

我们于2021/08/05 的学习目标是:JavaScript，核心任务为:

1、学习技术:

1）、JavaScript的基本概念

2）、调试

3）、变量

4）、数据类型

5）、typeof运算符

6）、数据类型的转换

7）、运算符

8）、数组

9）、函数

10）、this绑定对象

2、文档总结

1）、JavaScript的基本概念

JavaScript是具有面向对象能力的，解释型程序设计语言

能验证发往服务器端的数据，增加Web互动

用法：和HTML一起使用，可以通过直接或间接的方式将JS代码嵌入在HTML页面中。

分类：

行内JS：写在标签内部的JS代码

<button type="button" onclick="alert('我是一个按钮')">按钮</button>

内部JS：定义在Script标签内部的JS代码

<script>

   console.log("内部JS ");

</script>

外部JS：单独的JavaScript文件，在HTML通过Script标签实现

JS文件：first.js

alert("fds!!!!");

在HTML中引用：

<script scr="first.js"></script>

JS可以定义在页面中的任意位置，推荐放在head标签对中和body标签的末尾位置，便于后期维护。对于需要获取页面元素的JS，需放在body标签的末尾位置，当页面全部加载完成后触发函数的执行。

2）、调试

测试JS中的调试：

<script>

alert()

</script>

弹出对话框

<script>

document.write()

</script>

内部可以识别HTML语法结构

当原页面中的内容加载完毕后触发，会覆盖原页面

<script>

<button onclick="document.write('覆盖的文字');">按钮点击</button>

</script>

console控制台

<script>

console.log("日志输出")

</script>

控制台输出打印（推荐）

<script>

console.info("信息输出")

</script>

控制台输出信息

<script>

console.error("错误输出")

</script>

控制台输出错误

<script>

console.warn("警告输出")

</script>

控制台输出警告

3）、变量

变量：存储单个数据|表达式

声明的同时赋值

<script>

var 变量名 = 赋值;

</script>

先声明后赋值

<script>

var 变量名;

变量名 = 赋值;

</script>

同时定义多个变量

<script>
    var x=1,y="abc",z=false;
</script>

4）、数据类型

简单|基础数据类型：

String字符串 --> 黑色

   一对''|""表示字符串

   包含0~n个字符

   通过转义字符进行转义

Number 数值型

   形式为整数或小数

   NaN Not a Number 不是一个数字

      直接赋值NaN

      当运算无法得到一个正确结果

Boolean 布尔型

   true | false

   常用于对条件判定结果类型

Undefined 未定义

   直接赋值undefined

   声明变量未赋值的默认值

Null 空

   直接赋值Null

   无法获取元素

Null与Undefined的区别：

   underfined：存在但没有值

   null：元素不存在

Function 函数型

   function 函数名(参数列表){函数体}

   通过函数的调用使用

复杂|复合数据类型

   对象类型

   {}表示对象

   键值对组合而成

   {

      key:value

      key:value

      ...

   }

   两个键值对之间使用,分隔

   Key与Value之间使用:分隔

   Key：如果符合命名规范可以定义，不符合的需要前后加引号

   Value：可以为任意类型

5）、typeof运算符

typeof运算符：帮助判断数据的类型

返回一个字符串形式的小写的数据类型

Number --> number

String --> string

Null --> null

Undefined --> undefined

Boolean --> Boolean

Function --> function

Object --> object

6）、数据类型的转换

对象类型（函数）不参与类型转换

分类：

显示类型转换|强制

   String()：

      直接将值转换为对应的字符串

   Boolean()：

      空串转为false，非空串转为true

      数字0和NaN转换为false，其他数字转为true

      null和undefined都转为false

   Number()：

      空串和只包含空格的字符串转为0

      纯数字字符串转为数字类型

      非纯数字字符串转为NaN

      true转为1，false转为0

      null转为0

      undefined转为NaN

隐式类型转换：自动，执行某些行为操作时进行的类型转换

符号： + - * / ...

<script>

   //隐式类型转换

   console.log('a'-1);  //NaN

   console.log(false-1);  //-1

   console.log(true+false);  //1

</script>

7）、运算符

=赋值

==判断数据值是否相等

===先判断类型，再判断值是否相等

!=检查数据是否不相等

!==先检查类型，再检查数据是否不相等

逻辑运算符：JS中两边的表达式可以是任意类型

符号： & | && ||

&&：如果数据不是布尔类型，左边的操作数转换成布尔类型为false则输出第一个操作数；如果左边是true，结果是第二个操作数。

||：如果数据不是布尔类型，左边的操作数转换成布尔类型为false，则输出第二个操作数；如果左边是true，结果是第一个操作数。

<script>

   console.log(1=='1');  //true

   console.log(1==='1'); //false



   console.log(1!='1'); //false

   console.log(1!=='1'); //true



   console.log(true && false);//false

   console.log(true || false);//true



   console.log(Boolean(1));

   console.log(1 && 'a');  //'a'

   console.log(1 || 'a');  //1

</script>

8）、数组

数组[]：存储多个数据，长度可变，可以存储任意类型的数据

创建方式：

<script>

arr = new Array();

</script>

创建一个空数组

<script>

arr = new Array(值1,值2,值3);

</script>

创建数组并赋值

<script>

arr = [值1,值2,值3];

</script>

创建数组并赋值, 推荐

索引：检索数组的值，为0~length-1的整数，超出的部分值为undefined

<script>

arr[索引] = 值;

</script>

操作数组中的数据，当索引不是整数时定义为属性值

数组的遍历：

普通for

<script>

for(var i=0;i<=arr.length-1;i++){

   console.log(arr[i]);

}

</script>

for in

<script>

for(var i in arr){

   console.log(arr[i]);

}

</script>

for each

<script>

arr.forEach(function (value,index){

   console.log(value+"<--"+index);

});

</script>

常用方法：

<script>

   var arr = ["red","green","yellow","pink","black"];

   //数字常用方法

   //slice 截取（切片）数组，原数组不发生变化

   console.log(arr.slice(2));  /*默认从参数索引位置开始截取到最后*/

   console.log(arr.slice(1,3));  /*默认从参数1索引位置开始截取到参数2索引位置结果,结束索引不包含*/

   console.log(arr);

   //splice 剪接数组，原数组变化，可以实现前后删除效果

   //console.log(arr.splice(2));  /*实现了剪切|删除的效果,从索引位置开始剪切到最后,修改原数组*/

   //console.log(arr.splice(1,2));  /*实现了删除的效果,从参数1索引位置开始删除参数2个*/

   console.log(arr.splice(1,2,"哈哈","呵呵","吼吼"));  /*实现替换效果,把参数1索引位置开始,删除参数2个数据,替换为参数3开始后面的数据*/

   console.log(arr);

</script>

9）、函数

JS中的函数：封装功能

函数声明

<script>

   function 函数名（参数列表）{

      函数体;

   }

</script>

调用：执行函数

函数名(实参);

在函数声明的前面添加+|-|~|!或者前后添加一对()

<script>

/*函数声明的其他调用方式*/

~function fun2(){

   console.log("函数声明2");

}();

+function fun3(){

   console.log("函数声明3");

}();

-function fun4(){

   console.log("函数声明4");

}();

!function fun5(){

   console.log("函数声明5");

}();



(function fun6(){

   console.log("函数声明6");

})();

</script>

函数表达式

<script>

   var 变量名 = function（参数列表）{

      函数体;

   };

</script>

函数表达式中的函数名作用只有一个，在递归使用的时候有用，否则一般默认省略

调用：

变量名(实参);

函数表达式后面直接添加(实参),在当前直接调用

<script>

var f2 = function(x){

   console.log("函数表达式2");

}(1);

</script>

注意：

参数个数可以不同，函数没有传递实参，默认undefined

函数都存在返回值，没有显示定义return关键字返回结果，默认返回值为undefined

10）、this绑定对象

JS是值传递|引用传递（地址值传递）

JS中的作用域：以函数为单位

JS中的函数可以任意嵌套

函数存在作用域的提升：函数声明的方式会发生作用域的提升

变量的作用域提升：把当前变量的声明提升到当前作用域的最上面

当在函数中省略var关键字定义的变量，成为全局变量，但是事先要求这个函数至少被调用过一次

    <script>

        /*

            function func(){

                console.log("普通的函数声明");

            }

         */

        //调用函数的作用域提升

        func();



        // 给形参o赋予了新的数组

        var obj2 = [1, 2, 3];

        function paramter2(o){

            o = [2, 3, 4];

            o[1] = 3;

        }

        paramter2 (obj2);

        console.log(obj2); //[1, 2, 3];





        //快

        {

            var i = 1;

        }

        console.log(i);

        //作用域

        function fn1(){

            var j = 11;

        }

        //console.log(j);



        //嵌套

        function f1(){

            function f2(){

                function f3(){}

            }

        }



        //返回值为函数时

        function f4(){

            console.log("我是f4");

            return function(){

                console.log("返回值函数");

            }

        }

        console.log(f4); //打印函数结构

        console.log(f4()); //打印输出函数f4的返回值

        f4()(); //调用f4函数,得到返回值函数再调用



        function func(){

            console.log("普通的函数声明");

        }





        //变量作用域提升

        function func2(){

            //var haha = undefined;

            console.log(haha);

            var haha = "zhangsan";  //局部变量

            m = 1; //全局变量

        }

        //func2();



        console.log(m);

    </script>