nolebase
Search K

Appearance

14 JavaScript 基础实战 ​

笔试题 ​

  1. 声明 age 变量并赋值为 18

    js
    let age = 18;

  2. 声明 uname, age, gender 多个变量

    js
    let uname, age, gender;

  3. 定义数组，保存 小黑、小红、小花 三个人的名字

    js
    let nameArr = ["小黑", "小红", "小花"];

  4. 写出 for 循环遍历数组的基本语法

    js
    for (let i = 0; i < nameArr.length; i++) {
  console.log(nameArr[i]);
}

  5. 写出数字自增的做法有哪些

    • 使用自增运算符 ++

      js
      let num = 0;
num++; // num 等于 1
++num; // num 等于 2

    • 使用赋值运算符 +=

      js
      let num = 0;
num += 1; // num 等于 1

    • 使用位运算符

      js
      let num = 0;
num = num ^ 1; // num 等于 1

  6. 写出 if 单分支、双分支、多分支语句

    js
    // 单分支语句
if (condition) {
  // do something
}

// 双分支语句
if (condition) {
  // do something
} else {
  // do something else
}

// 多分支语句
if (condition1) {
  // do something
} else if (condition2) {
  // do something else
} else {
  // do something else again
}

  7. 请写出三元运算符的语法

    js
    condition ? expression1 : expression2;

// condition 为一个条件表达式，如果该条件为 true，则执行 expression1，否则执行 expression2。

var age = 18;
var status = age >= 18 ? "成年人" : "未成年人";
console.log(status); // 输出：成年人

var num = 5;
var result = num % 2 == 0 ? "偶数" : "奇数";
console.log(result); // 输出：奇数

  8. 请写出 for 循环的语法

    js
    for (初始化表达式; 条件表达式; 更新表达式) {
  // 循环体语句
}

// 示例：从 0 循环到 9
for (let i = 0; i < 10; i++) {
  console.log(i);
}

  9. 写出出数组的常用方法和对应的作用

    • push()：将一个或多个元素添加到数组的末尾并返回新的数组长度。
    • pop()：删除数组的最后一个元素并返回该元素。
    • shift()：删除数组的第一个元素并返回该元素，同时将数组中的所有元素向前移动一个位置。
    • unshift()：将一个或多个元素添加到数组的开头并返回新的数组长度，同时将数组中的所有元素向后移动一个位置。
    • slice()：从数组中选择一部分元素并返回一个新的数组，该新数组包含从开始位置到结束位置之间的元素。
    • splice()：在数组中添加或删除元素，可以从任意位置添加或删除元素，并返回被删除的元素。
    • concat()：将两个或多个数组合并为一个新数组。
    • indexOf()：返回指定元素在数组中第一次出现的位置，如果没有找到，则返回 -1。
    • lastIndexOf()：返回指定元素在数组中最后一次出现的位置，如果没有找到，则返回 -1。
    • join()：将数组中的所有元素连接成一个字符串，并返回该字符串。

  10. 写出函数的语法 (带有形参和返回值)

    js
    function functionName(parameter1, parameter2) {
  // function body
  return result;
}

// 示例
function addNumbers(num1, num2) {
  let sum = num1 + num2;
  return sum;
}
// 调用
let result = addNumbers(5, 10);
console.log(result); // 输出 15

  11. 写出作用域有哪些

    • 全局作用域：全局作用域是指在整个 JavaScript 文件中都可以访问的变量和函数。在浏览器中，全局作用域是 window 对象。
    • 函数作用域：函数作用域是指在函数内部定义的变量和函数只能在该函数内部访问，外部无法访问。这种作用域可以避免变量名冲突和全局变量污染。

  12. 写出对象语法

    js
    // 创建 person 的对象
let person = {
  // 定义属性
  name: "John",
  age: 30,
  occupation: "Developer",
  // 定义方法
  greet: function () {
    console.log("Hello, my name is " + this.name + " and I am a " + this.occupation);
  },
};

// 访问对象属性
console.log(person.name); // 输出 "John"

