掌握前端开发的“葵花宝典”：JavaScript 变量与语义化标签今天，就让我们一起用轻松幽默的方式，揭开 JavaSc

前言

你是否曾经对着满屏的 var 和毫无意义的div感觉头晕眼花，仿佛置身于代码的迷宫？别担心，你不是一个人！在前端的世界里，变量和语义化标签就像交通规则一样重要。搞懂它们，你的代码就不会再像脱缰的野马，而是像训练有素的导盲犬，乖巧又高效。今天，就让我们一起用轻松幽默的方式，揭开 JavaScript 变量和语义化标签的神秘面纱，让你的代码从此告别懵逼状态

葵花宝典第一式：语义化标签

那么什么是语义化标签呢？

我知道，你可能已经用 div + CSS + JS 打遍天下无敌手了，但是你真的真的如何使用这些语义化标签呢，语义化标签，见名知意，就是带有自然语义的标签它们能够清晰地表达页面结构和内容的含义。比如 <header> 表示头部，<nav> 表示导航，<main> 表示主体内容，<footer> 表示底部等等

为什么要使用语义化标签呢？我们分四点来讲

1.可读性：

想象一下，你正在考古一个远古代码库，里面全是 div，你得一行一行地分析 CSS 才能搞清楚每个 div 的作用。而如果使用了语义化标签，你一眼就能看出哪个是头部，哪个是导航，哪个是主体内容，是不是就省事多了

比如以下两段代码，你更愿意采用哪一段呢，相信已经非常清晰明了了

<div class="container" id="header">
        <div class="header header-main">Super duper best blog ever</div>
        <div class="site-navigation">
            <a href="/">Home</a>
            <a href="/about">About</a>
            <a href="/archive">Archive</a>
        </div>
    </div>
    <div class="container" id="main">
        <div class="article-header-level-1">
            Why you should buy more cheeses than you currently do
        </div>
        <div class="article-content">
            <div class="article-section">
                <div class="article-header-level-2">
                    Part 1: Variety is spicy
                </div>
                <!-- cheesy content -->
            </div>
            <div class="article-section">
                <div class="article-header-level-2">
                    Part 2: Cows are great
                </div>
                <!-- more cheesy content -->
            </div>
        </div>
    </div>
    <div class="container" id="footer">
        Contact us!
        <div class="contact-info">
            <p class="email">
                <a href="mailto:us@example.com">us@example.com</a>
            </p>
            <div class="street-address">
                <p>123 Main St., Suite 404</p>
                <p>Yourtown, AK, 12345</p>
                <p>United States of America</p>
            </div>
        </div>
    </div>

<!-- 头部导航 -->
    <header>
        <h1>Super duper best blog ever</h1>
        <nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
            <a href="/archive">Archive</a>
        </nav>
    </header>
    <!-- 主体内容 -->
    <main>
        <article>
            <header>
                <h2>Why you should buy more cheeses than you currently do</h2>
            </header>
            <div>
                <section>
                    <header class="article-header-level-2">
                        Part 1: Variety is spicy
                    </header>
                </section>
                <section>
                    <header class="article-header-level-2">
                        Part 2: Cows are great
                    </header>
                </section>
            </div>
        </article>
    </main>
    <!-- 底部信息 -->
    <footer>
        <section>
            <h3>Contact us!</h3>
            <address>
                <a href="mailto:us@example.com">us@example.com</a>
            </address>
            <address class="street-address">
                <p>123 Main St., Suite 404</p>
                <p>Yourtown, AK, 12345</p>
                <p>United States of America</p>
            </address>
        </section>
    </footer>

2.对搜索引擎不友好：

搜索引擎可不是吃素的！它们需要理解你的页面结构和内容，才能更好地进行索引和排名。语义化标签就像给搜索引擎的指示牌，告诉它们：“嘿，这里是头部，这里是导航，这里是文章的主要内容！”这样，你的页面就更容易被搜索引擎理解和收录，从而提高排名。

