javascript（一）_javascript colorizer-CSDN博客

本文链接：https://blog.csdn.net/weixin_42330641/article/details/127725843

1 什么是JavaScript

javascript是轻量级函数优先的解释性编程语言；
javascript的三大部分
- 是ECMAscript脚本规范性语言；
- 通过文档对象模型操作网页；
- 通过浏览器对象模型操作浏览器；
单线程
- 用户交互性；
- 操作DOM决定的；
vscode的常用脚本：
- Live Server 实时更新；
- Prettier - Code formatter 格式化代码插件；
- Bracket Pair Colorizer 代码样式清晰化；

2 JavaScript的引入和注释

2.1 JavaScript的引入

外部引入

<script src=''><script>

内部引入

<script ><script>

2.2 JavaScript注释

单行注释使用//
单行注释使用/* */
代码结尾要用;

3 JavaScript变量的声明

JavaScript中，用于声明变量的语法：
- var variable_name= new value;
- 声明字符串必须使用单引号’ '或者双引号" ";
- 不能使用保留字作为变量名；
第一种

<script>
var name='张三';
<script>

第二种

var name；
name='张三';

第三种一次声明多个变量

var  name='张三'  age=10

4 JavaScript变量的提升

JavaScript和其他编程语言一样，都会经历编译和执行，js在编译的时候会把所有的变量提前收集起来提前定义，其他的程序不会又变动

<!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>
</head>

<body>

    <script>
        console.log(name);
        var name = "张三";
    </script>

</body>

</html>

没有报错unfined
在这里插入图片描述

5 JavaScript 数据类型

基本数据类型(存在栈内存)

number;
String;
Boolean;
null;
symbol;
undefine;

复杂数据类型（存在堆内存）

对象{};
函数(){};
数组[];

5.1 Numer 数据类型

Number 数据类型的声明和常用方法；

<!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>
</head>

<body>
    <script>
        //字面量声明
        var numberone = 1000;
        console.log(numberone);
        //对象声明
        var numbertwo = new Number(1000.1121212)
        console.log(numbertwo);
        //判断数字是否为number类型
        var boolean1 = Number.isInteger(numberone);
        console.log(boolean1);
        //判断这个值是否为数值；
        var boolean2 = Number.isNaN(numbertwo);
        console.log(boolean2);
        //保留小数位数2位
        console.log(numbertwo.toFixed(2));
    </script>

</body>

</html>

在这里插入图片描述

5.2 String 数据类型

String 的声明和常用方法；

<!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>
</head>

<body>
    <script>
        //字面量声明
        var contextone = "今天不学习，明天变垃圾,";
        console.log(contextone);
        //对象声明
        var contexttwo = new String("后天不学习。要变臭垃圾");
        console.log(contexttwo);
        //字符串拼接
        var contextsum = contextone + contexttwo;
        console.log(contextsum);
        //字符串的长度；
        var contextlenth = contextone.length;
        console.log(contextlenth);
        //字符串清理空白文字中间的空白不会清除
        var contextfour = "    bianli  ji  ";
        console.log(contextfour.trim());
        //选取单个字符
        var contextfive = contextone.charAt(2);
        console.log(contextfive);
        //截取字符
        var contextsix = contextone.slice(0, 5);
        console.log(contextsix);
        //查找字符
        var contextseven = contextone.indexOf("垃圾");
        console.log(contextseven);
        //替换字符
        var contexteight = contextone.replace("今天", "天天");
        console.log(contexteight);
        //时间格式转换
        var time = "2022-11-08";
        var time1 = time.split("-");
        var time2 = time1.join("/")
        console.log(time2);
    </script>

</body>

</html>

在这里插入图片描述

5.3 Boolean数据类型

Boolean只有两个值 true,false ，声明：

var boolean=true;

隐式转换

	true	false
Number非空值	✔
Number为0或NaN		✔
String非空值	✔
String空值		✔
数组不参与比较时	✔
数组参与比较时		✔
对象	✔
Null		✔
undefined		✔
NaN		✔

<!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>
</head>

