Liang‘s Web-NotesHTML&CSS
JS
Vue.js
Java
MySQL
Redis
SpringBoot
前端补充
后端补充
🌻JavaScript 入门
type
status
date
slug
summary
tags
category
icon
password
待补充
JavaScript 简介
严格意义上讲，我们在 JavaScript 阶段学习的知识绝大部分属于 ECMAScript 的知识体系，ECMAScript 简称 ES 它提供了一套语言标准规范，如变量、数据类型、表达式、语句、函数等语法规则都是由 ECMAScript 规定的。浏览器将 ECMAScript 大部分的规范加以实现，并且在此基础上又扩展一些实用的功能，这些被扩展出来的内容我们称为 Web APIs。
JS 书写位置
JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过
script 标签将 JavaScript 代码引入到 HTML 中，有两种方式：- 内部 JS：通过
script标签包裹 JavaScript 代码
- 外部 JS：通过
script标签的src属性引入（多个则写多个script标签）
注释和结束符
- 单行注释：
\\
- 多行注释：
/* */
- 结束符：
;（可以不写）
输入输出-IO
输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。
- 输入：
prompt()
- 输出：
alert()、document.wirte()
变量和数据类型
变量：
let varname = value常量：
const PI = 3.14数据类型
- 检测数据类型：
typeof
- 数值类型：可以是整数、小数、正数、负数
- 字符串类型：通过单引号（
''） 、双引号（""）或反引号包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。 - 无论单引号或是双引号必须成对使用
- 单引号/双引号可以互相嵌套，但是不以自已嵌套自已
- 必要时可以使用转义符
\，输出单引号或双引号
- 布尔类型：表示肯定或否定时在计算机中对应的是布尔类型数据，它有两个固定的值
true和false，表示肯定的数据用true，表示否定的数据用false。
- undefined：未定义是比较特殊的类型，只有一个值 undefined，只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。
数据类型转换
隐式转换
某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。
显式转换
编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。
Number
通过
Number 显示转换成数值类型，当转换失败时结果为 NaN（Not a Number）即不是一个数字。关键字
JavaScript 使用专门的关键字
let 和 var 来声明（定义）变量，在使用时需要注意一些细节：以下是使用
let 时的注意事项：- 允许声明和赋值同时进行
- 不允许重复声明
- 允许同时声明多个变量并赋值
- JavaScript 中内置的一些关键字不能被当做变量名
以下是使用
var 时的注意事项：- 允许声明和赋值同时进行
- 允许重复声明
- 允许同时声明多个变量并赋值
大部分情况使用
let 和 var 区别不大，但是 let 相较 var 更严谨，因此推荐使用 let，后期会更进一步介绍二者间的区别。变量名命名规则
关于变量的名称（标识符）有一系列的规则需要遵守：
- 只能是字母、数字、下划线、$，且不能能数字开头
- 字母区分大小写，如 Age 和 age 是不同的变量
- JavaScript 内部已占用于单词（关键字或保留字）不允许使用
- 尽量保证变量具有一定的语义，见字知义
注：所谓关键字是指 JavaScript 内部使用的词语，如
let 和var，保留字是指 JavaScript 内部目前没有使用的词语，但是将来可能会使用词语。运算符
算术运算符
运算符 | 作用 |
+ | 求和 |
- | 求差 |
* | 求积 |
/ | 求商 |
% | 取模（取余数），开发中经常用于作为某个数字是否被整除 |
注意：在计算失败时，显示的结果是 NaN （not a number）
赋值运算符
运算符 | 作用 |
+= | 加法赋值 |
-+ | 减法赋值 |
*= | 乘法赋值 |
/= | 除法赋值 |
%= | 取余赋值 |
自增/自减运算符
符号 | 作用 | 说明 |
++ | 自增 | 变量自身的值加1，例如: x++ |
-- | 自减 | 变量自身的值减1，例如: x-- |
- ++在前和++在后在单独使用时二者并没有差别，而且一般开发中我们都是独立使用
- ++在后（后缀式）我们会使用更多
比较运算符
使用场景：比较两个数据大小、是否相等，根据比较结果返回一个布尔值（true / false）
运算符 | 作用 |
> | 左边是否大于右边 |
< | 左边是否小于右边 |
>= | 左边是否大于或等于右边 |
<= | 左边是否小于或等于右边 |
=== | 左右两边是否 类型和值都相等（重点） |
== | 左右两边 值是否相等 |
!= | 左右值不相等 |
!== | 左右两边是否不全等 |
逻辑运算符
使用场景：可以把多个布尔值放到一起运算，最终返回一个布尔值
符号 | 名称 | 日常读法 | 特点 | 口诀 |
&& | 逻辑与 | 并且 | 符号两边有一个假的结果为假 | 一假则假 |
|| | 逻辑或 | 或者 | 符号两边有一个真的结果为真 | 一真则真 |
! | 逻辑非 | 取反 | true变false false变true | 真变假，假变真 |
A | B | A && B | A || B | !A |
false | false | false | false | true |
false | true | false | true | true |
true | false | false | true | false |
true | true | true | true | false |
数组
分支语句（条件语句）
if 语句
语法：
if 双分支语句
三目运算符
条件 ? 表达式1 ： 表达式2条件满足，执行表达式 1，不满足，执行表达式 2一些简单的双分支，可以使用 三元运算符（三元表达式），写起来比 if else双分支 更简单
if 多分支语句
小括号内的条件结果是布尔值，为 true 时，进入大括号里执行代码；为false，则不执行大括号里面代码小括号内的结果若不是布尔类型时，会发生类型转换为布尔值，类似Boolean()如果大括号只有一个语句，大括号可以省略，但是，俺们不提倡这么做~
switch 语句
使用场景： 适合于有多个条件的时候，也属于分支语句，大部分情况下和 if多分支语句 功能相同
注意：
- switch case语句一般用于等值判断, if适合于区间判断
- switch case一般需要配合break关键字使用 没有break会造成case穿透
- if 多分支语句开发要比switch更重要，使用也更多
if 对比 switch
if 多分支语句和 switch的区别：
- 共同点
- 都能实现多分支选择， 多选1
- 大部分情况下可以互换
- 区别：
- switch…case语句通常处理case为比较确定值的情况，而if…else…语句更加灵活，通常用于范围判断(大于，等于某个范围)。
- switch 语句进行判断后直接执行到程序的语句，效率更高，而if…else语句有几种判断条件，就得判断多少次
- switch 一定要注意 必须是 === 全等，一定注意 数据类型，同时注意break否则会有穿透效果
- 结论：
- 当分支比较少时，if…else语句执行效率高。
- 当分支比较多时，switch语句执行效率高，而且结构更清晰。
欢迎在下方留言讨论~
Loading...
Last update: 2024-07-04
🎉欢迎来到《现代网站开发技术》课程的开源文档笔记🎉