JavaScript编写方式
第一种编写方式（HTML行内）
<body> <a href="javascript:alert('百度一下')" onclick="alert('点击百度一下')">百度一下</a> </body>
如图所示，我们把js代码写到了a标签中，在我们之前的学习过程中，我们习惯于在body体内书写我们所需要的html代码，这种方法虽然可行，但是过于臃肿，并且不利于别人阅读，在我们的潜意识中，a标签所包含的内容应为超链接，将js代码嵌入a标签中难免有种生硬感，不推荐（可运行）
第二种编写方式（script标签中）
<body> <a href="#" class="google">Google一下</a> <script> const googleEl = document.querySelector('.google') googleEl.onclick = function(){ alert('Google一下') } </script> </body>
如图所示，相对于第一种书写方法来说，第二种较为清晰，很好的通过script标签将html部分和js内容分隔开，使得读者在浏览源代码时候相对舒服一点。对于初学者而言，此方法比较好；我们眼光放长远一点，以后写大项目的时候，如果还是将js代码内嵌在html页面中的话，整篇页面的代码长度过长，不利于读者的阅读，不推荐（可运行）
第三种编写方式（外部的script文件）
如图所示，相对于前两种代码风格来看，第三种方法将js代码单独用一个文件来进行书写。这样书写的好处是：① 代码整体界面不至于臃肿 ② 便于后期维护项目，读者可以通过alt+鼠标左键快速查看js文件，作者比较推荐此方法
< noscript >标签
问题
有些用户的浏览器版本过低，比如早期的IE浏览器，无法对js标签解析，我们如何告诉用户是浏览器的问题而并非是我们网站的问题呢？
思路
- 针对早期浏览器不支持JavaScript的问题，我们需要一个优雅降级的处理方案
标签应运而生,用于不支持JavaScript一个页面提示内容
触发流程
<body> <noscript> <p>您的浏览器不支持或已经关闭运行JavaScript</p> </noscript> </body>
下面以Google为例，展示在浏览器中关闭JavaScript的地方
JavaScript编写注意事项
script元素不能写成单标签
- 在外联式引入
js文件的时候，script标签中不可以写入JavaScript代码，并且script标签不能写成单标签
省略type属性
在以前的代码中，我们的script标签会使用type=“text/javascript”，不过现在咱们可以不用写了，因为JavaScript是所有现代浏览器以及HTML5中默认的脚本语言
加载顺序
- 作为
HTML中的一部分，JavaScript默认遵循HTML文档的加载顺序，即自上而下的加载顺序（这一点会在《JavaScript高级程序设计（第4版）》详细讲解，后续Coder Peng会持续更文） - 我们更推荐将
JavaScript代码和边写的位置放在body子元素的最后一行
JavaScript代码严格区分大小写
这一点很多同学需要注意一下，可能以前有部分人学过Linux，觉得大小写比较随意，但是在JavaScript中，大小写是严格区分的
此外，HTML元素和CSS属性是不区分大小写的
JavaScript的交互方式
我们日常学习JavaScript的时候，最常用的调试语句为console.log，下面Coder Peng为大家整理了在JavaScript中一些常用的与用户交换的方式
交互方法 |
方法说明 |
效果查看 |
alert |
接受一个参数 |
弹窗查看 |
console.log |
接受多个参数 |
在浏览器控制台查看 |
document.write |
接受多个字符串 |
在浏览器界面查看 |
prompt |
接受一个参数 |
在浏览器接受用户输入 |
Chrome的调试工具
- 在前面的学习中，我们利用
Chrome的调试工具来调试了HTML、CSS，它也可以帮助我们进行调试JavaScript - 在接下来的学习中，当我们使用
console.log进行调试的时候，我们可以在浏览器界面按下F12键，打开弹出的窗口里面的console键，就能看到js代码打印输出的内容
补充说明
- 如果在代码中出现了错误，则浏览器会在
console这一栏打印输出错误的原因，方便我们去进行修改 - 如上图所示，
console里面有一个>的表示，这个表示控制台的命令行，我们也可以在这个地方写入js代码对浏览器进行调试（写好之后按下Enter就会立即执行代码） - 如果希望编写多行代码，我们可以按下
shift+enter进行换行编写 - 在后续的学习中我们还会通过如何
debug来进行调试，查看代码的执行流程
JavaScript语句和分号
语句是浏览器发出的指令，通常表达为一个操作或者行为（Action），如下所示
在很多前端教科书上，都会推荐大家在每一行执行语句的后面用；结尾，Coder Peng在这里并不建议大家使用分号，因为在后续的学习中，大家会学习到Vue等相关技术框架，在写这些框架的时候，结尾的分号反而是一种负担。
JavaScript的注释（没啥好讲的，自己看看就行）
JavaScript不支持嵌套的注释
vscode插件和配置
- 插件自己去网上搜搜，在这里不作详细介绍
配置这一方面给大家推荐上我自用的一款（去setting.json里面进行配置），链接：https://juejin.cn/post/7165056807704985608
03-JavaScript变量和数据类型
变量的定义
- 一个变量，就是一个用于存放数值的容器
- 这个数值可能是一个用于计算的数字，或者额是一个句子中的字符串，或者是其他任意类型的数据；
- 变量的独特之处在于它存放的数值是可以改变的
我们可以把变量想象成一个盒子，盒子里面装着我们的数据，我们需要给盒子一个特性的名称
- 例如，变量
message可以被想象成一个标有“message”的盒子，盒子里面的值为Hello！，并且这个盒子的值，我们想改变多少次就改变多少次
变量的命名格式
变量的声明
在JavaScript中声明一个变量使用var关键字（后续还会学到其它关键字，别急）
变量的赋值
方式一
方式二
同时声明多个变量
方式一
方式二
变量命名规范
变量命名规则：必须遵守
- 第一个字符必须是一个字母、下划线（_）或一个美元符号（$）
- 其它字符可以是字母、下划线、美元符号或数字
- 不能使用关键字和保留字命名，见下图
- 变量严格区分大小写
变量命名规范：建议遵守
- 多个单词使用驼峰表示
- 赋值 = 两边都加上一个空格
- 变量应该做到见名知意
变量的使用注意
注意一
如果一个变量未经声明就开始使用，则会在浏览器的console台直接报错
注意二
如果一个变量有声明但是没有赋值，则默认值在浏览器的console台打印输出undefined
注意三
如果没有使用var声明变量也可以，但是不推荐（事实上会被添加到window对象上）
JavaScript的数据类型
JavaScript中的值都有特定的类型
- 我们可以将值赋值给一个变量，那么这个变量就具备了特定的类型
- 一个变量可以在前一刻是一个字符串，下一刻就存储为一个数字
- 允许这种操作的编程语言，例如JavaScript，被称为动态类型
八种基本数据类型
- Number
- String
- Boolean
- Undefined
- Null
- Object
- BigInt（后面会讲，别急）
- Symbol（后面会讲，别急）
typeof操作符
来源
因为ECMAScript的类型是松散的，所以我们需要一种手段来确定任意变量的数据类型，typeof操作符应运而生
返回值类型
对一个值使用typeof操作符会返回下列字符串之一
undefined表示值未定义boolean表示值为布尔值string表示值为紫府村number表示值为数值object表示值为对象（而不是函数）或nullfunction表示值为函数symbol表示值为符号
typeof（）的用法
- 你可能还会遇到另一种语法：
typeof（x），它与typeof相同 typeof是一个操作符，并非是一个函数，（）只是将后续的内容当做一个整体而已
Number类型
number类型代表整数和浮点数
数字number可以用很多操作，比如加减乘除等
除了常规的数字，还包括所谓的特殊数值，也属于Number类型（了解即可）
- Infinity：代表数学概念中的无穷大∞，也可以表示为-infinity，比如1/0得到的就是无穷大
- NaN：
NaN代表一个计算错误，它是一个错误的操作所得到的的结果，比如字符串和一个数字相乘
进制表示
十进制、十六进制、二进制、八进制
数字的表示范围
- 最小正数值：Number.MIN_VALUE，这个值为5e-324，小于这个数的数字会被转化为0
- 最大正数值：Number.MAX_VALUE，这个值为：1.7976931348623157e+308
isNaN
用于判断是否不是一个数字。不是数字的返回true，是数字的返回false
String类型
JavaScript的字符串必须被括在引号里面，有三种包含字符串的方式
- 双引号：“Hello”
- 单引号：‘Hello’
- 反引号：
Hello
JavaScript前后的引号类型必须一致
- 如果在字符串里面本身包括单引号，可以使用双引号
- 如果在字符串里面本身包括双引号，可以使用单引号
字符串中的转义字符
除了普通的可以打印的字符外，一些有特殊功能的字符可以通过转义字符的形式放到字符串中
转义字符 |
表示符号 |
\' |
单引号 |
\" |
双引号 |
\\ |
反斜杠 |
\n |
换行符 |
\r |
回车符 |
\t |
缩进符 |
\b |
退格符 |
转义字符串开发中只有特殊场景才会用到， 暂时掌握 \’\”\t \n四个的用法即可
字符串的属性和方法
方法一
字符串拼接，通过+运算符进行操作
方法二
获取字符串的长度
值得注意的是，在计算字符串长度的时候，我们要考虑到字符串之间的空格（空格也会被计入字符串长度）
Boolean类型
Boolean类型用于表示真假
- 比如是否毕业. 是否有身份证. 是否购买车票. 是否成年人
- 比如开发中，我们会判断一个账号是否登录、是否是管理员、是否具备某个权限、是否拥有某个英雄、皮肤等
Boolean 类型仅包含两个值： true 和 false
Undefined类型
Undefined类型只有一个值，就是特殊值undefined
如果我们声明一个变量，但是没有对其进行初始化时，它默认就是undefined
注意事项
- 最好在变量定义的时候进行初始化，而不只是声明一个变量
- 不要显示的将一个变量赋值为undefined
- 如果变量刚开始什么都没有，我们可以初始化为0、空字符串、null等值
Object类型
Object 类型是一个特殊的类型，我们通常把它称为引用类型或者复杂类型
其他的数据类型我们通常称之为原始类型，因为它们的值至少包含一个单独的内容（字符串、数字或者其他），Object往往可以表示一组数据，是其他数据的一个集合
在JavaScript中我们可以使用 花括号{} 的方式来表示一个对象
上面的代码看不懂没关系，后面我们会讲
Null类型
Null 类型同样只有一个值，即特殊值 null
null类型通常用来表示一个对象为空，所以通常我们在给一个对象进行初始化时，会赋值为null
null和undefined的关系
undefined通常只有在一个变量声明但是未初始化时， 它的默认值是undefined才会用到- 并且我们不推荐直接给一个变量赋值为
undefined，所以很少主动来使用 null值非常常用，当一个变量准备保存一个对象，但是这个对象不确定时，我们可以先赋值为null
数据类型总结
JavaScript 中有八种基本的数据类型（前七种为基本数据类型， 也称为原始类型，而 object 为复杂数据类型，也称为引用类型）
number用于任何类型的数字：整数或浮点数string用于字符串：一个字符串可以包含 0 个或多个字符，所以没有单独的单字符类型boolean用于true和falseundefined用于未定义的值 —— 只有一个 undefined 值的独立类型object用于更复杂的数据结构null用于未知的值 —— 只有一个 null 值的独立类型
数据类型的转换
- 在开发中，我们会经常需要对数据类型进行转换。大多数情况下，运算符和函数会自动将赋予它们的值转换为正确的类型，这是一种隐式转换
- 我们也可以，通过显示的方式来对数据类型进行转换
字符串String的转换
转换方式一：隐式转换
如果+运算符左右两边有一个是字符串，那么另一边会自动转换成字符串类型进行拼接
转换方式二：显式转换
说白了，我们使用显式转换，一般是人为的去使用函数进行操作
数字类型Number的转换
转换方式一：隐式转换
- 在算数运算中，通常会将其他类型转换成数字类型来进行运算，但是如果是+运算，并且其中一边有字符串，那么还是按照字符串来连接的
转换方式二：显式转换
由上文可知，我们也可以通过使用Number()函数来进行显式的转换
值 |
转换后的值 |
undefined |
NaN |
null |
0 |
true 和 false |
1 and 0 |
string |
去掉首尾空格后的纯数字字符串中含有的数字。如果剩余字符串为空，则转换结 果为 0。否则，将会从剩余字符串中“读取”数字。当类型转换出现 error 时返回 NaN。 |
布尔类型的Boolean的转换
它发生在逻辑运算中，但是也可以通过调用 Boolean(value) 显式地进行转换
转换规则
- 直观上为“空”的值（如 0、空字符串、
null、undefined和NaN）将变为false - 其他值变成
true
值 |
转化后 |
0, null, undefined, NaN, "" |
false |
其他值 |
true |
注意：包含 0 的字符串 "0" 是 true。一些编程语言(比如 PHP)视 "0" 为 false。但在 JavaScript 中，非空的字符串总是 true
04-JavaScript常见的运算符
认识运算符
计算机最基本的操作就是执行运算， 执行运算时就需要使用运算符来操作。如下图所示，两种运算方式所使用的符号都是运算符
认识运算元
首先我们得知道什么是运算元——运算符的应用对象。说的通俗一点，比如上图：20和30就是两个运算元。在一些书籍中，作者还会把运算元叫作参数
- 有时候一个运算符对应的只有一个运算元，我们就把它叫作一元运算符
- 有时候一个运算符拥有两个运算元，那么它是二元运算符
在一元运算符的情况下，我们通常会使用-和+，-相对来说使用的多一点点
JavaScript中的运算
算术运算符
- 算术运算符用在数学表达式中, 它的使用方式和数学中也是一致的
- 算术运算符是对数据进行计算的符号
运算符 |
运算规则 |
范例 |
结果 |
+ |
加法 |
2 + 3 |
5 |
+ |
连接字符串 |
'中'+ '国' |
'中国' |
- |
减法 |
2 - 3 |
-1 |
* |
乘法 |
2 * 3 |
6 |
/ |
除法 |
5 / 2 |
2.5 |
% |
取余数 |
5 % 2 |
1 |
** |
幂( ES7) |
2 ** 3 |
8 |
取余%和求幂
取余的运算符是%，跟百分号没关系！a % b的结果是a整除b的余数
求幂运算a b，通俗点来讲就是把a提升至b次幂**（这是ES7里面的语法，也叫作ES2016，后续Coder Peng会单独列出来讲）
赋值运算符
前面我们使用的=其实也是一个运算符，被称之为赋值( assignments )运算符
这里我们要强调一下，很多初学者在刚开始学赋值运算符的时候，总是习惯从左往右看，这种看法是错误的。我们在学习赋值运算符的时候，要习惯性的从右往左看，见下图
在上面的图片中我们可以看到，我们用var定义了一个a变量，然后我们把3这个值赋给了a变量，因此这时候在console台打印输出的a变量的值是3而并非undefined
链式赋值
顾名思义，看到这个名字就意味着是一条链式的复制方式，见下图
在这张图里面我们可以看到，我们用var定义了3个变量，在接下来的赋值运算中，我们将4的值赋给了c，c的值赋给了b，以此类推，最后三个变量打印输出的结果都是4
但是一般我们不建议这么写，因为可读性实在是太差了，同事接手你的代码会疯的🤣
原地修改
在日常开发中，我们可能会遇到变量名写错了需要修改，但是业务又不允许我们新建变量的情况，所以我们这个时候就需要用到原地修改这个办法
在图片中我们可以看到，我们定义了一个变量n并且赋值为10，在接下来的操作中，我们首先**将n的值+5并且赋值给n，然后将n的值2赋值给b，这就是原地修改的方法
运算符 |
运算规则 |
范例 |
结果 |
= |
赋值 |
a = 5 |
5 |
+= |
加后赋值 |
a = 5, a += 2 |
7 |
- = |
减后赋值 |
a = 5, a -= 2 |
3 |
*= |
乘后赋值 |
a = 5; a *= 2 |
10 |
/= |
除后赋值 |
a = 5; a /= 2 |
2.5 |
%= |
取模 (余数)后赋值 |
a = 5; a %= 2 |
1 |
**= |
幂后赋值 |
a = 5; a **= 2 |
25 |
自增自减
我们在做一些算法题目的时候，通常会用到自增和自减两个概念，说白了自增和自减无非就是在自身的基础上进行+1或-1的操作，是最常见的数学运算符之一
自增：++ 自减： --
自增和自减只能用于变量，不能用于常数
++和--的位置
运算符++和--可以置于变量前，也可以置于变量后
- 当运算符置于变量后，被称为后置形式 (postfix form)
- 当运算符置于变量前，被称为前置形式 (prefix form)
前置形式和后置形式的区别
- 这两者是有区别的，但只有当我们使用 ++/-- 的返回值时才能看到区别
- 如果自增/自减的值不会被使用，那么两者形式没有区别
- 如果我们想要对变量进行自增操作，并且需要立刻使用自增后的值，那么我们需要使用前置形式
- 前置形式返回一个新的值，但后置返回原来的值
运算符的优先级
符号 |
运算顺序 |
** |
从右往左 |
** |
从左往右 |
/ |
从左往右 |
% |
从左往右 |
+ |
从右往左 |
- |
从右往左 |
比较运算符
- 大于 / 小于：a > b ，a < b
- 大于等于 / 小于等于：a >= b ，a <= b
- 检查两个值的相等：a == b，请注意双等号 == 表示相等性检查，而单等号 a = b 表示赋值
- 检查两个值不相等：不相等在数学中的符号是 ≠，但在 JavaScript 中写成 a != b
===和==的区别
在我们写项目的时候，有时候会需要检查两个值是否相等，但是如果我们使用普通的==进行判断，会存在一个问题：它不能区分出 0 和 false，或者空字符串和 false这类运算
原因
- 这是因为在比较不同类型的值时，处于判断符号
==两侧的值会先被转化为数字 - 空字符串和
false也是如此，转化后它们都为数字 0，因此见下图
很多情况下，我们是需要严格区分0和false的，这个时候===就派上用场了😎
使用===的好处
- 严格相等运算符===在进行比较时不会做任何的类型转换
- 换句话说，如果a和b属于不同的数据类型，那么
a === b不会做任何的类型转换而立刻返回 false - 同样的，不相等符号 != 类似，严格不相等表示为 !==
- 严格相等的运算符虽然写起来稍微长一些， 但是它能够很清楚地显示代码意图 ，降低你犯错的可能性
- 在日常编写代码或者写项目的时候，我更推荐大家使用===来降低代码犯错的可能性😆
JavaScript基础语法（codewhy版本）（二）https://developer.aliyun.com/article/1469635