<body>
    <script>
        //Number隐式转换；
        var num = 100;
        var booleanone = Boolean(num);
        console.log("booleanone转换的值为：" + booleanone);
        var num1 = 0;
        var booleantwo = Boolean(num1);
        console.log("booleantwo转换的值为：" + booleantwo);
        //String 隐式转换
        var Str = 'xiaowang';
        var booleanthree = Boolean(Str);
        console.log("booleanthree转换的值为：" + booleanthree);
        var Str1 = "";
        var booleanfour = Boolean(Str1);
        console.log("booleanfour转换的值为：" + booleanfour);
        //数组的隐式转换
        var arr = [];
        var booleanfive = Boolean(arr);
        var arr1 = [];
        var booleansix = arr === arr1


        console.log("booleanfive转换的值为：" + booleanfive);
        console.log("booleansix转换的值为：" + booleansix);
        // 对象的隐式转换
        var obj = {};
        var booleaneight = Boolean(obj);
        console.log("booleaneight转换的值为：" + booleaneight);
        //undefined NaN  Null
        console.log("undefined转换的值为：" + Boolean(undefined));
        console.log("boolean转换的值为：" + Boolean(NaN));
        var no = ull;
        console.log("Null转换的值为：" + Boolean(no));
    </script>
</body>

</html>

在这里插入图片描述

当其他数据类型和布尔值比较的时，都是先转换为number进行比较；

<!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>
</head>

<body>
    <script>
        //0和false比较   
        var num = 0;
        var boolean1 = false;
        var result1 = num == boolean1;
        console.log(result1);


        //1和false比较
        var num1 = 1;
        var result2 = num1 == boolean1;
        console.log(result2);
    </script>
</body>

</html>

在这里插入图片描述

显式转换：在参数前面加上！

<!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>
</head>

<body>
    <script>
        var ss = true;
        console.log(!ss);
    </script>
</body>

</html>

5.4 undefined 数据类型

变量定义后没有被赋值；

<!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>
</head>

<body>
    <script>
        var ss
        console.log(ss);
    </script>
</body>
</html>

在这里插入图片描述

对象属性值没有赋值；

<!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>
</head>

<body>
    <script>
        var ss = {

        }
        console.log(ss.adv);
    </script>
</body>
</html>

当函数没有返回的时候；

<!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>
</head>

<body>
    <script>
        function inss() {}

        console.log(inss());
    </script>
</body>

</html>

在这里插入图片描述

5.5 Symbol数据类型

Symbol是ES 6新增的一种基本数据类型；
作用：表示的独一无二；
背景：ES5 以字符串为对象属性名容易冲突，为了解决冲突新增了Symbol；
特性：
- 不能使用new关键字，因为Symbol基本数据类型，不是对象，实际上就是类似于String的基本数据类型；
- Symbol函数的参数是对Symbol的描述，所以返回值不同。
- 对象作为Symbol函数的参数，会先转花为字符串
- Symbol只能转化为字符串和布尔值，不能转化为number类型；
- 提供一个方法查询Symbol函数的描述 decription；

<!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>
</head>

<body>
    <script>
        //相同的symbol描述
        var aa = Symbol("小王");
        var bb = Symbol("小王");
        console.log(aa == bb); //false

        //Symbol有一个返回描述的方法

        console.log(bb.description); //小王

        //Symbol作为对象属性的三种方法
        var lesson = Symbol('kecheng');
        //第一种方法
        var classone = {
            [lesson]: "语文"
        };
        console.log(classone);
        //第二种方法
        var classtwo = {};
        classtwo[lesson] = "数学";
        console.log(classtwo);
        //第三种方法
        var classthree = {};
        Object.defineProperty(classthree, lesson, {
            value: "英语"
        });
        console.log(classthree);
    </script>
</body>

</html>

在这里插入图片描述

6 JavaScript 对象的基本知识

6.1 创建对象的三种方式；

通过创建字面量创建；
- 对象的操作方式：
  - 增加/修改对象名.属性名=值
  - 查询对象名.属性名/方法或者对象名[属性]
  - 删除 delete.属性/方法

<!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>
</head>

