什么是JavaScript
Java和JavaScript的关系就好像老婆和老婆饼的关系，没有关系。
非要说关系：都是编程语言。
JavaScript是Web开发领域中的一种功能强大的编程语言，主要用于开发交互式的网页。
简称JS
网页的组成：
一个完整的网页由三部分组成：
- HTML （网页的主体部分）
- CSS （美化的主体部分）
- JavaScript （实现业务逻辑和页面控制）
以上的举例说明：
网页中最常见的无非就是登陆页面。
HTML无非就是账号框，密码框，登陆按钮。
CSS无非就是美化上述内容。
JS就是当用户点击登陆按钮，获取账号和密码框的内容，去后台进行校验，判断是否账号密码匹配，然后做出相对于的反馈
JS的三大组成：
第一部分：核心语法 （JS代码）
第二部分：DOM文档对象模型 （JS可以控制HTML元素进行相关的操作）
第三部分：BOM 浏览器对象模型（JS可以控制浏览器元素进行相关的操作）
浏览器元素：弹窗。浏览器的宽高，滚动条等等。
JS的特点：
- 简单易用 （只需要用户安装浏览器即可使用）
- 跨平台 和上述一样。
- 支持面向对象
JS常见的开发工具
| 常见的两大开发工具 | VSCode | HBuilderX |
| 优点 | 1什么语言都可以用它编写 | 1.专注于前台设计 |
| 缺点 | 1.第一个优点导致的问题：界面设计不合理，安装的插件需要很多。需要联网等 | 2.功能较少 |
第一个拥有JS代码的HTML网页
之前讲过：网页由HTML,CSS,JS组成。所以绝大部分情况下，JS代码是放在HTML页面中。
绝少情况，暂不做了解。
案例1：打开网页，弹出一个警告框提示用户“请输入正确格式”;
| <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> 我的第一个HTML页面 <script> alert("请输入正确的格式"); </script> </body> </html> |
上面的案例的总结分析：
总结1：JS代码必须放在<script>标签内部。
总结2：script不能交叉嵌套。
总结3：script标签的摆放的顺序可以随意。但是推荐放在body标签内部的最下方。
分析总结3的原因
如果HTML页面中有大量的JS代码。导致需要加载时间较长。
由于JS代码的执行是从上到下。如果将JS代码放在HTML页面的上方。就会导致。执行JS的代码时间过长，导致JS下方的HTML代码未被加载。所以总结3的原因。
HTML页面书写JS代码的常见两种方式
JS代码和CSS代码非常类似，都可以在一个网页中拥有多个代码标签片段。
- 嵌入式：就是刚刚讲解的方法。将JS代码放在script标签中，将script标签放在HTML页面中。（和CSS代码很类似）适用于：JS代码较少。不会影响到我们阅读HTML代码。
- 外链式：适用于JS代码非常多，不适合放在HTML页面中，不然导致不方便阅读HTML代码。
如何使用外链式：
- 也是在适当的位置（body标签的最低部）引入script标签。
- 禁止在标签内部书写JS代码了
- 创建一个外部的JS文件了（后缀为.js文件）
- 这个外部js文件，就不要放script标签了。直接写代码
- 在A步骤中添加src=”xxx.js”路径即可使用。
多学一招：JavaScript异步加载
为了减小JavaScript阻塞问题对页面造成的影响，可以使用HTML5为<script>标签新增的两个可选属性async和defer实现异步加载。
所谓异步加载，指的是浏览器在执行加载JavaScript文件时不阻塞页面的加载和渲染。
该知识点仅做了解。
原因1：浏览器和计算机的执行速度已经非常快了，人的肉眼区分不了一丢丢时间差异带来的视觉效果。
原因2：即使退一万步讲，真的影响到了，使用上述方法也无法得到有效解决。
我们常见的处理方式：生成一个加载页面，提示用户“正在加载中…”。
JS最基础的几行代码
- alert(“xxx”);作用：生成一个警告的弹窗
- prompt(“xxxx”); 生成一个询问框，用户可以输入值。然后点击确定和取消。
点击确定：JS需要收集用户输入的信息（第二章讲解）。点击取消：无事发生。
- confirm(“xxx”); 生成一个询问框,但是不需要输入，只需要选择确定或取消。
以上三个就是JS内置的3个弹窗。（只有3个）
根据不同场合使用不同的弹窗。
- document.write(“xxxx”); 作用：在HTML页面输入一段内容。一般使用场景：用户执行了什么操作，才会显示什么内容。
- console.log(“xxx”); 需要按一下F12才能打开浏览器的控制台。常用于调试BUG。
第一章的注意事项：
转义符：如果遇到特殊符号：需要对其进行转义操作。
/是斜杠,挨着shift的
\是反斜杠：挨着回车上面的 作为转义符使用。
JS中的注释
分为单行注释： //xxx
和
多行注释：
/*
Xxx
Xxx
HBuilderX创建项目的HelloWorld
- 下载安装包并解压，将HbuilderX.exe生成快捷方式在桌面。
- 左上角：文件---新建---项目---普通项目---项目名称---存储路径---基本HTML项目、、
变量
什么是变量：经常改变的量。
变量是程序在内存中申请的一块用来存放数据的空间。
变量由变量名和变量值组成，通过变量名可以访问变量的值。
回顾：Java的变量名的命名规则：
1.不能以数字开头
2.不能使用关键字（Java或JavaScript中自带的相关属性或方法。）
3.严格区分大小写
4.只能够由 数字 字母 下划线 $ 符号组成
5.见名知意 例如age name 而不是 a b c d
6.推荐使用驼峰命名法，例如studentName
（JS的变量名的命名规则，和Java完全一致。）
常见的关键字：
if else switch for class
do while case break contiue
return default new var void
预留关键字：现在还没有自带，但是未来有，已经提前预留了。
implements package public interface
扫盲: var 是varible（翻译：变量） 的缩学
回顾:Java是如何声明变量的: 数据类型 变量名 = 变量值 ;
js如何声明变量: var 变量名 = 变量值 ;
潜台词:不管JS是什么数据类型,都用var.
JS中声明变量的2种方式:
1.先声明再赋值.例如:
var num ;
num = 10;
2.声明的同时也赋值,例如:
var age = 20;
交换俩个变量的值
案例需要:自定义2个变量,要求让他们两个变量进行互换
//幻想成现实生活:张三和李四都拿了一个箱子,并且不能放在地上
//需要完成箱子的交换.
//做法:喊第三个人帮忙.把张三的箱子给第三个人,然后张三拿李四的箱子.,李四就拿第三个人箱子.
var a1 = 100;
var a2 = "张三";
var a3 = a1;
a1 = a2;
a2 = a3;
console.log(a1);
console.log(a2);
数据类型分类
回顾:Java中的数据类型分类:
A.基本数据类型
B.引用数据类型
JS同上，完全一致。
回顾：
Java中的基本数据类型：
1字节：byte boolean
2字节：char short
4字节: int float
8字节：long double
Java中的引用数据类型：
String 数组(Array) 任何Class，不管是你写的类还是JAVA自带的类。
JavaScript的基本数据类型：
number 注意：number是数据类型但不是关键字
string 注意：string在java是引用，在JS是基本
boolean
null
undefined
bigint
symbol
JavaScript的引用数据类型：
数组 Object 函数(方法) 等等
布尔型
boolean读布尔
js的boolean和java的boolean完全一致
体现在:都是基本数据类型 都只有true和false
意义:用程序表示一件事成功或者失败，或表示一个条件成立或不成立。
JavaScript中严格区分大小写，因此true和false值只有全部为小写时才表示布尔型。
js中的number（读数值类型）讲解
一句话总结:即可以存放小数,也可以存储整数
var a = 123;
var b = 12.5;
a和b都是number类型.没有加引号
js中的string（读字符类型）讲解
这里要注意:
js的String和java的String不同之处1:
string在java是引用，在JS是基本
js的String和java的String不同之处2:
string在java中通过双引号声明
string在js 中既可以通过双引号也可以通过单引号声明
例如:
var str1 = "你好";
var str2 = '我好';以上都是string的写法
转义符
我想在页面输出: 你好,我的外号是"大聪明";
document.write("你好,我的外号是"大聪明";");写法是错误的.不能同时存在多个双引号
做法1:我们需要知道 单引号里面可以包着双引号
document.write('你好,我的外号是"大聪明";');
做法2:通过转义符-- 反斜杠(enter上面的)：\ 斜杠：/ (shift左边的)
document.write("你好,我的外号是\"大聪明\";");
常见转义符
null和undefined数据类型讲解
null 表示空的意思 例如:
var str = null;
null的注意事项:没有任何属性或方法可言
undefined 表示未定义的意思 只声明了变量但是未赋值
例如:
var str123 ;//这个str123就是undefined
bigint和symbol数据类型讲解
igint 翻译:大数值
如果存在需求需要计算很大很大(不用去记，因为很大。)数字,那么number将无法实现
例如:下面的number绰绰有余
var num1 = 1111111;
var num2 = 2222222;
console.log(num1+num2);
var num1 = 11111111111111111111;//number
var num2 = 11111111111111111111;//number
console.log(num1+num2);//计算结果出现了误差
所以就需要借助于bigint
bigint类声明方法:
var num3 = 1111111111111111111n;//只需要在最后加n即可
var num4 = 1111111111111111111n;//只需要在最后加n即可
console.log(num3+num4);
symbol讲解:略 常用于独一无二的对象.
数据类型的检查
var num = 11;//number
var str = "11";//string类型
console.log(num);
console.log(str);
以上写法:是我们可以看到的.所以可以知道是什么类型.
但是缺点1:不方便在控制台得知是什么类型
例如我们第一章节学习的prompt语法
var money = prompt("请输入你的金额");//通过money变量接受用户在前台输入的值
console.log(money);//所需我们就要学习如何识别xx变量是什么类型
总结:prompt的返回值都是string
如何判断一个变量是什么类型
语法: typeof xxx 返回是一个数据类型
var str = 123;
console.log( typeof str);//number
str = "123";
console.log( typeof str);//string
为什么要学习数据类型转换？见一下例题:
var num1 = prompt("请输入第一个数");
var num2 = prompt("请输入第二个数");
alert("两数之和为" + (num1 + num2));//这种写法是错误的
原因:prompt返回的是一个string类型,两个string类型相加,是以拼接的形式
如何将字符串转成number类型.
js提供了下面三个方法,各有区别,都要掌握
parseInt()
parseFloat()
Number()
parseInt 将一个字符串类型的数字解析成整数
alert( parseInt("11.12") );//11
alert( parseInt("11.99") );//11 总结1小数后面直接省略,不会四舍五入
alert( parseInt("11.a12") );//11 总结2小数后面直接省略
alert( parseInt("11a.a12") );//11 总结3:解析顺序从左到右,解析到非数字就停止.
alert( parseInt("1a1a.a12") );//1 总结4:只需要记住总结3
alert( parseInt("a11a.a12") );//NaN NAN 翻译: not a numnber 不是一个数字
parseFloat()和上面的语法完全一致,唯一区别保留小数
console.log( parseFloat("11.11") );//11.11
console.log( parseFloat("11.11a") );//11.11
console.log( parseFloat("11.1a1a") );//11.1
console.log( parseFloat("11a.11") );//11
console.log( parseFloat("a11.11") );//NAN
console.log( parseFloat("11.a") );//11
Number()只能将真正的数字解析
console.log( Number("11.11") );//11.11
console.log( Number("11") );//11
console.log( Number("11") );//NAN
算数运算符有如下几种：
+ - * / %
以上五种是最基本的加减乘除和取余
其中取余的注意事项：例题如下
console.log(10%3); //1
console.log(10%-3); //1
console.log(-10%3); //-1
console.log(-10%-3); //-1
总结:取余结果的正负取决于%左边的正负,也就是两个数取余,首先全看成正数
然后结果的正负和%左边的正负一致即可.
** 幂运算 语法: a ** b 理解为a的b次方
console.log(2**3); //8
++ 和 -- 表示自增1 和自减1
有两种用法: a++ 表示先用在加 ++a表示先加再用
做算数运算的注意事项: 任何编程语言都有一个通病
做小数运算会可能损失精度
console.log(0.1+0.2);//0.300000004
所以JS提供了一个方法 来避免这种情况出现
aaa.toFixed(num); 表示保留小数点后面几位小数
aaa表示某个数 num表示保留几位 如果没写默认就是0
console.log( (0.1+0.2).toFixed(3) );
注意事项: 该方法的返回值是string类型.
字符运算符 就是一个 +
var str1 = "张三";
var str2 = "是帅哥";
console.log(str1+str2);//张三是帅哥
注意事项:任何类型 + string = string
所以:我们不仅可以将字符串转型成数字 也可以将任何类型 转成string
最常见的做法: 直接和空字符串相加即可.这样不会影响值的本身.
console.log( typeof (1234 + ""));
根据弹窗，用户输入的数据完成求和运算，能够利用运算符计算用户输入的两数之和
为了避免JavaScript的精度问题，将结果保留两位小数。
var num1 = prompt("请输入第一个数字");
var num2 = prompt("请输入第二个数字");
注意:下面写法是错误的.原因: 因为toFieed方法只能给数字使用
但是prompt方法返回的一定是字符串,所以num1+num2的结果就是字符串.无法调用toFixed方法.
// alert( (num1 + num2).toFixed(2) );
//思考: 是一个一个将Num1和num2转成数字 还是为了节省代码将（num1+num2）看成一个整体然后进行转型
//答案:这里不能为了节省代码. 因为string+string是字符串的拼接
num1 = Number(num1);
num2 = Number(num2);
这里注意:可以改进,如果结果是NAN 我们应该给用户提示一个"请输入合法的数据"
思路:将NAN的值弄清楚是什么类型 通过typeof 得知 NAN 是一个String类型
if ( (num1 + num2).toFixed(2) == "NaN") {
alert("请输入合法的数据");
}else{
alert( (num1 + num2).toFixed(2) );
}
赋值运算符
赋值运算符:最常见的就是 = 将右边的式子赋给左边.
// var a = 2 ;
//不常见的有如下:
// += *= -= /= %=
//例如
// a = a + 1; 等同于 a+=1;
举例:
var a = 3;
a += 2;
console.log(a);//5
a -= 2;
console.log(a);//3
a *= 2;
console.log(a);//6
a /= 2;
console.log(a); //3
a %= 2;
console.log(a); //1
a **= 2;
console.log(a); //1
比较运算符
比较运算符 用来比较两个值 怎么样 返回结果为boolean类型.
例如常见的有以下: > < >= <= != ==
了解一下的 === 表示全等于
==仅仅是判断值是否相等 ===不仅要值相等而且要类型相等
console.log("1" == 1);//true
console.log("1" === 1);//false
逻辑运算符
逻辑运算符的用法主要分为以下4类:
&& 短路与 & 逻辑与
|| 短路或 |逻辑或
用法完全一致 区别如下:
例如 a && b
如果a和b都为真,返回值才为真. 那么当a为false 将不会执行b
例如 a & b
如果a和b都为真,返回值才为真. 当a为false 将会执行b
例如 a || b
如果a和b只要有一个为真,返回值才为真. 那么当a为true 将不会执行b
例如 a | b
如果a和b只要有一个为真,返回值才为真. 当a为true 将会执行b
var num = 1;
false && num++;
console.log(num);//1
true || num++;
console.log(num);//1
var num = 1;
false & num++;
console.log(num);//2
true | num++;
console.log(num);//3
三元运算符也称为三元表达式
语法如下：
条件表达式 ? 表达式1 : 表达式2
如果条件表达式的值为true，则返回表达式1的执行结果。
如果条件表达式的值为false，则返回表达式2的执行结果。
常用于替代简单的if-else语句
举例:
var age = 18;
if (age>18) {
alert("成年了");
} else{
alert("未成年");
}
alert( age>18?"成年了":"未成年" );
流程控制
流程控制.如果没有流程控制,JS的代码将会从上至下依次执行
有了流程控制,可以根据需求来进行代码的执行顺序
JS中的流程控制:无非就是 if 和 switch
其中if分为 简单的if if-else if else if
使用if语句实现只有当年龄（age变量值）大于等于18周岁时，才输出“已成年”，
否则无输出。
var age = 18;
if (age>=18) {
alert("已成年");
}
使用if…else语句实现当年龄（age变量值）大于等于18周岁时，输出“已成年”，
否则输出“未成年”，示例代码如下。
var age = 18;
if (age>=18) {
alert("已成年");
}else{
alert("未成年");
}
使用if…else if…else语句实现对一个学生的考试成绩按分数进行等级的划分：
90~100分为优秀，80~90分为良好，70~80分为中等，60~70分为及格，分数小于60则为不及格。
var score = 75;
if (score > 90) {
alert("优秀")
} else if(score>80) {
alert("良好");
}else if(score>60){
alert("及格");
}else{
alert("不及格");
}
如果可能性较少 就有2-4种,使用if即可 如果可能很多就推荐使用switch
switch语句也是多分支语句，相比if…else if…else语句，
switch语句可以使代码更加清晰简洁、便于阅读，其语法格式如下。
switch ( 表达式 ) {
case 值1:
代码段1;
break;
case 值2
代码段2;
break;
...
default:
代码段n;
}
举例
使用switch语句判断变量week的值，若week变量的值为1~6时输出“星期一”~“星期六”，
为0时输出“星期日”，若没有与week变量的值相等的case值时输出“错误”。
var week = 2;
switch (week){
case 1:
alert("周1");
break;
case 2:
alert("周2");
break;
case 3:
alert("周3");
break;
case 4:
alert("周4");
break;
case 5:
alert("周5");
break;
case 6:
alert("周6");
break;
case 0:
alert("周日");
break;
default:
alert("没有这个日期");
break;
}
注意事项1：break的重要性
如果case中没有break,那么进入case之后,将不会跳出,而是会直接进入后续的case,并且是无条件进入,直到被break或执行完毕
注意事项2：如果存在多个case有相同的结果，怎么节省代码量。
var week = 2;
switch (week){
case 1:
case 2:
case 3:
case 4:
case 5:
alert("工作日");
break;
case 6:
case 0:
alert("节假日");
break;
default:
alert("没有这个日期");
break;
}
循环结构
for (var i = 1; i <= 100; i++) {
console.log(i); // 输出1、2、3、4、5、6……100
}
var i = 1;
while (i <= 100) {
console.log(i);
i++;
}
var i = 1;
do {
console.log(i);
i++;
} while (i <= 100)
常用的跳转语句如下。
continue : 跳过本次循环,执行下一次
break: 直接跳出循环.
举例: 输出1-100 如果是3的倍数就不输出.如果输出了61就停止输出
for(var i = 1; i<=100;i++){
if(i%3==0){
continue;
}
if (i==61) {
break;
}
console.log(i);
}
嵌套循环举例
下面以9层金字塔为例，案例效果如下，分别在页面和或控制台输出：
*
***
*****
*******
*********
***********
*************
***************
*****************
页面输出的方法:
因为是9层 所有直接定义1-9的循环
for(var i = 1 ; i<=9;i++){
开始思考:每一行由什么组成:
答案:空格和星星
所以:控制行数的for循环内部：先打印空格,然后打印**
找规律: 第一行:8个空格+1个星星 第二行:7个空格+3个星星 第三行:6个空+ 5个星星:
结论：第几行的空格数: 空格的个数 = 9-i
结论：第几行的星星数: 2*i-1
for(var j = 1 ; j<=9-i;j++){
document.write(" ");
}
for(var k = 1 ; k<=2*i-1;k++){
document.write("*");
}
控制行数的for循环的最后一行肯定是换行:
document.write("<br>"); //注意:页面的换行指的是<br> 控制台的换行才是 \n
}
控制台输出
var str = "";
for(var i = 1 ; i<=9;i++){
开始思考:每一行由什么组成:
答案:空格和星星
所以:控制行数的for循环内部：先打印空格,然后打印**
找规律: 第一行:8个空格+1个星星 第二行:7个空格+3个星星 第三行:6个空+ 5个星星:
结论：第几行的空格数: 空格的个数 = 9-i
结论：第几行的星星数: 2*i-1
for(var j = 1 ; j<=9-i;j++){
str = str + " ";
}
for(var k = 1 ; k<=2*i-1;k++){
str = str + "*";
}
控制行数的for循环的最后一行肯定是换行:
str = str + "\n";//注意:页面的换行指的是<br> 控制台的换行才是 \n
}
console.log(str);
console.log类似于Java中System.out.println();打印就自动换行
但是JS没有类似于System.out.print();的方法
所以如果想要在控制台实现类似的效果,应该将所有的内容放在一个字符串内.
然后通过console.log打印这个一个字符串
函数
函数的相关概念
/*
JavaScript的函数理解为Java里面的方法，
把一些经常复用的代码，抽取出来封装在一个函数中。
提高程序的可读性，减少开发者的工作量，便于后期的维护。
Java中的方法的语法：
public 返回类型 方法名(数据类型 变量名 , 数据类型 变量 ...){
}
js中函数的分类：
A.内置函数（JS提供的）: console.log(); alert() confirm parseInt... ：
B.自定义函数（程序员自己写的）
其中自定义函数的声明语法如下：
function 方法名(变量名，变量名...){
}
调用： 方法名(参数列表);
函数定义与调用的编写顺序不分前后。
你可以先调用函数，再声明函数
*/
//声明一个无参函数
function a1(){
console.log(123);
}
a1();
//声明一个指定个数的有参函数
function a2(a,b,c){
console.log(a+b+c);
}
a2(1,2,3);
//声明一个若干个数的有参函数
function a3(... a){
for(var i = 0 ; i<a.length ; i++){
console.log(a[i]);
}
}
a3(1,1.1,true,undefined,null,"你好");
//有返回值的函数
function a4(a,b){
return a + b;
}
var sum = a4(10,20);
alert(sum)
变量的作用域
/*
和Java一样 JS的变量也分为局部变量和全局变量（Java的叫法是成员变量，只是概念和全局类似）
*/
function info() {
var age = 18;
}
info();
console.log(age);
//思考以上代码的执行结果是什么
//A.18 B.报错 C.null D.undefined
//答案:B 提示:age is not defined 表示未定义
//原因如下:age是在函数里面定义的理解为局部变量.但是console.log是在函数外调用的.
/*
全局变量：在所有函数之外声明（script标签内部的最开始几行），它的作用域称为全局作用域，在同一个页面文件中的所有脚本内都可以使用。
局部变量：在函数体内利用var关键字声明的变量称为局部变量，仅在该函数体内有效。
*/
函数进阶
//以下知识点掌握即可:用的很少,但是看到了需要知道意思.
//函数的声明 一般就是上面两个知识点即可.就是利用function声明
//不仅有函数 还有一个叫做函数表达式的东西
//函数表达式指的是将函数赋值给变量的表达式，
// 通过“变量名()”的方式即可完成函数的调用，小括号“()”内可以传入参数，示例代码如下。
//函数的写法:
function a1(a){
console.log("我被调用了。参数是" + a)
}
a1(123);
//函数表达式的写法:
var abc = function (a){
console.log("我被调用了。参数是" + a)
};
abc(567);
匿名函数
// 匿名函数自调用:HTML页面解析之后 自动执行的一段代码.只会执行一次.
//例如跳转网页之后提示:登录成功 加载成功
//语法如下:
// (function(){
// alert("登录成功！！！");
// })();
//下面是函数叫做a的函数
function a(){
alert(123);
}
//匿名函数指的就是:没有函数名的函数 但是又拥有了变量名
var a = function(){
alert(456);
}
箭头函数
//箭头函数了解即可:和函数表达式一样 比较鸡肋, 但是需要能看懂它.
//以下3个函数的实际意义完全一样.
function sum(a,b){
return a + b;
}
var fn = (a, b) => a + b;
var fn = (a,b) => {
return a + b;
};
递归函数
//递归函数:了解即可. 函数的内部调用自己函数本身.
//优点:代码简化. 缺点:难得想
//例如声明一个函数 求1-N的和
function sum(n){
var sum = 0;
for(var i = 1 ;i<=n;i++){
sum = sum + i;
}
return sum;
}
var i = sum(100);
alert(i);
//递归的核心1:鸿沟(临界值)
function sumDg(n){
if(n==1){
return 1
}else{
return n + sumDg(n-1);
}
}
alert(sumDg(100));
//案例:求菲不拉切序列 1 1 2 3 5 8 13 21
//求第N项值
function dg(n){
if(n==1 || n == 2){
return 1;
}else{
return dg(n-1) + dg(n-2);
}
}
对象
对象的概念
/*
在JavaScript中，对象属于复杂数据类型，
它是由属性和方法组成的一个对象。
属性是指对象的特征。
方法是指对象的行为。
下面以学生的特征和行为为例进行说明。
学生的特征：姓名、年龄和性别，这些特征可以用对象的属性来表示。
学生的行为：打招呼、唱歌、写作业，这些行为可以用对象的方法来表示。
*/
//将10个学生的成绩输出在页面上。
var arr = [1,2,32,543,65,35,35,654,46,31];
for(var i = 0 ;i<arr.length;i++){
if(i==arr.length-1){
document.write(arr[i] );
}else{
document.write(arr[i] + ',');
}
}
document.write("<hr>");
//将10个学生的全部信息(id name age sex)输出在页面上。
//传统的思路:定义40个变量 或者4个数组 或者二维数组等等
//按照对象的思想:10个学生理解10个对象 将10个对象放在一个数组里面即可
var s1 = {id:1001,name:"张三1" , age:18};
var s2 = {id:1002,name:"张三2" , age:18};
var s3 = {id:1003,name:"张三3" , age:18};
var s4 = {id:1004,name:"张三4" , age:18};
var s5 = {id:1005,name:"张三5" , age:18};
var s6 = {id:1006,name:"张三76" , age:18};
var s7 = {id:1007,name:"张三7" , age:18};
var s8 = {id:1008,name:"张三8" , age:18};
var s9 = {id:1008,name:"张三9" , age:18};
var s10 = {
id :10010,
name:"张三",
age:20,
};
var arr = [s1,s2,s3,s4,s5,s6,s7,s8,s9,s10];
// for(var i = 0 ;i<arr.length;i++){
// if(i==arr.length-1){
// document.write(arr[i] );
// }else{
// document.write(arr[i] + ',');
// }
// }
//注意:上述写法 打印的仅仅是外观的Object而非内部的属性。
// for(var i = 0 ;i<arr.length;i++){
// if(i==arr.length-1){
// document.write(arr[i].id + arr[i].name + arr[i].age +"<br>");
// }else{
// document.write(arr[i].id + arr[i].name + arr[i].age +"<br>");
// }
// }
//以上写法较为麻烦
for(var i = 0 ;i<arr.length;i++){
for(var sx in arr[i]){
document.write(arr[i][sx]);
}
document.write("<br>")
}
创建对象
//判断一个变量是否为对象的小技巧:通过console.log打印.
//如果打印的是一行字符串 就说明是基本数据类型
//如果打印的是一个可以折叠的数据 就表示对象
// var a = 11;
// console.log(a);
// var arr = [1,2,3,4];
// console.log(arr);
/*
如何创建一个JS的对象：
方法1：使用对象的字面量创建对象（理解为直接赋值）
例如：var arr = [1,2,3];，//静态声明数组 字面量创建
就是用大括号“{}”来标注对象成员，
每个对象成员使用键值对的形式保存，即 “key: value”的形式。
多个成员通过逗号隔开
键指的就是独一无二的属性
*/
// var student1 = { 'id' :1001 ,name:"张三" , age : 18 , 'sex-sex' : '男' } ;
// //其中键可以选择性的加引号
// console.log(student1);
// //如何访问对象里面的值的方法1: 通过对象名.属性名即可
// console.log(student1.id + "~" + student1.name + "~" + student1.age );
// //如果存在一些命名不规范的变量 无法通过对象名.属性名访问
// // console.log(student1.sex-sex);这行代码是报错的
// //访问对象里面的值的方法2:通过对象名[属性名]
// console.log(student1['sex-sex']);
// console.log(student1['name']);
//创建对象的补充:如果一开始只知道有对象,但是不知道它有什么属性或属性值,
//那么可以先创建一个空对象壳子
// var s123 = {};
// //后续再声明属性的同时进行赋值
// s123.id = 123;
// s123.name = "Lisi";
// s123.age = "男";
// console.log(s123.id);//123
// console.log(s123.dasd);//undefined
//创建对象的方法2:
//第一步:创建对象的函数(想象成Java的构造函数)
// function Person(id,name,age){
// this.id = id;
// this.name = name;
// this.age = age;
// }
// //第二步:new对象
// var p1 = new Person(123,"王五" , 20);
// console.log(p1);
//使用场景:如果对象很多 就用方法2 反之方法1
//补充:对象由:属性和方法
// var s1 = {
// id :11,
// name:"张三",
// age :18,
// study : function(){
// alert("成功调用了这个对象的这个方法");
// }
// };
// alert(s1.id);
// s1.study();
function Person(id,name,age){
this.id = id;
this.name = name;
this.age = age;
this.eat = function(){
alert("我吃拉面");
}
}
//第二步:new对象
var p1 = new Person(123,"王五" , 20);
p1.eat();
//创建对象的方法3:
//如果谁不知道给对象取什么名字,就叫做Object
var o = new Object();
o.id=1231;
o.name="李四";
console.log(o);
如何遍历一个对象
// var arr = [1,2,4,3];
// console.log(arr);
var s10 = {
id :10010,
name:"张三",
age:20,
sex:'男',
height : 188,
weight :200
};
// console.log(s10);
//由于直接输出s10将只会显示object我们需要内部的属性值/
//方法1:如果只需要某一个属性值, 直接通过s10.属性名即可
//方法2:如果所有的属性值都需要,那么也可以通过s10.属性名 只是比较麻烦.
//学习:如何遍历对象:语法如下:
// for(var i = 0;i<a10.length;i++){
// //错误的写法:1.对象的键并不是012 其次对象并没有长度
// }
//i表示对象的下标(属性) s10表示遍历的对象
for(var i in s10){
console.log(s10[i]);
}
值对象和引用对象
//JS的参数传递 也分为值传递和引用传递
var a = 111;
var b = "你好";
var c = true;
var d = [1,2,3];
function change(a,b,c,d){
a = 222;
b = "我好";
c = false;
d[0] = 123;
}
change(a,b,c,d);
console.log(a);//111
console.log(b);//你好
console.log(c);//true
console.log(d[0]);//123
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
