当前位置:实例文章 » HTML/CSS实例» [文章]js基础-练习三

js基础-练习三

发布人:shili8 发布时间:2025-03-01 02:22 阅读次数:0

**JS 基础 - 练习三**

### 一、变量和数据类型####1. 变量的定义和赋值在 JavaScript 中,变量是用来存储数据的容器。我们可以使用 `let` 或 `var` 关键字来定义一个变量。

javascript// 使用 let 定义变量let name = '张三';

// 使用 var 定义变量var age =25;


####2. 数据类型JavaScript 支持多种数据类型,包括:

* **数字**:整数和小数。
* **字符串**:一串字符,使用单引号或双引号括起来。
* **布尔值**:true 或 false。
* **null**:表示空值。
* **undefined**:表示未定义的变量。

javascript// 数字类型let num =10;

// 字符串类型let str = 'Hello, World!';

// 布尔值类型let flag = true;

// null 类型let obj = null;

// undefined 类型let var1;


####3. 数据类型转换JavaScript 支持自动数据类型转换。

javascript// 将数字转换为字符串let numStr = String(10); // '10'

// 将布尔值转换为数字let boolNum = Number(true); //1// 将数字转换为布尔值let numBool = Boolean(0); // false


### 二、运算符####1. 算术运算符JavaScript 支持基本的算术运算符。

javascript// 加法运算符let sum =10 +20; //30// 减法运算符let diff =10 -5; //5// 乘法运算符let product =10 *2; //20//除法运算符let quotient =10 /2; //5// 取余数运算符let remainder =10 %3; //1


####2. 关系运算符JavaScript 支持关系运算符。

javascript// 等于运算符let isEqual =10 ==10; // true// 不等于运算符let isNotEqual =10 !=20; // true// 大于运算符let isGreater =10 >5; // true// 小于运算符let isLess =10 < 20; // true// 大于或等于运算符let isGreaterOrEqual =10 >=10; // true// 小于或等于运算符let isLessOrEqual =10 <=20; // true


####3. 逻辑运算符JavaScript 支持逻辑运算符。

javascript// 与运算符let andResult = true && false; // false// 或运算符let orResult = true || false; // true// 非运算符let notResult = !true; // false


### 三、控制结构####1. if语句JavaScript 支持 if语句。

javascript// 单分支if语句if (10 >5) {
 console.log('10大于5');
}

// 双分支if语句if (10 >5) {
 console.log('10大于5');
} else {
 console.log('10小于或等于5');
}


####2. switch语句JavaScript 支持 switch语句。

javascript// 单分支switch语句let num =10;
switch (num) {
 case10:
 console.log('数字是10');
 break;
}

// 多分支switch语句let num =20;
switch (num) {
 case10:
 console.log('数字是10');
 break;
 case20:
 console.log('数字是20');
 break;
}


####3. for 循环JavaScript 支持 for 循环。

javascript// 基本for循环for (let i =0; i < 5; i++) {
 console.log(i);
}

// 带有初始值的for循环for (let i =10; i <=20; i++) {
 console.log(i);
}


####4. while 循环JavaScript 支持 while 循环。

javascript// 基本while循环let i =0;
while (i < 5) {
 console.log(i);
 i++;
}

// 带有初始值的while循环let i =10;
while (i <=20) {
 console.log(i);
 i++;
}


####5. do-while 循环JavaScript 支持 do-while 循环。

javascript// 基本do-while循环let i =0;
do {
 console.log(i);
 i++;
} while (i < 5);

// 带有初始值的do-while循环let i =10;
do {
 console.log(i);
 i++;
} while (i <=20);


### 四、函数####1. 函数定义JavaScript 支持函数定义。

javascript// 基本函数定义function add(a, b) {
 return a + b;
}

// 带有返回值的函数定义function getSum(a, b) {
 return a + b;
}


####2. 函数调用JavaScript 支持函数调用。

javascript// 基本函数调用let result = add(10,20); //30// 带有参数的函数调用let sum = getSum(10,20); //30


####3. 匿名函数JavaScript 支持匿名函数。

javascript// 基本匿名函数定义let addFunc = function (a, b) {
 return a + b;
};

// 基本匿名函数调用let result = addFunc(10,20); //30


####4. 递归函数JavaScript 支持递归函数。

javascript// 基本递归函数定义function factorial(n) {
 if (n ===0) {
 return1;
 } else {
 return n * factorial(n -1);
 }
}

// 基本递归函数调用let result = factorial(5); //120


### 五、数组####1. 数组定义JavaScript 支持数组定义。

javascript// 基本数组定义let arr = [10,20,30];

// 带有初始值的数组定义let arr2 = new Array(5);
for (let i =0; i < 5; i++) {
 arr2[i] = i *10;
}


####2. 数组元素访问JavaScript 支持数组元素访问。

javascript// 基本数组元素访问console.log(arr[0]); //10// 带有索引的数组元素访问console.log(arr2[3]); //30


####3. 数组长度JavaScript 支持数组长度。

javascript// 基本数组长度let arrLength = arr.length; //3// 带有初始值的数组长度let arr2Length = arr2.length; //5


####4. 数组元素修改JavaScript 支持数组元素修改。

javascript// 基本数组元素修改arr[0] =20;
console.log(arr); // [20,20,30]

// 带有索引的数组元素修改arr2[3] =40;
console.log(arr2); // [0,10,20,40,50]


####5. 数组合并JavaScript 支持数组合并。

javascript// 基本数组合并let arr1 = [10,20];
let arr2 = [30,40];
let mergedArr = arr1.concat(arr2);
console.log(mergedArr); // [10,20,30,40]

// 带有初始值的数组合并let arr3 = new Array(5);
for (let i =0; i < 5; i++) {
 arr3[i] = i *10;
}
let mergedArr2 = arr1.concat(arr3);
console.log(mergedArr2); // [10,20,30,40,50,60]


### 六、对象####1. 对象定义JavaScript 支持对象定义。

javascript// 基本对象定义let obj = {
 name: '张三',
 age:25,
};

// 带有初始值的对象定义let obj2 = new Object();
obj2.name = '李四';

其他信息

其他资源

Top