李天龙_20210115李天龙

学员日志 622 2021年1月15日 0 云创动力

一、学习总结

1.JavaScript (JS)

1.1JavaScript的作用

1.2 JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。
JavaScript 灵活轻巧，兼顾函数式编程和面向对象编程。

Java 与 JavaScript 对比：

1.3 JavaScript的语法组成

ECMAScript 是 JavaScript 的标准，但它并不等同于 JavaScript，也不是唯一被标准化的规范。
实际上，一个完整的 JavaScript 实现由以下 3 个不同部分组成：

2.JavaScript的基础语法

2.1 JavaScript的编写方式

以js文件的形式单独存在HTML的外部，使用的时候使用script标签的src属性导入进来即可。

script src="myScript.js" type="text/javascript"></script>

2.2`<script>`标签

<script>中的src属性和type属性:
src: 要导入的外部S文件,一旦导入了其他的js文件,此标签体中的js代码就失效了.
type: 指定脚本的类型，固定值: textjavascript
<script> 标签个数:在一个HTML网页中可以出现多个script标签, 每个标签中的脚本都会依次
执行。
出现的位置:可以出现在网页中的任意位置，甚至是html标签之外,-般根据情况选择，最常用的是出现在前
关于语句后面的分号:如果一条语句- -行，可以省略分号，但不建议省略

2.3 JS文件延迟和异步加载

<!DOCTYPE html>
<script>
alert("顶部脚本");
</script>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<script>
alert("头部脚本");
</script>
</head>
<body>
<h1>网页标题</h1>
<script>
alert("页面脚本");
</script>
<p>正文内容</p>
</body>
<script>
alert("底部脚本");
</script>
</html>

2.4延迟执行 JavaScript 文件


##### 2.5 JavaScript中的几个概念

###### 2.5.1 基本词法

JavaScript 语法就是指构成合法的 JavaScript 程序的所有规则和特征的集合，包括词法和句法。简单描
述如下：

1.词法定义了 JavaScript 的基本名词规范，包括字符编码、命名规则、标识符、关键字、注释规
则、 运算符和分隔符等。
2.句法定义了 JavaScript的基本运算逻辑和程序结构，包括短语、句子和代码段的基本规则，如表达
式、语句和程序结构等。

###### 2.5.2 区分大小写

构造函数的首字母建议大写。构造函数不同于普通函数

new Date(); //获取当前日期和时间


如果标识符由多个单词组成，可以考虑使用骆驼命名法——除首个单词外，后面单词的首字母大写

typeOf();
myGirlFriend;


###### 2.5.3 直接量

直接量（Literal）就是具体的值，即能够直接参与运算或显示的值，如字符串、数值、布尔值、正则表
达式、对象直接量、数组直接量、函数直接量等

###### 2.5.4转义序列

转义序列就是字符的一种表示方式（映射）。由于各种原因，很多字符无法直接在代码中输入或输出，
只能通过转义序列间接表示

//对于字符“©” , Unicode 转义为 \u00A9，ASCII 转义为 \xA9
document.write("\xa9"); //Latin-1 显示字符©
document.write("\u00a9"); //Unicode 显示字符©


###### 2.5.5 标识符

标识符（Identifier）就是名称的专业术语。JavaScript 标识符包括变量名、函数名、参数名和属性名
合法的标识符

###### 2.5.6 关键字

关键字就是 ECMA-262 规定的 JavaScript 语言内部使用的一组名称（或称为命令）。这些名称具有特
定的用途，用户不能自定义同名的标识符

######  2.5.7 转义字符

转义字符是字符的一种间接表示方式。在特殊语境中，无法直接使用字符自身。例如，在字符串中包含
说话内容。

alert(""子曰："学而不思则罔，思而不学则殆。""");


由于 JavaScript 已经赋予了双引号为字符串直接量的标识符，如果在字符串中包含双引号，就必须使用
转义字符表示

alert("子曰："学而不思则罔，思而不学则殆。"");


##### 2.6 变量

变量相当于容器，值相当于容器内装的东西，而变量名就是容器上贴着的标签，通过标签可以找到 变
量，以便读、写它存储的值

######  2.6.1 关于JS的弱类型（动态类型）

JavaScript 是弱类型语言，对于变量类型的规范比较松散。具体表现如下：
变量的类型分类不严谨、不明确，带来使用的随意性。
声明变量时，不要求指定类型。
使用过程不严格，可以根据需要自动转换变量类型。
变量的转换和类型检查没有一套统一、规范的方法，导致开发效率低下。

###### 2.6.2 字符和字符串类型的说明

JavaScript中只有字符串类型，没有字符类型，字符串既可以使用双引号，也可以使用单引号。

var a = "1";
var a = '1';


###### 2.6.3 变量作用域

