JS基础：JS语法规范详解（最全！）

你好，我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。

云桃桃-大专生，一枚程序媛，感谢关注。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端基础路线”，可获取完整web基础路线导图。

308篇原创内容-更多前端系列内容可以go公众.h：云桃桃

后台回复“前端基础路线”可获取前端基础学习路线

后台回复“前端基础题”可得到前端基础100题汇总，持续更新中

后台回复“前端电子书”可获取20+本精选电子书

前言

今天我们聊聊 JS 的语法。

JS 语法就像是一套规则和指南，它告诉我们如何用正确的方式书写 JavaScript 代码。就像我们在玩游戏时需要遵守游戏规则一样，编写 JavaScript 代码也需要遵守语法规则。

例如，在 JS 中，我们需要用特定的方式来定义变量、使用函数、控制流程等等。如果我们不遵守这些语法规则，代码就可能无法正常运行，或者会出现错误。

好，那我们一起来看看吧。

一、变量声明与赋值

首先，我们来了解如何声明变量和给它们赋值。在 JavaScript 中，使用var关键字来声明变量，=用于为变量赋值。在下面代码中，messge 是变量，它 被赋值为 Hi！

var message
message = 'Hi!'

二、数据类型

JavaScript 有两种类型的值：字面量和变量。

1、字面量

在 JavaScript 中，字面量指的是在代码中直接表示数据值的特殊语法结构。它们是创建数据结构的快捷方式，不需要通过函数或构造器。以下是 JavaScript 中 7 种常见字面量。

• 数字（Number）字面量

数字字面量可以是整数或浮点数，也可以是科学计数法表示的数值。

let pi = 3.14159 // 圆周率，一个浮点数
let largeNumber = 123456789 // 一个整数
let scientificNotation = 1.23e6 // 科学计数法表示的数

• 字符串（String）字面量

字符串是由双引号" "或单引号' '包围的文本。它们用于存储如名字、句子或其他形式的文本。比如。

let name = 'Alice Smith' // 使用双引号
let greeting = 'Hello, World!' // 使用单引号

• 表达式字面量

表达式字面量是由运算符连接的值，它们可以直接计算结果。

let sum = 5 + 7 // 加法运算
let product = 10 * 20 // 乘法运算

• 数组（Array）字面量

数组字面量用于定义一个数组，元素可以是任意数据类型。

let numbers = [1, 2, 3, 4, 5] // 一个数字数组
let colors = ['red', 'green', 'blue'] // 一个字符串数组

• 对象（Object）字面量

对象字面量用于创建一个对象，它由一系列的键值对组成。

let person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
  hobbies: ['reading', 'gaming', 'sports']
} // 一个表示人的JSON对象

• 函数（Function）字面量

函数字面量用于定义一个函数，它可以包含参数和函数体。

let myGreeting = function (name) {
  return 'Hello, ' + name + '!'
} // 一个简单的函数

let result = myGreeting('桃') // 使用函数并打印结果

• 正则表达式（RegExp）字面量

正则表达式字面量用于定义一个正则表达式对象。

let regex = /^hello/ // 一个正则表达式，匹配以"hello"开头的字符串

2）变量

变量则像是一个空的盒子，我们可以在里面放入任何我们想要的东西。变量的值可以在程序运行过程中改变。例如，我们可以定义一个变量 x，并将其赋值为 5，然后在后续的代码中，我们可以将 x 的值修改为其他的值。

下面是一个简单的例子：

let x = 5 // 定义一个变量 x，并将其赋值为 5
let y = 'hello' // 定义一个变量 y，并将其赋值为 "hello"
let z = true // 定义一个变量 z，并将其赋值为 true

在这个例子中，x、y、z 都是变量，它们的值分别为 5、"hello"和 true。这些变量的值可以在程序运行过程中根据需要进行修改。

三、操作符

JavaScript 提供了多种操作符来进行数学计算和赋值，比如数字运算符+，-，*，/，%来运算，使用赋值运算符=来赋值给变量。

var x = 5
var y = 10
var sum = x + y // 使用加法运算符
var product = x * y // 使用乘法运算符

四、控制流程

控制流程语句，如下案例中，if和循环for，控制代码的执行流程。

for (var i = 0; i < 5; i++) {
  console.log(i) // 从0打印到4
}

五、注释

注释是代码中的特殊文本，它们不会被执行，而是用来解释代码。

// 这是一个单行注释
/*
这是一个多行注释
可以用来描述更长的代码段
*/

六、标识符和命名规则

在 JavaScript 中，标识符是用于命名变量、函数等的名称。它们必须以字母、下划线_或美元符号$开始，可以包含字母、数字、下划线或美元符号。

var firstName = 'John'
var _age = 30
var $salary = 5000

为了避免混淆和错误，有一些命名规则需要注意：

• 只能包含字母、数字、下划线和美元符号。

• 不能以数字开头：例如，123myVariable 就是不合法的标识符。

• 区分大小写：jsWord 和 jsword 是不一样的变量，写的时候要注意。

var jsWord = 'hello!'
var jsword = 30

• 避免使用关键字：例如，var、if、for、while 等都是 JavaScript 的关键字，不能作为标识符使用。

• 尽量使用有意义的名称：例如，myAge 比 a 更具描述性。

• 采用驼峰命名法：对于多个单词组成的标识符，首字母小写，后面的每个单词首字母大写，例如 myFirstFunction。

var firstNameVal = 'John'
var lastName = 'Doe'
var masterCardNumber = '1234-5678-9101-1114'

如图。

遵循这些规则可以提高代码的可读性和可维护性，让你的代码更容易理解和修改。

OK，本文完。