<body>
    <script>
        // 通过字面量创建对象
        var lesson = {
            subject1: '语文',
            subject2: '数学',
            subject3: '英语',
            begin: function() {
                console.log('上课')
            }
        };
        //增加一个属性
        lesson.subject4 = "自然";
        //增加一个方法
        lesson.end = function() {
            console.log('下课')
        }
        console.log(lesson);
        console.log('------------我是分割线---------------');
        //查看属性或者方法
        console.log(lesson.subject1);
        console.log(lesson["subject2"]);
        lesson.begin();
        lesson.end();
        console.log('------------我是分割线---------------');
        //修改属性
        lesson.subject4 = "大学自然";
        console.log(lesson);
        console.log('------------我是分割线---------------');
        //删除属性
        delete lesson.subject1
        console.log(lesson);
    </script>
</body>

</html>

在这里插入图片描述

通过 new object();创建对象

<!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>
</head>

<body>
    <script>
        var lesson = new Object();
        lesson.subject1 = "语文";
        lesson.start = function() {
            console.log(上课);

        }
        console.log(lesson);
    </script>
</body>

</html>

在这里插入图片描述

通过构造方法创建对象

<!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>
</head>

<body>
    <script>
        function Lesson(sub1, sub2, sub3, sub4) {
            this.sub1 = sub1;
            this.sub2 = sub2;
            this.sub3 = sub3;
            this.sub4 = sub4;
        }
        var lesson = new Lesson("数学", "语文", "英语", "自然")

        console.log(lesson);
    </script>
</body>

</html>

在这里插入图片描述

6.2 new的作用；

创建了一个新的空对象；
将构造函数的作用域指向了新的对象（this 指向了新的对象，this的作用域是全局）
执行构造函数的代码（为属性赋值）；
返回一个新的对象；

6.3 深拷贝和浅拷贝

浅拷贝
- 把一个对象赋值给另外一个对象实际上赋值的是第一个对象的引用，2个引用都指向同一个地址所以修改第一个对象的值时，赋值对象的值也会变动；

<!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>
</head>

<body>
    <script>
        function Lesson(sub1, sub2, sub3, sub4) {
            this.sub1 = sub1;
            this.sub2 = sub2;
            this.sub3 = sub3;
            this.sub4 = sub4;
        }
        var lesson = new Lesson("数学", "语文", "英语", "自然");
        var lesson2 = lesson;
        //修改第一个对象的值
        lesson.sub1 = '大学数学';
        lesson.sub2 = '大学语文';
        lesson.sub3 = '大学英语';
        lesson.sub4 = '大学自然';

        console.log(lesson2);
    </script>
</body>

</html>

在这里插入图片描述

深拷贝
- 引用类型复制后，会在产生新的地址，2个对象相互独立不干扰；

<!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>
</head>

<body>
    <script>
        //实现深拷贝的方法
        var lesson = {
                subject1: '语文',
                subject2: '数学',
                subject3: '英语',
            }
            //把对象进行序列化
        var lessons = JSON.stringify(lesson);
        //反序列化
        var lessona = JSON.parse(lessons);
        //修改第一个对象
        lesson.subject1 = '大学语文';

        console.log(lesson);
        console.log(lessona);
    </script>
</body>

</html>

在这里插入图片描述

7 JavaScript数组

JavaScript数组是列表对象，原型中定义了遍历和操作数组的方法，js数组没有固定的长度以及可以存放任何类型的数据类型；
声明数组的两种方法：

<!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>
</head>

<body>
    <script>
        //使用字面量声明
        var arr = [1, 2, 34, "小王", "小狗屁", true]
        console.log(arr);
        //使用对象声明
        var arr1 = new Array(1, 34, "小王", "小狗屁", true);
        console.log(arr1);
    </script>
</body>

</html>

在这里插入图片描述

JS数组的基本操作

<!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>
</head>

