【JavaScript系列】JS基础语法_从变量到数组一网打尽_有教程有实战

【JavaScript系列】基础语法_从变量到数组一网打尽_有教程有实战

基础语法

JavaScript在浏览器的运行方式

逐行解释

JavaScript的组成

• ECMAScript：JavaScript语法
  • ECMAscript规定了编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准
• Dom：页面文档对象模型
  • 文档对象模型( Document Object Model ,简称DOM ) , 是W3C组织推荐的处理可扩展标记语言的标准编程接口。
    通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)
• Bom：浏览器对象模型
  • BOM (Browser Object Model ,简称BOM)是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行
    互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。

JavaScript的书写位置

js有三种书写模式：行内，内嵌，外部

• 行内：直接写在元素的内部（以on开头的属性，如onclick）
• 内嵌式：写在head中用script元素标注
• 外部：在外部写js文件，再用script元素标注，在标注内添加src属性填写js文件链接

延迟和异步脚本

延迟脚本

HTML4.0为script标签定义了defer属性，这个属性的用途时表面脚本在执行时不会影响到页面的构造。也就是说，脚本会立即下载但是会被延迟执行。类似在脚本文件前加window.load。defer属性只适用于外部脚本文件

<script src="./test.js" defer></script>

异步脚本

HTML5为script标签定义了async属性，这个属性和defer类似都用于处理脚本的行为，也只适用于外部脚本文件，标记为async的脚本文件并不保证按指定他们的先后顺序执行。指定async属性会在加载完毕后执行

<script src="./test1.js" async></script>
<script src="./test.js" async></script>

推荐的应用场景
defer
如果你的脚本代码依赖于页面中的DOM元素（文档是否解析完毕），或者被其他脚本文件依赖。

async
如果你的脚本并不关心页面中的DOM元素（文档是否解析完毕），并且也不会产生其他脚本需要的数据。

如果不太能确定的话，用defer总是会比async稳定。

JavaScript注释

• 单行注释：//
• 多行注释：/**/

JavaScript输入输出语句

代码	说明	归属
alert()	浏览器弹出警示框	浏览器
console.log()	浏览器控制台打印	浏览器
prompt()	浏览器弹出输入框，用户可以输入	浏览器
document.write()	方法将内容写入到HTML文档中	浏览器

    <script>
        alert("弹出一条消息")//浏览器弹出警示框
        console.log("在控制台显示")//只能在控制台显示
        prompt("弹出输入框")//浏览器弹出输入框
    </script>

<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

变量

声明变量：var

var是一个js关键字，用来声明变量，使用该关键字声明后，会自动分配内存空间

• 声明变量

  • var age;//声明一个名为age的变量
    

• 赋值

  • age = 10;//给age赋10的值
    

​

变量的初始化

声明一个变量并直接赋值叫变量的初始化

var age = 10;

案例:变量的输出

填写姓名，年龄，邮箱后显示出来

    <script>
        var name = "小明";
        var age = 10;
        var email = "email@qq.com";
        console.log(name);
        console.log(age);
        console.log(email);
    </script>

案例：变量的输入

弹出一个对话框，提示输入用户名，弹出一个对话框，输出用户输入的

        //输入姓名，把姓名赋给name变量
        var name = prompt("请输入您的姓名");
        //输出name
        alert(name);

变量语法拓展

• 更新变量：如果对一个变量多次赋值，以最后一次赋值为答案。

  • var a = 10;
    var a = 20;
    console.log(a);//a = 20
    

• 声明多个变量：只用一次var，变量名用逗号隔开，分号结尾

  • var a = 10,
    	b = 20,
    	c = 30;
    

• 声明变量特殊情况

  • 情况	说明	结果
    var age;console.log(age)	只声明 不赋值	underfined(未定义)
    console.log(age)	不声明 不赋值 直接使用	报错
    age = 10;console.log(age)	不声明 只赋值	10(在JS中可以不声明直接赋值)

案例：交换变量

        var a = 10,
            b = 20,
            temp = 0;
        //交换前
        console.log(a+"\t"+b);
        temp = a;
        a = b;
        b = temp;
        //交换后
        console.log(a+"\t"+b);

数据类型

数据类型简介