3.HTML质量：

高质量的 HTML 代码是前端开发的基石。使用语义化标签能够提升 HTML 代码的质量，让你的代码更加规范、易于维护和扩展。

4.无障碍访问：

对于使用屏幕阅读器等辅助技术的用户来说，语义化标签能够帮助他们更好地理解页面内容，提高用户体验。

常见的语义化标签有哪些呢

标签	描述
`<header>`	页面头部，通常包含网站 logo、标题、导航等。
`<nav>`	导航菜单。
`<main>`	页面主要内容区域。
`<article>`	独立的文章或内容块。
`<section>`	页面中的一个区块，通常用于划分不同的内容区域。
`<aside>`	侧边栏内容，例如广告、相关链接等。
`<footer>`	页面底部，通常包含版权信息、联系方式等。
`<address>`	地址信息。

葵花宝典第二式：为什么要有变量

先了解一下什么是变量

变量是程序中一块被命名的内存区域，用于存储特定类型的数据。当你声明一个变量时，实际上就是在内存中分配了一块空间来存储数据。你可以通过变量名来访问和操作这块内存区域中的数据。

比喻:

想象一下，你有一个储物柜，每个储物柜都有一个编号（例如 A1、B2 等）。你可以把你的物品（例如书、衣服、鞋子等）存放在储物柜里。储物柜的编号就像变量名，储物柜本身就像变量，而你存放的物品就像变量的值。你可以通过储物柜的编号找到对应的储物柜，并取出或放入物品。

变量的作用分五点

存储数据: 程序运行过程中需要处理各种数据，例如用户的输入、计算的结果、从服务器获取的信息等等。变量提供了一种存储这些数据的方式，以便程序可以在需要时访问和使用它们。如果没有变量，程序就无法保存和处理信息。
操作数据: 变量不仅可以存储数据，还可以对数据进行操作。例如，你可以对变量进行加减乘除运算、字符串拼接、逻辑比较等等。通过对变量的操作，程序可以实现各种复杂的逻辑和功能。
代码复用: 使用变量可以提高代码的复用性。例如，你可以将一个常用的值存储在变量中，然后在程序的多个地方使用这个变量。这样，如果需要修改这个值，只需要修改变量的值即可，而不需要修改程序的多个地方。
动态性: JavaScript 是一种动态类型的语言，这意味着变量的类型可以在运行时改变。这种灵活性使得 JavaScript 更加易于使用，但也需要程序员更加小心地处理变量的类型。
控制程序流程: 变量可以用于控制程序的流程。例如，在循环语句中，可以使用变量来控制循环的次数；在条件语句中，可以使用变量来判断条件是否成立。

变量有很大的作用，所以我们需要变量

葵花宝典第三式：如何获取基本和对象的具体数据类型

我们先来了解一下JS的基本数据类型

类型	描述	示例
String	表示文本数据，用单引号或双引号括起来。	"Hello World!", 'JavaScript'
Boolean	表示逻辑值，只有两个值：true 或 false。	true, false
Number	表示数字，可以是整数或浮点数。	10, 3.14, -5
Undefined	表示变量已声明但未赋值。	let x; // x 的值是 undefined
Null	表示空值或没有值。	let y = null;
Symbol	表示独一无二的值，主要用于作为对象的属性键。	Symbol('mySymbol')
BigInt	表示任意精度的整数。	12345678901234567890n

其他数据类型--对象

对象类型 (Object Type): Object. 对象是可变的。

虽然 Array（数组）和 Function（函数）通常被单独提及，但它们实际上也是对象的一种特殊形式。 Date (日期) 和 RegExp (正则表达式) 也都是对象类型。

基本数据类型获取

typeof 来帮忙

var a = 1;
console.log(typeof a);//number typeof 是一个类型运算符，获得变量的类型

var isSingle = true;
console.log(typeof isSingle);//boolean