<body>
    <script>
        //使用字面量声明
        var arr = [1, 2, 34, "小王", "小狗屁", true]
            //增加一个参数
        arr[6] = "小王八";
        console.log(arr); //[1, 2, 34, '小王', '小狗屁', true, '小王八']
        //在数组第一位增一个参数
        arr.unshift("增加第一位");
        console.log(arr); //['增加第一位', 1, 2, 34, '小王', '小狗屁', true, '小王八']
        //在数组最后一位增加一个参数
        arr.push("增加最后一位");
        console.log(arr); // ['增加第一位', 1, 2, 34, '小王', '小狗屁', true, '小王八', '增加最后一位']
        //自定义下表增加
        var arr1 = [1, 2, 34, "小王", "小狗屁", true]
        arr1[10] = 10;
        console.log(arr1); //[1, 2, 34, '小王', '小狗屁', true, 空属性 × 4, 10]
        console.log("----------我是分隔线--------")
            //删除
        var arr2 = [4, 5, 6, "大王", "大狗屁", false]
            //删除数组的第一位
        arr2.shift();
        //删除数组的最后一位
        arr2.pop();
        console.log(arr2); // [5, 6, '大王', '大狗屁']
        console.log("----------我是分隔线--------")
            //查询数组和修改数组
        var arr3 = [4, 5, 6, "大王", "大狗屁", false]
        arr3[0] = "小狗";
        console.log(arr3);//(6) ['小狗', 5, 6, '大王', '大狗屁', false]
        console.log(arr3[5]);//false
    </script>
</body>

</html>

在这里插入图片描述

JS数组的进阶操作
- splice 用于删除或者替换数组，以及清空数组；
- join 把数组转化位字符串，以及为数组加上间隔符号；
- concat 拼接数组；

<!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>
</head>

<body>
    <script>
        //使用字面量声明
        var arr = [1, 2, 34, "小王", "小狗屁", true]
            //删除下标0-2的数据
        arr.splice(0, 2);
        console.log(arr); //[34, '小王', '小狗屁', true]
        //将下标0-2的数据修改为小狗
        var arr1 = [1, 2, 34, "小王", "小狗屁", true]
        arr1.splice(0, 1, 2, "小狗", "小狗", "小狗");
        console.log(arr1); //[2, '小狗', '小狗', '小狗', 2, 34, '小王', '小狗屁', true]
        //清空数组
        var arr2 = [1, 2, 34, "小王", "小狗屁", true]
        arr2.splice(0)
        console.log(arr2); //[]
        console.log("----------我是分隔线--------")
            //将数组转化为字符串，并加上分隔符
        var arr3 = [1, 2, 34, "小王", "小狗屁", true]
        console.log(arr3.join("++")); //1++2++34++小王++小狗屁++true

        console.log("----------我是分隔线--------")
            //拼接2个数组
        arr.concat(arr3);
        console.log(arr.concat(arr3)); //(10) [34, '小王', '小狗屁', true, 1, 2, 34, '小王', '小狗屁', true]
    </script>
</body>

</html>

在这里插入图片描述

8 JavaScript运算符

8.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>
</head>
<body>
    <script>
        var denghao = "我是赋值运算符号";
        console.log(denghao);
    </script>
</body>

</html>

8.2 算数运算符

基本的算数运算符；
加号(String和String相加是拼接，String和number相加会先把数字转化为字符串进行拼接，列表和number类型相同)

符号名	符号
+	加号
-	减号
*	乘号
/	除号
%	取余

自增和自减
- 自增：a=a+1 等于 a++或者++a，a++和a–单独使用是没有区别的，在表达式中++a会先进行自增然后再执行表达式，a++是表达式执行完了再进行自增；
- 自减：和自增的逻辑相同；

<!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>
</head>

<body>
    <script>
        var a = 11;
        var b = 2;
        // 加  减  乘  除  取余
        console.log(a + b); //13
        console.log(a - b); //9
        console.log(a * b); //22
        console.log(a / b); //5.5
        console.log(a % b); //1

        //自增++c
        c = 1;
        var b = ++c + 5;
        console.log(b); //7
        //自增e++
        e = 1
        var fb = e++ + 5;
        console.log(fb); //6
    </script>
</body>

</html>

在这里插入图片描述

8.3 比较运算符

符号名	符号
>	大于
>=	大于等于
<	小于
<=	小于等于
==	转换类型等于
===	不转换类型等于

常用的大于小于比较简单举例重点类型转换的比较；

<!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>
</head>

<body>
    <script>
        var a = 1;
        var b = "1";
        //== 会把做比较时会把其他类型值转化为布尔类型，布尔类型存在隐性转换 空字符串和非0或者非NaN都为false
        console.log(a == b); //true
        //=== 在做比较的时候会先判断类型是否相同不同直接false
        console.log(a === b); //false
    </script>