• 在计算机中，不同数据所需占用的空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型

• JavaScript是一种一种弱类型或者说是动态语言，这意味着不用提前声明变量类型，在程序运行的过程中，类型会被自动确定

• 在代码运行时，变量的数据类型时js引擎根据 等号 右边变量值的数据类型判断的，运行完毕后，变量就确定了数据类型

var a = 10;//java: int a = 10;
var b = "javascript";//java: String b = "java";

• javascript拥有动态类型，同时意味着相同变量可以用作不同的类型

var a = 6;//整型
	a = "666"//字符串

简单数据类型与复杂数据类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型

• **值类型：**简单数据类型在存储时，变量中的存储是值本身，因此叫值类型
  • String,Number,Boolean,Undefind,Null(null不是值，是对象)
• **引用类型：**复杂数据类型，在存储时变量中存储的仅仅是地址，因此叫引用类型
  • 通过new关键字创建对象(系统对象、自定义对象)，如Object，Date，Array等

栈和堆

• 栈(操作系统)：由操作系统自动分配释放存放函数的参数值，局部变量等。其操作方式类似数据结构中的栈
  • 简单数据类型存放在栈中 开辟一个新空间 直接存放值
• 堆(操作系统)：存放复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收
  • 复杂数据类型存放在堆 在栈中存放地址 在让地址指向堆中的数据

简单数据类型

JavaScript的简单数据类型及其说明如下

简单数据类型	说明	默认值
Number	数字型，包括整型和浮点型	0
Boolean	布尔值	false
String	字符串	“”
Undefined	声明变量而没有赋值	undefined
Null	var a = null;声明变量a为空值	null

数字型Number

数字型进制

1. 八进制 在程序前面加0表示八进制 (0~7)

   var a = 010;
   

2. 十六进制 在程序前面加0x表示十六进制 (0~9 a~f)

   var a = 0xf;
   

数字型范围

JavaScript中数值的最大值和最小值

• 最大值：Number.MAX_VALUE
• 最小值：Number.MIN_VALUE

数字型特殊值

• 无穷大，大于任何数值：Infinity
• 无穷小，小于任何数值：-Infinity
• 一个非数值Not a number：NaN

验证是否为数值

isNaN():用来判断是否非数字，如果是数字返回false，如果不是数字返回true

console.log(isNaN(12));//返回值：false
console.log(isNaN("red"));//返回值：true

字符串型String

字符串型时可与时引号中的任意文本

字符串引号嵌套

JS可以用引号嵌套（外单内双，外双内单）

var a = "i am 'rich'";//外双内单
var b = 'i am "rich"';//外单内双

字符串转义符

类似HTML中的特殊字符，字符串也有特殊字符，称之为转义符

转义符	解释说明
\n	换行符
\\	斜杠\
\'	单引号
\"	双引号
\t	缩进
\b	空格
\f	进纸（换页）
\r	回车

案例：弹出网页警示框

弹出网页警告框，内容为静夜思

alert("床前明月光,疑是地上霜。\n举头望明月,低头思故乡。")

查询字符串长度

字符串是由若干字符组成的，这些字符的数量就是字符串的长度，通过字符串的length属性可以获取整个字符串的长度。

        //检测获取字符串的长度
        var a = "ma name is andy"
        console.log(a.length);//15

查找字符串中的字符串

1.indexOf() 方法返回字符串中指定文本首次出现的索引（位置）

0 是字符串中的第一个位置，1 是第二个，2 是第三个 …

var str = "Javascript";
var pos = str.indexOf("a");
console.log(pos);//1

2.lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引：

var str = "Javascript";
var pos = str.lastIndexOf("a");
console.log(pos);//3

如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。

3.search() 方法搜索特定值的字符串，并返回匹配的位置

var str = "Javascript";
var pos = str.search("a");
console.log(pos);//1

两种方法，indexOf() 与 search()，是相等的。

这两种方法是不相等的。区别在于：

• search() 方法无法设置第二个开始位置参数。
• indexOf() 方法无法设置更强大的搜索值（正则表达式）。

提取部分字符串

1.slice() 方法提取字符串的某个部分并在新字符串中返回被提取的部分。(前包后不包)