// 调用对象方法
person.greet(); // 输出 "Hello, my name is John and I am a Developer"

  13. 写出遍历对象的语法

    js
    for (let key in object) {
  if (object.hasOwnProperty(key)) {
    console.log(key + ": " + object[key]);
  }
}

  14. 写出基本数据类型有哪 5 种

    • Number（数字）
    • String（字符串）
    • Boolean（布尔值）
    • Null（空值）
    • Undefined（未定义）

  15. 写出 转换为数值型常见方法

    • 使用 Number() 函数进行强制类型转换，如：Number("123")，返回 123。
    • 使用 parseInt() 函数进行整数类型转换，如：parseInt("123")，返回 123。
    • 使用 parseFloat() 函数进行浮点数类型转换，如：parseFloat("123.456")，返回 123.456。
    • 使用加号（+）进行隐式类型转换，如：+"123"，返回 123。注意，如果字符串中包含非数字字符，则返回 NaN。
    • 使用 Math.floor()、Math.ceil()、Math.round() 等数学函数进行转换，如：Math.floor("123.456")，返回 123。
    • 在使用 parseInt() 函数进行转换时，可以指定进制数，如：parseInt("0xff", 16)，返回 255。

  16. 写出模板字符串使用方式

    模板字符串使用反引号 ` 包裹，可以在其中使用 ${} 插入变量或表达式。

    js
    const name = "Alice";
const age = 20;
const message = `My name is ${name} and I'm ${age} years old.`;
console.log(message); // 输出：My name is Alice and I'm 20 years old.

    注意

    使用模板字符串时，插入的变量或表达式会被自动转换为字符串类型。如果插入的是对象，则会调用其 toString() 方法。

  17. 写出布尔类型的值为 false 的值哪些

    • false
    • 0
    • '' (空字符串)
    • null
    • undefined
    • NaN

  18. 写出 + 加号的功能有哪些

    • 加法运算符：将两个数相加，返回它们的和。

      javascript
      let a = 2;
let b = 3;
let sum = a + b;
console.log(sum); // 输出 5

    • 字符串拼接：将两个字符串拼接在一起，返回一个新的字符串。

      javascript
      let str1 = "Hello";
let str2 = "world";
let greeting = str1 + " " + str2;
console.log(greeting); // 输出 "Hello world"

    • 类型转换：将非数值类型的值转换为数值类型，例如字符串转换为数字。

      javascript
      let str = "123";
let num = +str;
console.log(num); // 输出 123

    • 单目加号：将一个数值转换为正数，例如 +5 返回 5。

      javascript
      let num = -5;
let positiveNum = +num;
console.log(positiveNum); // 输出 5

    • 数组连接：将两个数组连接在一起，返回一个新的数组。

      javascript
      let arr1 = [1, 2];
let arr2 = [3, 4];
let arr3 = arr1 + arr2;
console.log(arr3); // 输出 "1,2,3,4"

排错题 ​

==请说出以下代码都错在哪里，以及书写正确的代码==

JS 代码书写位置 ​

html
<script src="./02.js">
  alert('弹框出现')
</script>

分析错误：如果 <script> 标签使用 src 属性引入了某 .js 文件，那么 标签的代码会被忽略。

正确写法：

html
<script src="./02.js"></script>
<script>
  alert("弹框出现");
</script>

输出语句 ​

js
prompt(请输入您的姓名);

分析错误：

  • prompt() 函数的第一个参数应该是字符串类型，而不是变量或函数名。
  • 缺少引号，应该将 请输入您的姓名 用引号括起来，否则会被识别为变量或函数名。

正确写法：

js
prompt("请输入您的姓名");

变量 01 ​

js
let age = 18;
let age = 19;

分析错误：

  • 变量 age 在第一行已经被声明并且赋值为 18，但在第二行又重新声明了一个同名变量 age，这是不允许的，会导致语法错误。
  • 先声明变量 age，然后在后续代码中对其进行赋值，而不需要重新声明

正确写法：

js
let age = 18;
age = 19;

// 或者
let age;
age = 18;
age = 19;

变量 02 ​

