JavaScript基础（一）

最新推荐文章于 2024-07-15 14:11:16 发布

梦不过就一次放纵

最新推荐文章于 2024-07-15 14:11:16 发布

阅读量153

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/gf0729111/article/details/108690759

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. JavaScript的书写位置

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

行内式写法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript的书写位置</title>
</head>
<body>
    <!-- 行内式 -->
    <input type="button" value="点我试试" onclick="alert('Hello World')">
</body>
</html>

可以将单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性），如：onclick
注意单双引号的使用：在HTML中我们推荐使用双引号，JS中我们推荐使用单引号
可读性差，在HTML中编写JS大量代码时，不方便阅读
引号易错，引号多层嵌套匹配时，非常容易弄混
特殊情况下使用

内嵌式写法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript的书写位置</title>
</head>
<script>
    // 内嵌式
    alert('Hello World');
</script>
<body>
</body>
</html>

可以将多行JS代码写到<script>标签中
内嵌JS是学习时常用的方式

外部JS文件写法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript的书写位置</title>
</head>
<body>
</body>
</html>
<!-- 外部JS文件 -->
<script src="my.js"></script>

利用HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用
引用外部JS文件的script标签中间不可以写代码
适合于JS代码量比较大的情况

2. JavaScript注释

为了提高代码的可读性，JS与CSS一样，也提供了注释功能。JS中的注释主要有两种，分别是单行注释和多行注释。

注释方式如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>
<script>
    // 单行注释的注释方法如下：
    // 我是一行文字，不想被JS引擎执行，所以注释起来
    // 用来注释单行文字（快捷键 ctrl + /）
    // 多行注释的注释方式如下：
    /*
    我是一行文字，不想被JS引擎执行，
    所以注释起来
    */
    // 快捷键为 ctrl + shift + /   不同的编辑器快捷键不同
</script>

3. JavaScript输入输出语句

为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下：

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

**注意：**alert()主要用来显示消息给用户，console.log()用来给程序员自己看运行时的消息。

4. 变量

变量就是一个装东西的盒子。变量是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改。

本质：变量是程序在内存中申请的一块用来存放数据的空间。类似我们酒店的房间，一个房间就可以看做是一个变量。

变量在使用时分为两种：1.声明变量 2.赋值

1. 声明变量

var age; // 声明一个名称为age的变量
// var是一个JS关键字，用来声明变量（variable变量的意思）。使用该关键字声明变量后，计算机会自动为变量分配

2. 赋值

age = 10; //给age这个变量赋值为10
// =用来把右边的值赋给左边的变量空间中

3. 变量的初始化

var age = 18; // 声明变量同时赋值为18
// 声明一个变量并赋值，我们称之为变量的初始化。

4. 同时声明多个变量

// 同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开。
var age = 10, name = 'zs', sex = 2;

5. 变量命名规范

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

5. 数据类型

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。简单来说，数据类型就是数据的类别型号。比如姓名“张三”，年龄18，这些数据的类型是不一样的。

5.1 简单数据类型（基本数据类型）

简单数据类型	说明	默认值
Number	数字型，包含整型值和浮点型值，如21、0.21	0
Boolean	布尔值类型，如true、false，等价于1和0	false
String	字符串类型，如“张三”，字符串都带引号	“”
Undefined	var a; 声明了变量a但是没有给值，此时a=undefined	undefined
Null	var a = null; 声明了变量a 为空值	null

示例代码如下：

