喔唷网 - 网络从业者技术信息综合门户!

当前位置: 主页 > 教程技术 > 编程语言 > javascript

JavaScript基本语法 变量、数据类型、运算和表达式

时间 : 2025-04-23 10:58来源 : 喔唷网作者 : 喔唷教程点击 :
各位编程萌新们,准备好学习JavaScript的"拼音字母"了吗?这一章就像学英语的ABC一样基础但重要!放心,我会用最有趣的方式带你入门~ 3.1 变量与常量 - 数据的临时小仓库 变量就像便利贴 :可以随时

各位编程萌新们,准备好学习JavaScript的"拼音字母"了吗?这一章就像学英语的ABC一样基础但重要!放心,我会用最有趣的方式带你入门~

3.1 变量与常量 - 数据的临时小仓库

变量就像便利贴:可以随时写上内容,也可以随时更换

// 声明一个叫age的变量,存数字18
let age = 18; 

// 给变量换内容(就像换便利贴)
age = 19; 

console.log(age); // 输出19

常量就像纹身:一旦确定就不能改了(洗纹身很痛的!)

// 声明一个叫PI的常量
const PI = 3.14159; 

// 下面这行会报错(就像不能随便改纹身)
// PI = 3.14; 

console.log(PI); // 输出3.14159

变量命名规则(重要!)

  1. 可以包含字母、数字、_和$
  2. 不能以数字开头
  3. 区分大小写(myVar和myvar是两回事)
  4. 不能用关键字(比如let、if这些保留词)

起名小技巧

  • 用英文单词(别用拼音!)
  • 驼峰命名法:myFavoriteFood
  • 常量全大写:MAX_SIZE

3.2 数据类型 - 数据的"品种"

JavaScript有7种基本数据类型+对象,先认识几个最常用的:

1. 数字(Number) - 做数学题用

let price = 9.99;  // 小数
let count = 10;    // 整数
let temperature = -5; // 负数

2. 字符串(String) - 处理文字

let name = "张三";  // 双引号
let food = '汉堡';  // 单引号
let msg = `你好,${name}`; // 模板字符串(可以插值)

3. 布尔值(Boolean) - 是非判断题

let isStudent = true;   // 是
let isRainy = false;    // 否

4. 空值(null & undefined) - 空盒子

let emptyBox = null;       // 明确的空值
let unknownBox;           // 未定义(默认undefined)

类型检查小实验

console.log(typeof 123);         // "number"
console.log(typeof "hello");     // "string"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object" (历史遗留bug)

3.3 运算符 - 数据的魔法符号

算术运算符(加减乘除)

let a = 10, b = 3;

console.log(a + b);  // 13
console.log(a - b);  // 7
console.log(a * b);  // 30
console.log(a / b);  // 3.333...
console.log(a % b);  // 1 (取余数)

比较运算符(比大小)

console.log(5 > 3);   // true
console.log(5 == "5"); // true (值相等)
console.log(5 === "5"); // false (严格等于,值和类型都要相同)

逻辑运算符(与或非)

let hasMoney = true;
let hasTime = false;

console.log(hasMoney && hasTime); // false (与:两个都要true)
console.log(hasMoney || hasTime); // true (或:一个true就行)
console.log(!hasMoney);           // false (非:取反)

3.4 表达式与语句 - 代码的乐高积木

表达式:能产生值的代码片段(像乐高零件)

1 + 1           // 结果是2
"hello".length  // 结果是5

语句:执行操作的完整指令(像拼好的乐高)

let sum = 1 + 1;          // 赋值语句
console.log("hello");      // 输出语句
if (age > 18) { /*...*/ } // 条件语句

3.5 代码注释 - 给未来的自己留小纸条

注释是写给人看的,计算机会自动忽略~

// 单行注释(双斜杠)

/*
 多行注释
 可以写很多行
*/

/**
 * 文档注释(常用在函数前)
 * @param {number} a 第一个数字
 * @param {number} b 第二个数字
 * @returns 两个数字的和
 */
function add(a, b) {
  return a + b;
}

3.6 命名规范 - 编程界的礼仪课

好的命名能让代码"自解释"(一看就懂):

// 不好的命名
let x = "John"; 
let fn = () => { /*...*/ };

// 好的命名
let userName = "John";
let calculateTotalPrice = () => { /*...*/ };

常用命名风格

  1. 驼峰式:myVariableName (JavaScript推荐)
  2. 蛇形:my_variable_name (Python喜欢)
  3. 帕斯卡:MyClassName (用于类名)

本章总结

  1. let声明变量,const声明常量
  2. 主要数据类型:数字、字符串、布尔值
  3. 运算符能进行各种计算和比较
  4. 表达式产生值,语句执行操作
  5. 注释是代码的说明书
  6. 好的命名是成功的一半

趣味练习

写个程序计算奶茶价格:

let price = 15;    // 单价
let quantity = 3; // 数量
let total = ?     // 计算总价
console.log(`总价:${total}元`);

写个自我介绍:

let name = "你的名字";
let hobby = "你的爱好";
console.log(`我叫${name},喜欢${hobby}`);

测试各种运算符:

console.log(5 + "5");   // 猜猜结果是什么?
console.log(5 - "2");   // 这个呢?

下一章我们要学习流程控制,让你的代码学会"做决定"!准备好升级你的JavaScript技能了吗?

栏目列表

关联类容

热点推荐

栏目推荐

猜你喜欢