</body>

</html>

在这里插入图片描述

8.4 逻辑运算符

&& 必须满足左边和右边的表达式同时为true才能为真；
| | 左边和右边的表达式其中一个为为true就能为真；
！取反；
优先级 &&的优先级高于| |；加上括号的优先级最高；

<!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>
</head>

<body>
    <script>
        console.log(true && false); //false
        console.log(true || false); //true
        console.log(!false); //true
        console.log(true || false && false); // true
        console.log((true || false) && false); //false
    </script>
</body>

</html>

在这里插入图片描述

8.5 常用的调试技巧

快速定位元素；
设置元素属性
代码调试：
- console();
- debuger

9 流程控制

9.1 if 、if…else、if…else if…else

特性：if 只有一条语句的时候可以不用写{}
条件 ? 表达式1 : 表达式2（条件为true时，执⾏表达式1，否则执⾏表达式2）

<!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>
</head>

<body>
    <script>
        //3岁以下去小班，3-4去中班，5-6岁去大班
        var a = 5;
        //括号里面是值或者布尔表达式
        if (a < 3) {
            //代码块
            console.log("上小班");
        }
        //js不支持3<=a<6这种语法
        else if (a >= 3 && a < 6) {
            //代码块
            console.log("上中班");
        } else {
            console.log("上大半班");
        }

        //三元表达式 进入不吃肥肠就吃牛肉 0:肥肠 1：牛肉
        var eat = 1;
        var result = eat === 1 ? "牛肉" : "肥肠";
        console.log(result);//牛肉
    </script>
</body>
</html>

在这里插入图片描述

9.2 switch

必须使用break，不然会打印所有的语句块；
default 可以使用break；
格式：

switch(n){
	case n:
	代码块
	break;
	case n:
	代码块
	break;
	default:
	break;
}

<!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>
</head>

<body>
    <script>
        var memu = "红烧牛肉";
        switch (memu) {
            case "红烧牛肉":
                console.log("红烧牛肉必须要炖");
                break;
            case "泡椒牛肉":
                console.log("泡椒牛肉必须要爆炒");
                break;
            case "水煮牛肉":
                console.log("水煮牛肉必须嫩");
                break;
            default:
                console.log("不吃了");
        }
    </script>
</body>

</html>

在这里插入图片描述

9.3 for循环

格式：

for (语句 1; 语句 2; 语句 3) {
要重复的代码块
}
// 语句1 声明⼀个变量
// 语句2 指定循环跳出条件
// 语句3 控制变量的变化

<!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>
</head>

<body>
    <script>
        //打印meum
        var meum = ["肝腰合炒", "香辣牛肉", "莲白回锅肉", "青椒肉丝", "羊肉笼笼", "平菇肉片汤"]

        for (var a = 0; a < meum.length; a++) {
            console.log(meum[a]);
        }
    </script>
</body>

</html>

在这里插入图片描述

9.4 while/do…while循环

do…while 能保证代码至少被执行一次
格式：

var a=0
while (条件表达式或者变量) {
代码块
a++
}
do {
代码块
}
while (条件);

<!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>
</head>

<body>
    <script>
        //打印meum
        var meum = ["肝腰合炒", "香辣牛肉", "莲白回锅肉", "青椒肉丝", "羊肉笼笼", "平菇肉片汤"];
        var a = 0;
        while (a < meum.length) {
            console.log(meum[a]);
            a++;
        }
    </script>
</body>

</html>

在这里插入图片描述

9.5 小小挑战

打印1-100之间7的倍数的个数及总和

<!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>
</head>

<body>
    <script>
        var sum = 0;
        var count = 0;
        for (var index = 1; index <= 100; index++) {
            if (index % 7 == 0) {
                sum = sum + index;
                count++;
            }
        }
        console.log(sum); //734
        console.log(count); //14
    </script>
</body>

</html>

在这里插入图片描述

题目二用代码输出下面的图形

<!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>
</head>

<body>
    <script>
        for (var index = 1; index <= 5; index++) {
            for (var indexone = 1; indexone <= index; indexone++) {
                document.write('* ');
            }
            document.write('<br/>');
        }
    </script>
</body>

</html>

在这里插入图片描述