JavaScript基础知识《三》

最新推荐文章于 2022-12-01 16:41:33 发布

猿知了

最新推荐文章于 2022-12-01 16:41:33 发布

阅读量128

点赞数

分类专栏： JavaScript 前端文章标签： javascript 前端 js

本文链接：https://blog.csdn.net/qq_43702977/article/details/112829554

版权

前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

JavaScript

作用

1. HTML > 用于创建网页结构
2. CSS > 对页面进行美化
3. javascript > 与用户进行交互（网页的行为）
ECMAScript 是 JavaScript 语言的规范标准，

JavaScript 是 ECMAScript 的一种实现。注意，这两个词在一般语境中是可以互换的。

简介

1. 是脚本语言
2. 是一种轻量级的编程语言
3. 是可插入HTML页面的编程代码
4. 可由所有现代的浏览器执行
5. 容易学习
6. 灵活轻巧，兼顾函数式编程和面向对象编程

组成

1. ECMAScript
2. BOM
3. DOM

JavaScript的基础语法

JavaScript的编写方式

写在HTML内部的脚本中，在，script标签中编写js代码，脚本可放置在HTML页面的body和，head部分中。
还可以单独放在HTML外部，使用script标签的css属性带入进来
- ```
<script src="myScript.js" type="text/javascript"></script>
```
- myScript.js 是一个 .js 格式的 JavaScript 文件。使用任何文本编辑器都可以编辑

script标签

script中的src属性和type属性
- src:要导入的外部js文件，一旦导入了其他的js文件，此标签中的js代码就失效
- type：制定脚本的类型，固定值：text/javascript
script标签个数：在一个HTML网页中可以有多个script标签，每个标签按照顺序依次执行。
出现的位置：可以出现在网页中的任意位置，甚至是html标签之外,一般根据情况选择，最常用的是出现在body前
关于语句后面的分号：如果一条语句一行，可以省略分号，但不建议省略。
注意:
- 使用＜script＞标签包含外部 JavaScript 文件时，默认文件类型为 Javascript。因此，不管加载的文件扩展名是不是 .js，浏览器都会按 JavaScript 脚本来解析。
- 定义src属性的 script标签不应再包含 JavaScript 代码。如果嵌入了代码，则只会下载并执行外部 JavaScript 文件，嵌入代码将被忽略

js文件延迟和异步功能

顺序：在网页上先弹出顶部的脚本文件，然后显示网页的标题，再弹出头部文件，再显示一级标题网页标题，接着弹出页面脚本，再显示正文内容，最后弹出底部脚本文件
对于JavaScript文件跟随上面的顺序
延迟：若在head标签中的JavaScript文件较大，HTML文档解析就比较慢，容易出现延迟和网页留白现象。(只有一个部分的JavaScript文件被HTML解析完，HTML才会解析下一个部分的JavaScript文件)
建议：把导入 JavaScript 文件的操作放在后面，让浏览器先将网页内容解析并呈现出来后，再去加载 JavaScript 文件
改变方法：如果想改变 JavaScript 文件的执行顺序，可以给script标签增加defer或者async属性
延迟执行 JavaScript 文件（defer属性）
- script标签有一个布尔型属性 defer，设置该属性能够将 JavaScript 文件延迟到页面解析完毕后再运行。
- ```
<script src="myScript.js" defer type="text/javascript"></script>
```
- 注意：defer 属性适用于外部 JavaScript 文件（只有在使用 src 属性时），不适用于 JavaScript脚本
异步加载JavaScript文件（async 属性）
- 在加载 JavaScript 文件时，浏览器不会暂停，而是继续解析。这样能节省时间，提升响应速度。
- ```
<script type="text/javascript" async src="myScript.js"></script>
```
- 注意：async 属性仅适用于外部脚本（只有在使用 src 属性时）。
- 过设置 async 属性，可以不用考虑 script标签的放置位置
- 可以把很多大型的JavaScript库文件放在head标签内。

JavaScript代码块

代码块就是使用 script标签包含的JavaScript代码段。

JavaScript字符编码

JavaScript 遵循 Unicode 字符编码规则。Unicode 字符集中每个字符使用 2 个字节来表示，这表示用户可以使用中文来命名 Java 变量。
Unicode 是 Latin-1 字符集的超集，编码数目达到百万级；Latin-1是 ASCII 字符集的扩展，包含 256 个拉丁字母； ASCII 字符集包含 128 个基本字符，即常用英文字母和符号。