var str = "Javascript is my favourite";
var res = str.slice(4,10);
console.log(res);//script

如果某个参数为负，则从字符串的结尾开始计数。

var str = "Javascript is my favourite";
var res = str.slice(-22,-16);
console.log(res);//script

2.substring() 方法类似slice()，不同之处在于 substring() 无法接受负的索引

var str = "Javascript is my favourite";
var res = str.slice(4,10);
console.log(res);//script

3.substr() 方法类似slice()，不同之处在于第二个参数规定被提取部分的长度。

var str = "Javascript is my favourite";
var res = str.substr(4,6);
console.log(res);//script

如果省略第二个参数，则该 substr() 将裁剪字符串的剩余部分。

var str = "Javascript is my favourite";
var res = str.substr(4);
console.log(res);//script is my favourite

如果首个参数为负，则从字符串的结尾计算位置

var str = "Javascript is my favourite";
var res = str.substr(-22);
console.log(res);//script is my favourite

4.charAt() 方法返回字符串中指定下标（位置）的字符串

var str = "Javascript is my favourite";
var res = str.charAt(0);
console.log(res);//J

5.charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码：

var str = "Javascript is my favourite";
var res = str.charCodeAt(0)
console.log(res);//74

替换字符串内容

replace() 方法用另一个值替换在字符串中指定的值

var str = "Javascript is my favourite";
var n = str.replace("Javascript","java");
console.log(n);//java is my favourite

replace() 方法不会改变调用它的字符串。它返回的是新字符串。replace() 默认只替换首个匹配：

var str = "Javascript is my Javascript";
var n = str.replace("Javascript","java");
console.log(n);//java is my Javascript
console.log(str);//Javascript is my Javascript

replace() 对大小写敏感。因此不对匹配 JAVASCRIPT：

var str = "Javascript is my Javascript";
var n = str.replace("JAVASCRIPT","java");
console.log(n);//Javascript is my Javascript

如需执行大小写不敏感的替换，需要使用正则表达式 /i（大小写不敏感）

var str = "Javascript is my love";
var n = str.replace(/JAVASCRIPT/i,"java");
console.log(n);//java is my love

如需替换所有匹配，请使用正则表达式的 g 标志（用于全局搜索）

var str = "Javascript is my Javascript";
var n = str.replace(/Javascript/g,"java");
console.log(n);//java is my java

转换为大写和小写

1.toUpperCase() 方法把字符串转换为大写

var str = "Javascript is my love";
var n = str.toUpperCase();
console.log(n);//JAVASCRIPT IS MY LOVE

2.toLowerCase() 把字符串转换为小写：

var str = "Javascript is my love";
var n = str.toLowerCase();
console.log(n);//javascript is my love

字符串拼接

多个字符串之间可以用+进行拼接，其拼接方式为字符串+任何类型=拼接之后的新字符

var a = "北京",
    b = "大学";
console.log(a+b); //北京大学    

案例：显示年龄

弹出一个输入框，需要用户输入年龄，之后再弹出一个警示框显示"您今年xx岁了"。

//显示年龄
var age = prompt();
alert("您已经"+age+"岁了");

布尔型Boolean

布尔值型有两个值：true和false；true代表1 false代表0

//Boolean布尔型
var a = true;
var b = false;
console.log(1+a);//2
console.log(1+b);//1

Underfined和Null

一个声明后没有被赋值的变量会有一个默认值underfined

underfined与字符串相加会直接组合

underfined与数字相加的结果是NaN

var a;
console.log(a+"芜湖");//undefined芜湖
console.log(a+1);//NaN

null与字符串相加会直接组合

null与数字相加的结果即为数字

var a = null;
console.log(a+"芜湖");//null芜湖
console.log(a+6)；//6

获取变量数据类型

typeof获取数据类型

typeof可以用来获取变量的数据类型

var num = 10;
console.log(typeof num);//number
var str = "芜湖";
console.log(typeof str);//string

constructor获取变量的构造函数

"John".constructor                 // 返回函数 String()  { [native code] }
(3.14).constructor                 // 返回函数 Number()  { [native code] }
false.constructor                  // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor              // 返回函数 Array()   { [native code] }
{name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }
new Date().constructor             // 返回函数 Date()    { [native code] }
function () {}.constructor         // 返回函数 Function(){ [native code] }