<script>
    var age = 18; // 整型
    var height = 1.70 // 浮点型
    console.log(Number.MAX_VALUE); // JS中数值的最大值
    console.log(Number.MIN_VALUE); // JS中数值的最小值
    // 数字型的三个特殊值
    console.log(1 / 0); // Infinity 代表无穷大，大于任何数值
    console.log(-1 / 0); // -Infinity 代表无穷小，小于任何数值
    console.log(NaN); // NaN 代表一个非数值
    // isNaN() 用来判断一个变量是否为非数字的类型，非数字返回true，数字返回false
    console.log(isNaN(age)); // false
    // 字符串 用单引号或双引号即可
    var js = 'JavaScript'; // JavaScript
    console.log(js.length); // 输出字符串长度
    var address = '江西省"赣州市"'; // 注意：JS中外双内单，外单内双，否则会报错
    var sex = "我是'男'的";

    // 字符串“相加”
    console.log('hello' + 'world'); // helloworld
    // 数值字符串“相加”
    console.log('100' + '100'); // 100100
    // 数值字符串 + 数值
    console.log('11' + 12); // 1112

    // 布尔类型有两个值： true和false， true的值为1，false的值为0。
    console.log(true + 1); // 2
    console.log(false + 1); // 1

    // 一个声明后没有被赋值的变量会有一个默认值undefined
    var variable;
    console.log(variable); // undefined
</script>

5.2 获取检测变量的数据类型

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

<script>
    var age = 18;
    console.log(typeof age); //number
</script>

不同类型的返回值

类型	例	结果
String	typeof “小白”	“string”
Number	typeof 18	“number”
Boolean	typeof true	“boolean”
Undefined	type undefined	“undefined”
Null	typeof null	“object”

5.3 数据类型转换

使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另一种数据类型。我们通常会实现3中方式的转换：

转换为字符串类型
转换为数字型
转换为布尔型

方式	说明	案例
toString()	转成字符串	var num = 1; alert(num.toString());
String() 强制转换	转成字符串	var num = 1; alert(String(num));
加号拼接字符串	和字符串拼接的结果都是字符串	var num = 1; alert(num + ‘我是字符串’)

toString() 和 String() 使用方式不一样。
三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一种方式也称为隐式转换。

隐式转换是我们在进行算数运算的时候，JS自动转换了数据类型

方式	说明	案例
parseInt(string) 函数	将string类型转成整数数值型	parseInt(‘78’)
parseFloat(string) 函数	将string类型转成浮点数数值型	parseFloat(‘78.21’)
Number() 强制转换函数	将string类型转换为数值型	Number(‘12’)
js 隐式转换(- * /)	利用算术运算隐式转换为数值型	‘12’ - 0

转换为布尔型

方式	说明	案例
Boolean() 函数	其他类型转成布尔值	Boolean(‘true’)

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

6. 运算符

运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算术运算等功能的符号。

JavaScript中的常用运算符有：

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

6.1 算术运算符

算术运算使用的符号，用于执行两个变量或值的算术运算。

运算符	描述	实例
+	加	10 + 20 = 30
-	减	10 - 20 = -10
*	乘	10 * 20 = 200
/	除	10 / 20 = 0.5
%	取余数（取模）	返回除法的余数 9 % 2 = 1

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

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

所以：不要直接判断两个浮点数是否相等！

6.2 递增和递减运算符

如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（--）运算符来完成。

在JavaScript中，递增（++）和递减（–）既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以成为前置递增（递减）运算符，放在变量后面时，我们可以成为后置递增（递减）运算符。

注意：递增和递减运算符必须和变量配合使用。

// 1.前置递增运算符
// ++num 前置递增，就是自加1，类似于 num = num + 1，但是 ++num 写起来更简单。
// 使用口诀：先自加，后返回值
var num1 = 10;
alert(++num1 + 10); // 21

// 2.后置递增运算符
// 使用口诀：先返回原值，后自加
var num2 = 10;
alear(10 + num++); // 20

6.3 比较运算符

比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。

运算符名称	说明	案例	结果
<	小于号	1 < 2	true
>	大于号	1 > 2	false
>=	大于等于号（大于或者等于）	2 >=2	true
<=	小于等于号（小于或者等于）	3 <= 2	false
==	判等号（会转型）	37 == 37	true
!=	不等号	37 != 37	false
=== !==	全等要求值和数据类型都一致	37 === ‘37’	false