JavaScript中的几个概念

JavaScript遵循ECMA-262规范

基本词法

JavaScript语法：指的是构成合法JavaScript程序的所有规则和特征的集合
- 词法：定义了JavaScript的基本名词规范，包括字符编码，命名规则，标识符，关键字，注释规则，运算符，分隔符
- 句法：定义了JavaScript的基本运算逻辑和程序结构，包括短语，句子，代码段的基本规则，

区分大小写

JavaScript严格区分大小写，为了避免输入混乱和语法错误，建议采用小写字符编写代码，以下特殊形式可采用大写形式
- 构造函数的首字母建议大写，构造函数不同于普通函数
  - ```
  new Date(); //获取当前日期和时间
```
- 如果标识符由多个单词组成，可以考虑使用骆驼命名法-除首个单此外，后面单词的首字母大写
  - ```
  typeOf();
  myGirlFriend;
```

直接量

直接量（Literal）：具体的值，如字符串，数值，布尔值，正则表达式，对象直接量，数组直接量，函数直接量

//空字符串直接量
1 //数值直接量
true //布尔值直接量
/a/g //正则表达式直接量
null //特殊值直接量
{} //空对象直接量
[] //空数组直接量
function(){} //空函数直接量，也就是函数表达式

转义序列

转义序列就是字符的一种表示方式（映射）。
很多字符无法直接在代码中输入或输出，只能通过转义序列间接表示
- Unicode 转义序列方法：\u + 4位十六进制数字。
- Latin-1 转义序列方法：\x + 2位十六进制数字。

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

标识符

标识符是名称的专业术语
JavaScript 标识符（名称）包括变量名、函数名、参数名和属性名合法的标识符应该注意以下强制规则：
- 1. 第一个字符必须是字母、下划线（_）或美元符号（$）。
  2. 除了第一个字符外，其他位置可以使用 Unicode 字符。一般建议仅使用 ASCII 编码的字母，不建议使用双字节的字符。
  3. 不能与 JavaScript 关键字、保留字重名。
  4. 可以使用 Unicode 转义序列。例如，字符 a 可以使用“\u0061”表示 (不推荐)。
- ```
var \u0061 = "字符 a 的 Unicode 转义序列是 \u0061";
var a = "a";
```
使用转义序列不是很方便，一般常用转义序列表示特殊字符或名称，如 JavaScript 关键字、程序脚本等

关键字

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

保留字

保留字就是 ECMA-262 规定的 JavaScript 语言内部预备使用的一组名称（或称为命令）。这些名称目前还没有具体的用途，是为 JavaScript 升级版本预留备用的，建议不使用。

对象，属性和方法

JavaScript 预定义了很多全局变量和函数，用户也应该避免使用它们。

空白符（分隔符）

分隔符（空白符）就是各种不可见字符的集合，如

空格（\u0020）、水平制表符（\u0009）、垂直制表符（\u000B）、换页符（\u000C）、不中断空白（\u00A0）、

字节序标记（\uFEFF）、换行符（\u000A）、回车符（\u000D）、行分隔符（\u2028）、段分隔符（\u2029）等.
在 JavaScript 中，分隔符不被解析，主要用来分隔各种记号，如标识符、关键字、直接量等信息。在 JavaScript 脚本中，常用分隔符来格式化代码，以方便阅读.
- ```
function toStr(a){return a.toString();}
```
一般 JavaScript 编辑器都会提供代码格式化的功能。
分隔符使用时需要注意以下几点：
- 分隔符虽然无实际意义，但是在脚本中却不能缺少。如果在标识符与关键字之间不使用分隔符分隔，JavaScript 就会抛出异常
- ```
functiontoStr(a){returna.toString();} //错误写法
function toStr(a){return a.toString();} //正确写法
```
- JavaScript 解析器一般采用最长行匹配原则，不恰当地换行显示一句代码，容易引发异常或错误
- ```
function toStr(a){
return
a.toString(); //错误的换行
}
document.write(toStr("abc")); //实际返回 undefined,应该返回"abc"
```
- 解析：这是因为 return 作为一条独立语句，JavaScript 解析器可以正确解析它，虽然它后面没有分号，解析器在正确解析的前提下会自动为其补加一个分号，以表示该句已经结束。这样换行显示的 a.toString()；就是下一句待执行的命令，而不是被返回的值
- 不能在标识符、关键字等内部使用分隔符
- ```
function toStr(a){
return a.to String(); //错误分隔符
}
```
- 在字符串或者正则表达式内，分隔符是有意义的，不能够随意省略或替换
- ```
var a = "空格";
varument.write((a==b)); //返回 false,说明不相同
```