字面量

字面量是源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值

• 数字字面量：8，9，10
• 字符串字面量：“zoom”,“nike”
• 布尔字面量：true，false

数据类型转换

使用表单，prompt获取过来的数据默认是字符串类型的，此时不能直接简单的进行加法运算，而需要转换变量的数据类型，通俗来说，就是把一种数据类型的变量转换成另一种数据类型

• 转换为字符串类型
• 转换为数字型
• 转换为布尔型

转换为字符串

• toString()和String()使用方式不一样
• 第三种转换方式也叫做隐式转换

方式	说明	案例
toString()	转换为字符串	var num = 1;alert(num.toString());
String()强制转换	转换为字符串	var num = 1;alert(String(num));
加号拼接字符串	和字符串拼接的结果都是字符串	var num = 1;alert(num+“我是字符串”);

//toString()
var num = 10;
var str = num.toString();
console.log(str);//10
console.log(typeof str);//string
//String
var num2 = 10;
var str2 = String(num2);
console.log(str2);//10
console.log(typeof str2);//string
//使用+拼接字符串
var num3 = 10;
var str3 = ""+10;
console.log(str3);//10
console.log(typeof str3);//string

转换为数字型

方式	说明	案例
parseInt(string)函数	将string类型转换为整数型	parseInt(‘78’)
parseFloat(string)	将string转换为浮点型	parseFloat(‘78.21’)
Number()强制转换函数	将string转换为数值型	Number(‘12’)
js隐式转换(- * /)	利用运算符隐式转换为数值型	‘12’ - 0

        //parseInt
        console.log(parseInt('3.14'));//3取整
        console.log(parseInt('120px'));//120 自动去掉px
        console.log(parseInt('rem120px'));//NaN  不认识

        //parseFloat
        console.log(parseFloat('3.14'));//3.14
        console.log(parseFloat('120.5px'));//120.5
        console.log(parseFloat('rem120px'));//NaN

        //Number
        console.log(Number('20'));//20

        //隐式转换
        console.log('12' - 0);//12
        console.log('12' - '10');//2
        console.log('12' * 1);//12

案例：计算年龄

在页面弹出一个输入框，输入出生年份计算年龄。

        var year = prompt("请输入您的出生年份");
        alert("您今年已经"+(2022 - year)+"岁了！");

案例：简单加法器

计算两个数的值，用户输入第一个值后，继续弹出第二个输入框并输入第二个值，最后通过弹出窗口显示两次输入相加的结果。

        var num = prompt("请输入第一个数");
            num2 = prompt("请输入第二个数");
        var sum = (num - 0) + (num2 - 0);    
        alert(sum);

转换为布尔型

方式	说明	案例
Boolean()函数	其他类型转换成布尔值	Boolean(‘true’)

• 代表空、否定的值会被转换成false，如’'、0、NaN、null、underfined
• 其余值都会被转换为true

        console.log(Boolean(''));//false
        console.log(Boolean(0));//false
        console.log(Boolean(NaN));//false
        console.log(Boolean(null));//false
        console.log(Boolean(undefined));//false
        console.log(Boolean(123));//true

数据类型分类和判断

分类

• 基本类型(值类型)
  • String：任意字符串
  • Number：任意数字
  • boolean：true和false
  • undefined：undefined
  • null：null
• 对象类型(引用类型)
  • Object：任意对象
  • Function：一种特别的对象(可以执行)
  • Array：一种特别的对象(数值下标，内部数据是有序的)
• 相关问题

  • undefined和null的区别

    • null代表定义并赋值了，只是值为null
    • undefined代表定义了但未赋值

  • 什么时候给变量赋值null

    • 初始赋值为null，表明将要赋值为对象
    • 让b指向的对象成为垃圾对象

  • 严格说明变量类型与数据类型

    • 数据的类型

      • 基本类型
      • 对象类型

    • 变量的类型

      • 基本类型：保存的是变量的值
      • 引用类型：保存的是变量的地址值

判断

• typeof：返回数据类型的字符串表达
  • 可以判断undefined / 数值 / 字符串 / 布尔值 /function
  • 不能判断null / object / Array
