JavaScript 基础语法知识-CSDN博客

本文链接：https://blog.csdn.net/m0_54412570/article/details/140205374

介绍

JavaScript 是 Web 的编程语言。
作用
- 网页特效（监听用户的一些行为让网页作出对应的反馈）
- 表单验证（针对表单数据的合法性进行判断）
- 数据交互(获取后台的数据，渲染到前端)
- 服务端编程(node.js)
组成
- ECMAScript : js基础语法核心知识。
  - 变量、分支语句、循环语句、对象等等
- Web APIs
  - DOM操作文档，比如对页面元素进行移动、大小、添加删除等操作
  - BOM操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

书写位置

内部JS

直接写在html文件里，用script标签包住
规范：script标签写在</body>上面
将<script>放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载HTML。如果先加载的JavaScript期望修改其下方的HTML,那么它可能由于HTML尚未被加载而失效

<!DOCTYPE html>
<body>

<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>

</body>

外部JS

代码写在以 .js 结尾的文件里，通过script标签，引入到html页面中。
script标签中间无需写代码，否则会被忽路！

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

内联JS

代码写在标签内部（Vue中）

注释

单行注释 //
- //右边这一行的代码会被忽略
- 快捷键：ctrl+/
块注释 /* */
- 在/*和*/之间的所有内容都会被忽略
- 快捷键：shift+alt+a

输入输出

document.write('内容') 向body内输出内容
- 如果输出的内容写的是标签，也会被解析成网页元素
alert('内容') 页面弹出警告对话框
console.log('控制台打印') 控制台输出语法，调试时使用
prompt('请输入内容：') 显示一个对话框，对话框中包含一条文字信息，用来提示用户输入
JS代码按HTML文档流顺序执行，alert() 和 prompt() 它们会跳过页面渲染先被执行

变量

变量不是数据本身，它仅仅是一个用于存储数值的容器
声明变量：声明关键字 变量名
- let 变量名 当变量需要改变时，使用let
- const 变量名 如果变量是数组、对象，或不需要改变时优先使用
变量赋值：变量名 = 变量值值
更新变量：变量赋值后，还可以给它一个不同的值来更新它
- let 不允许多次声明一个变量
命名规则与规范
- 不能用关键字
  - 关键字：有特殊含义的字。如：let、var、if、for等
- 只能用下划线、字母、数字、$组成，且数字不能开头
- 字母严格区分大小写，如 Age 和 age 是不同的变量
- 起名要有意义，遵守小驼峰命名法
  - 第一个单词首字母小写，后面每个单词首字母大写。如：userName

数组

一组数据存储在单个变量名下
声明： let 数组名 = [数据1, 数据2, ···,数据n]
数组是按顺序保存，所以每个数据都有自己的编号
计算机中的编号从0开始，在数组中，数据的编号也叫索引或下标
元素：数组中保存的每个数据都叫数组元素
下标：数组中数据的编号
长度：数组中数据的个数，通过数组的 length 属性获得
数组可以存储任意类型的数据
取值：数组名[下标]
改值：数组名[下标] = 新值
增值：
- 数组名.push() 将一个或多个元素添如到数组的末尾，并返回该数组的新长度
- 数组名.unshift() 将一个或多个元素添如到数组的开头，并返回该数组的新长度
删值：
- 数组名.pop() 从数组中删除最后一个元素，并返回该元素的值
- 数组名.shift() 从数组中删除第一个元素，并返回该元素的值
- 数组名.splice(操作的下标，删除的个数) 删除指定元素。不写删除个数，则一直删到尾

常量

当某个变量永远不会改变的时候，就可以使用const来声明，而不是let.
命名规范和变量一致
常量不允许重新赋值，声明的时候必须赋值（初始化）

数据类型

JS是弱数据类型，变量到底属于那种类型，只有赋值之后，才能确认
基本数据类型
- number 数字型
  - 可以是整数、小数、正数、负数
  - 算数运算符：加（+）减（-）乘（*）除（/）取余（%）
  - 算数运算符优先级：先乘除取余后加减，有括号先算括号里面的
  - NaN代表一个计算错误，是一个不正确的或者一个未定义的数学操作所得到的结果
  - 任何对NaN的操作都会返回NaN
