[前端系列第3弹]JS入门教程：从零开始学习JavaScript

本文将带领大家，从零开始学习JavaScript，fighting~

目录

一、JavaScript简介

二、变量和数据类型

三、注释和分号

四、算术运算符

五、表达式和语句

六、代码块和作用域

七、函数（最重要） 

---

一、JavaScript简介

        JavaScript（简称JS）是一种运行在浏览器中的脚本语言，它可以让网页变得更加动态、交互和有趣。JS是网页开发的三大核心技术之一，与HTML和CSS相辅相成。HTML负责定义网页的内容，CSS负责指定网页的布局，而JS负责编写网页的行为。通过JS，可以实现以下功能：

• 在网页上显示当前的日期和时间
• 在用户点击按钮时弹出对话框
• 在用户输入数据时进行验证和提示
• 在用户滚动页面时改变网页的背景颜色
• 在用户拖动元素时实现拖放效果
• 在用户玩游戏时实现动画和音效
• 等等

JS不仅仅可以用于网页开发，还可以用于其他领域，例如：

• 服务器端开发：通过Node.js平台，可以使用JS来编写服务器端的应用程序，处理网络请求、数据库操作、文件操作等。
• 移动端开发：通过React Native框架，可以使用JS来编写跨平台的移动应用程序，运行在Android和iOS设备上。
• 桌面端开发：通过Electron框架，可以使用JS来编写桌面应用程序，运行在Windows、Mac和Linux系统上。
• 机器学习：通过TensorFlow.js库，可以使用JS来编写机器学习的模型和算法，实现人脸识别、图像分类、自然语言处理等功能。

从上面的介绍可以看出，JS是一门非常有用和有趣的编程语言，它可以让我们创造出各种各样的项目和产品。在这篇文章中，我将带你从零开始学习JS的基础知识，并通过一些简单而有趣的例子来巩固学习效果。

二、变量和数据类型

变量是用来存储数据的容器，可以给变量赋予不同类型的值，例如数字、文本、布尔值等。在JS中，我们使用var、let或const关键字来声明变量，例如：

var x = 10; // 使用var声明一个名为x的变量，并赋值为10
let y = "Hello"; // 使用let声明一个名为y的变量，并赋值为"Hello"
const z = true; // 使用const声明一个名为z的常量，并赋值为true

注意，var和let声明的变量可以被重新赋值，而const声明的常量不能被重新赋值，否则会报错。例如：

x = 20; // 可以修改x的值为20
y = "World"; // 可以修改y的值为"World"
z = false; // 不能修改z的值为false，会报错

在JS中，有以下几种基本数据类型：

• Number：表示数字，包括整数和小数，例如1, 3.14, -5等。
• String：表示文本，用单引号或双引号括起来，例如"Hello", 'World’等。
• Boolean：表示逻辑值，只有两个可能的值：true或false。
• Undefined：表示未定义的值，当一个变量被声明但没有赋值时，它的默认值就是undefined。
• Null：表示空值，当一个变量被赋值为null时，它表示没有任何有效的数据。

除了基本数据类型外，JS还有一种复杂数据类型：Object。对象是由多个属性和方法组成的集合，每个属性都有一个名字和一个值，每个方法都是一个函数。可以使用大括号{}来创建对象，并用冒号:分隔属性名和属性值，用逗号,分隔不同的属性或方法。例如：

var person = {name: "Alice", // 属性name的值是"Alice"age: 18, // 属性age的值是18sayHello: function() { // 方法sayHello是一个函数console.log("Hello, I am " + this.name); // 在控制台输出一句话}
};

可以使用点.或方括号[]来访问对象的属性或方法，例如：

console.log(person.name); // 输出"Alice"
console.log(person["age"]); // 输出18
person.sayHello(); // 调用sayHello方法，输出"Hello, I am Alice"

三、注释和分号

注释是用来说明代码的意义或功能的文字，它不会被执行，只是为了方便阅读和理解代码。在JS中，可以使用两种方式来写注释：

• 单行注释：使用//开头，后面跟着想要写的注释内容，它只会影响当前行的代码。例如：

// 这是一个单行注释，它不会被执行
console.log("Hello"); // 这里也可以写注释，但是console.log("Hello")会被执行

• 多行注释：使用/开头，/结尾，中间可以写多行的注释内容，它会影响/和/之间的所有代码。例如：

/*
这是一个多行注释，它不会被执行
它可以跨越多行
*/
console.log("World"); // 这一行会被执行，因为它不在多行注释里面

分号是用来结束一条语句的标志，它告诉JS解释器这里是一条语句的结束。在JS中，我们可以选择性地使用分号，因为JS解释器会自动在合适的地方添加分号。但是，为了避免一些潜在的错误和歧义，建议在每条语句的末尾都加上分号。例如：

var x = 10; // 这里加了分号，表示这是一条完整的语句
var y = 20 // 这里没有加分号，但是JS解释器会自动在这里加上分号
var z = x + y; // 这里也加了分号，表示这也是一条完整的语句

四、算术运算符

算术运算符是用来进行数学计算的符号，例如加、减、乘、除等。在JS中，可以使用以下的算术运算符：

• +：加法，用来将两个数值相加，或者将两个字符串连接起来。例如：

var a = 10 + 20; // a的值是30
var b = "Hello" + "World"; // b的值是"HelloWorld"

