ES5教程（二）：快速入门

哔哩哔哩：https://www.bilibili.com/video/BV1VBwHe5EKY/

1. 开发环境搭建

• 谷歌浏览器
• vscode编辑器卸载vscode 删除个人配置：%appdata% >>> code删除插件：%userprofile% >>> .vscode官网地址：https://code.visualstudio.com/下载地址：https://code.visualstudio.com/Download选择user64位国内镜像：https://vscode.cdn.azure.cnhttps://vscode.cdn.azure.cn/stable/c722ca6c7eed3d7987c0d5c3df5c45f6b15e77d1/VSCodeUserSetup-x64-1.65.2.exe
  • 字体：22
  • 自动保存
  • 汉化插件：chinese
• nodejs插件：code runner

2. AI编程助手

Fitten：官网

Fitten Code是由非十大模型驱动的AI编程助手，它可以自动生成代码，提升开发效率，帮您调试Bug，节省您的时间。还可以对话聊天，解决您编程碰到的问题。免费且支持80多种语言：Python、C++、Javascript、Typescript、Java等。

安装步骤

1. 搜索插件Fitten
2. 注册并登录
3. 使用方法
   • ctrl+ 右箭头：接受单个词
   • ctrl+alt+c : 打开对话
   • 选中代码进行对话
   • ctrl+alt+g : 生成代码
   • 选中代码+右键
   • 右下角图标 进行设置

3. Hello World

创建第一个JS程序 HelloWorld

1. 打开VSCode
2. 创建文件夹
3. 创建源码文件 => HelloWorld.js
4. 编写代码console.log(“Hello World”);
5. 运行代码
   • F5
   • 右上角开始按钮
   • node HelloWorld.js

4、基本语法

字面量

在编程语言中，一般固定值称为字面量，如3.14，“hello world”

数字（Number）字面量：10
字符串（String）字面量："立体空间"
数组（Array）字面量: [1,2,3]
对象（Object）字面量: {name: 'atao',age: 18}
……

语句

一条可执行的指令，作用是告诉宿主应该做什么，JS程序就是一系列可执行语句的集合。

默认情况下，JavaScript解释器依照语句的编写顺序依次执行。

语句之间建议通过分号隔开

注释

JavaScript 注释用于解释 JavaScript 代码，增强其可读性。

JavaScript 注释也可以用于在测试替代代码时阻止执行。

• 单行注释：//
• 多行注释：/* */ 不可嵌套

VSCode快捷键 ctrl + /

5、数据类型

数据类型是编程语言中用于定义数据存储和操作方式的分类。每种数据类型都有其特定的属性和操作规则，这有助于编译器或解释器理解如何处理数据

基本类型：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol（ES6语法）。

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

示例：

var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {firstName:"Bill", lastName:"Gates"};    // 对象

动态数据类型（弱类型）

var x;            // x 为 undefined
x = 5;           // 现在 x 为数字
x = "John";      // 现在 x 为字符串

查看数据类型：typeof

typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

6、变量

生活中有变的量，有不变的量，编程就是为了解决生活中的问题，用变量和常量表示这些量；

变量是用于存储数据的容器；常量用于保存不变的量；

var x = 1;
var y = 2;
var z = x+y;

1. 声明（创建）变量

向内存中申请一块存储空间，JavaScript 的变量名区分大小写，A和a是两个不同的变量。

var a;  // 此时a的值是undefined 表示未定义

2. 初始化

向申请的空间赋值

a = 10;

最佳实践

声明变量的同时进行初始化

var a = 10; // 声明变量a并赋值10
a = 20;     // 更新

批量声明

一次声明多个变量，使用逗号隔开

var a = 10,b = "hello",c = 3.4;
// 不可以批量赋同一个值，需要分别赋值
var x,y,z = 1;
// 结果是x,y为undefined z的值是1

ES6语法使用let和const

7、标识符

在JavaScript中，标识符是指代码中用来标识变量、函数、或属性的字符序列。

标识符命名规则：

1. 必须以字母、下划线_或美元符$开始，(数字不允许作为首字符出现)
2. 后续的字符可以是字母、数字、_下划线 或 $美元符
3. 区分大小写
4. 关键字、保留字不能作为标识符

惯例：

1. 使用小驼峰命名
2. 见名知义
3. 不建议使用中文