js
console.log(age);
let age = 18;

分析错误：

  • 在 console.log 语句之前使用了变量 age，但是在之前并没有声明和赋值，这会导致引用错误。
  • 在使用 let 关键字声明变量 age 之前，就已经使用了它，这是不允许的。

正确写法：

js
let age = 18;
console.log(age);

字符串 01 ​

js
let username = 张三;

分析错误：

  • 缺少引号，应该将 张三 用引号括起来，否则会被识别为变量或函数名。
  • 如果想要将中文作为变量值，需要使用引号将其括起来。

正确写法：

js
let username = "张三";

字符串 02 ​

js
let uname = '张三"

分析错误：缺少一个闭合的引号，导致代码无法正确解析。

正确写法：

js
let uname = "张三";

数组 ​

js
// 需求：取出 星期六

let arr = ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"];
console.log(arr[6]);

分析错误：

  • 输出结果应该是 星期日
  • 数组下标是从 0 开始的，所以 arr[6] 代表的是数组中第 7 个元素，也就是 " 星期日 "。如果想要取出星期六，应该使用 arr[5]。

正确写法：

js
let arr = ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"];
console.log(arr[5]);

自增 ​

js
// 让 num 自身增加 1

let num = 10;

num + 1;

分析错误：

  • 有改变 num 的值，因为 num + 1 只是一个表达式，没有对 num 进行赋值操作。

正确写法：

js
num++;
++num;

num += 1;
num = num + 1;

switch 分支 ​

js
let num = prompt("请输入一个数字");

switch (num) {
  case 1:
    alert("用户您输入的是数字 1");
  case 2:
    alert("用户您输入的是数字 2");
  case 3:
    alert("用户您输入的是数字 3");
  default:
    alert("用户您输入的是非 1、2、3 的数字");
}

分析错误：

  • prompt() 函数返回的是一个字符串，但是 switch 语句中的 case 是用来匹配具体的值的，因此需要将输入的字符串转换为数字类型。
  • 在 switch 语句中，如果没有在每个 case 后面加上 break，那么匹配成功的 case 之后的所有 case 语句都会被执行。这种情况被称为 " 穿透 "，因此需要在每个 case 的末尾加上 break。
  • 在 default 语句中需要添加 break，否则如果用户输入了非数字类型的内容，将会执行 default 之后的所有语句。

正确写法：

js
let num = parseInt(prompt("请输入一个数字"));

switch (num) {
  case 1:
    alert("用户您输入的是数字 1");
    break;
  case 2:
    alert("用户您输入的是数字 2");
    break;
  case 3:
    alert("用户您输入的是数字 3");
    break;
  default:
    alert("用户您输入的是非 1、2、3 的数字");
    break;
}

while 循环 ​

js
let num = 1;
while (num <= 5) {
  document.write(`月薪过万不是梦<br/>`);
}

分析错误：

  • while 循环中的条件永远为真，因此会导致无限循环。
  • 必须在循环体内更新循环变量

正确写法：

js
let num = 1;
while (num <= 5) {
  document.write(`月薪过万不是梦<br/>`);
  num++; // 必须在循环体内更新循环变量
}

for 循环 ​

js
for (let i = 1; i <= 3; ) {
  document.write(`月薪过万不是梦 <br/>`);
}

分析错误：

  • for 循环的第三个参数（即循环计数器的增量）缺失，导致循环无法正常结束，造成死循环。
  • 应该在循环体中加入 i 的自增语句，例如 i++

正确写法：

js
for (let i = 1; i <= 3; i++) {
  document.write(`月薪过万不是梦 <br/>`);
}

遍历数组 ​

js
// 需求：取出数组中的每一项

let arr = ["马超", "赵云", "张飞", "关羽", "黄忠", "小黑", "小红"];

for (let i = 1; i < arr.length; i++) {
  console.log(arr[i]);
}

分析错误：

  • 循环的起始值为 1，而不是 0，因此会漏掉数组的第一项 " 马超 "
  • 应该设置循环初始值为 0

正确写法：

