JS基础:JS语法规范详解(最全!)

ops/2024/10/18 17:27:16/

你好,我是云桃桃。

一个希望帮助更多朋友快速入门 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,本文完。


http://www.ppmy.cn/ops/35039.html

相关文章

强化学习玩flappy_bird

强化学习玩flappy_bird&#xff08;代码解析&#xff09; 游戏地址&#xff1a;https://flappybird.io/ 该游戏的规则是&#xff1a; 点击屏幕则小鸟立即获得向上速度。 不点击屏幕则小鸟受重力加速度影响逐渐掉落。 小鸟碰到地面会死亡&#xff0c;碰到水管会死亡。&#…

Docker容器:Docker-Consul 的容器服务更新与发现

目录 前言 一、什么是服务注册与发现 二、 Docker-Consul 概述 1、Consul 概念 2、Consul 提供的一些关键特性 3、Consul 的优缺点 4、传统模式与自动发现注册模式的区别 4.1 传统模式 4.2 自动发现注册模式 5、Consul 核心组件 5.1 Consul-Template组件 5.2 Consu…

《21天学通C++》(第十八章)STL list和forward_list

std::list的特点 1.插入和删除操作高效&#xff1a;在任意位置插入或删除元素的开销是 O(1)&#xff0c;不需要像 std::vector 那样可能需要移动大量元素。 2.不支持随机访问&#xff1a;访问 std::list 中的元素需要从头开始遍历到所需位置&#xff0c;访问特定元素的时间复杂…

Vue入门到关门之Vue高级用法

一、在vue项目中使用ref属性 ref 属性是 Vue.js 中用于获取对 DOM 元素或组件实例的引用的属性。通过在普通标签上或组件上添加 ref 属性&#xff0c;我们可以在 JavaScript 代码中使用 this.$refs.xxx 来访问对应的 DOM 元素或组件实例。 放在普通标签上&#xff0c;通过 th…

Satellite, Aerial, and Underwater Communication Track(WCSP2023)

1.Dispersion Curve Extraction and Source Localization for Single Hydrophone by Combining Image Skeleton Extraction with Advanced Time-Frequency Analysis(图像骨架提取与先进时频分析相结合的单水听器色散曲线提取和源定位) 摘要&#xff1a;时频分析&#xff08;TF…

234234235

c语言中的小小白-CSDN博客c语言中的小小白关注算法,c,c语言,贪心算法,链表,mysql,动态规划,后端,线性回归,数据结构,排序算法领域.https://blog.csdn.net/bhbcdxb123?spm1001.2014.3001.5343 给大家分享一句我很喜欢我话&#xff1a; 知不足而奋进&#xff0c;望远山而前行&am…

【数据库】MySQL安装与卸载

文章目录 [toc]MySQL下载网盘链接下载网址 MySQL安装解压生成data文件安装MySQL启动MySQL服务 MySQL登录设置root用户密码 环境变量配置MySQL卸载 个人主页&#xff1a;丷从心 系列专栏&#xff1a;MySQL 学习指南&#xff1a;数据库 MySQL下载 网盘链接 链接&#xff1a;h…

Python_GUI框架 PyQt 与 Pyside6的介绍

Python_GUI框架 PyQt 与 Pyside6的介绍 一、简介 在Python的GUI&#xff08;图形用户界面&#xff09;开发领域&#xff0c;PyQt和PySide6是两个非常重要的工具包。它们都基于Qt库&#xff0c;为Python开发者提供了丰富的GUI组件和强大的功能。当然Python也有一些其他的GUI工…