示例：

firstName、 myCar、 $str、 _count、 my_last_name

8、运算符

= 用于赋值

+ 用于加法 和 拼接

JavaScript 算数运算符

算数运算符用于对数字执行算数运算：

运算符	描述
+	加法
–	减法
*	乘法
/	除法
%	取模（余数）
++	递加
—	递减

JavaScript 赋值运算符

赋值运算符向 JavaScript 变量赋值。

运算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x – y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

加法赋值运算符（+=）向变量添加一个值。

JavaScript 比较运算符

运算符	描述
==	等于
===	等值等型
!=	不相等
!==	不等值或不等型
>	大于
<	小于
>=	大于或等于
<=	小于或等于
?	三元运算符

JavaScript 逻辑运算符

运算符	描述
&&	逻辑与 遇到第一个假或最后一个真 则返回
||	逻辑或 遇到第一个真或最后一个假 则返回
!	逻辑非 取反

JavaScript 类型运算符

运算符	描述
typeof	返回变量的类型。
instanceof	返回 true，如果对象是对象类型的实例。

9、流程控制

流程：就是程序代码执行顺序

控制：通过规定的语句让程序代码有条件的按照一定的方式执行

流程分类：

• 顺序结构： 从上到下，从左到右执行的顺序，就叫做顺序结构，程序默认就是由上到下顺序执行的。
• 分支结构：根据不同的情况，执行对应代码。
• 循环结构：重复做一件事情

流程控制语句分为：条件（判断）语句和循环语句

常见的条件语句：

if(condition){
    statement1
}else{
    statement2
}

condition 条件可以是任何表达式，表达式就是一种可以产生一个值的代码片段，产生的值不一定是布尔值。

JS会自动调用Boolean()函数将表达式结果转换为布尔值

if(i > 10){
    console.log("i 大于 10");
}else{
    console.log("i 小于 10");
}

常见的循环语句

while(条件表达式){
    循环体
}

10、条件语句

if 语句

if (条件语句){
    当条件为 true 时执行的代码
}

if…else 语句

if (条件语句){
    当条件为 true 时执行的代码
}else{
    当条件不为 true 时执行的代码
}

if…else if….else 语句

if (条件语句1){
    当条件 1 为 true 时执行的代码
}else if (条件语句2){
    当条件 2 为 true 时执行的代码
}else{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

switch 语句

switch(表达式){
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

11、循环语句

• for 循环最常用的循环结构之一，适用于已知循环次数的情况。for (初始化; 条件; 迭代) {
     // 循环体
  }示例：for (let i = 0; i < 5; i++) {
     console.log(i);
  }
• while 循环while 循环在条件为真时重复执行代码块，适用于不确定循环次数的情况。while (条件) {
     // 循环体
  }示例：let i = 0;
  while (i < 5) {
     console.log(i);
     i++;
  }
• do…while 循环do...while 循环类似于 while 循环，但至少会执行一次循环体，然后再检查条件。do {
     // 循环体
  } while (条件);示例：let i = 0;
  do {
     console.log(i);
     i++;
  } while (i < 5);
• 循环控制语句
  • break：用于跳出循环。
  • continue：用于跳过当前循环的剩余代码，直接进入下一次循环。
  示例：for (let i = 0; i < 5; i++) {
     if (i === 3) {
         break; // 当 i 为 3 时跳出循环
    }
     console.log(i);
  }
  ​
  for (let i = 0; i < 5; i++) {
     if (i === 3) {
         continue; // 当 i 为 3 时跳过本次循环
    }
     console.log(i);
  }

循环可以嵌套使用，即在一个循环内部再包含另一个循环。

示例：

for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
        console.log(i, j);
    }
}

12、字符串

JavaScript 字符串是引号中的零个或多个字符，可以是单引号或双引号

'abc'
"abc"
// 单引号字符串的内部，可以使用双引号。双引号字符串的内部，可以使用单引号
"It's good to see you again!"
"He is called 'Bill'"
'He is called "Bill"'
// 单引号的内部使用单引号需要加上转义符
'He is called \'Bill\''

拼接字符串

// 使用 + 进行字符串的拼接
var str = 'hello' + 'world';

length属性

// 返回字符串的长度
var len = str.length;
// length属性的值不可更改
str.length = 1;
len = str.length;
console.log(len);

