一、JavaScript 基础语法详解

🕗 发布于 2024-12-31 04:22 javascript 前端 开发语言

1. 变量与常量

JavaScript 提供三种声明变量的方式：var、let 和 const。

var：在 ES5 之前使用，存在变量提升问题。
let：ES6 引入，具有块级作用域，避免了 var 的提升问题。
const：声明常量，值不可重新赋值，具有块级作用域。

示例：

var a = 10;
let b = 20;
const c = 30;

b = 40;  // 合法
// c = 50; // 报错，const 不能重新赋值

思考：

为什么在函数使用中经常用const去定义一个常量[]，然后后面又对常量使用push等方法去增改数据。const不是常量吗，为什么可以修改？

因为const的常量本质是指不修改数据的内存地址，你使用数据类型的方法去操作数据本质上不会修改对象的内存地址。

所以const和let的本质是数据对象的内存地址是否可以被修改。

2. 数据类型

JavaScript 是一种动态类型语言，支持以下基本数据类型：

原始类型：
- String：字符串类型。
- Number：包括整数和浮点数。
- Boolean：布尔值（true 或 false）。
- Undefined：声明未赋值的变量默认值。
- Null：空值，表示无任何对象。
- Symbol：唯一值，表示不可变的原始值。
- BigInt：表示任意精度的整数。
引用类型：
- Object：对象类型。
- Array：数组类型。
- Function：函数类型。

不同数据类型常见属性和方法

string（字符串）：
- 属性： length（常用，返回字符串长度）。
- 方法：
  - charAt(index)（常用，返回指定位置字符）。
  - concat(str)（合并字符串）。
  - includes(substr)（常用，判断是否包含子字符串）。
  - indexOf(substr)（常用，返回子字符串首次出现位置）。
  - slice(start, end)（常用，提取子字符串）。
  - split(separator)（常用，分割字符串为数组）。
  - toUpperCase() / toLowerCase()（常用，大小写转换）。
  - trim()（常用，去除首尾空格）。
number（数字）：
- 属性： toFixed(n)（常用，保留小数位数）。
- 方法：
  - parseInt(str)（常用，转换为整数）。
  - parseFloat(str)（常用，转换为浮点数）。
  - toString()（常用，数字转换为字符串）。
  - isNaN(value)（常用，判断是否为非数字）。
  - Math（常用，提供数学计算方法，如 Math.round()、Math.floor()、Math.random() 等）。
boolean（布尔值）：
- 属性： 无。
- 方法：
  - toString()（常用，布尔值转字符串）。
array（数组）：
- 属性： length（常用，返回数组长度）。
- 方法：
  - push(element)（常用，末尾添加元素）。
  - pop()（常用，移除末尾元素）。
  - shift()（常用，移除头部元素）。
  - unshift(element)（常用，头部添加元素）。
  - indexOf(element)（常用，查找元素位置）。
  - splice(start, deleteCount, item)（常用，删除或替换元素）。
  - slice(start, end)（常用，返回子数组）。
  - map(callback)（常用，数组映射）。
  - filter(callback)（常用，数组筛选）。
  - reduce(callback)（常用，累加器函数）。
object（对象）：
- 属性： 无固定属性（根据对象结构自定义）。
- 方法：
  - Object.keys(obj)（常用，返回对象键数组）。
  - Object.values(obj)（常用，返回对象值数组）。
  - Object.entries(obj)（常用，返回键值对数组）。
  - hasOwnProperty(key)（常用，判断对象是否具有某个属性）。
null 和 undefined：无属性和方法。

示例：

let name = "Tom";  // 字符串
let age = 25;       // 数字
let isStudent = true;  // 布尔值
let address;       // undefined
let empty = null;  // null
let uniqueId = Symbol("id"); // Symbol
let bigNumber = 9007199254740991n; // BigInt

备注：

1、null和undefined在内存地址上的区别

