JavaScript的声明方法和作用范围，常见的结构

JavaScript的声明方法和作用范围，常见的结构赋值类型和使用场景

接：https://juejin.im/post/5d9bf530518825427b27639d

声明

const命令：声明常量
let命令：声明变量

作用

作用域

全局作用域
函数作用域：function() {}
块级作用域：{}

作用范围

var 命令在全局代码中执行
const命令和let命令只能在代码块中执行

赋值使用

const命令声明常量后必须立马赋值
let命令声明变量后可立马赋值或使用时赋值

声明方法：var、const、let、function、class、import

重点难点

不允许重复声明
未定义就使用会报错：const命令和let命令不存在变量提升（有争议）
暂时性死区：在代码块内使用let命令声明变量之前，该变量都不可用

解构赋值

字符串解构：const [a, b, c, d, e]="hello"
数值解构：const { toString: s }=123
布尔值解构：const { toString: b }=true
对象解构
形式：const { x, y }={ x: 1, y: 2 }
默认：const { x, y=2 }={ x: 1 }
改名：const { x, y: z }={ x: 1, y: 2 }
数组解构
规则：数据结构具有Iterator接口可采用数组形式的解构赋值
形式：const [x, y]=[1, 2]
默认：const [x, y=2]=[1]
函数参数解构
数组解构：function Func([x=0, y=1]) {}
对象解构：function Func({ x=0, y=1 }={}) {}

应用场景

交换变量值：[x, y]=[y, x]
返回函数多个值：const [x, y, z]=Func()
定义函数参数：Func([1, 2])
提取JSON数据：const { name, version }=packageJson
定义函数参数默认值：function Func({ x=1, y=2 }={}) {}
遍历Map结构：for (let [k, v] of Map) {}
输入模块指定属性和方法：const { readFile, writeFile }=require("fs")

重点难点

匹配模式：只要等号两边的模式相同，左边的变量就会被赋予对应的值
解构赋值规则：只要等号右边的值不是对象或数组，就先将其转为对象
解构默认值生效条件：属性值严格等于undefined
解构遵循匹配模式
解构不成功时变量的值等于undefined
undefined和null无法转为对象，因此无法进行解构

TML 代码约定

很多 Web 开发人员对 HTML 的代码规范知之甚少。

在2000年至2010年，许多Web开发人员从 HTML 转换到 XHTML。

使用 XHTML 开发人员逐渐养成了比较好的 HTML 编写规范。

而针对于 HTML5 ，我们应该形成比较好的代码规范，以下提供了几种规范的建议。

使用正确的文档类型

文档类型声明位于HTML文档的第一行：

<!DOCTYPE html>

如果你想跟其他标签一样使用小写，可以使用以下代码：

<!doctype html>

使用小写元素名

HTML5 元素名可以使用大写和小写字母。

推荐使用小写字母：

混合了大小写的风格是非常糟糕的。
开发人员通常使用小写 (类似 XHTML)。
小写风格看起来更加清爽。
小写字母容易编写。

不推荐:

<p>这是一个段落。</p>

</SECTION>

非常糟糕:

<p>这是一个段落。</p>

</SECTION>

推荐:

<body>

<p>菜鸟教程，学的不仅是技术，更是梦想。

菜鸟教程，学的不仅是技术，更是梦想。

菜鸟教程，学的不仅是技术，更是梦想。</p>

</body>

表格实例:

<table>

<tr>

<th>Description</th>

</tr>

<tr>

<td>Description of A</td>

</tr>

<tr>

<td>Description of B</td>

</tr>

</table>

列表实例:

<ol>

<li>London</li>

<li>Paris</li>

<li>Tokyo</li>

</ol>

省略 <html> 和 <body>?

在标准 HTML5 中， <html> 和 <body> 标签是可以省略的。

以下 HTML5 文档是正确的:

实例:

<!DOCTYPE html>

<head>

</head>

<h1>这是一个标题</h1>

<p>这是一个段落。</p>

尝试一下 ?

不推荐省略 <html> 和 <body> 标签。

<html> 元素是文档的根元素，用于描述页面的语言：

<!DOCTYPE html>

声明语言是为了方便屏幕阅读器及搜索引擎。

省略 <html> 或 <body> 在 DOM 和 XML 软件中会崩溃。

省略 <body> 在旧版浏览器 (IE9)会发生错误。

省略 <head>?

在标准 HTML5 中， <head>标签是可以省略的。

默认情况下，浏览器会将 <body> 之前的内容添加到一个默认的 <head> 元素上。

实例

<!DOCTYPE html>

<html>

<body>

<h1>这是一个标题</h1>

<p>这是一个段落。</p>

</body>

</html>

尝试一下 ?

	现在省略 head 标签还不推荐使用。

元数据

HTML5 中 <title> 元素是必须的，标题名描述了页面的主题:

标题和语言可以让搜索引擎很快了解你页面的主题:

<!DOCTYPE html>

<head>

</head>

HTML 注释

注释可以写在  中:

比较长的评论可以在  中分行写：

<!--

这是一个较长评论。这是一个较长评论。这是一个较长评论。