符号	作用	用法
=	赋值	把右边给左边
==	判断	判断两边值是否相等（注意此时有隐式转换）
===	全等	判断两边的值和数据类型是否完全相同

console.log(18 == '18'); // true
console.log(18 === '18'); // false

6.4 逻辑运算符

逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断。

逻辑运算符	说明	案例
&&	“逻辑与”，简称“与” and	true && false
\|\|	“逻辑或”，简称“或” or	true \|\| false
!	“逻辑非”，简称“非“ not	!true

逻辑与&& 两边都是true才返回true，否则返回false

逻辑或|| 两边都是false才返回false，否则都为true

逻辑非! 也叫做取反符，用来取一个布尔值相反的值，如true的相反值是false

var isOK = !true;
console.log(isOK); // false

短路运算的原理：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值。

// 1.逻辑与
// 表达式1 && 表达式2
// 如果第一个表达式的值为真，则返回表达式2，否则返回表达式1
console.log( 123 && 456); // 456
console.log( 0 && 456); // 0
console.log( 123 && 456 && 789); // 789

// 2.逻辑或
// 表达式1 || 表达式2
// 如果第一个表达式的值为真，则返回表达式1，否则返回表达式2
console.log( 123 || 456); // 123
console.log( 0 || 456); // 456
console.log( 123 || 456 || 789); // 123

6.5 赋值运算符

用来把数据赋值给变量的运算符。

赋值运算符	说明	案例
=	直接赋值	var usrName = ‘我是值’;
+=、-=	加、减一个数后再赋值	var age =10; age += 5; // 15
*=、/=、%=	乘、除、取模后再赋值	var age = 2; age *= 5; // 10

6.6 运算符的优先级

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

一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高

7. 流程控制

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。

简单理解：流程控制就是来控制我们的代码按照什么结果顺序来执行。

流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。

7.1 顺序流程控制

顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构、程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。

7.2 分支流程控制

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

JS语言提供了两种分支结构语句：if语句、switch语句。

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( 表达式 ){ 
    case value1:
        // 表达式 等于 value1 时要执行的代码
        break;
    case value2:
        // 表达式 等于 value2 时要执行的代码
        break;
    default:
        // 表达式 不等于任何一个 value 时要执行的代码
}

8. 循环

8.1 for循环

for循环主要用于把某些代码循环若干次，通常跟计数有关系。其语法结构如下：

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

初始化变量：通常被用于初始化一个计数器，该表达式可以使用var关键字声明新的变量，这个变量帮我们来记录次数。
条件表达式：用于确定每一次循环是否能被执行。如果结构是true 就继续循环，否则退出循环。
操作表达式：每次循环的最后都要执行的表达式。通常被用于更新或者递增计数器变量。当然，递减变量也是可以的。

执行过程如下：

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

例如，

用for循环输出一个人1到100岁：

//  基本写法
for (var i = 1; i <= 100; i++) {
      console.log('这个人今年' + i + '岁了');
}

求1-100之间所有整数的累加和：

var sum = 0;
for(var i = 1;i <= 100; i++){
        sumNum += i;
}
console.log('1-100之间整数的和 = ' + sum);

8.2 循环嵌套

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

语法结构如下：

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

内层循环可以看做外层循环的语句
内层循环执行的顺序也要遵循for循环的执行顺序
外层循环执行一次，内层循环要执行全部次数

案例，打印九九乘法表：

var str = ''
for (var i = 1; i <= 9; i++) { //  外层for控制 行数  9行
    for (var j = 1; j <= i; j++) { // j 控制列数    列数和行数是一样的  j <= i  
        str += j + " × " + i + " = " + i * j + '\t';
    }
    str += '\n';
}
console.log(str);

8.3 while循环

while循环可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。

while语句的语法结构如下：

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

执行思路：

先执行条件表达式，如果结构为true，则执行循环体代码；如果为false，则退出循环，执行后面代码
执行循环体代码
循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环体条件为false时，整个循环过程才会结束