• instanceof：用于判断对象的具体类型返回一个布尔值
  • 可以判断：Array / Object / Function
• === / ==
  • 可以判断undefined / null

基本类型判断：

        var a;
        console.log(a,typeof a,typeof a === "undefined",a === undefined)
        //undefined	'undefined'	true true

        var a = 3;
        console.log(a,typeof a,a === 3,typeof a === 'number');
        //3 'number' true false true

        var b = 'nice';
        console.log(b,typeof b,b === 'nice',typeof b === 'string');
        //nice string true true

        var c = true;
        console.log(c,typeof c,typeof c === 'boolean');
        //true 'boolean' true

        var d = null;
        console.log(d,typeof d,d === null,typeof d === 'null');
        //null 'object' true true

对象类型判断：

var a = {
    a1:[1,'abc',console.log],
    a2:function(){
        console.log('a2');
        return function(){
            return 'Nike';
        }
    }
}
console.log(a instanceof Object,a instanceof Array);//true false
console.log(a.a1 instanceof Array,a.a1 instanceof Object);//true true
console.log(a.a2 instanceof Function,a.a2 instanceof Object);//true true
console.log(typeof a.a2 === 'function');//true
console.log(typeof a.a1[2]);//function
a.a1[2](666);//666
console.log(a.a2()());//Nike

案例：综合练习

依次询问用户的姓名、年龄、性别并打印在警示框

var name = prompt("请输入您的姓名");
	age = prompt("请输入您的年龄");
	sex = prompt("请输入您的性别");
alert('您的姓名是'+name+'\n'+'您的年龄是'+age+'\n'+'您的性别是'+sex)

数据、变量、内存

什么是数据？

• 存储在内存中代表特定信息的东西
• 数据的特点：可传递，可运算

什么是内存？

• 内存条通电后产生的可存储数据的临时空间
• 一块空间的数据
  • 内部存储的数据
  • 地址值
• 内存分类
  • 栈：全局变量/局部变量
  • 堆：对象

什么是变量？

• 可变化的量，由变量名和变量值组成
• 每个变量都对应一块内存区域，变量名用来查找对应的内存

内存数据变量之间的关系？

• 内存是容器, 用来存储不同数据
• 变量是内存的标识, 通过变量我们可以操作(读/写)内存中的数据

JS引擎如何管理内存？

• 内存生命周期
  • 分配小内存空间，可以得到他的使用权
  • 存储数据，可以反复进行操作
  • 释放小内存空间
• 释放内存
  • 局部变量：函数执行完自动释放
  • 对象：成为垃圾对象=》垃圾回收器回收

运算符

运算符用于实现赋值，比较，和执行算术运算等功能的符号

算数运算符

运算符	描述	实例
+	加	1 + 1 = 2
-	减	2 - 1 = 1
*	乘	2 * 3 = 6
/	除	6 / 3 = 2
%	取余	9 % 2 = 1

递增递减运算符

如果需要反复给数字加一或者减一可以用递增++，或者**递减–**运算符完成

前置递增：++a先自加后返回值

**后置递增：a++**先返回值再自加

比较运算符

比较运算符/关系运算符，是两个数据比较是所使用的运算符，比较运算符会返回一个布尔值

运算符名称	说明	案例	结果
<	小于	1<2	true
>	大于	1>2	false
>=	大于等于	2 >=2	true
<=	小于等于	3<=2	false
==	等于(会自动转换数据类型)	3==‘3’	true
!=	不等于	3!=3	false
===	全等(值和数据类型都完全一致)	3 === ‘3’	false

逻辑运算符

运算符	描述
&&	逻辑与
||	逻辑或
!	逻辑非

赋值运算符

赋值运算符向 JavaScript 变量赋值。

运算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

三元运算符

语法：(条件) ? 表达式1 : 表达式2

上面代码中，如果“条件”为true，则返回“表达式1”的值，否则返回“表达式2”的值

如果变量 age 的值小于 18，变量 voteable 的值将是 “太年轻”，否则变量 voteable 的值将是 “足够成熟”。

var voteable = (age < 18) ? "太年轻":"足够成熟";

流程控制

条件语句

if 语句