注释

/程序描述
function toStr(a){ //块描述
//代码段描述
return a.toString(); //语句描述
}
/*
* jQuery JavaScript Library v3.3.1
* https://jquery.com/
* Includes Sizzle.js
* https://sizzlejs.com/
* Copyright JS Foundation and other contributors
* Released under the MIT license
* https://jquery.org/license
* Date: 2019-08-21 T 17:24 Z
*/

转义字符

转义字符是字符的一种间接表示方式。在特殊语境中，无法直接使用字符自身。例如，在字符串中包含说话内容。
- ```
alert(""子曰："学而不思则罔，思而不学则殆。""");
```
由于 JavaScript 已经赋予了双引号为字符串直接量的标识符，如果在字符串中包含双引号，就必须使用转义字符表示
- ```
alert("子曰：\"学而不思则罔，思而不学则殆。\"");
```
JavaScript 定义反斜杠加上字符可以表示字符自身。
注意，一些字符加上反斜杠后会表示特殊字符，而不是原字符本身，这些特殊转义字符被称为转义序列，具体说明如表所示

提示：如果在一个正常字符前添加反斜杠，JavaScript 会忽略该反斜杠

alert("子曰：\"学\而\不\思\则\罔\, \思\而\不\学\则\殆\。\"");
//等价于
alert("子曰：\"学而不思则罔，思而不学则殆。\"");

变量

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

变量声明

常用方式
- ```
var 变量名 = 初始化值;
```
在一个 var 语句中，可以声明一个或多个变量，也可以为变量赋值，未赋值的变量初始化为 undefined（未定义）值。当声明多个变量时，应使用逗号运算符分隔。
- ```
var a; //声明一个变量
var a,b,c; //声明多个变量
var b = 1; //声明并赋值
alert(a); //返回 undefined
alert(b); //返回 1
```
可以重复声明同一个变量，也可以反复初始化变量的值。
- ```
var a = 1;
var a = 2;
var a = 3;
alert(a); //返回 3
```

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

JavaScript 是弱类型语言，对于变量类型的规范比较松散。具体表现如下：
- 1. 变量的类型分类不严谨、不明确，带来使用的随意性。
  2. 声明变量时，不要求指定类型。
  3. 使用过程不严格，可以根据需要自动转换变量类型
  4. 变量的转换和类型检查没有一套统一、规范的方法，导致开发效率低下。
由此带来的优缺点如下：
- 优点：使用灵活，简化了代码编写。
  
  缺点：执行效率低，在开发大型应用时，程序性能会受到影响。
  
  简单说就是，同一变量可以接受不同的数据类型。
- ```
var a = 1; //数值类型
a = "1"; //字符串类型
```

字符和字符串类型说明

JavaScript中只有字符串类型，没有字符类型，字符串既可以使用双引号，也可以使用单引号。
- ```
var a = "1";
var a = '1';
```

变量定义的特点

var关键字不是必须的，可以省略，但不建议省略
变量名可以重复定义

变量作用域

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

局部变量

只能在函数内部访问
因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。

局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。

// 此处不能调用 carName 变量
function myFunction() {
var carName = "Volvo";
// 函数内可调用 carName 变量
}
alert(carName); //error: carName is not defined

全局变量

网页中所有脚本和函数均可使用。

向未声明的 javascript 变量来分配值。

// 此处不能调用 carName 变量
function myFunction() {
var carName = "Volvo";
// 函数内可调用 carName 变量
}
alert(carName); //error: carName is not defined

如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。如：
这样声明一个全局变量，哪怕这个变量是声明在函数内部它也是一个全局变量。
- ```
ycdl = "云创动力"; //注：前面没有var
```

全局变量是 window 对象，所有数据变量都属于 window 对象

myFunction();
// 此处可以使用 windwo.carName
document.getElementById("demo").innerHTML =
"我可以显示 " + window.carName;
function myFunction()
{
carName = "Volvo"; //全局变量
}

生命周期