13、转义符

代码	作用
\’	输出单引号
\”	输出双引号
\\	输出\
\b	退格键
\f	换页
\n	新行
\r	回车
\t	水平制表符
\v	垂直制表符

14、数字

JavaScript 内部，所有数字都是以64位浮点数形式储存，即使整数也是如此。所以，1与1.0是相同的，是同一个数。

1 === 1.0 // true

书写 JavaScript 数值既可以带小数点，也可以不带：

var x = 3.14;    // 带小数点的数值
var y = 3;       // 不带小数点的数值

数字和字符串相加

数字和字符串相加，结果是字符串级联（拼接）；

var x = 10;
var y = "20";
var z = x + y;           // z 将是 1020（一个字符串）
​
var x = 10;
var y = 20;
var z = "30";
var result = x + y + z;  // 结果是 3030 (一个字符串)

数字字符串

var x = "100";
var y = "10";
var z = x / y;       // z 将是 10
​
// JavaScript 会尝试将字符串转换为数字, - * 也是一样的
​
var x = "100";
var y = "10";
var z = x + y;       // z 不会是 110（而是 10010）
// 这里的 + 是拼接

NaN

NaN是 JavaScript 的特殊值，表示“非数字”（Not a Number），主要出现在将字符串解析成数字出错的场合。

5 - 'x' // NaN
0 / 0 // NaN

NaN不是独立的数据类型，而是一个特殊数值

typeof NaN // 'number'

NaN不等于任何值，包括它本身。

NaN === NaN // false

您可使用全局 JavaScript 函数 isNaN() 来确定某个值是否是数

var x = 100 / "Apple";
isNaN(x);               // 返回 true，因为 x 不是数

15、布尔值

JavaScript 布尔（逻辑）代表两个值之一：true 或 false。

下列运算符会返回布尔值：

• 前置逻辑运算符： ! (Not)
• 相等运算符：===，!==，==，!=
• 比较运算符：>，>=，<，<=

如果 JavaScript 预期某个位置应该是布尔值，会将该位置上现有的值自动转为布尔值。转换规则是除了下面六个值被转为false，其他值都视为true。

• undefined
• null
• false
• 0
• NaN
• ""或''（空字符串）

布尔值往往用于程序流程的控制，请看一个例子。

if ('') {
  console.log('true');
}
// 没有任何输出

上面代码中，if命令后面的判断条件，预期应该是一个布尔值，所以 JavaScript 自动将空字符串，转为布尔值false，导致程序不会进入代码块，所以没有任何输出。

注意，空数组（[]）和空对象（{}）对应的布尔值，都是true。

if ([]) {
  console.log('true');
}
// true
​
if ({}) {
  console.log('true');
}
// true

16、数组

数组是一种特殊的变量，它能够一次存放一个以上的值。

声明(创建)数组

// 第一种方式：
var array-name = [item1, item2, ...];
// 第二种方式：
                  
var array-name = new Array();
// 两种效果一样，出于简洁、可读性和执行速度的考虑，推荐使用第一种方法
​
// 示例
var arr1 = [];
var code = ['html','css','javascript'];
var code = [
    'html',
    'css',
    'javascript'
];

访问数组

通过索引（下标）来访问某个数组元素（成员）

索引从0开始

code[0]
code[1]
console.log(code[2])

添加成员

var arr = [];
arr[0] = 0;
arr[1] = 'abc';
arr[2] = function (){return 0;};
​
console.log(arr);

更新成员

var code = ['html','css','javascript'];
code[0] = 'html5';
code[1] = 'css3';

length属性

var code = ['html','css','javascript'];
code.length // 返回数组的长度 3
​
// 获取最后一个成员
code[code.length - 1]

17、函数

可以重复调用的代码块

声明函数

// function 关键字
function functionName() {
    console.log("函数体");
}
​
// 函数表达式,又称匿名函数，通过变量赋值的方式声明
var fun = function (){
    console.log("匿名函数");
};

函数的表达式需要在语句的结尾加上分号，表示语句结束。而函数的声明在结尾的大括号后面不用加分号。

函数调用

函数名(参数1,参数2,...)

带参数函数

function functionName(a,b)
{
    // 执行代码
}
​
// 匿名函数
var fun = function (a,b){
    // 执行代码
};

