JavaScript学习记录(一)

发表于 2022-09-17 更新于 2024-07-28 分类于编程语言学习阅读次数：本文字数： 4.2k 阅读时长 ≈ 4 分钟

javascript是运行在客户端的脚本语言（script是脚本的意思）
脚本语言：不需要编译，运行过程中由js解释器（就是引擎）逐行来进行解释并执行
javascript的作用：
- 表单动态校验（密码强度检测）
- 网页特效
- 服务端开发（Node.js）
- 桌面程序
- App
浏览器分成两部分：渲染引擎和JS引擎
- 渲染引擎：用来解析HTML和css，俗称内核；
- JS引擎：也称为JS解释器，用来读取网页中的javascript代码，对其处理后运行。
JS的组成
- ECMAScript（javascript语法）：规定了JS的编程语法和基础核心知识；
- DOM（页面文档对象模型）：W3C组织推荐的处理可扩展标记语言的标准编程基础；
- BOM（浏览器对象模型）：可以操作浏览器窗口。
JS三种书写位置
- 行内式
  - 在JS中建议使用单引号
- 内嵌式
  - 最常用的
- 外部式
  - 引用外部JS文件的script标签中间不可以写代码

（2）JavaScript注释

单行注释：//（ctrl+/）
多行注释：/**/（shift + alt + a）

（3）JavaScript输入输出语句

方法	说明	归属
alert(msg)	浏览器弹出警告框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

变量

（1）变量声明和赋值

// 声明变量
var age;
//声明一个名称为age的变量
age = 10; // 给age这个变量赋值为10
// 输出结果
console.log(age);
// 变量的初始化
var name = "小明";

（2）变量语法拓展

// 变量覆盖
var myname = "小明";
console.log(myname);
myname = "小红";
console,log(myname);
// 同时声明多个变量
var age = 18,address = "南昌";

情况	说明	结果
var age;console.log(age);	只声明，不赋值	undefined
console.log(age);	不声明不赋值直接使用	报错
age = 10;console.log(age);	不声明，直接使用	10

（3）变量的命名规范

由字母、数字、下划线、美元符组成
严格区分大小写
不能以数字开头
不能是关键字、保留字
变量名必须有意义
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。

数据类型

（1）数据类型的简介

javascript是一种弱类型语言或者说动态语言。不用提前声明变量的类型，类型会被自动确定。
javascript拥有动态类型，意味着相同的变量可用作不同的类型。

（2）数据类型的分类

简单数据类型：Number、String、Boolean、Undefined、Null
- 数字型Number
  - infinity：代表无穷大，大于任何值
  - -infinity：代表无穷小，小于任何值
  - NaN：Not a number，代表一个非数值
  - isNaN()：这个方法用于判断非数字，是数字则返回false，非数字返回true
- 字符串型String
  - 使用单引号或者双引号括起来的
  - 字符转义字符
    - \n：换行符
    - \t：tab缩进
    - \b：空格，b是blank的意思
    - '：单引号
  - 字符串的长度：通过length属性来获取字符串的长度
  - 字符串拼接：使用+进行拼接：数值相加，字符相连
- 布尔型Boolean
  - true参与加法运算当1来看，false当0看
- undefined和Null
  - 一个声明后的没有被赋值的变量会有一个默认值undefined
  - 一个声明变量给null，里面存的值为空

简单数据类型	说明	默认值
Number	数字型，包含整形值和浮点型值	0
Boolean	布尔值	false
String	字符串类型	“”
Undefined	var a;声明了变量a但是没有给值，此时a = undefined	undefined
Null	var a = null;声明了变量a为空值	null

复杂数据类型：object

（3）获取变量数据类型

typeof可以用来获取检测变量的数据类型

（4）数据类型的转换

转换为字符串类型
- toString()：变量.toString()
- String()强制转换：String(变量)
- 加号拼接字符串：和字符串拼接的结果都是字符串
转换为数字型
- parseInt(string)函数：将string类型转换为整数数值型
- parseFloat(string)函数：将string类型转换为浮点数数值型
- Number()强制转换函数：将string类型转换为数值型
- js隐式转换(- * /)：利用算术运算隐式转为数值型
转换为布尔型
- Boolean()函数：其他类型转成布尔型
- 代表空、否定的值会被转换为false，其他的值都会转换为true

运算符

（1）运算符