使用 if 语句来规定假如条件为 true 时被执行的 JavaScript 代码块

语法

if (条件) {
    如果条件为 true 时执行的代码
} 

else 语句

使用 else 语句来规定假如条件为 false 时的代码块。

语法

if (条件) {
    条件为 true 时执行的代码块
} else { 
    条件为 false 时执行的代码块
}

else if 语句

使用 else if 来规定当首个条件为 false 时的新条件。

语法

if (条件 1) {
    条件 1 为 true 时执行的代码块
} else if (条件 2) {
    条件 1 为 false 而条件 2 为 true 时执行的代码块
 } else {
    条件 1 和条件 2 同时为 false 时执行的代码块
}

案例：进入网吧

弹出一个输入框，输入用户年龄，如果大于18岁，可以进入网吧

 var age = prompt("请输入您的年龄");
        if(age >= 18){
            alert("您可以进入网吧");
        }else{
            alert("您还是未成年哟");
        }

案例：判断闰年

弹出输入框，用户输入年份，把结果用提示框弹出来

var year = prompt("请输入年份");
    if(year % 4 == 0){
        alert(year+"年是闰年")
    }else{
        alert(year+"年是平年")
    }

案例：判断成绩

如果90分以上，A；80_90：B，7080：C；60~70D；60以下：E

var score = prompt("请输入您的成绩");
        if(score >= 90){
            alert("您的成绩为A")
        }else if(score >= 80 && score < 90){
            alert("您的成绩为B")
        }else if(score >= 70 && score < 80){
            alert("您的成绩为C")
        }else if(score >= 60 && score < 70){
            alert("您的成绩为D")
        }else if(score < 60 ){
            alert("您的成绩为E")
        }

案例：数字补0

用户输入数字，如果数字小于10，则在前面加上一个0，如果大于10则不需要加0，直接输出

var num = prompt("请输入一个数");
        console.log(num < 10 ? '0' + num : num);

分支语句

switch 语句

switch 语句用于基于不同条件执行不同动作。

语法

switch(表达式) {
     case n:
        代码块
        break;
     case n:
        代码块
        break;
     default:
        默认代码块
} 

注意事项：

• 计算一次 switch 表达式
• 把表达式的值与每个 case 的值进行对比
• 如果存在匹配，则执行关联代码
• siwtch中表达式和case的关系为全等

break 关键词

如果 JavaScript 遇到 break 关键词，它会跳出 switch 代码块。

default 关键词

default 关键词规定不存在 case 匹配时所运行的代码：

案例：判断今天星期几

getDay() 方法返回 0 至 6 之间的周名数字（weekday number）。

(Sunday=0, Monday=1, Tuesday=2 …)

本例使用周名数字来计算周的名称：

switch (new Date().getDay()) {
    case 0:
        day = "星期天";
        break;
    case 1:
        day = "星期一";
         break;
    case 2:
        day = "星期二";
         break;
    case 3:
        day = "星期三";
         break;
    case 4:
        day = "星期四";
         break;
    case 5:
        day = "星期五";
         break;
    case 6:
        day = "星期六";
} 
console.log(day);

案例：查询水果

弹出输入框，输入水果就弹出水果的价格，如果没有则显示没有此水果

var fruit = prompt("请输入一个水果的名称");
        switch(fruit){
            case '苹果':
                alert("1元")
                break;
            case '橘子':
                alert("2元")
                break;
            case '菠萝':
                alert("3元")
                break;
            case '榴莲':
                alert("100元")
                break;   
            default:
                alert("没有该水果");
        }

循环语句

for 语句

在程序中，一组被重复执行的语句被称之为循环体，取决于循环的终止条件，由循环体及循环终止条件组成的语句被称之为循环语句。

语法：

for (语句 1; 语句 2; 语句 3) {
     要执行的代码块
}

语句 1 在循环（代码块）开始之前执行。

语句 2 定义运行循环（代码块）的条件。

语句 3 会在循环（代码块）每次被执行后执行。

案例：1~100累加

var sum = 0;
for(var i = 1;i <= 100;i++){
    sum += i;
}
alert(sum);

案例：求1~100的平均值，奇数和，偶数和，能被3整除数字的和