这是一个较长评论这是一个较长评论。这是一个较长评论。

-->

长评论第一个字符缩进两个空格，更易于阅读。

样式表

样式表使用简洁的语法格式 ( type 属性不是必须的):

短的规则可以写成一行:

p.into {font-family: Verdana; font-size: 16em;}

长的规则可以写成多行:

body {

background-color: lightgrey;

font-family: "Arial Black", Helvetica, sans-serif;

font-size: 16em;

color: black;

}

将左花括号与选择器放在同一行。
左花括号与选择器间添加以空格。
使用两个空格来缩进。
冒号与属性值之间添加已空格。
逗号和符号之后使用一个空格。
每个属性与值结尾都要使用符号。
只有属性值包含空格时才使用引号。
右花括号放在新的一行。
每行最多 80 个字符。

	在逗号和分号后添加空格是常用的一个规则。

在 HTML 中载入 JavaScript

使用简洁的语法来载入外部的脚本文件 ( type 属性不是必须的 ):

使用 JavaScript 访问 HTML 元素

一个糟糕的 HTML 格式可能会导致 JavaScript 执行错误。

以下两个 JavaScript 语句会输出不同结果:

实例

var obj=getElementById("Demo")

var obj=getElementById("demo")

HTML 中 JavaScript 尽量使用相同的命名规则。

访问 JavaScript 代码规范。

使用小写文件名

大多 Web 服务器 (Apache, Unix) 对大小写敏感： london.jpg 不能通过 London.jpg 访问。

其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感： london.jpg 可以通过 London.jpg 或 london.jpg 访问。

你必须保持统一的风格，我们建议统一使用小写的文件名。

文件扩展名

HTML 文件后缀可以是 .html (或r .htm)。

CSS 文件后缀是 .css 。

JavaScript 文件后缀是 .js 。

.htm 和 .html 的区别

.htm 和 .html 的扩展名文件本质上是没有区别的。浏览器和 Web 服务器都会把它们当作 HTML 文件来处理。

区别在于：

.htm 应用在早期 DOS 系统，系统现在或者只能有三个字符。

在 Unix 系统中后缀没有特别限制，一般用 .html。

技术上区别

如果一个 URL 没有指定文件名 (如 http://www.runoob.com/css/), 服务器会返回默认的文件名。通常默认文件名为 index.html, index.htm, default.html, 和 default.htm。

如果服务器只配置了 "index.html" 作为默认文件，你必须将文件命名为 "index.html", 而不是 "index.htm"。

但是，通常服务器可以设置多个默认文件，你可以根据需要设置默认文件吗。

不管怎样，HTML 完整的后缀是 ".html"。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

篇文章介绍了 注释标签，我个人感觉很容易理解，在日常编码中，大多数编辑器都有注释标签的快捷键，如sublime或VS code里在html代码里，选中想要注释掉的代码后，直接按ctrl+/即可。几乎不用手动输入了。还是很方便的。

这篇我写<!DOCTYPE>标签，说起来这个标签，很常见，因为它会出现在每一个httml文档的最开头，然而，我们很少去重视它，为什么呢？

说到这个标签，我不得不说起html的版本历史了。

在大约10年前吧，html5应用还不如今天这么广泛吧，于是当时的文档类型声明如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

很长，也很难记，由于我入行晚，懂得这玩意就只是一个声明了，比如strict表示严格模式。其他的我也不想知道了。

当然html版本的规范从4到5的过渡经历了太多年，因为要考虑老浏览器的兼容性，再加上前期移动设备配置低，不支持较为复杂的媒体元素。于是，一些资历深的前端开发人员，面对这么长的代码还是有很长一段时间。

当然，9102年都快过完了，我们这边已经不需要再考虑这些了，于是，我直接就用html5了。

然后声明文档给格式，就变得很简单了。

<!DOCTYPE html>

最开始我是使用sublime生成的模板练习的，然后，犯懒，直接输入了<html>就出来下面的代码：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
</body>
</html>

然后就开始进行填充了。

直到今天我才注意到原来<!DOCTYPE html>是单独的一行，与下方<html></html>是两码事。

所以，我重新看了下书上的强调内容：

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前，没有结束标签，对大小写不敏感。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD(文档类型定义)，因为 HTML 4.01 基于 SGML（标准通用标记语言)）。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML，所以不需要引用 DTD。

关于SGML，参见https://wiki.mbalib.com/wiki/SGML

常用的 DOCTYPE 声明

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

该 DTD 等同于 XHTML 1.0 Transitional，但允许框架集内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型（例如提供对东亚语系的 ruby 支持）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

最后，虽然上方的html4和xml的文档类型声明这么麻烦了，但是这里没什么知识点了，因为如今，html5应用这么普及了，我们只需在文档开头写<!DOCTYPE html>即可，当然html4的严格模式和传统模式大概知道就行了。

在线咨询

上一篇：大神为什么比你优秀，靠的就是这些外挂网站，看看你都知
下一篇：（Python基础教程之二十二）爬虫下载网页视频(v

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript的声明方法和作用范围，常见的结构

声明

解构赋值

常用的 DOCTYPE 声明

您的项目需求