8.4 do while循环

do while语句其实是while语句的一个变体。该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环。

do while语句的语法结构如下：

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

先执行一次循环体代码
再执行条件表达式，如果结构为true，则继续执行循环体代码，如果为false，则退出循环，继续执行后面的代码

注意：先执行循环体，再判断，我们会发现do while循环语句至少会执行一次循环体代码

8.5 continue和break关键字

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

例如，吃5个包子，第3个有虫子，就扔掉第3个，继续吃第4个第5个包子，其代码实现如下：

for (var i = 1; i <= 5; i++) {
     if (i == 3) {
         console.log('这个包子有虫子，扔掉');
         continue; // 跳出本次循环，跳出的是第3次循环 
      }
      console.log('我正在吃第' + i + '个包子呢');
 }

break关键字用于立即跳出整个循环（循环结束）。

例如，吃5个包子，吃到第3个发现里面有半个虫子，其余的不吃了，其代码实现如下：

for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 直接退出整个for 循环，跳到整个for下面的语句
   }
   console.log('我正在吃第' + i + '个包子呢');
 }

9. 数组

数组是指一组数据的集合，其中的每个数据被称为元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。

// 普通变量一次只能存储一个值
var num = 10;
// 数组一次可以存储多个值
var arr = [1, 2, 3, 4, 5];

9.1 数组的创建方式

JS中创建数组有两种方式：

利用new创建数组
利用数组字面量创建数组

var 数组名 = new Array();
var arr = new Array(); // 创建一个新的空数组

//1. 使用数组字面量方式创建空的数组
var  数组名 = []；
//2. 使用数组字面量方式创建带初始值的数组
var  数组名 = ['小白','小黑','大黄','瑞奇'];

数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。

var arrStus = ['小白',12,true,28.9];

9.2 获取数组元素

索引（下标）：用来访问数组元素的序号（数组下标从0开始）。

数组可以通过索引来访问、设置、修改对应的数组元素，我们可以通过“数组名[索引]”的形式来获取数组中的元素。

// 定义数组
var arrStus = [1,2,3];
// 获取数组中的第2个元素
alert(arrStus[1]);

9.3 遍历数组

我们可以通过for循环索引遍历数组中的每一项

var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
    console.log(arrStus[i]);
}

使用“数组名.length”可以访问数组元素的数量（数组长度）。

var arrStus = [1,2,3];
alert(arrStus.length);  // 3

注意：

此处数组的长度是数组元素的个数，不要和数组的索引号混淆。
当我们数组里面的元素个数发生了变化，这个length属性跟着一起变化。

9.4 数组新增元素

可以通过修改length长度来实现数组扩容的目的
length属性是可读写的

var arr = ['red', 'green', 'blue', 'pink'];
arr.length = 7;
console.log(arr);
console.log(arr[4]);
console.log(arr[5]);
console.log(arr[6]);

其中索引号是4，5，6的空间没有给值，就是声明变量未给值，默认值就是undefined。

可以通过修改数组索引的方式追加数组元素
不能直接给数组名赋值，否则会覆盖掉以前的数据

var arr = ['red', 'green', 'blue', 'pink'];
arr[4] = 'hotpink';
console.log(arr);

梦不过就一次放纵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础（一）

文章目录1. JavaScript的书写位置2. JavaScript注释3. JavaScript输入输出语句4. 变量5. 数据类型5.1 简单数据类型（基本数据类型）5.2 获取检测变量的数据类型5.3 数据类型转换6. 运算符6.1 算术运算符6.2 递增和递减运算符6.3 比较运算符6.4 逻辑运算符6.5 赋值运算符6.6 运算符的优先级7. 流程控制7.1 顺序流程控制7.2 分支流程控制8. 循环8.1 for循环8.2 循环嵌套8.3 while循环8.4 do while循环8.5 co
复制链接

扫一扫