js
let arr = ["马超", "赵云", "张飞", "关羽", "黄忠", "小黑", "小红"];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

修改数组的项 ​

js
// 需求：将数组中的小白修改成 小灰灰
let arr = ["小黑", "小白", "小红"];

arr = "小灰灰";

分析错误：

  • 将整个数组赋值为一个字符串 " 小灰灰 "，而不是修改数组中的某一项。
  • 应该通过索引访问数组中的某一项，然后修改该项的值。

正确写法：

js
let arr = ["小黑", "小白", "小红"];

arr[1] = "小灰灰";
console.log(arr); // ["小黑", "小灰灰", "小红"]

操作数组 ​

js
// 需求：在数组 arr 的最后面添加 blue

let arr = ["red", "green"];

arr.push = "blue";

分析错误：

  • 将 push 方法当作属性来赋值，而不是调用该方法。
  • 应该使用圆括号来调用 push 方法，并传入要添加的元素作为参数。

正确写法：

js
let arr = ["red", "green"];

arr.push("blue");
console.log(arr); // ["red", "green", "blue"]

对象 ​

js
// phone 手机对象

let phone = {
    size = 6.1
    play = function () {
        console.log('走起，吃鸡')
    }
}

分析错误：

  • 对象属性和方法的赋值语法不正确。
  • 应该使用冒号来分隔属性名和属性值，使用逗号分隔多个属性和方法，使用函数定义语法来定义方法。

正确写法：

js
let phone = {
  size: 6.1,
  play: function () {
    console.log("走起，吃鸡");
  },
};

遍历对象 ​

js
let obj = {
  uname: "小明",
  age: 18,
  sex: "男",
  height: 200,
};

// 遍历 obj 对象，取出对象的属性名和属性值
for (let k in obj) {
  console.log(k);
  console.log(obj.k);
}

分析错误：

  • 使用了点号访问属性值，而不是使用方括号加上属性名的形式。因为 k 是一个变量，应该使用方括号加上 k 的值来访问对应的属性值。

正确写法：

js
let obj = {
  uname: "小明",
  age: 18,
  sex: "男",
  height: 200,
};

// 遍历 obj 对象，取出对象的属性名和属性值
for (let k in obj) {
  console.log(k);
  console.log(obj[k]);
}

编程题 ​

增加年龄 ​

  • 提示用户输入年龄，用户输入年龄后，把用户输入的年龄增加 5 岁
  • 增加 5 岁后，通过弹出框提示用户 " 据我估计，五年后，你可能 XX 岁了 "
js
var age = prompt("请输入您的年龄："); // var age = +prompt("请输入您的年龄：");
age = parseInt(age) + 5;
alert("据我估计，五年后，您可能" + age + "岁了。");

用户登录验证 ​

  • 接收用户输入的用户名和密码，若用户名为 "admin" ,且密码为 "123456" ,则提示用户登录成功！否则，让用户一直输入。
  • ps：使用 while 循环
js
let username = "";
let password = "";
while (username !== "admin" || password !== "123456") {
  username = prompt("请输入用户名：");
  password = prompt("请输入密码：");
}
alert("登录成功！");

计算和 ​

  • 用户输入一个数，计算 1 到这个数的和

  • 比如 用户输入的是 5，则计算 1~5 之间的累加和 并且输出到控制台

js
let num = parseInt(prompt("请输入一个数："));
let sum = 0;
for (let i = 1; i <= num; i++) {
  sum += i;
}
console.log(`1 到 ${num} 的和为：${sum}`);

多分支语句 ​

  • 用户输入分数，根据分数奖励不同的车

  • 利用多分支语句

    • 90~100 分 奖励法拉利
    • 80~90 分 奖励奥迪
    • 60~80 分 奖励奥拓
    • 60 分以下 打一顿
    js
    let score = prompt("请输入您的分数：");
if (score >= 90 && score <= 100) {
  alert("恭喜您获得法拉利！");
} else if (score >= 80 && score < 90) {
  alert("恭喜您获得奥迪！");
} else if (score >= 60 && score < 80) {
  alert("恭喜您获得奥拓！");
} else if (score < 60) {
  alert("恭喜您获得七匹狼一条！！！");
} else {
  alert("请输入有效分数！");
}

