JavaScript学习小记

JavaScript学习小记

前言：JavaScript是一种广泛应用于网页开发的脚本语言，它可以为网页添加交互性和动态功能。

下面是一些JavaScript的重要知识点：

1.变量和数据类型：

• 使用关键字var、let或const声明变量。
• 常见的数据类型包括：数字 (number) 、字符串 (string) 、布尔值 (boolean) 、数组 (array) 、对象 (object) 等。

数字（Number）：用于表示数值。可以进行算术运算。

var num1 = 10;
var num2 = 3.14;
var sum = num1 + num2; // 13.14

字符串（String）：用于表示文本。可以使用单引号或双引号括起来。

var name = 'Wang';
var message = "Hello, " + name + "!"; // Hello, Wang!

布尔值（Boolean）：用于表示真或假的值。

var isLogged = true;
var hasPermission = false;

数组（Array）：用于存储多个值。可以通过索引访问和修改数组元素。

var numbers = [1, 2, 3, 4, 5];
var firstNumber = numbers[0]; // 1
numbers[1] = 10;

对象（Object）：用于存储键值对。可以通过键访问和修改对应的值。

var person = {
  name: 'Wang',
  age: 30,
  isAdmin: false
};
var personName = person.name; // Wang
person.isAdmin = true;

---

2.条件语句：

• 使用if、else if和else进行条件判断。
• 可以使用比较运算符(如==、!=、>、<)和逻辑运算符(如&&、||)进行条件组合等。

if语句：如果条件为真，则执行特定的代码块。

var num = 10;
if (num > 0) {
  console.log('Positive');
} else if (num < 0) {
  console.log('Negative');
} else {
  console.log('Zero');
}

switch语句：根据不同的值执行不同的代码块。

var day = 'Monday';
switch (day) {
  case 'Monday':
    console.log("It's Monday");
    break;
  case 'Tuesday':
    console.log("It's Tuesday");
    break;
  default:
    console.log('Other day');
}

---

3.循环：

• 使用for、while和do-while循环进行迭代。
• 可以使用break和continue控制循环流程。

for循环：在指定的条件下重复执行代码块。

for (var i = 0; i < 5; i++) {
  console.log(i);
}

while循环：在指定条件为真时重复执行代码块。

var i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

do-while循环：先执行代码块，然后在指定条件为真时重复执行。

var i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

---

4.循环：

• 使用function关键字定义函数。
• 函数可以接收参数，并返回一个值。

函数声明：使用function关键字定义函数

function greet(name) {
  return 'Hello, ' + name + '!';
}

var message = greet('Wang'); // Hello, Wang!

函数表达式：可以将函数赋值给变量。

var greet = function(name) {
  return 'Hello, ' + name + '!';
};

var message = greet('Wang'); // Hello, Wang!

---

5.数组和对象：

• 数组用于存储多个值，可以使用索引访问和修改数组元素。

• 对象用于存储键值对，可以通过键访问和修改对应的值。

数组：使用方括号[]来表示数组，可以通过索引访问和修改数组元素。

let numbers = [1, 2, 3, 4, 5];
let firstNumber = numbers[0]; // 1
numbers[1] = 10;

对象：使用花括号{}来表示对象，可以通过键访问和修改对应的值。

let person = {
  name: 'John',
  age: 30,
  isAdmin: false
};
let personName = person.name; // John
person.isAdmin = true;

---

6.异步编程：

• JavaScript支持异步编程，可以使用回调函数、Promise、async/await等方式处理异步操作。
• 常见的异步操作包括网络请求、定时器、事件处理等

回调函数：可以将函数作为参数传递给其他函数，用于在异步操作完成后执行。

function fetchData(callback) {
  // 模拟异步操作
  setTimeout(() => {
    const data = 'Some data';
    callback(data);
  }, 1000);
}
fetchData((data) => {
  console.log(data); // Some data
});

7.实战案例：

条件判断：

1.输入学生姓名，成绩 输出他是不是没有好好学

方法1.使用if-else条件语句

var stu = prompt('请输入学生成绩')
if (stu < 80) {
    alert('你要加油了呀')
} else {
    alert('还不错，继续保持')
}

方法2.使用while语句

var stu = prompt('请输入学生成绩');

while (stu < 80) {
    alert('你要加油了呀');
    stu = prompt('请重新输入学生成绩');
}

alert('还不错，继续保持');

方法3.用do-while循环

var stu;

do {
    stu = prompt('请输入学生成绩');

    if (stu < 80) {
        alert('你要加油了呀');
    }
} while (stu < 80);

alert('还不错，继续保持');

2.根据用户输入的月份判断季节，并打印相应的消息。假设 1-3 月为春季，4-6 月为夏季，7-9 月为秋季，10-12 月为冬季。

方法1.使用if-else条件语句