var sum = 0;
var enevSum = 0;
var oddSum = 0;
var num = 0;
for(var i = 1;i <= 100;i++){
    sum += i;
    if(i % 2 == 0){
        enevSum += i;
    }else{
        oddSum += i;
    }
    if(i % 3 == 0){
        num += i;
    }
}
var average = sum / 100;
console.log("平均值为"+average);
console.log("奇数和为"+oddSum);
console.log("偶数和为"+enevSum);
console.log("能被三整除的和为"+num);

案例：求学生成绩

输入班级人数，然后依次给每个学生输入成绩，最后打印总成绩和平均分

var classNum = prompt("请输入班级人数");
var sum = 0;
for(var i = 1;i <= classNum;i++){
    sum += parseInt (prompt("请输入第"+i+"个同学的分数"))
}
alert("班级的总分是"+sum+"\n"+"班级平均分是"+sum/classNum)

案例：一行打印五颗*

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

案例：打印五行无列星星

var str = '';
for(var i = 0;i < 5;i++){
    for(var j = 0;j < 5;j++){
        str += "★"
    }
    str += "\n"
}
console.log(str);

案例：打印n行n列

var row = prompt("请输入你要打印的行数")
var col = prompt("请输入你要打印的列数")
var str = '';
for(var i = 0;i < row;i++){
    for(var j = 0;j < col;j++){
        str += " ★"
    }
    str += "\n"
}
alert(str);

案例：打印倒三角形

var str = '';
for(var i = 0;i < 10;i++){
    for(var j = i;j < 10;j++){
        str += " ★"
    }
    str += "\n"
}
console.log(str);

案例：打印九九乘法表

var str = '';
for(var i = 1;i <= 9;i++){
    for(var j = 1;j <= i ;j++){
        str += j +'x' + i + '=' + i*j+'\t';
    }
    str +="\n";
}
console.log(str);

while 语句

while语句可以在条件表达式为真的时候，循环执行指定的一段代码，直到表达式不为真时结束循环。

语法：

while(条件表达式){
	循环体代码
}

案例：打印1-100

var i = 1;
while(i <= 100){
    i++
    console.log(i);
}

案例：计算1~100的和

var i = 1,
    sum = 0;
while(i <= 100){
    sum += i;
    i++;
}
console.log(sum);

案例：弹出提示框问，你爱我吗？如果输入爱，则结束，否则一致询问

while(true){
    var ask = prompt("你爱我吗？");
    if(ask == "爱"){
        alert("我也爱你")
        break;
    }
}

do-while 语句

do-while 是while语句的变体，该循环会先执行依次代码块，然后再对表达式进行判断，如果条件为真，就会重复执行循环体，否则会退出循环。

案例：打印1-100

var i = 1;
do {
    console.log(i);
    i++
} while (i <= 100);

案例：计算1-100的和

var i = 1,
	sum = 0;
do{
	sum += i;
	i++
}while(i <= 100);
console.log(sum);

For/In 语句

for-in是一种精准的迭代语句，可以用来枚举对象的属性。

整个国产会一直持续到对象中的所有属性都被枚举一次，所有属性都会被返回一次

语法：

for(变量 in 对象/数组){

}

var arr = [1,2,3,4];
for (var k in arr) {
    console.log(arr[k]);//1,2,3,4
}

流程控制关键字

continue 关键字

continue关键字用于立即跳出本次循环，继续下一次循环

案例：连续吃五个苹果，但是第三个苹果有虫子，跳过不吃，打印出吃苹果的顺序

for(var i = 0;i < 5;i++){
    if(i == 2){
        continue
    }
    console.log("我在吃第"+(i+1)+"个苹果");
}

break 关键字

break关键字用于立即跳出整个循环

案例：连续吃五个苹果，但是吃到第三个的时候有虫子，剩下的都不吃了

for(var i = 0;i < 5;i++){
    if(i == 2){
        break;
    }
    console.log("我在吃第"+(i+1)+"个苹果");
}

综合案例

简易ATM