带返回值函数

function add(a,b)
{
    return a + b;
}
​
// 匿名函数
var add = function(){
    return a + b;
};

局部变量

在 JavaScript 函数中声明的变量，会成为函数的局部变量。

局部变量只能在函数内访问

局部变量的声明周期：在函数开始时创建，在函数完成时被删除。

16、对象

对象（object）是 JavaScript 语言的核心概念，也是最重要的数据类型。

对象就是一组名/值对 (name:value) 的集合，值可以是数据或者函数

我们通常认为 JavaScript 对象是键值对的容器

在 JavaScript 中，数组使用数字索引。

在 JavaScript 中，对象使用命名索引。

var obj = {
  foo: 'Hello',  // foo是键名，'Hello'是值，使用冒号隔开键名和值，对象成员之间用逗号隔开
  bar: 'World'   // bar是键名，'World'是值
};

键名

对象的所有键名都是字符串，所以加不加引号都可以

// 如果键名是数值，会自动转换为字符串
var obj = {
  1: 'a',
  3.2: 'b',
  1e2: true
};
​
// 如果键名不符合标识符命名规范，需加上引号
var obj = {
    1a: 'abc'   // 会报错: Invalid or unexpected token (无效或意外的令牌)
}
// 正确写法
var obj = {
    '1a': 'abc'
}

对象里的属性

作用和变量一样

访问方式：对象名.属性名 / 对象名[属性名]

var obj = {
  foo: 'Hello',  
  bar: 'World'   
};
​
obj.foo
obj.['foo']
​

数字键名或不符合标识符规则的键名需要通过 [] 方式进行访问

对象里的方法

作用和函数一样

访问方式：对象名.方法名() / 对象名[方法名]()

var obj = {
   foo: 'abc',
   bar: function (){
       console.log("bar方法");
   }
};
​
obj.bar();
obj['bar']();

如果不加（）则返回 该函数

10、作用域

程序代码中所用到的变量并不总是有效/可用的，而限定这个变量的可用性的代码范围就是这个变量的作用域。

作用域指的就是变量有权访问的范围。

JS中的作用域分类：

• 局部作用域
• 全局作用域

ES5 中，只有函数作用域，函数中声明的变量，会成为函数的局部变量，只能在函数内部访问。

函数之外声明的变量，则是全局变量。

var name1 = "张三";  // 全局变量
​
function fun() {
    var name2 = "李四"  // 局部变量
}

17、类型转换

在js中数据类型可以进行手动强制转换和自动转换

JavaScript 中有五种可包含值的数据类型：

• 字符串（string）
• 数字（number）
• 布尔（boolean）
• 对象（object）
• 函数（function）

有三种对象类型：

• 对象（Object）
• 日期（Date）
• 数组（Array）

同时有两种不能包含值的数据类型：

• null
• undefined

查看数据类型

typeof "Bill"                 // 返回 "string"
typeof 3.14                   // 返回 "number"
typeof NaN                    // 返回 "number"
typeof false                  // 返回 "boolean"
typeof [1,2,3,4]              // 返回 "object"
typeof {name:'Bill', age:62}  // 返回 "object"
typeof new Date()             // 返回 "object"
typeof function () {}         // 返回 "function"
typeof myCar                  // 返回 "undefined" *
typeof null                   // 返回 "object"

强制转换

全局函数：Number() 转换数值

// 数值：转换后还是原来的值
Number(324) // 324
​
// 字符串：如果可以被解析为数值，则转换为相应的数值
Number('324') // 324
​
// 字符串：如果不可以被解析为数值，返回 NaN
Number('324abc') // NaN
​
// 空字符串转为0
Number('') // 0
​
// 布尔值：true 转成 1，false 转成 0
Number(true) // 1
Number(false) // 0
​
// undefined：转成 NaN
Number(undefined) // NaN
​
// null：转成0
Number(null) // 0

全局函数：String() 转换字符串

String(123) // "123"
String('abc') // "abc"
String(true) // "true"
String(undefined) // "undefined"
String(null) // "null"

全局函数：Boolean() 转换布尔值

