javascript_基础教程注意事项

方北Max

于 2022-08-02 16:45:47 发布

阅读量95

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_43985531/article/details/126125564

版权

JavaScript 能够改变 HTML 内容

getElementById() 是多个 JavaScript HTML 方法之一。

**提示：**把脚本置于 <body> 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。

JavaScript 使用、外部 JavaScript 的优势

在外部文件中放置脚本有如下优势：

分离了 HTML 和代码
使 HTML 和 JavaScript 更易于阅读和维护
已缓存的 JavaScript 文件可加速页面加载

**提示：**更改 HTML 元素的 innerHTML 属性是在 HTML 中显示数据的常用方法。

JavaScript 显示方案

JavaScript 能够以不同方式“显示”数据：

使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出 (仅用于测试不常用)
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台

JavaScript 程序

计算机程序是由计算机“执行”的一系列“指令”。

在编程语言中，这些编程指令被称为语句。

JavaScript 程序就是一系列的编程语句。

**注释：**在 HTML 中，JavaScript 程序由 web 浏览器执行。

JavaScript 语句

JavaScript 语句由以下构成：

值、运算符、表达式、关键词和注释。分号分隔 JavaScript 语句。折行的最佳位置是运算符或逗号之后。

**提示：**以分号结束语句不是必需的，但我们仍然强烈建议您这么做。

JavaScript 变量

在编程语言中，变量用于存储数据值。

JavaScript 使用 var 关键词来声明变量。

JavaScript 关键词

JavaScript 关键词用于标识被执行的动作。

var 关键词告知浏览器创建新的变量

JavaScript 标识符 JavaScript 对大小写敏感

标识符是名称。

在 JavaScript 中，首字符必须是字母、下划线（-）或美元符号（$）。

连串的字符可以是字母、数字、下划线或美元符号。

**提示：**数值不可以作为首字符。这样，JavaScript 就能轻松区分标识符和数值。

小驼峰 firstName, lastName, masterCard, interCity

全局作用域

全局（在函数之外）声明的变量拥有全局作用域。

通过 var 关键词声明的变量没有块作用域。可以访问{}内的var变量。

使用 let 关键词声明拥有块作用域的变量。不可以访问{}内let的变量。

HTML 中的全局变量

使用 JavaScript 的情况下，全局作用域是 JavaScript 环境。

在 HTML 中，全局作用域是 window 对象。

通过 var 关键词定义的全局变量属于 window 对象通过 let 关键词定义的全局变量不属于 window 对象.

通过 var 声明的变量会提升到顶端。如果您不了解什么是提升（Hoisting）

const 变量必须在声明时赋值可以更改常量对象的属性无法重新为常量对象赋值

常量数组可以更改

可以更改常量数组的元素：无法重新为常量数组赋值：在同一作用域或块中，为已有的 const 变量重新声明声明或赋值是不允许的：

JavaScript 算数运算符

加减乘除取模递加递减

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WZtVSLEC-1659429758398)(C:\Users\微远聆风\AppData\Roaming\Typora\typora-user-images\image-20220728115234278.png)]

JavaScript 赋值运算符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ONAXSkUB-1659429758399)(C:\Users\微远聆风\AppData\Roaming\Typora\typora-user-images\image-20220728114900100.png)]

**提示：**在用于字符串时，+ 运算符被称为级联运算符。

**提示：**如果您对数字和字符串相加，结果将是字符串！

JavaScript 比较运算符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WbBp9mul-1659429758399)(C:\Users\微远聆风\AppData\Roaming\Typora\typora-user-images\image-20220728115023087.png)]

JavaScript 逻辑运算符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4G6rEGGo-1659429758399)(C:\Users\微远聆风\AppData\Roaming\Typora\typora-user-images\image-20220728115053898.png)]

JavaScript 类型运算符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mCqfqmhK-1659429758400)(C:\Users\微远聆风\AppData\Roaming\Typora\typora-user-images\image-20220728115110403.png)]

以及位运算符

JavaScript 数据类型

JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等：