var month = 8;
var season;

if (month >= 1 && month <= 3) {
  season = '春季';
} else if (month >= 4 && month <= 6) {
  season = '夏季';
} else if (month >= 7 && month <= 9) {
  season = '秋季';
} else if (month >= 10 && month <= 12) {
  season = '冬季';
} else {
  season = '无效的月份';
}

console.log('季节: ' + season);

方法2.使用switch-case条件语句

var month = 8;
var season;

switch (month) {
  case 1:
  case 2:
  case 3:
    season = '春季';
    break;
  case 4:
  case 5:
  case 6:
    season = '夏季';
    break;
  case 7:
  case 8:
  case 9:
    season = '秋季';
    break;
  case 10:
  case 11:
  case 12:
    season = '冬季';
    break;
  default:
    season = '无效的月份';
}

console.log('季节: ' + season);

3.判断一个字符串是否为回文字符串，并打印相应的消息。

var str = 'level';
var isPalindrome = true;

for (var i = 0; i < str.length / 2; i++) {
  if (str[i] !== str[str.length - 1 - i]) {
    isPalindrome = false;
    break;
  }
}

console.log(str + ' 是回文字符串吗？' + isPalindrome);

4.找男友的条件 180身高，8块腹肌 输出要不要找他，改动找男友条件，如果他长得像王一博,肖战呢? 输出要不要找他

方法1.使用switch-case条件语句

var height = prompt('请输入身高')
var fuJi = prompt('你有几块腹肌?')
var zhangXiang = prompt('你觉得你长的像谁')

switch (zhangXiang) {
    case '肖战':
        alert('我爱肖战?')
        break
    case '王一博':
        alert('我爱王一博?')
        break
    case '顶针':
        alert('我测!')
        break
    default:
        if (height >= 180 && fuJi >= 8) {
            alert('我爱你?')
        } else if (height >= 180 && fuJi < 8) {
            alert('还不错?')
        } else if (height < 180 && fuJi >= 8) {
            alert('也挺好?')
        } else {
            alert('你是个好人!')
        }
        break
}

方法2.使用while循环

var height = prompt('请输入身高');
var fuJi = prompt('你有几块腹肌?');
var zhangXiang = prompt('你觉得你长的像谁');

var foundMatch = false; // 用于标记是否找到匹配

while (!foundMatch) {
    if (zhangXiang === '肖战') {
        alert('我爱肖战?');
        foundMatch = true;
    } else if (zhangXiang === '王一博') {
        alert('我爱王一博?');
        foundMatch = true;
    } else if (zhangXiang === '顶针') {
        alert('我测!');
        foundMatch = true;
    } else {
        if (height >= 180 && fuJi >= 8) {
            alert('我爱你?');
        } else if (height >= 180 && fuJi < 8) {
            alert('还不错?');
        } else if (height < 180 && fuJi >= 8) {
            alert('也挺好?');
        } else {
            alert('你是个好人!');
        }
        foundMatch = true;
    }
}

循环练习：

1.数字猜谜游戏 给定一个数，比大小，大小正好，结束

var targetNumber = 42;
while (true) {
 var guess = parseInt(prompt("请输入一个数字："));
 if (guess < targetNumber) {
  console.log("猜小了！请继续猜测。");
 } else if (guess > targetNumber) {
  console.log("猜大了！请继续猜测。");
 } else {
  console.log("恭喜你，猜对了！");
  break; 
 }
}
console.log("游戏结束。");

2.输出0-100的奇数和偶数的和

var oddSum = 0;
var evenSum = 0;

for (var i = 0; i <= 100; i++) {
  if (i % 2 === 0) {
    evenSum += i; // 偶数
  } else {
    oddSum += i; // 奇数
  }
}

console.log("0到100之间的奇数和为: " + oddSum);
console.log("0到100之间的偶数和为: " + evenSum);

3.打印出以下图形：

*
**
***
****
*****

let i = 1;
while (i <= 5) {
  let row = '';
  let j = 1;
  while (j <= i) {
    row += '*';
    j++;
  }
  console.log(row);
  i++;
}

4.已知本金10000元，银行年化利率千分之三，求存入银行后5年能拿到多少钱

方法1.使用 for 循环输出

// 定义本金和年化利率
var principal = 10000;
var interestRate = 0.003;

// 初始金额等于本金
var amount = principal; 

for (var year = 1; year <= 5; year++) {
  amount += amount * interestRate; 
}

console.log("5年后能拿到的金额为：" + amount.toFixed(2) + "元");

2.方法2.使用 while 循环输出

var principal = 10000;
var interestRate = 0.003; 
var years = 5; 

var amount = principal; 
var count = 0; 

while (count < years) {
  amount += amount * interestRate; 
  count++; 
}

console.log("5年后能拿到的金额为：" + amount.toFixed(2) + "元");