运算符也叫操作符，用于实现赋值、比较和执行算数运算等功能的符号
算数运算符
- +：加
- -：减
- *：乘
- /：除
- %：取余数（取模）
浮点数的精度问题：浮点数的最高精度是17位小数，但是进行算术计算时其精度远远不如整数
表达式：由数字、运算符、变量等组成的式子
返回值：表达式最终都会有一个结果返回给我们，这就是返回值
递增递减运算符
- 如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（–）运算符来完成
- 前置递增（递减）：先自加（自减），后返回值
- 后缀递增（递减）：先返回原值，后自加（自减）
比较运算符（关系运算符）：两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true/false）作为比较运算的结果。

运算符名称	说明
<	小于

| 大于
=| 大于等于
<=| 小于等于
==| 判等号
!=| 不等号
=== !===| 全等要求值和数据类型都一致

逻辑运算符：用来进行布尔运算的运算符，其返回值也是布尔值，后面开发中经常用于多个条件的判断
- &&：逻辑与，遇假就为假
- ||：逻辑或，遇真就为真
- !：逻辑非，取反
- 短路运算（逻辑中断）：当有多个表达式时，左边的表达式可以确定结果时，就不再继续运算右边的表达式的值。
赋值运算符：用来把数据赋值给变量的运算符
- =：直接赋值
- +=、-=：加、减一个数后再赋值
- *=、/=、%=：乘、除、取模后再赋值
运算符优先级
- 一元运算符里面的逻辑非优先级很高
- 逻辑与比逻辑或优先级高

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

流程控制&分支结构

（1）流程控制

流程控制就是来控制我们的代码按照什么结构顺序来执行
分类：
- 顺序结构：程序按照代码的先后顺序，依次执行
- 分支结构：由上往下执行代码的过程中，根据不同的条件，执行不同的路径代码，从而得到不同的结果
  - if语句
    - 语法结构（双分支）
      if(条件表达式) { // 条件成立执行的代码语句 }else{ // 条件不成立执行的代码语句 }
    - 语法结构（多分支）
      if(条件表达式1) {
      // 条件1成立时执行
      }else if(条件表达式2){
      // 条件1不成立条件2成立的时候执行
      }else{
      //条件1和条件2都不成立的时候执行
      }
    - 三元表达式：条件表达式 ? 表达式1 : 条件表达式2，如果条件表达式的结果为真则返回表达式1的值，如果条件表达式的结果为假，则返回表达式2的值，有返回值
  - switch语句
    - 语法结构
      switch(表达式) { case value1: 执行语句1; break; case value2: 执行语句2; break default: 执行最后的语句; }
  - if和switch区别：
    - switch……case语句通常处理case为比较确定值的情况下，而if……else……语句更加的灵活，常用于范围判断（大于、等于某个范围）
    - switch语句进行条件判断后直接执行到程序的条件语句，效率更高。而if……else语句有几种条件，效率更低
    - 当分支比较少时，if……else语句的执行效率比switch语句高
    - 当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。
for循环
- for循环：在程序中，一组被重复执行的语句被称为循环体，能否继续重复执行，取决于循环的终止条件。由循环题及循环的终止条件组成的语句，被称之为循环语句。
- 语法结构：
  for(初始化变量;条件表达式;操作表达式) { // 循环体 }
- 语法结构（双重for循环）
  for(初始化变量1;条件表达式1;操作表达式1) {
  for(初始化变量2;条件表达式2;操作表达式2) { // 循环体 }``
  }
- 九九乘法表案例

image-105-1024x402

while循环
- 语法结构：
  while(条件表达式) { // 循环体
  num++; }
do……while循环
- 语法结构：
  do{ // 循环体 }while(条件表达式);
- 至少被执行一次
循环小结
- JS中循环有for、while、do while
- 三个循环很多情况下都可以相互替代使用
- 如果是用来计次数，跟数字有关的，三者使用基本相同，但是一般使用for
- while和do……while可以做更复杂的判断条件，比for循环灵活一些
- while和do……while先执行一次，再判断执行
- while和do……while执行次数不一样，do……while至少会执行一次循环体，而while可能一次都不执行
continue和break
- continue：立即跳出本次循环，继续下一次循环
- break：立即跳出整个循环

JavaScript学习记录(一)

目录

初始JavaScript

变量

数据类型

运算符

流程控制&分支结构