打印输出数组里所有的奇数 ​

js
let arrNums = [5, 2, 8, 10, 3, 7];
js
let arrNums = [5, 2, 8, 10, 3, 7];
for (let i = 0; i < arrNums.length; i++) {
  if (arrNums[i] % 2 !== 0) {
    console.log(arrNums[i]); // 输出：5 3 7
  }
}
js
let arrNums = [5, 2, 8, 10, 3, 7];
let oddNums = arrNums.filter((num) => num % 2 !== 0);
console.log(oddNums);
js
let arrNums = [5, 2, 8, 10, 3, 7];
let oddNums = arrNums.reduce((acc, cur) => {
  if (cur % 2 !== 0) {
    acc.push(cur);
  }
  return acc;
}, []);
console.log(oddNums);
js
let arrNums = [5, 2, 8, 10, 3, 7];
let oddNums = [];
arrNums.forEach((num) => {
  if (num % 2 !== 0) {
    oddNums.push(num);
  }
});
console.log(oddNums);

使用 for 循环 1 ​

  • 求出班级里同学们平均年龄
js
let arrAges = [15, 19, 21, 33, 18, 24, 10];
js
let arrAges = [15, 19, 21, 33, 18, 24, 10];
let sum = arrAges.reduce((total, age) => total + age, 0);
let avg = sum / arrAges.length;
console.log(avg.toFixed(2));

使用 for 循环 2 ​

  • 求出数组里大于 5 的和，以及能被 3 整除的偶数的个数
javascript
let arrCount = [4, 9, 5, 3, 20, 6, 15, 11, 35];
js
let arrCount = [4, 9, 5, 3, 20, 6, 15, 11, 35];

let sum = arrCount.reduce((total, num) => {
  if (num > 5) {
    return total + num;
  }
  return total;
}, 0);
console.log(sum);

let count = arrCount.filter((num) => num % 2 === 0 && num % 3 === 0).length;
console.log(count);

数组 ​

  • 给一个数字数组，该数组中有很多数字 0，将不为 0 的数据存入到一个新的数组中
js
let arrAll = [4, 0, 9, 5, 0, 20, 3, 0, 11, 0, 0, 10];
js
let arrAll = [4, 0, 9, 5, 0, 20, 3, 0, 11, 0, 0, 10];
let newArr = arrAll.filter((num) => num !== 0);
console.log(newArr);

封装余额函数 ​

  • 目的：复习函数的声明与调用
  • 要求：
    • 运行程序后，浏览器显示输入确认框 (prompt)
    • 第一个输入确认框提示输入银行卡余额
    • 第二个输入确认框提示输入当月食宿消费金额
    • 第三个输入确认框提示输入当月生活消费金额
    • 输入完毕后，在页面中显示银行卡剩余金额
    • 提示：所有功能代码封装在函数内部（函数需要把余额返回）
js
function live() {}
let money = live();
js
function live() {
  let balance = +prompt("请输入银行卡余额：");
  let foodExpense = +prompt("请输入当月食宿消费金额：");
  let lifeExpense = +prompt("请输入当月生活消费金额：");
  let remaining = balance - foodExpense - lifeExpense;
  document.write("银行卡剩余金额：" + remaining);
  return remaining;
}
let money = live();

对象的使用 ​

  • 要求：
    • 对象名为 computer 电脑对象
    • 有 size 属性，值为 15.6 寸
    • 有 brand 属性，值为 华为
    • 有 playGame 方法，值为函数，函数内打印 吃鸡
    • 有 code 方法，值为函数，函数内打印 写代码使我快乐
    • 页面中输出电脑对象的 size 和 brand 属性的值
    • 调用对象中的 playGame 和 code 的方法
js
let computer = {};
js
let computer = {
  size: "15.6 寸",
  brand: "华为",
  playGame: function () {
    console.log("吃鸡");
  },
  code: function () {
    console.log("写代码使我快乐");
  },
};

