[JavaScript知识库]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>