undefined 和 null 都表示“无值”，但语义和使用场景不同。
undefined 通常由 JavaScript 自动分配，而 null 是开发者主动赋值的。
它们在内存中的表示方式不同，undefined 可能是静态标志位，而 null 是空地址或空引用。

2、symbol和const定义唯一性上的区别

Symbol 和 const 的比较
├── 唯一性
│ ├── const: 不保证唯一，值相同即相等
│ └── Symbol: 唯一，不同 Symbol 不相等
├── 属性冲突
│ ├── const: 字符串属性容易被覆盖
│ └── Symbol: 不会覆盖，保证唯一
├── 私有性
│ ├── const: 外部可以访问和修改
│ └── Symbol: 外部不可访问（除非显式获取）
├── 可枚举性
│ ├── const: 可枚举，出现在遍历中
│ └── Symbol: 不可枚举，需特殊方法访问
└── 使用场景
├── const: 普通常量、状态值、API 地址
└── Symbol: 唯一对象属性键、私有字段、元数据

3. 运算符

let x = 5;
console.log(x++);  // 5，先返回原值，再自增
console.log(x);    // 6
console.log(++x);  // 7，先自增，再返回结果

2. 赋值运算符（Assignment Operators）

用于给变量赋值或更新变量的值。

运算符	描述	示例	结果
`=`	赋值	`a = 10`	`a = 10`
`+=`	加法赋值	`a += 5`	`a = a + 5`
`-=`	减法赋值	`a -= 3`	`a = a - 3`
`*=`	乘法赋值	`a *= 2`	`a = a * 2`
`/=`	除法赋值	`a /= 4`	`a = a / 4`
`%=`	取余赋值	`a %= 3`	`a = a % 3`
`**=`	幂赋值（ES7+）	`a **= 2`	`a = a ** 2`

示例：

let y = 10;
y += 5;  // y = 15
y *= 2;  // y = 30

3. 比较运算符（Comparison Operators）

比较两个值，返回布尔值 true 或 false。

运算符	描述	示例	结果
`==`	等于（值相等，类型忽略）	`5 == '5'`	`true`
`===`	全等（值和类型都相等）	`5 === '5'`	`false`
`!=`	不等（值相等，类型忽略）	`5 != '5'`	`false`
`!==`	全不等（值或类型不同）	`5 !== '5'`	`true`
`>`	大于	`6 > 3`	`true`
`<`	小于	`6 < 3`	`false`
`>=`	大于等于	`6 >= 6`	`true`
`<=`	小于等于	`6 <= 5`	`false`

示例：

console.log(5 == '5');  // true
console.log(5 === '5'); // false
console.log(5 != 5);    // false
console.log(5 !== '5'); // true

4. 逻辑运算符（Logical Operators）

用于处理多个条件表达式。

运算符	描述	示例	结果
`&&`	逻辑与（全真则真）	`true && false`	`false`
`		`	逻辑或（有真则真）
`!`	逻辑非（取反）	`!true`	`false`

短路特性：

console.log(0 && 5);  // 0
console.log(5 || 0);  // 5

5. 位运算符（Bitwise Operators）

直接操作二进制位。

