Javascript基础（一）

⭐初识Javascript

JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script 是脚本的意思）
脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行

「Javascript的作用」

表单动态校验（密码强度检测）（ JS 产生最初的目的）
网页特效
服务端开发(Node.js)
桌面程序(Electron)

「Javascript书写位置」

JS有3种书写位置，分别为行内、内嵌和外部。

1. 行内式

<body>
   <!--行内式-->
   <input type="button" value="唐伯虎" onclick="alert('秋香')">
</body>

2. 内嵌

<script>
alert('Hello World~!');
</script>

3. 外部

<script src="my.js"></script>

「注释」

1. 单行注释

// 我是单行注释 (快捷键 ctrl + / )

2. 多行注释

/*
 获取用户年龄和姓名
 并通过提示框显示出来
 点击vscode左下角管理-键盘快捷方式-切换块注释
 (默认快捷键 alt + shift + a)
*/

⭐变量

是程序在内存中申请的一块用于存放数据的空间。变量是用于存放数据的容器，可以通过变量名获取数据，甚至修改数据。

「变量的使用」

1. 声明

     var age;  //声明一个名为age的变量

2. 赋值

     age = 10;  //为age变量赋值为10

3. 变量的初始化

   var  age = 10;  //声明age变量并赋值为10

「变量的语法扩展」

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

「变量的命名规范」

由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
严格区分大小写。var app; 和 var App; 是两个变量
不能以数字开头。 18age 是错误的
不能是关键字、保留字。例如：var、for、while
变量名必须有意义。 MMD BBD nl → age
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName
推荐翻译网站：有道爱词霸

⭐数据类型

js的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的。js是动态语言，变量的数据类型是可以变化的。

数据类型分为: 简单数据类型和复杂数据类型

「简单数据类型 ( 基本数据类型 ) 」

在这里插入图片描述

数字型Number

1. 数字型进制

// 1.八进制数字序列范围：0~7
var num1 = 07; // 对应十进制的7
var num2 = 019; // 对应十进制的19
var num3 = 08; // 对应十进制的8
// 2.十六进制数字序列范围：0~9以及A~F
var num = 0xA;

在JS中八进制前面加0，十六进制前面加 0x

2. 数字型的范围

JavaScript中数值的最大和最小值

最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
最小值：Number.MIN_VALUE，这个值为：5e-32

3. 数字型的三个特殊值

Infinity ，代表无穷大，大于任何数值
-Infinity ，代表无穷小，小于任何数值
NaN ，Not a number，代表一个非数值

4. isNaN()

用来判断一个变量是否为非数字的类型，返回 true 或者 false.
在这里插入图片描述

字符串型String

字符串型可以是引号中的任意文本，其语法为双引号 "" 和单引号''

var strMsg = "我爱北京天安门~"; // 使用双引号表示字符串
var strMsg2 = '我爱吃猪蹄~'; // 使用单引号表示字符串
// 常见错误
var strMsg3 = 我爱大肘子; // 报错，没使用引号，会被认为是js代码，但js没有这些语法

推荐使用单引号

1. 字符串引号嵌套
JS 可以用单引号嵌套双引号，或者用双引号嵌套单引号 (外双内单，外单内双)

var strMsg = '我是"高帅富"程序猿'; // 可以用''包含""
var strMsg2 = "我是'高帅富'程序猿"; // 也可以用"" 包含''
// 常见错误
var badQuotes = 'What on earth?"; // 报错，不能 单双引号搭配

2. 字符串转义符
在这里插入图片描述

3. 字符串长度

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符
串的长度。

var strMsg = "我是帅气多金的程序猿！";
alert(strMsg.length); // 显示 11

4. 字符串的拼接

多个字符串之间可以使用 + 进行拼接，其拼接方式为字符串 + 任何类型 = 拼接之后的新字符串
拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 数值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 数值字符串 + 数值
alert('11' + 12); // 1112

+ 号总结口诀：数值相加，字符相连

布尔型Boolean

布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。
布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

console.log(true + 1); // 2
console.log(false + 1); // 1

undefined和null

一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）

var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN

一个声明变量给 null 值，里面存的值为空.

var vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11
console.log(true + vari); // 1

「获取变量数据类型」

获取检测变量的数据类型

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

var num = 18;
console.log(typeof num) // 结果 number

在这里插入图片描述

字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

「数据类型转换」

转换为字符型

在这里插入图片描述

转换为数字型🔥

在这里插入图片描述

注意 parseInt 和 parseFloat 单词的大小写，这2个是重点
隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型

转换为布尔型

在这里插入图片描述

代表空、否定的值会被转换为 false ，如 ''、0、NaN、null、undefined
其余值都会被转换为 true

「关键字和保留字」

标识符

指开发人员为变量、属性、函数、参数取得名字。标识符不能是关键字或保留字。

关键字

指 JS本身已经使用了的字，不能再用它们充当变量名、方法名.

包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等。

保留字

实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。

boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等。

注意：如果将保留字用作变量名或函数名，那么除非将来的浏览器实现了该保留字，否则很可能收不到任何错误消息。当浏览器将其实现后，该单词将被看做关键字，如此将出现关键字错误。

⭐运算符

「运算符 (操作符) 」

运算符的分类

是用于实现赋值、比较和执行算数运算等功能的符号。

JavaScript中常用的运算符有：

算数运算符
递增和递减运算符
比较运算符
逻辑运算符
赋值运算符

算数运算符

在这里插入图片描述