在 JavaScript 中, 对象和函数同样也是变量，变量作用域为可访问变量，对象，函数的集合。
变量作用域（Scope）是指变量在程序中可以访问的有效范围，也称为变量的可见性。
JavaScript 变量可以分为全局变量和局部变量：
1.全局变量：不是声明在函数体内部的变量，变量在整个页面脚本中都是可见的，可以被自由访问。
2.局部变量：变量仅能在声明的函数内部可见，函数外是不允许访问的。只要函数运行完毕，变量就会被删除

### 3.数据类型

##### 3.1 五种原始数据类型：

[![sshJ58.jpg](https://s3.ax1x.com/2021/01/17/sshJ58.jpg)](https://imgchr.com/i/sshJ58)

#####  3.2 typeof操作符

1. 作用：判断指定的变量数据类型

2. 写法：

   ```
   1 typeof(变量名) 或 typeof 变量名
   ```

3. null 与 undefined 的区别：
    null: 是一个object类型，但没有值，可以认为是引用类型的占位符
    undefined：未初始化的类型，不知道是什么类型

3.3 引用类型

引用类型有：对象(Object)、数组(Array)、函数(Function)

### 4.常用运算符

##### 4.1 算术运算符

算术运算符用于执行两个变量或值的运算。

##### 4.2 赋值运算符

赋值运算符用于给 javascript 变量赋值。

##### 4.3 比较运算符

比较运算符用于逻辑语句的判断，从而确定给定的两个值或变量是否相等。

##### 4.4 逻辑运算符

逻辑运算符用来确定变量或值之间的逻辑关系。

##### 4.5 三目（元）运算符

var age = 24;
document.write("是成年人吗？"+ (age >= 18 ? "是":"不是")+"<br/>");


### 5.流程控制语句

高级语言中的三种基本结构：顺序、分支、循环

##### 5.1 if 判断

###### if 语句

在一个指定的条件成立时执行代码。

if(条件表达式) {
//代码块;
}


###### if...else 语句

在指定的条件成立时执行代码，当条件不成立时执行另外的代码。

if(条件表达式) {
//代码块;
}else {
//代码块;
}


###### if...else if....else 语句

使用这个语句可以选择执行若干块代码中的一个。

if (条件表达式) {
//代码块;
}else if(条件表达式) {
//代码块;
}else {
//代码块;
}


##### 5.2 循环

###### for 语句

循环指定次数

for (var i=0; i<10; i++) {
//需要执行的代码;
}


###### while语句：

当指定的条件为 true 时循环执行代码

while (条件表达式) {
// 需要执行的代码;
}


###### do-while语句：

最少执行1次循环

do {
// 需要执行的代码;
}
while (条件表达式)


###### break和continue

break: 跳出整个循环
continue：跳出本次循环

### 6. 函数

##### 6.1  函数的声明

一个函数的声明（或者说是函数的定义）包含：
1. 关键字function
2. 函数名称
3. 参数列表，包围在括号中并由逗号分隔
4. 定义函数的 JavaScript 语句，用大括号 {} 括起来

##### 6.2  函数表达式

JavaScript 函数可以通过一个表达式定义。

函数表达式可以存储在变量中:

var square = function (number){ return number * number };


在函数表达式存储在变量后，变量也可作为一个函数使用：

var s = square(2);


以上函数实际上是一个 匿名函数 (函数没有名称)。
函数存储在变量中，不需要函数名称，通常通过变量名来调用。

##### 6.3 Function() 构造函数

通过前边的内容我们学习了函数通过关键字 function 来定义。
函数同样可以通过内置的 JavaScript 函数构造器（Function()）定义

new Function ([arg1[, arg2[, ...argN]],] functionBody)


##### 6.4 调用函数

定义一个函数并不会自动的执行它。定义了函数仅仅是赋予函数以名称并明确函数被调用时该做些什
么。调用函数才会以给定的参数真正执行这些动作。例如，一旦你定义了函数 square ，你可以如下这
样调用它：

square(2);


##### 6.5 函数作用域

在函数内定义的变量不能在函数之外的任何地方访问，因为变量仅仅在该函数的域的内部有定义。相对
应的，一个函数可以访问定义在其范围内的任何变量和函数。换言之，定义在全局域中的函数可以访问
所有定义在全局域中的变量。在另一个函数中定义的函数也可以访问在其父函数中定义的所有变量和父
函数有权访问的任何其他变量

##### 6.6 嵌套函数和闭包

你可以在一个函数里面嵌套另外一个函数。嵌套（内部）函数对其容器（外部）函数是私有的。它自身
也形成了一个闭包。一个闭包是一个可以自己拥有独立的环境与变量的表达式（通常是函数）。
既然嵌套函数是一个闭包，就意味着一个嵌套函数可以”继承“容器函数的参数和变量。换句话说，内部
函数包含外部函数的作用域。

###### 6.6.1 闭包

闭包是 JavaScript 中最强大的特性之一。JavaScript 允许函数嵌套，并且内部函数可以访问定义在外部
函数中的所有变量和函数，以及外部函数能访问的所有变量和函数。
但是，外部函数却不能够访问定义在内部函数中的变量和函数。这给内部函数的变量提供了一定的安全
性。

##### 6.7 函数参数

从ECMAScript 6开始，有两个新的类型的参数：默认参数，剩余参数

###### 6.7.1 默认参数

在JavaScript中，函数参数的默认值是 undefined 。然而，在某些情况下设置不同的默认值是有用的。
这时默认参数可以提供帮助。

###### 6.7.2 剩余参数

剩余参数语法允许将不确定数量的参数表示为数组。在下面的例子中，使用剩余参数收集从第二个到最
后参数。然后，我们将这个数组的每一个数与第一个参数相乘。这个例子是使用了一个箭头函数，这将
在下一节介绍

function multiply(multiplier, ...theArgs) {
return theArgs.map(x => multiplier * x);
}
var arr = multiply(2, 1, 2, 3);
console.log(arr); // [2, 4, 6]


注意的事项
1. 形参的类型：在函数定义的时候不用指定类型，因为是可变类型
2. 函数的返回值：如果一个函数中需要返回值，直接使用return返回，如果没有返回值，不写
return。
3. 关于函数的重载：在JS中没有函数的重载，同名的函数会覆盖原来的函数，调用的时候，只会调用
最后声明的函数，而且实参的个数与形参数的个数没有关系。
4. 所有函数的内部都有一个类数组对象，名字叫：arguments，用来接收调用时提交的所有的参
数。

###### 6.7.13匿名函数

语法：

var 变量名 = function(参数列表) {
函数体;
}


函数调用：

//匿名函数
var sayHi = function(name) {
alert("Hello, " + name);
};
//调用
sayHi("Tom");


##### 6.8 箭头函数

箭头函数表达式（也称胖箭头函数）相比函数表达式具有较短的语法并以词法的方式绑定 this 。箭头
函数总是匿名的.
有两个因素会影响引入箭头函数：更简洁的函数和 this

###### 6.8.1 更简洁的函数

var a = [
"Hydrogen",
"Helium",
"Lithium",
"Beryllium"
];
var a2 = a.map(function(s){ return s.length });
console.log(a2); // logs [ 8, 6, 7, 9 ]
var a3 = a.map( s => s.length );
console.log(a3); // logs [ 8, 6, 7, 9 ]


###### 6.8.2 this 的词法

在箭头函数出现之前，每一个新函数都重新定义了自己的 this 值（在构造函数中是一个新的对象；在严
格模式下是未定义的；在作为“对象方法”调用的函数中指向这个对象；等等）。

function Person() {
// 构造函数Person()将this定义为自身
this.age = 0;
setInterval(function growUp() {
// 在非严格模式下，growUp()函数将this定义为“全局对象”，
// 这与Person()定义的this不同，
// 所以下面的语句不会起到预期的效果。
this.age++;
}, 1000);
}
var p = new Person();


##### 6.9 预定义函数

JavaScript语言有好些个顶级的内建函数:

[![ssIQKJ.jpg](https://s3.ax1x.com/2021/01/17/ssIQKJ.jpg)](https://imgchr.com/i/ssIQKJ)

# 二、心得体会

       在学习JavaScript的过程中，我最大的感受就是不像刚开始的那样轻松了，因为之前基本就没有系统性的学习过，这也就相当于第一次在学，所以学习的过程就稍微有些吃力了，我还需要对这些知识多加练习，才能更好的去记住。

李天龙_20210115李天龙

一、学习总结

1.JavaScript (JS)

1.1JavaScript的作用

1.2 JavaScript 是脚本语言

Java 与 JavaScript 对比：

1.3 JavaScript的语法组成

2.JavaScript的基础语法

2.1 JavaScript的编写方式

2.2`<script>`标签

2.3 JS文件延迟和异步加载

2.4延迟执行 JavaScript 文件

学员日志

近期文章

分类目录

近期评论

作者

热门

标签

评论

取消回复

2023年9月
一	二	三	四	五	六	日
« 8月
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

一、学习总结

1.JavaScript (JS)

1.1JavaScript的作用

1.2 JavaScript 是脚本语言

Java 与 JavaScript 对比：

1.3 JavaScript的语法组成

2.JavaScript的基础语法

2.1 JavaScript的编写方式

2.2<script>标签

2.3 JS文件延迟和异步加载

2.4延迟执行 JavaScript 文件

学员日志

近期文章

标签

分类目录

近期评论

作者

热门

标签

相关推荐

评论

取消回复

2.2`<script>`标签