[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.
相关推荐
科技研学社9 分钟前
精度决胜品质:羽绒服缝制工艺标准与自动化精度对标解析
运维·自动化
大包子16 分钟前
structuredClone vs lodash.cloneDeep:核心差异与选型指南
javascript·vue.js
海码事务所16 分钟前
Google Play 新个人开发者账号上架指南:12 人连续 14 天封闭测试怎么做?
前端
乐橙开放平台18 分钟前
智慧连锁客流检测和离岗检测怎么对接
大数据·人工智能·笔记·物联网·自动化·音视频·智能家居
黑箭科技20 分钟前
你的AI Agent在生产环境“裸奔“了多久?用500行Python代码搭建完整的驾驭工程体系
自动化·技术
田威AI20 分钟前
图片内文字翻译的规格:输入输出、保真、自动化、时间与费用
前端·计算机视觉
不可能片场30 分钟前
命令行中文变问号 我用环境变量救了场
前端·electron
lerhxx39 分钟前
AI 应用中的上下文管理 —— 从"上下文窗口"到"分层压缩"的工程实践
前端·javascript
骑着蜗牛撵大象3271 小时前
多 Agent 分治协作:MapReduce 模式下的并行扇出与结果归并
前端
用户55318297321 小时前
Flutter iOS 热更新深入 Dart VM:读懂函数入口、解释执行与调用桥接
前端