浮点数的精度问题
浮点数值的最高精度是 17 位小数,，但在进行算术计算时其精确度远远不如整数。

var result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004
console.log(0.07 * 100); // 结果不是 7， 而是：7.000000000000001

表达式和返回值
表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合
简单理解：是由数字、运算符、变量等组成的式子
表达式最终都会有一个结果，返回给开发者，称为返回值

递增和递减运算符

1. 递增运算符

前置递增运算符
++num 前置递增，就是自加1，类似于 num = num + 1，但是 ++num 写起来更简单。
使用口诀：先自加，后返回值

var num = 10;
alert(++num + 10); // 21

后置递增运算符
num++ 后置递增，就是自加1，类似于 num = num + 1 ，但是 num++ 写起来更简单。
使用口诀：先返回原值，后自加

var num = 10;
alert(10 + num++); // 20

比较运算符

在这里插入图片描述

等号比较
在这里插入图片描述

逻辑运算符

逻辑运算符是用来进行布尔值运算的运算符

在这里插入图片描述

短路运算:当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值.

逻辑与
语法：表达式1 && 表达式2

如果第一个表达式的值为真，则返回表达式2
如果第一个表达式的值为假，则返回表达式1

逻辑或
语法：表达式1 || 表达式2

如果第一个表达式的值为真，则返回表达式1
如果第一个表达式的值为假，则返回表达式2

赋值运算符

在这里插入图片描述

运算符优先级

在这里插入图片描述

⭐流程控制

「顺序结构」

程序会按照代码的先后顺序，依次执行

「分支结构」

由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果.

if语句

// 条件成立执行代码，否则什么也不做
if (条件表达式) {
// 条件成立执行的代码语句
}

if else语句(双分支语句)

// 条件成立 执行 if 里面代码，否则执行else 里面的代码
if (条件表达式) {
// [如果] 条件成立执行的代码
} else {
// [否则] 执行的代码
}

if else if语句(多分支语句)

// 适合于检查多重条件。
if (条件表达式1) {
语句1；
} else if (条件表达式2) {
语句2；
} else if (条件表达式3) {
语句3；
....
} else {
// 上述条件都不成立执行此处代码
}

三元表达式

语法结构

表达式1 ? 表达式2 : 表达式3;

执行思路
如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值
简单理解：就类似于 if else （双分支）的简写

switch分支流程控制

语法结构
switch 语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值
的选项时，就可以使用 switch。

switch( 表达式 ){
case value1:
	// 表达式 等于 value1 时要执行的代码
	break;
case value2:
	// 表达式 等于 value2 时要执行的代码
	break;
default:
	// 表达式 不等于任何一个 value 时要执行的代码
}

关键字 switch 后面括号内可以是表达式或值， 通常是一个变量
switch 表达式的值会与结构中的 case 的值做比较
如果存在匹配全等(===) ，则与该 case 关联的代码块会被执行，并在遇到 break 时停止，整个 switch 语句代
码执行结
如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码
❗注意：执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。

「循环结构」

for循环

1. 语法结构

  for(初始化变量; 条件表达式; 操作表达式 ){
    //循环体
}

在这里插入图片描述

2. 执行流程

初始化变量，初始化操作在整个 for 循环只会执行一次。
执行条件表达式，如果为true，则执行循环体语句，否则退出循环，循环结束。
执行操作表达式,此时第一轮结束。
第二轮开始，直接去执行条件表达式（不再初始化变量），如果为 true ，则去执行循环体语句，否则退出循环。
继续执行操作表达式，第二轮结束。...

双重for循环

循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for 循环，这样的 for 循环语句我们称之为双重for循环。

语法结构

 for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
  for (内循环的初始; 内循环的条件; 内循环的操作表达式) {  
       需执行的代码;
   }
}

while循环

1. 语法结构

while (条件表达式) {
      // 循环体代码 
  }
}

2. 执行流程

先执行条件表达式，如果结果为 true，则执行循环体代码；
如果为 false，则退出循环，执行后面代码;
执行循环体代码;
循环体代码执行完毕后，程序会继续判断执行条件表达式.

do while循环

do {
    // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

先执行一次循环体，再判断条件，如果条件表达式结果为真，则继续执行循环体，否则退出循环。

🔥continue、break

关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）
关键字用于立即跳出整个循环（循环结束）

上一篇JavaScript基础（四）

下一篇Javascript基础（二）

本文作者：小白-XXX

本文链接：https://www.cnblogs.com/whitni/p/17392914.html

posted @ 2023-05-12 09:49 小白-XXX 阅读(16) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

whitni

Javascript基础（一）

⭐初识Javascript

「Javascript的作用」

「Javascript书写位置」

「注释」

⭐变量

「变量的使用」

「变量的语法扩展」

「变量的命名规范」

⭐数据类型

「简单数据类型 ( 基本数据类型 ) 」

数字型Number

字符串型String

布尔型Boolean

undefined和null

「获取变量数据类型」

获取检测变量的数据类型

字面量

「数据类型转换」

转换为字符型

转换为数字型🔥

转换为布尔型

「关键字和保留字」

标识符

关键字

保留字

⭐运算符

「运算符 (操作符) 」

运算符的分类

算数运算符

递增和递减运算符

比较运算符

逻辑运算符

赋值运算符

运算符优先级

⭐流程控制

「顺序结构」

「分支结构」

三元表达式

switch分支流程控制

「循环结构」

for循环

双重for循环

while循环

do while循环

🔥continue、break

公告

搜索

常用链接

随笔档案

阅读排行榜