- string 字符串型
  - 通过单引号(')、双引号(")或反引号(`)包裹的数据都叫字符串
  - 无论单引号或是双引号必须成对使用
  - 单引号、双引号可以互相嵌套，但是不能自已嵌套自已(外双内单，或者外单内双)
  - 可以使用转义符\，输出单引号或双引号
  - 字符串拼接： +运算符 可以实现字符串的拼接
  - 模板字符串：使用反引号（`）包裹字符串，内容拼接变量时，用 ${} 包住变量
- boolean 布尔型
  - true（真）
  - false（假）
- undefined 未定义型
  - 只声明变量，不赋值的情况下，变量的默认值为undefined
  - 一般很少【直接】为某个变量赋值为undefined
- null 空类型
  - 仅仅是一个代表“无”、“空”或“值未知”的特殊值
  - null 和undefined区别：
    - undefined 表示没有赋值
    - null 表示赋值了，但是内容为空
引用数据类型
- object对象

检测数据类型

typeof 运算符可以返回被检测的数据类型。
两种语法形式：
- 作为运算符：typeof x
- 函数形式：typeof(x)

类型转换

隐式转换
- +号两边只要有一个是字符串，都会把另外一个转成字符串
- 除了+以外的算术运算符比如·*/等都会把数据转成数字类型
显示转换
- 转换为数字型
  - Number（数据） 转成数字类型
    - 如果字符串内容里有非数字，转换失败时结果为NaN (Not a Number)
    - NaN也是number:类型的数据，代表非数字
  - parselnt（数据） 只保留整数
  - parseFloat（数据）可以保留小数
- 转为Boolean类型
  - ''、0、undefined、null、false、NaN转换为布尔值后都是false,其余则为true
  - 有字符串的加法 ""+1，结果是“1”
  - 减法（像大多数数学运算一样）只能用于数字，它会使空字符串""转换为0
  - null经过数字转换之后会变为0
  - undefined经过数字转换之后会变为NaN

运算符

赋值运算符
- 将等号右边的值赋予给左边。要求左边必须是一个容器
- = ， +=， -=， *=， /=， %=
自增/减运算符
- 自增：++ 让变量的值+1
- 自减：-- 让变量的值-1
- 经常用于计数来使用
比较运算符
- >：左边是否大于右边
- <：左边是否小于右边
- >=：左边是否大于或等于右边
- <=：左边是否小于或等于右边
- ==：左右两边值是否相等
- ===：左右两边是否类型和值都相等
- !==：左右两边是否不全等
逻辑运算符
- && 逻辑与（并且）
- || 逻辑或（或者）
- ！逻辑非（取反）

优先级

优先级	运算符	顺序
1	小括号	（）
2	一元运算符	++ -- ！
3	算数运算符	先 * / % 后 + -
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先 && 后 \|\|
7	赋值运算符	=
8	逗号	，

语句

分支结构

if 语句
- 小括号内的条件为true时，进入大括号里执行代码
- 小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型

if(条件){
    满足条件要执行的代码
}

if(条件){
    满足条件要执行的代码
}else{
    不满足条件要执行的代码
}

if(条件1){
    代码1
}else if(条件2){
    代码2
}else if(条件3)(
    代码3
else{
    代码n
}

三目运算符？：
- 一般用来取值

条件 ?  满足条件执行的代码 : 不满足条件执行的代码

switch 语句
- 找到跟小括号里数据全等的case值，并执行里面对应的代码
- 若没有全等===的，则执行default里的代码
- switch case语句一般用于等值判断，不适合于区间判断
- switch case一般需要配合break关键字使用没有break会造成case穿透

switch(数据){
    case 值1:
        代码1
        break
    case 值2:
        代码2
        break
    default:
        代码n
        break
}

循环结构

while 循环
- 小括号里的条件为true才会进入循环体执行代码
- 大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出

while(循环条件){
    要重复执行的代码（循环体）
}

for 循环

for(变量起始值; 终止条件; 变量变化量){
    //循环体
}

结束循环：
- break：退出循环
- continue：结束本次循环，继续下次循环

函数

函数是执行指定命令的代码块
声明： function 函数名() { 函数体 }
命名规范基本上和变量命名一致
调用：函数名()
传参： function 函数名(参数列表) { 函数体 }
- 形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）
- 实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）
- 形参可以理解为是在这个函数内声明的变量，实参可以理解为是给这个变量赋值
- 开发中尽量保持形参和实参个数一致
返回值： return 数据

匿名函数

没有名字的函数，无法直接使用 function() { 函数体 }
函数表达式：将匿名函数赋值给一个变量 let fn = function() { 函数体 }
立即执行函数：
- (function () { 函数体 })（）；
- (function () { 函数体 } （）)；

对象

对象是一种数据类型（引用数据类型），是 无序数据的集合
声明： let 对象名 = { }
组成：
- 属性：数据描述性的信息，属性包含属性名和属性值，多属性间用逗号隔开
- 方法：数据行为性的信息，方法由方法名和函数组成，多方法之间用逗号分隔

let 对象名 ={
    属性名: 属性值,
    方法名: 函数
}

对象的基本使用
- 查询属性：对象名.属性名或对象名["属性名"]
- 重新赋值：对象名.属性名 = 值
- 添加新属性：对象名.新属性名 = 值
- 删除属性：delete 对象名.属性名
- 方法的定义：方法名: 匿名函数
- 方法的调用：对象名.方法名()