运算符	描述	示例	结果
`&`	位与	`5 & 1`	`1`
`	`	位或	`5
`^`	位异或	`5 ^ 1`	`4`
`~`	位非（取反）	`~5`	`-6`
`<<`	左移	`5 << 1`	`10`
`>>`	右移	`5 >> 1`	`2`

6. 三元运算符（Conditional/Ternary Operator）

let result = (a > b) ? 'A大' : 'B大';

7. typeof 运算符

返回数据类型。

console.log(typeof 42);          // 'number'
console.log(typeof 'hello');     // 'string'
console.log(typeof undefined);   // 'undefined'
console.log(typeof null);        // 'object'（JavaScript 设计缺陷）

8. 扩展运算符（Spread Operator）

展开数组或对象。

const arr = [1, 2, 3];
const newArr = [...arr, 4, 5];  // [1, 2, 3, 4, 5]

9. 逗号运算符

返回表达式中最后一个值。

let x = (2 + 3, 10);  // x = 10

JavaScript 运算符全解析：从基础到进阶

运算符是 JavaScript 的核心组成部分，用于执行各种操作。掌握运算符可以大幅提升代码的简洁性、可读性和执行效率。

1. 算术运算符（Arithmetic Operators）

用于执行数学计算。

运算符描述示例结果
+ 加法 5 + 3 8
- 减法 5 - 3 2
* 乘法 5 * 3 15
/ 除法 5 / 2 2.5
% 取余（模） 5 % 2 1
** 幂运算（ES7+） 5 ** 2 25
++ 自增 let a = 1; a++ a = 2
-- 自减 let b = 3; b-- b = 2
细节解析：
a++：后置自增，先返回 a，然后再增加 1。
++a：前置自增，先增加 1，再返回结果。
== 进行类型转换，=== 不进行类型转换，推荐使用 === 避免潜在错误。
&& 遇到第一个 false 就返回 false，不再执行后续表达式。
|| 遇到第一个 true 就返回 true，不再执行后续表达式。
如果条件为真，返回 ? 前的值，否则返回 : 后的值。

运算符	描述	示例	结果
`+`	加法	`5 + 3`	`8`
`-`	减法	`5 - 3`	`2`
`*`	乘法	`5 * 3`	`15`
`/`	除法	`5 / 2`	`2.5`
`%`	取余（模）	`5 % 2`	`1`
`**`	幂运算（ES7+）	`5 ** 2`	`25`
`++`	自增	`let a = 1; a++`	`a = 2`
`--`	自减	`let b = 3; b--`	`b = 2`

4. 流程控制

条件语句：if...else、switch
循环语句：for、while、do...while

示例：

// if...else 语句
if (x > y) {
    console.log("x is greater");
} else {
    console.log("y is greater or equal");
}

// switch表达式

switch(表达式) {
  case 值1:
    // 当表达式等于值1时执行
    语句1;
    break;
  case 值2:
    // 当表达式等于值2时执行
    语句2;
    break;
  default:
    // 当所有case都不匹配时执行
    默认语句;
}

流程说明：
表达式：计算一个结果，与各个 case 进行比较。
case：每个分支对应一个可能的值。
break：终止当前 case，防止继续执行下面的分支。
default：所有 case 不匹配时执行，类似于 if...else 中的 else。

//switch 语句
let color = "red";
switch(color) {
    case "red":
        console.log("Red");
        break;
    case "blue":
        console.log("Blue");
        break;
    default:
        console.log("Unknown color");
}

//多个switch合并
let grade = 'B';

switch (grade) {
  case 'A':
  case 'B':
  case 'C':
    console.log('及格');
    break;
  case 'D':
  case 'E':
    console.log('不及格');
    break;
  default:
    console.log('未知成绩');
}



// for 循环
for (let i = 0; i < 5; i++) {
    console.log(i);
}

//do while表达式
do {
  代码块;
} while (条件);

先执行代码块，再判断条件，只要条件为 true，继续执行循环体。
至少执行一次，即使条件一开始就是 false。

//例子
let i = 5;

do {
  console.log('当前值：', i);
  i++;
} while (i < 3);

//while语法
while (条件) {
  // 循环体
  代码块;
}

5. 函数

函数声明
匿名函数
箭头函数（ES6）

示例：

// 函数声明
function greet(name) {
    return `Hello, ${name}`;
}

// 匿名函数
let sum = function(a, b) {
    return a + b;
};

// 箭头函数
let multiply = (a, b) => a * b;

6. 作用域和闭包

作用域：全局作用域、函数作用域、块级作用域。
闭包：函数内部返回一个函数，保持对外部变量的引用。

示例：

function outer() {
    let count = 0;
    return function inner() {
        count++;
        console.log(count);
    };
}
let counter = outer();
counter();  // 1
counter();  // 2

7. 数组与对象

数组：存储有序数据集合。
对象：存储键值对。

示例：

// 数组操作
let fruits = ["apple", "banana", "orange"];
fruits.push("grape");  // 添加元素
console.log(fruits[0]); // 访问元素

// 对象操作
let person = {
    name: "Tom",
    age: 25,
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
};
console.log(person.name);
person.greet();

原文地址：https://blog.csdn.net/weixin_39366308/article/details/144734626

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：SAP PP bom历史导出 ALV 及XLSX 带ECN号
下一篇：Redis可视化工具推荐：Another Redis Desktop Manager使用教程与下载

迅为瑞芯微RK3562开发板/核心板应用于人脸跟踪、身体跟踪、视频监控、自动语音识别(ASR)、图像分类驾驶员辅助系统(ADAS)、车牌识别、物体识别等
iTOP-3562开发板/核心板采用瑞芯微RK3562处理器，内部集成了四核A53+Mali G52架构，主频2GHZ，内置1TOPSNPU算力，RK809动态调频。支持几乎全格式的H.264解码，支
阅读更多2024-12-31
低精度只适用于未充分训练的LLM？腾讯提出LLM量化的scaling laws
尽管有一些研究声称原生的低比特LLM可以媲美fp16/bf16精度下的表现，但这些研究普遍都是在未充分语言模型上得到的结果从而推出的结论，研究人员认为在充分训练的情况下进行比较的话，低比特LLM也将很
阅读更多2024-12-31
医疗数仓配置Flume
Flume需要将Kafka中各topic的数据传输到HDFS，因此选用KafkaSource以及HDFSSink。对于安全性要求高的数据（不允许丢失）选用FileChannel，允许部分丢失的数据如日
阅读更多2024-12-31
Go中CAS算法
CAS算法常被用作乐观锁的实现方式，用于解决并发问题。例如，在计数器、缓存等场景中，可以使用CAS算法来确保数据的一致性和正确性。CAS操作会检查内存位置V的当前值是否与预期的旧值A相等。这一操作是原
阅读更多2024-12-31
Node.js 记账本项目总结
在使用Node.js结合Express框架构建记账本的过程中，遇到了一些常见的问题，这些问题主要集中在路径处理、包管理工具的选择、开发环境优化以及HTTP响应处理等方面。
阅读更多2024-12-31
Java 处理base64文件上传
在系统内有一个类似于公告的模块，如果里面添加的文章不是选择富文本上传图片的方式，而是选择复制别的文章直接粘贴到系统内的富文本，里面的图片就不会url，而是图片的base64格式，这样会导致数据库存储压
阅读更多2024-12-31
Tailwind CSS 实战：现代登录注册页面开发
基础结构搭建表单组件开发社交登录集成响应式适配深色模式支持动画效果表单验证性能优化可访问性增强通过合理使用 Tailwind CSS 的原子类，我们不仅实现了美观的界面，还确保了良好的用户体验和可维护
阅读更多2024-12-31
node.js下载、安装、设置国内镜像源（永久）（Windows11）
系统：Windows 11。
阅读更多2024-12-31
Slate文档编辑器-Decorator装饰器渲染调度
在这里我们主要讨论了slate中的decoration装饰器的实现，以及在实际使用中可能会遇到的问题，主要是在跨节点的情况下，我们需要将range拆分为多个range，然后分别进行处理，并且还分析了源
阅读更多2024-12-31
python去水印
请注意，这种方法仅适用于简单的水印去除，对于复杂的水印或嵌入到图像纹理中的水印，可能无法达到理想的效果。在实际应用中，还可以考虑使用深度学习的方法，如生成对抗网络（GAN）来去除水印，但需要大量的数据
阅读更多2024-12-31