• ++：自增，用来将一个数值加1。它可以放在变量前面或后面，但是有不同的效果。如果放在变量前面，表示先加1再返回变量的值；如果放在变量后面，表示先返回变量的值再加1。例如：

var h = 10;
var i = ++h; // i的值是11，h的值也是11，因为先将h加1再赋给i
var j = h++; // j的值是11，h的值是12，因为先将h赋给j再加1

•  算术运算符、赋值运算符、比较运算符、逻辑运算符、位运算符与Java运算符类似，不再一一列举

五、表达式和语句

• 表达式：表示一个值，可以是一个字面量、一个变量、一个运算符或者一个函数调用。例如：

10 // 一个数字字面量，表示10这个值
"Hello" // 一个字符串字面量，表示"Hello"这个值
n // 一个变量，表示n所存储的值
n + 1 // 一个运算符，表示n和1相加的结果
Math.sqrt(n) // 一个函数调用，表示求n的平方根的结果

• 语句：表示一个动作，可以是一个赋值、一个条件判断、一个循环、一个函数定义或者一个输出。例如：

var n = 10; // 一个赋值语句，将10赋给变量n
if (n > 0) { ... } // 一个条件语句，根据n是否大于0来执行不同的代码块
for (var i = 0; i < n; i++) { ... } // 一个循环语句，重复执行一段代码n次
function square(n) { ... } // 一个函数定义语句，定义了一个名为square的函数
console.log(n); // 一个输出语句，将n的值输出到控制台

在JS中，可以使用分号来分隔不同的语句，也可以使用换行来分隔不同的语句。但是，有些情况下，必须使用分号来结束一条语句，否则会导致错误或者意外的结果。例如：

var a = 10 // 这里没有加分号
var b = 20 // 这里也没有加分号
console.log(a + b) // 这里也没有加分号// 上面的代码等价于：var a = 10 var b = 20 console.log(a + b)// 这会导致语法错误，因为JS解释器无法识别这是三条语句还是一条语句// 正确的写法应该是：var a = 10; // 这里加了分号
var b = 20; // 这里也加了分号
console.log(a + b); // 这里也加了分号// 或者：var a = 10 // 这里没有加分号
var b = 20 // 这里也没有加分号console.log(a + b) // 这里没有加分号，但是换了一行// 上面的代码等价于：var a = 10;
var b = 20;console.log(a + b);// 这样就不会导致错误，因为JS解释器会自动在换行处添加分号

六、代码块和作用域

• {}：代码块，用来将一组相关的语句组织在一起，形成一个逻辑单元。例如：

if (n > 0) {console.log("n是正数"); // 这是一个代码块，它属于if语句的条件分支
} else {console.log("n是负数或零"); // 这也是一个代码块，它属于else语句的条件分支
}

• var：局部变量，用来声明在某个代码块内部有效的变量。例如：

function square(n) {var result = n * n; // 这是一个局部变量，它只在square函数内部有效return result; // 返回result的值
}
console.log(result); // 这里会报错，因为result在函数外部无效

• let：块级变量，用来声明在某个代码块内部有效的变量，但是不会提升到代码块的顶部。例如：

if (n > 0) {let message = "n是正数"; // 这是一个块级变量，它只在if语句的代码块内部有效console.log(message); // 输出"n是正数"
}
console.log(message); // 这里会报错，因为message在if语句的代码块外部无效

• const：常量，用来声明一个不可修改的变量，它也是一个块级变量。例如：

const PI = 3.14; // 这是一个常量，它的值不能被修改
PI = 3.15; // 这里会报错，因为不能修改常量的值

• global：全局变量，用来声明在任何地方都有效的变量。例如：

name = "Alice"; // 这是一个全局变量，它没有使用var、let或const关键字声明
console.log(name); // 输出"Alice"
function sayHello() {console.log("Hello, " + name); // 在函数内部也可以访问name变量
}
sayHello(); // 输出"Hello, Alice"

七、函数（最重要） 

        函数是JS中非常重要的一个概念，它可以封装一段可重用的代码，然后在不同的地方调用它，从而简化代码和提高效率。在JS中，可以使用以下的方式来定义和调用函数：

• 函数声明：使用function关键字来声明一个函数，给它一个名字和一组参数，然后在大括号里面写上函数的代码块。例如：

function square(n) { // 声明一个名为square的函数，它接受一个参数nreturn n * n; // 返回n的平方
}

• 函数表达式：使用var、let或const关键字来声明一个变量，并将一个匿名函数赋给它，然后在小括号里面写上函数的参数，再在大括号里面写上函数的代码块。例如：

var cube = function(n) { // 声明一个名为cube的变量，并将一个匿名函数赋给它，它接受一个参数nreturn n * n * n; // 返回n的立方
}

• 箭头函数：使用=>符号来定义一个简洁的函数表达式，如果只有一个参数，可以省略小括号；如果只有一条语句，可以省略大括号和return关键字。例如：

var double = n => n * 2; // 声明一个名为double的变量，并将一个箭头函数赋给它，它接受一个参数n，并返回n的两倍

• 函数调用：使用函数名或者变量名加上小括号来调用一个函数，并在小括号里面传入实际的参数值。例如：

console.log(square(5)); // 调用square函数，并传入5作为参数，输出25
console.log(cube(3)); // 调用cube变量所指向的函数，并传入3作为参数，输出27
console.log(double(4)); // 调用double变量所指向的函数，并传入4作为参数，输出8

---

以上就是本文的全部内容啦，学习到这很棒喔，给你点赞~