JavaScript 变量生命周期在它声明时初始化。
局部变量在函数执行完毕后销毁。
全局变量在页面关闭后销毁。

变量污染

javaScript 可以随意定义保存所有应用资源的全局变量。但全局变量可以削弱程序灵活性，增大了模块之间的耦合性。在多人协作时，如果定义过多的全局变量有可能造成全局变量冲突。
- ```
var x = 10;
// 这里输出 x 为 10
{
var x = 2;
// 这里输出 x 为 2
}
// 这里输出 x 为 2
```

解決方式

定义全局变量命名空间只创建一个全局变量，并定义该变量为当前应用容器，把其他全局变量追加在该命名空间下

var MyAPP = {}; //定义 APP 访问接口
MyAPP.name = { //定义APP配置变量
"id" : "应用程序的ID编号"
};
MyAPP.work = {
num : 123, //APP计数器等内部属性
sub : { name : "sub_id"}, //APP应用分支
doing : function(){ //具体方法
//执行代码
}
};

使用函数体封装应用程序，这是最常用的一种方法。

(function(){
var MyAPP = {}; //定义 APP 访问接口
MyAPP.name = { //定义APP配置变量
"id" : "应用程序的ID编号"
};
MyAPP.work = {
num : 123, //APP计数器等内部属性
sub : { name : "sub_id"}, //APP 应用分支
doing : function(){ //具体方法
//执行代码
}
};
window.MyAPP = MyAPP; //对外开放应用程序接口
})();
window.MyAPP; //外部调用

let&const

ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const
let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量，一旦声明，常量的值就不能改变。
在 ES6 之前，JavaScript 只有两种作用域：全局变量与函数内的局部变量
- ```
var name = "张三"; //全局变量
function myFun(){
var age = 11; // 局部变量
}
```

JavaScript 块级作用域(Block Scope)

使用 var 关键字声明的变量不具备块级作用域的特性，它在 {} 外依然能被访问到。
- ```
{
var a = 10;
}
// 可以访问到 a
```
ES6 可以使用 let 关键字来实现块级作用域。
let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问
注意：
- 在函数体外或代码块外使用 var 和 let 关键字声明的变量,它们的作用域都是全局的
- 在函数体内使用 var 和 let 关键字声明的变量,它们的作用域都是局部的
- 使用let声明的变量不能再次被声明

const关键字

const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改
- ```
const PI = 3.141592653589793;
PI = 3.14; // 报错
PI = PI + 10; // 报错
```
const 定义常量与使用 let 定义的变量相似：
- 二者都是块级作用域
- 都不能和它所在作用域内的其他变量或函数拥有相同的名称
两者还有以下两点区别：
- const 声明的常量必须初始化，而 let 声明的变量不用
- const 定义常量的值不能通过再赋值修改，也不能再次声明。而 let 定义的变量值可以修改。

数据类型

在JavaScript中,数据类型可以分为原始类型和引用类型。

五种原始数据类型

注意：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值

typeo操作符

作用：判断指定的变量数据类型
写法：
- ```
typeof(变量名) 或 typeof 变量名
```
null 与 undefined 的区别：
- null: 是一个object类型，但没有值，可以认为是引用类型的占位符
- undefined：未初始化的类型，不知道是什么类型

示例

<script type="text/javascript">
var i = 5;
document.write("整数：" + typeof(i) + "<br/>");
var f = 3.14;
document.write("浮点数：" + typeof(f) + "<br/>");
var str = "abc";
document.write("字符串：" + typeof(str) + "<br/>");
var c = 'a';
document.write("字符：" + typeof(c) + "<br/>");
var b = true;
document.write("布尔类型：" + typeof(b) + "<br/>");
var u;
document.write("未定义的类型：" + typeof(u) + "<br/>");
var n = null;
document.write("null：" + typeof(n) + "<br/>");
</script>

引用类型

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

猿知了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础知识《三》

##JavaScript作用HTML > 用于创建网页结构CSS > 对页面进行美化javascript > 与用户进行交互（网页的行为）ECMAScript 是 JavaScript 语言的规范标准，JavaScript 是 ECMAScript 的一种实现。注意，这两个词在一般语境中是可以互换的。JavaScript是脚本语言是一种轻量级的编程语言是可插入HTML页面的编程代码可由所有现代的浏览器执行容易学习灵活轻巧，兼顾函
复制链接

扫一扫