let girlFriend = undefined;
console.log(typeof girlFriend);//undefined

对象数据类型获取

Object.prototype.toString.call() 来助你

// 数组对象
const arr = ['1', '2', '3'];
console.log(typeof arr);
const date = new Date();
console.log(typeof date);
//如何区分Object 的这些类型？
console.log(Object.prototype.toString.call(arr));//[object Array]
console.log(Object.prototype.toString.call(date));//[object Date]

如何用一个函数获取具体的对象数据类型呢

slice 来助我们一臂之力

就是截取字符串，Object.prototype.toString.call(arr)，返回的是字符串，大家可以用typeof验证一下 slice()有两个参数，第一个参数要返回的子字符串中包含的第一个字符的索引。第二个参数要返回的子字符串中排除的第一个字符的索引。我们也可以只输入一个参数，也就是从该参数位置索引到末尾

function getType(value) {
    // string api 的选择
    // split + substring
    return Object.prototype.toString.call(arr).slice(8, -1);//slice从第8位开始截取，到倒数第一位结束
}

当我们遇到不太懂的JS方法

developer.mozilla.org/zh-CN/ 来帮忙，比如上述的slice()，我们只需要上述我们想要了解的方法，学会使用MDN你离成为大佬也就不远了

葵花宝典第四式：JS中怎么声明变量let or var

let是是2015年es6最新推出来声明变量的，相信大家已经知道用最新的let就对了，那么为什么呢？

var 和 let 的区别

特性	`var`	`let`
作用域	函数作用域或全局作用域。	块作用域（如在 `if` 或 `for` 块内）。
提升	变量声明会被提升到函数或全局的顶部，但赋值不会。	变量声明也会被提升，但在声明之前无法使用（会抛出 ReferenceError）。
重复声明	允许在同一作用域内多次声明同名变量。	不允许在同一作用域内重复声明同名变量。
全局对象	在全局作用域中声明的 `var` 变量是全局对象的属性（如 `window`）。	在全局作用域中声明的 `let` 变量不是全局对象的属性。

var的缺陷

大家可能想不明白为什么if(false){},不是不会执行里面的代码吗，为什么打印value还会显示undefined呢？原因就在于var 不支持块级作用域，也就是不支持{}变量声明会被提升到函数或全局的顶部，但赋值不会，在js执行前会有一个编译，会声明value这个变量，但是赋值在花括号里面，并不会执行

//全局的 js 代码在执行之前会有一个编译
//变量提升
console.log(value, '------------');

var a;
a = 1;
if (false) {
    var value = 1;//声明变量 =1 这是在执行阶段
}
// undefined 有 
console.log(value);

let就完美解决了这个问题

返回的是b is not definded ，也就是未被声明的变量，let变量声明也会被提升，但在声明之前无法使用，简单来说就是受到块级作用域的限制，也就是{}的限制

// 全局作用域
function fn() {//函数作用域
    let a = 2;
    if (true) {//支持块级作用域（高级的语言的特性） var 不支持块级作用域
        // 块级作用域

        let b = 3;

    }

    console.log(b);


}
fn();
if (false) {//块级作用域
    let value = 1;
}
// 在全局找不到
// console.log(value);

葵花宝典终章

在这篇文章中，我们深入探讨了 JavaScript 中变量的声明方式，以及如何有效地使用语义化标签来提升网页的可读性和可维护性。掌握 var 和 let 的区别，让我们能够更好地管理变量的作用域和生命周期，从而编写出更加稳健和高效的代码。

此外，我们还回顾了 JavaScript 的数据类型及其特性，强调了在编写代码时清晰理解每种数据类型的重要性。这不仅能帮助我们避免常见的错误，还能提升我们对代码逻辑的把控。希望通过本篇博客，你能对 JavaScript 的基本概念有更深入的理解

掌握前端开发的“葵花宝典”：JavaScript 变量与语义化标签

前言