console.log(computer.size); // 输出 15.6 寸
console.log(computer.brand); // 输出 华为

computer.playGame(); // 输出 吃鸡
computer.code(); // 输出 写代码使我快乐

计算 m-n 之间所有数的和 ​

  • 需要有函数的使用
js
function sum(m, n) {
  let result = 0;
  for (let i = m; i <= n; i++) {
    result += i;
  }
  return result;
}

console.log(sum(1, 10));
console.log(sum(3, 8));

猜数字游戏，设定次数，最多猜 5 次 ​

  • 要求
    • 生成随机的数字 0 到 20
    • 只能猜 5 次，5 次机会用完提示 这都猜不到
    • 猜对了，就提示 恭喜猜对拉
    • 猜小了，您猜的数字小了
    • 猜大了，就提示用户 您猜的数字大了
js
const target = Math.floor(Math.random() * 21);
let guessCount = 0;

while (guessCount < 5) {
  const guess = parseInt(prompt("请输入您猜的数字（0~20）："));

  if (isNaN(guess) || guess < 0 || guess > 20) {
    alert("请输入有效数字！");
    continue;
  }

  guessCount++;

  if (guess === target) {
    alert("恭喜猜对啦！");
    break;
  } else if (guess < target) {
    alert("您猜的数字小了！");
  } else {
    alert("您猜的数字大了！");
  }
}

if (guessCount === 5) {
  alert(`这都猜不到，正确数字是 ${target}`);
}

小娜 ​

  • 需求：只要用户输入的不是相关选项，则一直存在弹出输入提示框，等待用户的输入
  • 思路：
    • while() 循环
    • 弹出输入框
js
while (true) {
  let userInput = prompt("请问您需要什么帮助？");
  if (userInput === "打开网页" || userInput === "播放音乐" || userInput === "查询天气") {
    // 相关选项，结束循环
    break;
  } else {
    // 不是相关选项，继续弹出输入框
    alert("抱歉，我不理解您的需求，请重新输入。");
  }
}

实现数组里求最大值的函数 ​

javascript
let arrayNums = [4, 9, 5, 3, 20, 6, 15, 11];
js
let arrayNums = [4, 9, 5, 3, 20, 6, 15, 11];

function getMaxNum(array) {
  let maxNum = array[0];
  for (let i = 1; i < array.length; i++) {
    if (array[i] > maxNum) {
      maxNum = array[i];
    }
  }
  return maxNum;
}

console.log(getMaxNum(arrayNums));
js
let arrayNums = [4, 9, 5, 3, 20, 6, 15, 11];

function getMaxNum(array) {
  return array.reduce(function (prev, curr) {
    return prev > curr ? prev : curr;
  });
}

console.log(getMaxNum(arrayNums));

操作数组对象 ​

  • 需求 1: 遍历数组里每个对象，判断出哪个人最大 - 打印它的名字
  • 需求 2: 遍历数组里每个对象，为每个人增加 5 岁的年龄，最后打印整个数组在控制台查看
js
let arrPers = [
  {
    name: "小明",
    age: 18,
    sex: "男",
  },
  {
    name: "老刘",
    age: 38,
    sex: "男",
  },
  {
    name: "小王",
    age: 19,
    sex: "女",
  },
];
js
let arrPers = [
  {
    name: "小明",
    age: 18,
    sex: "男",
  },
  {
    name: "老刘",
    age: 38,
    sex: "男",
  },
  {
    name: "小王",
    age: 19,
    sex: "女",
  },
];

let maxAge = -Infinity; // 初始值设置为负无穷大
let maxName = "";
arrPers.forEach((person) => {
  if (person.age > maxAge) {
    maxAge = person.age;
    maxName = person.name;
  }
});
console.log(`年龄最大的人是${maxName}`); // 年龄最大的人是老刘

arrPers.forEach((person) => {
  person.age += 5;
});
console.log(arrPers);
// [
//   {name: '小明', age: 23, sex: '男'},
//   {name: '老刘', age: 43, sex: '男'},
//   {name: '小王', age: 24, sex: '女'},
// ]