循环结构
- 循环结构就是根据某些给出的条件，重复地执行同一段代码
- 循环必须要有某些固定的内容组成
- 初始化
- 条件判断
- 循环体代码
- 自身改变/步长
while 语句
while 循环会在指定条件为真时循环执行代码块，只要指定条件为 true，循环就可以一直执行代码块。
// 1. 初始化
var num = 12
// 2. 条件判断
while (num > 5) {
// 3. 循环体代码
console.log(num)
// 4. 自身改变/步长（如果没有自身改变，循环就会一直不停）
num--
}
// 12 11 10 9 8 7 6
while 示例
数字求和
//1-100 整数和
var digit = 1
var sum = 0
while (digit <= 100){
sum = sum + digit
digit += 1
}
console.log(`1-100所有整数和:${sum}`) //1-100所有整数和:5050
var i= sum = 0; //多个变量快捷声明赋值
while(i<100){
i += 1;
sum += i
}
console.log(sum,i)
数字阶乘
//求一个数字的阶乘
var num = 10
var sum = 1
while (num > 1) {
sum = sum * num
num--
}
console.log(sum) //3628800
do while 语句
- while 语句会先进行条件判断，满足就执行，不满足直接就不执行了，但是 do while 循环先不管条件，先执行一回，然后再开始进行条件判断
/**语法
do{
需要执行的代码
}
while (条件);
*/
do{
x=x + "The number is " + i + "<br>";
i++;
}
while (i<5);
do while 示例
进入网站，弹出对话框，提示输入信息，如果不输入不可取消对话框，输入之后确认，方可停止对话框，并将输入内容显示在页面
do{
var myName = prompt("Please input your name:","")
myName ? document.write(`myName:${myName}`) : null
} while (!myName)
for 语句
基本语法
for([code1];[code2];[code4]){
[code3]
}
//code1 - 初始
//code2 - 条件
//code3 - 循环
//code4 - 步长
code1
- 可以在code1中初始化任意/多个值
for (var min=1,max=10;min<=max;min++) {
console.log(`min:${min} -> max:${max}`)
}
/*
min:1 -> max:10
min:2 -> max:10
min:3 -> max:10
min:4 -> max:10
min:5 -> max:10
min:6 -> max:10
min:7 -> max:10
min:8 -> max:10
min:9 -> max:10
min:10 -> max:10
*/
- 在循环开始前已经设置了初始值，可以省略code1
var min=1,max=10,sum=0
for (;min<=max;min++) {
sum += min
}
console.log(sum + max) //65
code2
- code2 是循环的核心判断条件，该语句同样可以省略，但是需要在循环体中增加break，否则将陷入死循环
for (let index = 0;;index++) {
// index > 5 ? break : null //error:Unexpected token 'break'
// for循环没有写判断语句，通过下面的if语句代替，主要是break
if (index > 5) {
break //break 中断循环
}
console.log(`times`)
}
code3
- code3设定for循环的步长，增量可以是负数
i--，或者更大i=i+15，同样可以省略，在循环体中体现步长
break 终止（跳出）循环
- 步长还未完全结束，就提前终止循环
for (i=0;i<10;i++){
if (i==3) break; //由于这个 if 语句只有一行代码，所以可以省略花括号
console.log("The number is " + i);
}
/*结果：0 1 2
后面3-9均因为跳出循环而不得执行
*/
continue 结束本次（跳过）循环
- 在循环中，把循环的本次跳过去，继续执行后续的循环
for (p = 1 ; p < 10; p++){
if(p % 2 === 0) continue
console.log(p)
}
/*结果：1 3 5 7 9
跳过了偶数的循环
*/
for 示例
判断质数
//判断质数
function isPrime(num){
num = !isNaN(parseInt(num)) ? parseInt(num) : console.log("invalid")
//此处使用num/2，因为如果不能被2整除，更不可能被4整除了，将num除以2还能降低一般的算法复杂度
for(i=2;i<num/2;i++){
if (num%i===0) {
console.log(`${num} isn't a prime`)
break
} else if(num === i+1) {
console.log(`${num} is a prime`)
}
}
}
isPrime(89) //89 is a prime
isPrime(120) //120 isn't a prime
isPrime("九十") //invalid
isPrime("50number") //50 isn't a prime
isPrime("47.1") //47 is a prime
九九乘法表
外层循环控制显示多少行，内存循环控制每行显示多少个
//乘法表-正三角
for(i=1;i<10;i++){
for (j=1;j<=i;j++){
document.write(`${j}X${i}=${j*i} `)
}
document.write("<br/>")
}
/*
1X1=1
1X2=2 2X2=4
1X3=3 2X3=6 3X3=9
1X4=4 2X4=8 3X4=12 4X4=16
1X5=5 2X5=10 3X5=15 4X5=20 5X5=25
1X6=6 2X6=12 3X6=18 4X6=24 5X6=30 6X6=36
1X7=7 2X7=14 3X7=21 4X7=28 5X7=35 6X7=42 7X7=49
1X8=8 2X8=16 3X8=24 4X8=32 5X8=40 6X8=48 7X8=56 8X8=64
1X9=9 2X9=18 3X9=27 4X9=36 5X9=45 6X9=54 7X9=63 8X9=72 9X9=81
*/
//乘法表-倒三角
for(i=9;i>=1;i--){
for(j=1;j<=i;j++){
document.write(`${j}X${i}=${j*i} `)
}
document.write("<br/>")
}
/*
1X9=9 2X9=18 3X9=27 4X9=36 5X9=45 6X9=54 7X9=63 8X9=72 9X9=81
1X8=8 2X8=16 3X8=24 4X8=32 5X8=40 6X8=48 7X8=56 8X8=64
1X7=7 2X7=14 3X7=21 4X7=28 5X7=35 6X7=42 7X7=49
1X6=6 2X6=12 3X6=18 4X6=24 5X6=30 6X6=36
1X5=5 2X5=10 3X5=15 4X5=20 5X5=25
1X4=4 2X4=8 3X4=12 4X4=16
1X3=3 2X3=6 3X3=9
1X2=2 2X2=4
1X1=1
*/
带样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./demo1.js"></script>
<link rel="stylesheet" href="./demo1.css">
</head>
<body>
</body>
</html>
span{
display: inline-block;
width: 80px;
height: 30px;
text-align: center;
line-height: 30px;
margin: 3px;
}
.positive{
background-color: lightblue;
}
.negative{
background-color:lightgreen;
}
//乘法表-正三角
for(i=1;i<10;i++){
for (j=1;j<=i;j++){
document.write(`<span class="positive">${j}X${i}=${j*i}</span>`)
}
document.write("<br/>")
}
/*
1X1=1
1X2=2 2X2=4
1X3=3 2X3=6 3X3=9
1X4=4 2X4=8 3X4=12 4X4=16
1X5=5 2X5=10 3X5=15 4X5=20 5X5=25
1X6=6 2X6=12 3X6=18 4X6=24 5X6=30 6X6=36
1X7=7 2X7=14 3X7=21 4X7=28 5X7=35 6X7=42 7X7=49
1X8=8 2X8=16 3X8=24 4X8=32 5X8=40 6X8=48 7X8=56 8X8=64
1X9=9 2X9=18 3X9=27 4X9=36 5X9=45 6X9=54 7X9=63 8X9=72 9X9=81
*/
//乘法表-倒三角
for(i=9;i>=1;i--){
for(j=1;j<=i;j++){
document.write(`<span class="negative">${j}X${i}=${j*i}</span>`)
}
document.write("<br/>")
}
/*
1X9=9 2X9=18 3X9=27 4X9=36 5X9=45 6X9=54 7X9=63 8X9=72 9X9=81
1X8=8 2X8=16 3X8=24 4X8=32 5X8=40 6X8=48 7X8=56 8X8=64
1X7=7 2X7=14 3X7=21 4X7=28 5X7=35 6X7=42 7X7=49
1X6=6 2X6=12 3X6=18 4X6=24 5X6=30 6X6=36
1X5=5 2X5=10 3X5=15 4X5=20 5X5=25
1X4=4 2X4=8 3X4=12 4X4=16
1X3=3 2X3=6 3X3=9
1X2=2 2X2=4
1X1=1
*/
//等腰三角形
function starts(height){
for (let i = 1; i <= height; i++) {
var displayStarts = ""
//空格
for (let k = 1; k <= height-i; k++) {
displayStarts += " "
}
//星星
for (let j = 1; j <= i*2-1; j++) {
displayStarts += "*"
}
console.log(displayStarts)
}
}
starts(4)
// *
// ***
// *****
// *******
starts(10)
// *
// ***
// *****
// *******
// *********
// ***********
// *************
// ***************
// *****************
// *******************
任意数求和
要求传进的实参不论是数字还是字符串，只要是表示了阿拉伯数字的意义，都能够实现求和，如果传入了非阿拉伯数字意义的符号，则忽略计算
//需求结果
sum(30,60); //90
sum(30.5,-60); //-29.5
sum(30,60,"50.1分"); //140.1 把字符串转换为数字，防止出现字符串拼接
sum(30,50,"十"); //Invalid Number 存在非有效数字不进行计算
sum(30,"sa",56); //Invalid Number 存在非有效数字不进行计算
//version 1.0 -> 基本源码
function sum(){
var result = 0
//arguments 函数内置数组，会将传递进来的实参，组成该数组
for(i=0;i<arguments.length;i++){
//在获取累加的时候要注意判断实参是否存在字符串、非有效数字等特殊情况
arguments[i] = parseFloat(arguments[i])
if (!isNaN(arguments[i])) {
result += arguments[i]
} else {
result = null
break
}
}
result !== null ? console.log(result) : console.log("Invalid Number")
console.log(arguments)
}
for in 与 for of
for in 语句
- for in 语句，主要用于循环遍历对象的属性
- 基本语法：
for([对象key/数组index] in [对象/数组]){
//code...
}
var obj = {name:"James",age:30,address:"avenue"}
var arr = ["james",30,"avenue"]
for(key in obj){
console.log(`对象 - key(${key}):value(${obj[key]})`)
}
// 对象 - key(name):value(James)
// 对象 - key(age):value(30)
// 对象 - key(address):value(avenue)
for(index in arr){
console.log(`数组 - index(${index}):value(${arr[index]})`);
}
// 数组 - index(0):value(james)
// 数组 - index(1):value(30)
// 数组 - index(2):value(avenue)
for of 语句
- 主要用于循环遍历数组
- 基本语法：
for([数组value] of [数组]){
//code...
}
var obj = {name:"James",age:30,address:"avenue"}
var arr = ["james",30,"avenue"]
// for(key of obj){
// console.log(`对象 - key(${key}):value(${obj[key]})`)
// }
//报错：TypeError:obj is not iterable
for(value of arr){
console.log(`数组 - value(${value})`);
}
// 数组 - value(james)
// 数组 - value(30)
// 数组 - value(avenue)
for in VS for of
- 两者都可以循环遍历数组，for in 输出的是数组index下标，for of 输出的是数组的每一项值
- for in 可以遍历对象，for of 不能遍历普通对象（只能遍历带有iterator接口的对象和数据结构，例如Array、String等对象，Set、Map等数据结构）
forEach() 方法
- for each 语句：遍历数组和集合
- 语法格式如下：
[数组/集合].forEach(funciton(value,index,array){
//code...
});
//value - 当前遍历的数组元素
//index - 当前遍历的数组索引
//array - 数组对象本身
//三者关系 - array[index] == value 都是静态属性，不用重新定义
/**
* forEach遍历数组和集合的格式：
* [数组/集合].forEach(function(value,index,array){
* 循环体功能;
* });
* value - 当前遍历的数组元素
* index - 当前对应的数组索引
* array - 数组本身对象
* 相互关系：array[index] == value; //true，这三者是静态属性，不用重新定义
*/
var sum = (...params) => {
var res = 0;
params.forEach(function(value,index,params){
if(!isNaN(value)){
res += Number(value);
}else{
console.log(`传输的第${index+1}项数据${value}非法`);
}
});
return res;
}
//优化forEach方法中的函数为箭头函数
var sum = (...params) => {
result = 0;
params.forEach(value => {
result += Number(value)
})
isNaN(result)?console.log("error"):console.log(result)
}
sum(10,20) //30
sum(1.20,-20) //18.8
sum(10,"-82",-20) //-92
sum(10,"十",20.3) //error
