[Web自动化] JS基础语法与数据类型

5.2 基础语法与数据类型

5.2.1 变量

在JavaScript中,变量用于存储数据值。JavaScript是一种动态类型语言,这意味着变量的类型可以在运行时改变。变量可以通过var、let或const关键字来声明。其中,var关键字在ES6之前广泛使用,但存在作用域和变量提升的问题。从ES6开始,推荐使用let和const来声明变量,因为它们具有块级作用域,可以避免这些问题。

示例:

js 复制代码
var x = 10; // 使用var声明变量
let y = 20; // 使用let声明变量
const z = 30; // 使用const声明常量,一旦赋值后不能修改

5.2.2 数据类型

JavaScript中的数据类型分为两大类:基本数据类型和引用数据类型。

5.2.2.1 基本数据类型

数字(Number):用于表示数值,可以是整数或小数。

示例:var pi = 3.14;
字符串(String):用于表示文本数据,由一系列字符组成。

示例:var greeting = "Hello, World!";
布尔值(Boolean):表示真或假的值,只有两个值:true和false。

示例:var isDone = true;
Null:表示空值,只有一个值:null。

示例:var nothing = null;
Undefined:表示未定义的值,当一个变量被声明但未初始化时,其值为undefined。

示例:var uninitialized; console.log(uninitialized); // 输出undefined
Symbol(ES6新增):代表创建后独一无二且不可变的数据类型。

示例:var sym = Symbol("description");
BigInt(ES6新增):用于表示任意精度的整数。

示例:var bigInt = BigInt("123456789012345678901234567890");

5.2.2.2 引用数据类型:

对象(Object):可以存储多个键值对,是最复杂的数据类型。数组和函数在JavaScript中也是对象类型。

示例:var person = { name: "John", age: 30 };
数组(Array):一种特殊的对象,用于存储一系列有序的值。

示例:var fruits = "Apple", "Banana", "Cherry";

5.2.3 操作符

操作符用于在JavaScript中执行各种操作,如算术运算、赋值、比较等。
算术运算符:+、-、、/、%等。
示例:var sum = 5 + 3; // 结果为8
赋值运算符:=、+=、-=、
=、/=等。

示例:var x = 5; x += 2; // x的值为7
比较运算符:==、!=、===、!==、<、>、<=、>=等。

示例:var a = 5; var b = 10; var isGreater = a > b; // isGreater的值为false

5.2.4 条件语句

条件语句用于根据条件执行不同的代码块。
if语句:当条件为真时执行代码块。

示例:if (age >= 18) { console.log("成年人"); }
if...else语句:当条件为真时执行一个代码块,为假时执行另一个代码块。

示例:if (age >= 18) { console.log("成年人"); } else { console.log("未成年人"); }

if...else if...else语句:用于处理多个条件。

示例:略
switch语句:根据表达式的值选择多个代码块之一来执行。

示例:switch (day) { case "Monday": console.log("星期一"); break; default: console.log("其他天"); }

5.2.5 循环语句

循环语句用于重复执行代码块。
for循环:在指定条件为真时循环执行代码块。

示例:for (var i = 0; i < 5; i++) { console.log(i); } // 输出0到4
while循环:在指定条件为真时循环执行代码块。

示例:var i = 0; while (i < 5) { console.log(i); i++; } // 输出0到4
do...while循环:至少执行一次代码块,然后检查条件,如果条件为真,则继续循环。

示例:var i = 0; do { console.log(i); i++; } while (i < 5); // 输出0到4

5.2.6 ES6+新特性概览

ES6(ECMAScript 2015)及其后续版本引入了许多新特性,使得JavaScript更加强大和灵活。以下是一些主要的新特性概览:
let/const:用于声明块级作用域的局部变量(let)和常量(const),替代了var。
箭头函数(Arrow Functions):提供了一种更简洁的函数写法,并且不绑定自己的this,arguments,super,或new.target。这些函数表达式更适合用于非方法函数,并且它们不能用作构造函数。

示例:const add = (a, b) => a + b; console.log(add(2, 3)); // 输出5
模板字符串(Template Literals):允许在字符串中嵌入表达式,并通过${}来嵌入表达式。

示例:const name = "John"; const greeting = Hello, ${name}!; console.log(greeting); // 输出Hello, John!
解构赋值(Destructuring Assignment):允许你从数组或对象中提取数据,并将其赋值给声明的变量。

数组解构示例:const a, b, c = 1, 2, 3; console.log(a); // 输出1

对象解构示例:const { name, age } = { name: "John", age: 30 }; console.log(name); // 输出John
默认参数值:允许在函数参数列表中直接设置参数的默认值。

示例:function greet(name = "Guest") { console.log(Hello, ${name}!); } greet(); // 输出Hello, Guest!
展开运算符(Spread Operator):允许一个数组或对象表达式在需要多个参数(用于函数调用)或多个元素(用于数组字面量)或多个属性(用于对象字面量)的地方展开。

数组示例:const parts = 'shoulders', 'knees'; const body = 'head', ...parts, 'toes'; console.log(body); // 输出"head", "shoulders", "knees", "toes"

对象示例:const obj1 = { foo: 'bar', x: 42 }; const obj2 = { ...obj1, y: 13 }; console.log(obj2); // 输出{ foo: 'bar', x: 42, y: 13 }
类(Classes):提供了一种更清晰、更面向对象的方式来编写代码。

示例:

js 复制代码
class Person {
constructor(name, age) {
 this.name = name;
 this.age = age;
}
 
greet() {
 console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}
 
const person = new Person("John", 30);
person.greet(); // 输出Hello, my name is John and I am 30 years old.
相关推荐
徐小夕8 小时前
Loop Engineering 深度解析与实战指南(全网最全)
前端·算法·github
运筹vivo@8 小时前
Python ContextVar 底层机制与内存模型拆解
前端·数据库·python
虾壳云官方8 小时前
OpenClaw 2.7.9 Windows 一键部署教程:零基础也能搭建 AI 自动化助手
运维·人工智能·windows·自动化·openclaw·openclaw一键部署
志栋智能8 小时前
超自动化巡检:知识沉淀与团队协作的新载体
大数据·运维·网络·数据库·人工智能·自动化
#麻辣小龙虾#9 小时前
基于vue3.0开发一款【固废与废气运维管理系统】(支持源码)
前端·vue.js·vue3
Cosolar9 小时前
Docsify零构建文档站完全指南:从快速搭建到企业级部署
前端·开源·github
weixin_471383039 小时前
Taro-02-页面路由
前端·taro
星栈独行9 小时前
Makepad 应用如何读文件、调接口、保存数据
前端·程序人生·ui·rust·github
IT_陈寒10 小时前
Vite热更新失效?可能你在用Windows
前端·人工智能·后端
烬羽11 小时前
后端返回的 JSON 字符串,浏览器怎么"看懂"的?——Ajax 全链路拆解
javascript