Boolean(undefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean(NaN) // false
Boolean('') // false

自动转换

遇到以下三种情况时，JavaScript 会自动转换数据类型，即转换是自动完成的，用户不可见。

第一种情况，不同类型的数据互相运算。

123 + 'abc' // "123abc"

第二种情况，对非布尔值类型的数据求布尔值。

if ('abc') {
  console.log('hello')
}  // "hello"

第三种情况，对非数值类型的值使用一元运算符（即+和-）。

+ {foo: 'bar'} // NaN
- [1, 2, 3] // NaN

自动转换的规则是这样的：预期什么类型的值，就调用该类型的转换函数。比如，某个位置预期为字符串，就调用String()函数进行转换。如果该位置既可以是字符串，也可能是数值，那么默认转为数值。

由于自动转换具有不确定性，而且不易除错，建议在预期为布尔值、数值、字符串的地方，全部使用Boolean()、Number()和String()函数进行显式转换。

18、严格模式

在 JavaScript ES5 版本中，严格模式（strict mode）是一个重要的特性，它可以帮助开发者避免一些常见的错误，并提高代码的可靠性和安全性。以下是关于严格模式的一些知识点：

1. 启用严格模式：
   • 可以在整个脚本文件中启用严格模式，只需在文件的顶部添加 "use strict";。
   • 也可以在函数内部启用严格模式，只需在函数体的顶部添加 "use strict";。
   // 整个脚本文件启用严格模式
   “use strict”;
   console.log(“This is strict mode.”);
   ​
   // 函数内部启用严格模式
   function strictFunction() {
      “use strict”;
      console.log(“This function is in strict mode.”);
   }
2. 变量声明：
   • 在严格模式下，必须显式声明变量，不能使用未声明的变量。
   “use strict”;
   // 错误：未声明的变量
   // x = 10; // 这会抛出 ReferenceError
   ​
   // 正确：显式声明变量
   var x = 10;
3. 禁止删除变量和函数：
   • 在严格模式下，不能删除变量和函数。
   “use strict”;
   var x = 10;
   // 错误：不能删除变量
   // delete x; // 这会抛出 SyntaxError
   ​
   function myFunction() {}
   // 错误：不能删除函数
   // delete myFunction; // 这会抛出 SyntaxError
4. 禁止使用保留字作为变量名：
   • 在严格模式下，不能使用一些保留字作为变量名，如 implements, interface, let, package, private, protected, public, static, yield 等。
   “use strict”;
   // 错误：使用保留字作为变量名
   // var let = 10; // 这会抛出 SyntaxError
5. 禁止使用 with 语句：
   • 在严格模式下，禁止使用 with 语句。
   “use strict”;
   // 错误：使用 with 语句
   // with (obj) { // 这会抛出 SyntaxError
   //     console.log(x);
   // }
6. 禁止在函数参数中使用重复的参数名：
   • 在严格模式下，函数参数不能有重复的名称。
   “use strict”;
   // 错误：函数参数名重复
   // function myFunction(a, a) { // 这会抛出 SyntaxError
   //     console.log(a);
   // }
7. 禁止使用 eval 和 arguments 作为变量名：
   • 在严格模式下，不能使用 eval 和 arguments 作为变量名。
   “use strict”;
   // 错误：使用 eval 作为变量名
   // var eval = 10; // 这会抛出 SyntaxError
   ​
   // 错误：使用 arguments 作为变量名
   // var arguments = 10; // 这会抛出 SyntaxError
8. 禁止使用八进制字面量：
   • 在严格模式下，禁止使用八进制字面量。
   “use strict”;
   // 错误：使用八进制字面量
   // var x = 010; // 这会抛出 SyntaxError
9. 禁止删除不可配置的属性：
   • 在严格模式下，不能删除不可配置的属性。
   “use strict”;
   var obj = {};
   Object.defineProperty(obj, “x”, { value: 10, configurable: false });
   // 错误：删除不可配置的属性
   // delete obj.x; // 这会抛出 TypeError
10. arguments 对象的改变：
    • 在严格模式下，arguments 对象不会跟踪参数的变化。
    “use strict”;
    function myFunction(a) {
       a = 10;
       console.log(arguments[0]); // 仍然是传入的值，不会变成 10
    }
    myFunction(5); // 输出 5

通过使用严格模式，开发者可以编写更加规范和安全的 JavaScript 代码，减少潜在的错误和问题。

19、AI实践