可使用 JavaScript 的 typeof 来确定 JavaScript 变量的类型

在 JavaScript 中，没有值的变量，其值是 undefined。typeof 也返回 undefined。

JavaScript 对象

对象{ } 属性方法function()

不要把字符串创建为对象。它会拖慢执行速度。

JavaScript 字符串方法

length 属性返回字符串的长度： indexOf() 方法返回字符串中指定文本首次出现的索引（位置）：

lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引：

如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。

search() 方法搜索特定值的字符串，并返回匹配的位置：

种方法，indexOf() 与 search()，是相等的。

这两种方法是不相等的。区别在于：

search() 方法无法设置第二个开始位置参数。
indexOf() 方法无法设置更强大的搜索值（正则表达式）。
slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。

该方法设置两个参数：起始索引（开始位置），终止索引（结束位置）。

replace() 方法用另一个值替换在字符串中指定的值：通过 toUpperCase() 把字符串转换为大写：

通过 toLowerCase() 把字符串转换为小写： trim() 方法删除字符串两端的空白符：

可以通过 split() 将字符串转换为数组：

插值:模板字符串

模板字面量提供了一种将变量和表达式插入字符串的简单方法。

JavaScript 数值始终是 64 位的浮点数

NaN - 非数值

NaN 属于 JavaScript 保留词，指示某个数不是合法数。

尝试用一个非数字字符串进行除法会得到 NaN（Not a Number）

把变量转换为数值

这三种 JavaScript 方法可用于将变量转换为数字：
- Number() 方法
- parseInt() 方法
- parseFloat() 方法
length 属性

length 属性返回数组的长度（数组元素的数目）。

遍历数组元素

遍历数组的最安全方法是使用 “for” 循环：

添加数组元素

向数组添加新元素的最佳方法是使用 push() 方法：

数组和对象的区别

在 JavaScript 中，数组使用数字索引。

在 JavaScript 中，对象使用命名索引。

数组是特殊类型的对象，具有数字索引。

把数组转换为字符串

JavaScript 方法 toString() 把数组转换为数组值（逗号分隔）的字符串。

push() 方法（在数组结尾处）向数组添加一个新的元素：

位移与弹出等同，但处理首个元素而不是最后一个。

shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。

unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素：

使用 splice() 来删除元素

通过聪明的参数设定，您能够使用 splice() 在数组中不留“空洞”的情况下移除元素：

数组排序

sort() 方法以字母顺序对数组进行排序：

反转数组

reverse() 方法反转数组中的元素。

比值函数

比较函数的目的是定义另一种排序顺序。

比较函数应该返回一个负，零或正值，这取决于参数：

function(a, b){return a-b}

数组不是常量

关键字 const 有一定误导性。

它不定义常量数组。它定义的是对数组的常量引用。

因此，我们仍然可以更改常量数组的元素。

Math.pow()

Math.pow(x, y) 的返回值是 x 的 y 次幂：

Math.sqrt()

Math.sqrt(x) 返回 x 的平方根：

Math.min() 和 Math.max()

Math.min() 和 Math.max() 可用于查找参数列表中的最低或最高值：

JavaScript 随机整数

Math.random() 与 Math.floor() 一起使用用于返回随机整数。

JavaScript 布尔（逻辑）代表两个值之一：true 或 false。

布尔值

通常，在编程中，您会需要只能有两个值之一的数据类型，比如

YES / NO
ON / OFF
TRUE / FALSE

鉴于此，JavaScript 提供一种布尔数据类型。它只接受值 true 或 false。

所有不具有“真实”值的即为 False

*0（零）*的布尔值为 false： *-0 （负零）*的布尔值为 false： *“”（空值）*的布尔值为 false： undefined 的布尔值是 false：

null 的布尔值是 false： false 的布尔值（正如您猜到的）是 false： NaN 的布尔值是 false：

当使用 === 运算符时，相等的布尔是不相等的，因为 === 运算符需要在类型和值两方面同时相等。

比较不同的类型

比较不同类型的数据也许会出现不可预料的结果。