var money = 100.0;
out:
while(true){
    var SystemIn =prompt("您当前的余额为    "+money+"\n请输入您要的操作\n"+"1.存钱\n"+"2.取钱\n"+"3.退出");
    switch(SystemIn){
        case '1':
            var moneyIn = parseFloat(prompt("请输入你要存入的钱"));
            money += moneyIn;
            break;
        case '2':
            var moneyOut = parseFloat(prompt("请输入你要取出的钱"));
            money -= moneyOut;
            break;
        case '3':
            alert("您已退出系统")
            break out;
    }
}

数组

创建数组

• 利用new创建数组var arr = new Array();
• 利用数组字面量创建数组var arr = [1,2,3,4,5]

数组的类型：

​ 数组中可以存放任意类型的数据var arr = [1,"小明",57.5,true]

访问数组

数组的索引

索引(下标)：用来访问数组元素的需要，从0开始

var arr = [1,"小明",57.5,true]
alert(arr[0])//1

遍历数组

遍历就是把数组中的每个元素都访问一次

var arr = [1,2,3,4,5,6,7];
for(var i = 0;i < arr.length;i++){
    alert(arr[i]);
}

数组长度

使用数组名.length可以访问数组的长度

案例：数组求和以及平均值

求数组2，6，1，7，4所有元素的和以及平均值

var arr = [2,6,1,7,4];
var sum = 0;
for(var i = 0;i < arr.length;i++){
    sum += arr[i];
}
var avg = sum / arr.length;
console.log('和是'+sum+',平均值是'+avg);

案例：求数组最大值

求数组2，6，1，77，52，25，7中的最大值

var arr = [2,6,1,77,52,25,7];
var max = 0;
for(var i = 0;i < arr.length;i++){
    if(arr[i]>max){
        max = arr[i];
    }
}
console.log(max);

案例：把数组转化为字符串

要求将数组red,green,blue,pink转化为字符串，并用|分割

var arr = ['red','green','blue','pink'];
var sum = '';
for(var i = 0;i < arr.length;i++){
    sum += arr[i]+"|";
}
console.log(sum);

数组扩容

可以通过修改length长度以及索引号来增加新元素

修改length长度：

var arr = [1,2,3];
arr.length += 1;
arr[3] = 4;
console.log(arr[3]);

修改索引数：

var arr = [1,2,3];
arr[3] = 4;
console.log(arr[3]);

案例：新建一个数组里面存放10个整数(1~10)

var arr = new Array(10);
for(var i = 0;i < arr.length;i++){
	arr[i] = i+1;
}
	console.log(arr);

案例：筛选数组

将数组2,0,6,77,0,52,0,25,7中大于10的数筛选出来，并放入新数组

var arr1 = [2,0,6,77,0,52,0,25,7];
var arr2 = [];
for(var i = 0,j = 0;i < arr1.length;i++){
	if(arr1[i]>10){
		arr2[j] = arr1[i]
		j++;
	}
}
console.log(arr2);

方法2

var arr1 = [2,0,6,77,0,52,0,25,7];
var arr2 = [];
for(var i = 0;i < arr1.length;i++){
	if(arr1[i]>10){
		arr2[arr2.length] = arr1[i]
	}
}
console.log(arr2);

案例：删除数组指定元素

要求将数组[2,0,6,1,77,52,0,25,7]中的0去掉，形成一个不包含0的数组

var arr = [2,0,6,1,77,52,0,25,7];
var newarr = [];
for(var i = 0;i < arr.length;i++){
    if(arr[i] != 0){
        newarr[newarr.length] = arr[i];
    }
}
console.log(newarr);

案例：翻转数组

要求将[1,2,3,4,5,6,7]反转成[7,6,5,4,3,2,1]

var arr1 = [1,2,3,4,5,6,7];
var temp = 0;
for(var i = 0;i < arr1.length/2;i++){
    temp = arr1[i];
    arr1[i] = arr1[arr1.length-1-i];
    arr1[arr1.length-1-i] = temp;
}
console.log(arr1);

案例：冒泡排序

将数组[5,8,3,6,7,1,2]按顺序排列

var arr = [5,8,3,6,7,1,2];
var temp = 0;
for(var i = 0;i < arr.length-1;i++){
    if(arr[i]>arr[i+1]){
        temp = arr[i+1];
        arr[i+1] = arr[i];
        arr[i] = temp;
    }
}
console.log(arr);