如果将字符串与数字进行比较，那么在做比较时 JavaScript 会把字符串转换为数值。空字符串将被转换为 0。非数值字符串将被转换为始终为 false 的 NaN。

switch 语句用于基于不同条件执行不同动作。

使用 switch 语句来选择多个需被执行的代码块之一。

代码解释：

计算一次 switch 表达式
把表达式的值与每个 case 的值进行对比
如果存在匹配，则执行关联代码
实例

getDay() 方法返回 0 至 6 之间的周名数字（weekday number）。

(Sunday=0, Monday=1, Tuesday=2 …)

break 关键词

如果 JavaScript 遇到 break 关键词，它会跳出 switch 代码块。

此举将停止代码块中更多代码的执行以及 case 测试。

如果找到匹配，并完成任务，则随机中断执行（break）。无需更多测试。

break 能够节省大量执行时间，因为它会“忽略” switch 代码块中的其他代码的执行。

不必中断 switch 代码块中的最后一个 case。代码块在此处会自然结束。

默认的 case 不必是 switch 代码块中最后一个 case：

如果 default 不是 switch 代码块中最后一个 case，请记得用 break 结束默认 case。

不同类型的循环

JavaScript 支持不同类型的循环：

for - 多次遍历代码块
for/in - 遍历对象属性
while - 当指定条件为 true 时循环一段代码块
do/while - 当指定条件为 true 时循环一段代码块

For/In 循环

JavaScript for/in 语句遍历对象的属性：

For/In 循环

JavaScript for/in 语句遍历对象的属性：

如果索引顺序很重要，请不要在数组上使用 for in。

索引顺序依赖于实现，可能不会按照您期望的顺序访问数组值。

当顺序很重要时，最好使用 for 循环、for of 循环或 Array.forEach()。

Array.forEach()

forEach() 方法为每个数组元素调用一次函数（回调函数）。

While 循环

while 循环会一直循环代码块，只要指定的条件为 true。

Do/While 循环

do/while 循环是 while 循环的变体。在检查条件是否为真之前，这种循环会执行一次代码块，然后只要条件为真就会重复循环。

break 语句“跳出”循环。

continue 语句“跳过”循环中的一个迭代。

break 语句也可用于跳出循环。

break 语句会中断循环，并继续执行循环之后的代码（如果有）：

Continue 语句

continue 语句中断（循环中）的一个迭代，如果发生指定的条件。然后继续循环中的下一个迭代。

JavaScript typeof

在 JavaScript 中有 5 种不同的可以包含值的数据类型：
- string
- number
- boolean
- object
- function
有 6 种类型的对象：
- Object
- Date
- Array
- String
- Number
- Boolean
以及 2 种不能包含值的数据类型：
- null
- undefined
  
  请注意：
  - NaN 的数据类型是数字
  - 数组的数据类型是对象
  - 日期的数据类型是对象
  - null 的数据类型是 object
  - 未定义变量的数据类型为 undefined *
  - 未赋值的变量的数据类型也是 undefined *
  您无法使用 typeof 来确定 JavaScript 对象是否是数组（或日期）。
  
  在 JavaScript 中，没有值的变量的值是 undefined。类型也是 undefined。
  
  Null
  
  在 JavaScript 中 null 即是“无”。它应该是不存在的东西。
  
  不幸的是，在 JavaScript 中，null 的数据类型是一个对象。
  
  你可以认为它是 JavaScript 中的一个 bug，typeof null 是一个对象。类型应为 null。
  
  您可以通过将对象设置为 null 来清空对象：
  
  undefined 与 null 的区别
  
  undefined 和 null 值相等但类型不同：
  
  JavaScript 类型转换
Number() 转换数值，String() 转换字符串，Boolean() 转换布尔值。

JavaScript 数据类型

JavaScript 中有五种可包含值的数据类型：
- 字符串（string）
- 数字（number）
- 布尔（boolean）
- 对象（object）
- 函数（function）
有三种对象类型：
- 对象（Object）
- 日期（Date）
- 数组（Array）
同时有两种不能包含值的数据类型：
- null
- undefined