本文详细介绍了JavaScript的基础知识，包括数据类型（Number、String）、变量定义、运算符（算术、关系、逻辑、复合、三元运算符）以及循环语句（if、switch、while、for）。还探讨了JavaScript中的函数定义、数组操作和遍历方法。通过实例讲解了如何在HTML中使用JavaScript，并提供了函数、数组操作的实用技巧。
Java Script
写一个JS文件，在html中调用实行JS内容。
<script src="./index.js"></script>可以在css代码、head、body中实行。
一、数据类型、变量和直接量
2.1
JavaScript含义：
1.是一种基于对象的开发模式，对象之间是父子关系。最大的对象是window对象，包含若干个子对象。
2.所有的属性和操作理论上前边都需要加对象名，window对象是最外层的对象，可除外。
弹窗类型：
alert 警告
confrim 确认 有返回值，会返回系统一个正确或错误的结果
prompt 弹出一个输入框，返回输出的字符串
document.write("要输出的字符串")：用来动态输出HTML文档。其中，document对象是window对象的子对象。document对象在使用的时候不能忽略。
console.log用来写在控制台。
innerHTML属性：可设置或返回单元格的开始标签和结束标签之间的HTML。
语法：tabledataObject.innerHTML=text
JavaScript编写注意事项：
每条命令独占一行，每行命令用分号隔开。
JavaScript注释符：
1.单行注释：//hjgjhgjg
2.多行注释：/gjgjhgjhgjgg/（杠，星号 代码 星号，杠）
2.2变量的定义：
变量命名：
字母、数字、下划线”-“或者”$",但是不能已数字开头
变量名区分大小写 第一个单词首字母小写，后面的单词首字母需大写
变量名必须放在同一行中
不能使用脚本语言中保留的关键字、保留字、true、false和null作为标识符
以下关键字不能作为变量名：
JavaScript中不能作为变量名的关键字和保留字总结：
1、js中的关键字：
| break | case | catch | continue | default |
|---|---|---|---|---|
| delete | do | else | finally | for |
| function | if | in | instanceof | new |
| return | switch | this | throw | try |
| typeof | var | void | while | with |
2、js中的保留字：
| abstract | boolean | byte | char | class |
|---|---|---|---|---|
| const | debugger | double | enum | export |
| extends | final | float | goto | implements |
| import | int | interface | long | native |
| package | private | protected | public | short |
| static | super | synchronized | throws | transient |
| volatile |
2.3JavaScript中的数据类型
在JavaScript中有5种不同的数据类型：
1.string 字符串。最抽象的数据类型，信息传播的载体
2.number 数值。 最原始的数据类型，表达式计算的载体
3.boolean 布尔值。 最机械的数据类型，逻辑运算的载体
4.function 函数
3种对象类型：
Object 对象 Date 日期 Array 数组
2个不包含任何值的数据类型：
null 空、无。表示不存在，当为对象的属性赋值为null，表示删除该属性。
undefined 未定义。当声明变量却没有赋值时会显示该值。可以为变量赋值为undefined
2.3.1Number类型
Number类型包含两种数值：整型和浮点型。
整型：最基本的数值字面是十进制整数。
var box=100；//十进制整数
八进制数值字面量，（以8为基数，）前导必须是0，八进制序列（0~7）。
var box=070；//八进制，自动解析为56 0~7
var box=079；//无效的八进制，自动解析为79
var box=08；//无效的八进制，自动解析为8
十六进制字面量前面两位必须是0x，后面是（0~9及A~F）
var box=0xA；//十六进制，10
var box=0x1f；//十六进制，31
浮点类型，就是该数值中必须包含一个小数点，并且小数点后面必须至少有一位数字。
var box=3.8；
var box=0.8；
var box=.8//有效，但不推荐此写法。
由于保存浮点数值需要的内存空间比整型数值大两倍，因此JS会自动将可以转换为整型的浮点数值转成为整型。
var box=8.//小数点后面没有值，转换为8
var box=12.0；//小数点后面是0，转换为12
对于那些过大或者过小的数值，可以用科学计数法来表示（e 表示法）。用e表示该数值的前面10的指数次幂。
var box=4.12e9；//即4120000000
特殊的数值：
正无穷大：infinity
例如：alert（5/0）
负无穷大：-infinity
NaN：（not a number）表示一个非数字的特殊值，与任何数值都不相等，与他自己也不相等。
isNaN函数
在判断真假的时候，先试图将括号中的数据转换为数值类型，如果能够转换成功，则判断结果的返回值是False，不能隐式的转换为数字，则返回值才为True.
例如：alert（perselnt（window.prompt（“请输入年龄：”）））
使用Number对象的几个属性可以获得几个特殊的数值：
Number.MAX-VALUE 可以表示最大数字。
Number.MIN--VALUE 可以表示最小数字
Number.NaN 表示特殊的非数字值
Number.POSITIVE-INFINITY 表示正无穷大的特殊值
Number.NEGATIVE-INFINITY 表示负无穷大的特殊值
数字的使用：+ - * / %
Math对象中保存的函数，如Math.sin（）；Math.sqrt（）；
2.3.2 String类型
1.
String类型用于表示零或多个字符组成的字符串，可以由双引号（”）或单引号（’）表示。
2.
JavaScript中没有char类型，要表示单个字符，必须使用长度为1的字符串。
var box=‘Zhen’
var box="Zhen"
3.
单引号和双引号表示的字符串解析方式不同，必须成对儿出现，不能穿插使用
例如 ： var box=‘张三”；//出错
4.
由单引号定界的字符串可以含有双引号，由双引号定界的字符串可以含有单引号。如：“大家好我叫 ‘kitty’ ”
5.
String类型包含了一些特殊的字符字面量，也叫转义序列。反斜杠是一个转义字符。
2.4.1数值的转换
数据类型的转换
1.强制转换为数值类型：s=Number（s）number转换
2.tostring 可以将数字串转换为指定进制的数字字符串
3.null和undefined这两个值是没有tostring方法的
4.转换为字符串 string与toString
2.4.2布尔类型的转换规则
三、运算符
3.1.1算术运算符
JavaScript 算术运算符用于执行变量与/或值之间的算术运算。
++ 是指变量在自己原来的值的基础上加1，加完后，再存回到改变量中
-- 是指变量在自己原来的值的基础上加1，减完后，再存回到该变量中。
只能用在变量的运算基础上，会修改之前的变量值，特殊点在于存回先前变量中，（--）++i；//前置运算 i++（--）;//后置运算
前置和后置的区别：
后置运算：先使用变量的值，然后再进行自增或自减的运算
前置运算：先进行自增或自减的运算，然后再使用变量的值
3.1.2关系运算符
1.关系运算符种类
关系运算符执行的是比较运算。每个关系都返回一个布尔值。
关系运算符：
3.1.3逻辑运算符
1.逻辑运算符通常用于布尔值的操作，一般关系运算符的配合使用，有三个逻辑运算符：
逻辑与（&&）：左右两个表达式的值都为true的时候，结果才为真 true
逻辑或（||）：左右两个表达式的值只要有一个为true，结果就为true
逻辑非（！）：在true或false前加！就变为相反的结果。
参数类型：
按照运算符优先级排序：！>&&>||
&&运算符和||运算符的短路性：
&&运算符的短路性：运算符左边的表达式如果是false，那么整个表达式的值就是false，就没必要判断右边表达式的值是真是假了
||运算符的短路性：运算符左边的表达式如果是true，那么整个表达式的值就是true，就没必要判断右边表达式的值是真还是假了
3.1.4复合运算
| 赋值(Assignment) | x = y | x = y |
|---|---|---|
| 加法赋值(Addition assignment) | x += y | x = x + y |
| 减法赋值(Subtraction assignment) | x -= y | x = x - y |
| 乘法赋值(Multiplication assignment) | x *= y | x = x * y |
| 除法赋值(Division assignment) | x /= y | x = x / y |
| 求余赋值(Remainder assignment) | x %= y | x = x % y |
| 求幂赋值(Exponentiation assignment) | x **= y | x = x ** y |
| 左移位赋值(Left shift assignment) | x <<= y | x = x << y |
| 右移位赋值(Right shift assignment) | x >>= y | x = x >> y |
| 无符号右移位赋值(Unsigned right shift assignment) | x >>>= y | x = x >>> y |
| 按位与赋值(Bitwise AND assignment) | x &= y | x = x & y |
| 按位异或赋值(Bitwise XOR assignment) | x >>= y | x = x >> y |
| 右移位赋值(Right shift assignment) | x ^= y | x = x ^ y |
| 按位或赋值(Bitwise OR assignment) | x | = y |
3.1.5三元运算符
判断真假的运算符，三个操作数
三元运算符的格式：
表达式1？表达式2：表达式3
表达式1为真用表达式2输出
表达式1为假用表达式3输出
3.1.7运算符的优先级
3.2表达式
表达式是ECMAScript中的一个“短语”，解释器会通过计算把它转换成一个值
四、语句
1.if语句
1.单分支结构：
// //单分支结构
// if(关系表达式或者逻辑表达式){
// //如果条件成立要执行的代码
// }
// if(3>2){
// document.write("helo");
// document.write("<br>")
// document.write("world");
// }2.双分支结构：
// //双分支结构
// if(关系表达式或者逻辑表达式){
// //如果条件成立要执行代码
// ...
// }else{
// //如果条件不成立要执行的代码
// ...
// }
// //键盘上任意输入两个数，使用if的双分支判断大小，并且将大数输出
// 1.定义变量
// var x,y;
// // 2.从键盘输入两个数，并赋给上面的两个变量
// x=prompt("请输入第一个数字");
// y=prompt("请输入第二个数字");
// // 3.判断 输入的内容是否为数字，如果是数字，再进行大小比较
// if(isNaN(x) || isNaN(y)){
// alert("请输入数字")
// }
// else{// 4.如果不是数字，给出错误提示
// if(x>=y){
// document.write(x)
// }else{
// document.write(y)
// }
// }3.多分支结构：
//if语句的多分支结构
// if(关系表达式或逻辑表达式){
//如果条件成立要执行的代码
// ...
}
// else if(关系表达式或者逻辑表达式){
// //如果条件不成立要执行的代码
// ...
// }
// var grade=window.prompt("请输入成绩：")
// if (!isNaN(grade)){
// if(grade>=90 && grade<=100){
// document.write(`您的成绩是${grade},等级是：优秀`)
// }else if(grade>=80){
// document.write(`您的成绩是${grade},等级是：良好`)
// }
// else if(grade>=70){
// document.write(`您的成绩是${grade},等级是：中等`)
// }
// else if(grade>=60){
// document.write(`您的成绩是${grade},等级是：及格`)
// }
// else{
// if(grade<0){
// document.write(`成绩不能是负数!`)
// }else{
// document.write(`您的成绩是${grade}，等级是：不及格`)
// }
// }
// }else{
// alert("请输入数字！")
// }2.switch语句
// switch(表达式){//只能比较整数类型和字符串类型
// case 值1：要执行的代码;...
// break;//结束整个switch语句
// case 值2：要执行的代码;...
// break;
// ...2
// default:要执行的代码;...
// }
//break语句在switch语句中的作用，当执行完当前分支的代码后，如果有break语句，能够立刻结束整个switch语句；
// 如果没有break语句，那么会继续执行后面其他分支的代码，直到遇到了break语句，或者是执行完所有的switch才结束。
// var op=window.prompt("请输入运算符：");
// var n=10,m=20,result;
// switch(op){
// case "+":result=n+m;
// break;
// case "-":result=n-m;
// break;
// case "*":result=n*m;
// break;
// case "/":result=n/m;
// break;
// default:result=NaN;
// }
// console.log(result);例题：
<body>
<select name="" id="month" onchange="getValue()">
• <option value="1">1月</option>
• <option value="2">2月</option>
• <option value="3">3月</option>
• <option value="4">4月</option>
• <option value="5">5月</option>
• <option value="6">6月</option>
• <option value="7">7月</option>
• <option value="8">8月</option>
• <option value="9">9月</option>
• <option value="10">10月</option>
• <option value="11">11月</option>
• <option value="12">12月</option>
</select>
<span id="info">31天</span>
</body>
<script>
var month=document.getElementById("month");
var info=document.getElementById("info");
var m,days;
function getValue(){
• m=parseInt(month.value);
• // console.log(m);
• switch(m){
• case 1:
• case 3:
• case 5:
• case 7:
• case 8:
• case 10:
• case 12:days=31;break;
• case 2:days="28或29";break;
• case 4:
• case 6:
• case 9:
• case 11:days=30;break;
• }
• // console.log(days+"天")
• info.innerHTML=days+"天";
}vscode文件
3.while循环语句
while（条件）
{
循环体
}
介绍循环的逻辑。
1.定义变量
2.赋初始值
3.构建循环条件，循环操作
4.发生增加或减少的动作
do while语句：
定义和用法：do/while 循环是 while 循环的变体。该循环会执行一次代码块，在检查条件是否为真之前，然后如果条件为真的话，就会重复这个循环。
同样当指定的条件为 true 时循环指定的代码块，但该循环在判断条件前会执行一次代码块。
4.for循环语句：
循环代码块一定的次数
一般写法：
document.write(cars[0] + "<br>"); document.write(cars[1] + "<br>"); document.write(cars[2] + "<br>"); document.write(cars[3] + "<br>"); document.write(cars[4] + "<br>"); document.write(cars[5] + "<br>");使用for循环
for (var i=0;i<cars.length;i++)
{
• document.write(cars[i] + "<br>");
}语法：
for (语句 1; 语句 2; 语句 3) { 被执行的代码块 }
语句 1 （代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行
语句 1
通常我们会使用语句 1 初始化循环中所用的变量 (var i=0)。
语句 1 是可选的，也就是说不使用语句 1 也可以。
您可以在语句 1 中初始化任意（或者多个）值：
实例:
for (var i=0,len=cars.length; i<len; i++) { document.write(cars[i] + "<br>"); }语句 2
通常语句 2 用于评估初始变量的条件。
语句 2 同样是可选的。
如果语句 2 返回 true，则循环再次开始，如果返回 false，则循环将结束。
语句 3
通常语句 3 会增加初始变量的值。
语句 3 也是可选的。
语句 3 有多种用法。增量可以是负数 (i--)，或者更大 (i=i+15)。
语句 3 也可以省略（比如当循环内部有相应的代码时）：
实例:
var i=0,len=cars.length; for (; i<len; ) { document.write(cars[i] + "<br>"); i++; }For/In 循环
JavaScript for/in 语句循环遍历对象的属性：
实例
var person={fname:"Bill",lname:"Gates",age:56}; for (x in person) // x 为属性名 {
txt=txt + person[x];
}五：函数
1.函数的定义格式：
函数的参数实际上是函数的局部变量，但是定义参数的时候不需要是var 了let这样的关键字说明，直接写参数名称即可
关键字：function 函数的名称（[参数]）{//函数体
//函数为了实现一定的功能，需要执行的代码
//......
[return 表达式；] 将return语句后面的表达式作为函数执行以后的结果，返给调用者，当然，return是可有可无的。
}
2.定义函数：
function sayHello（）{
• alert（“hello”）；
}
//调用函数 函数名（[实参]） var 变量名=函数名（[实参]） console.log函数名（[实参]）
sayHello（）;3.数组：
1.数组的定义：
“数组是指有序的元素序列。如果将有限个类型相同的变量的集合命名，那么这个名称就是数组名，而组成数组的各个变量称为数组的分量，也称为数组的元素，有时也称为下标变量。”
2.数组的表达方式：
var arr=[];//空数组 arr=[num,num*1024,num+100]; 数组中的元素可以是任意类型的
var list=new Array;//空数组 list=new Array(100,"张三",3.14,99);//小括号中如果给出两个或两个以上的值，那么这些值将作为数组的初始值可以为数组赋初始值
list=new Array("hello");//如果小括号中只给1个值，并且这个值是整数类型，那么这个值将作为数组的赋初始值
• console.log(list)
• list=new Array(10);//如果小括号中只给出1个值，并且这个值是整数类型，那么该值表示数组的初始长度
• console.log(list)
• list=Array(3.14,"");//new Array语句中的new关键字可以省略
• console.log(list)
• //在JavaScript中如何访问数组元素 数组名[下标]下标从0开始
• var friends=["张三","李四","Allen"];
• console.log(friends[0],friends[2])
• friends=new Array("张三","李四","Allen")3.实例：
// var arr=[];//空数组
• // console.log(arr);
• // arr=["张三",20,false,3.14,[80,90,100,60],{name:"李四",className:"2班",sex:"男"}];//数组中的元素可以是任意类型的
• // console.log(arr);
• // var num=1024;
• // arr=[num,num*1024,num+100];//数组中的元素不仅可以是数据而且可以是一个表达式
• // console.log(arr);
• // var list=new Array;//空数组
• // console.log(list.length)
• // list=new Array(100,"张三",3.14,99);//小括号中如果给出两个或两个以上的值，那么这些值将作为数组的初始值可以为数组赋初始值
• // console.log(list)
• // list=new Array("hello");//如果小括号中只给1个值，并且这个值是整数类型，那么这个值将作为数组的赋初始值
• // console.log(list)
• // list=new Array(10);//如果小括号中只给出1个值，并且这个值是整数类型，那么该值表示数组的初始长度
• // console.log(list)
• // list=Array(3.14,"");//new Array语句中的new关键字可以省略
• // console.log(list)
• // //在JavaScript中如何访问数组元素 数组名[下标]下标从0开始
• // var friends=["张三","李四","Allen"];
• // console.log(friends[0],friends[2])
• // friends=new Array("张三","李四","Allen")4.数组的遍历
1.分类：
1.使用whlie循环遍历数组元素
2.使用do whlie循环遍历数组元素
3.使用for循环遍历数组元素
4.使用for...in...循环遍历数组 每次循环时，变量获得是数组的下标
5.f数组的oreach方法遍历数组中的元素 格式： 数组名.foreach(function(){......}) 意思是：对数组中的某一个元素执行某种操作，具体的操作是指小括号中的回调函数（匿名函数）
2.实例：
//数组的遍历
• var friends=["张三","李四","Allen"];//数组元素下标的取值范围 0~数组的长度-1
• //1.使用whlie循环遍历数组元素
• var i=0;
• while(i<friends.length){
• document.write("我的第"+(i+1)+"个朋友是：",friends[i],"<br>");
• i++;
• }
• document.write("<hr>");
• //2.使用do whlie循环遍历数组元素
• i=0;
• do{
• document.write("我的第"+(i+1)+"个朋友是：",friends[i],"<br>");
• i++;
• }while(i<friends.length);
• document.write("<hr>");
• //3.使用for循环遍历数组元素
• for(i=0;i<friends.length;i++){
• document.write("我的第"+(i+1)+"个朋友是：",friends[i],"<br>");
• }
• //4.使用for...in...循环遍历数组 每次循环时，**变量获得是数组的下标**
• for(var idx（下标） in friends){
• document.write(friends[idx],"<br>");
• }
• //5.f数组的oreach方法遍历数组中的元素 格式： 数组名.foreach(function(){......}) 意思是：对数组中的某一个元素执行某种操作，具体的操作是指小括号中的回调函数（匿名函数）
• friends.forEach(function(ele){//其中小括号中的形参接受的就是遍历数组值的每一个元素
• document.write(friends[ele],"<br>")
• })5.数组的常用操作：
1.向数组中追加新元素
1.通过为数组赋值的方式追加新元素
// var arr=[];
// for(var i=0;i<=10;i++){
// arr[i]=parseInt(Math.random()*101)
// }
// console.log(arr);
// //向数组中追加新元素 2.调用数组的push方法，向数组中追加新元素，而且追加的新元素是放到数组的末尾的
// arr=["hello"];
// for(var i=0;i<=10;i++){
// arr.push(parseInt(Math.random()*101))
// }
// console.log(arr);
// //向数组中追加新元素 3.调用数组的unshift方法，向数组中追加新元素，而且追加的新元素是放到数组的开头的
// arr["hello"];
// for(var i=0;i<=10;i++){
// arr.unshift(parseInt(Math.random()*101))
// }
// console.log(arr);实例：
我的好友
<label for="friend">好友姓名 : <input type="text" id="friend" onblur="insertValue(this)" onkeyup="insertValue(this)"></label>
<ul id="friendList"></ul>
</body>
<script>
var friends=[];//空数组
var i=0;
var list=document.getElementById("friendList");
function insertValue(obj){
• //console.log(typeof event.keyCode);
• if(event instanceof KeyboardEvent && event.keyCode!=13){
• return;
• }
• //alert(100)
• var s=obj.value.trim();//去掉字符串左右两端的空格
• if(s!=""){
• // friends[i]=s;
• // obj.value="";
• // i++;
• friends.unshift(s)
• obj.value="";
• //console.log(friends)
• list.innerHTML="";//清空列表项
• for(i=0;i<friends.length;i++){
• list.innerHTML=list.innerHTML+`<li>${friends[i]}</li>`
• }
• }
}2.删除数组中的元素
var a=[100,300,22,334,234,24,22,12,66]
• //数组元素的删除
• //1.pop将数组的最末尾的元素删除 与 push操作相反
• a.pop();
• console.log(a);
• //2.shirt 将数组的开头元素删除 与 unshift操作相反
• a.shift();
• console.log(a)
• //3.splice 删除数组中指定的一个元素或一段连续的元素 第一个参数是指定要删除的元素的开始索引位置，第二个参数指定要删除的元素的个数
• a.splice(2,98);
• console.log(a)
• a.splice(2,1);
• console.log(a);
• //4.直接更改数组的长度length属性，既可以为数组添加新元素也可以为数组删除
• a.length=2;
• console.log(a)实例：
<body>
我的好友
<label for="friend">好友姓名 : <input type="text" id="friend" onblur="insertValue(this)" onkeyup="insertValue(this)"></label>
<ul id="friendList"></ul>
</body>
<script>
var friends=[];//空数组
var i=0;
var list=document.getElementById("friendList");
function insertValue(obj){
• //console.log(typeof event.keyCode);
• if(event instanceof KeyboardEvent && event.keyCode!=13){
• return;
• }
• //alert(100)
• var s=obj.value.trim();//去掉字符串左右两端的空格
• if(s!=""){
• // friends[i]=s;
• // obj.value="";
• // i++;
• friends.unshift(s)
• obj.value="";
• //console.log(friends)
• list.innerHTML="";//清空列表项
• for(i=0;i<friends.length;i++){
• list.innerHTML=list.innerHTML+`<li>${friends[i]}------<button onclick='delFriend(${i})'>删除</button></li>`;
• }
• }
•
}
function delFriend(idx){
• friends.splice(idx,1);
• shuxin();
}
function shuxin(){list.innerHTML="";//清空列表项
• for(i=0;i<friends.length;i++){
• list.innerHTML=list.innerHTML+`<li>${friends[i]}------<button onclick='delFriend(${i})'>删除</button></li>`;
• }
• }3.join方法
//join方法的作用:按照指定的一个字符，将数组中的所有元素拼接为一个字符串，如果不指定参数，默认按照逗号拼接
• var arr=["hello","world",111,343,3535,565,57];
• var s=arr.join("、")//、可替换任何指定字符
• console.log(s)
• var s=arr.join(" ")//、可替换任何指定字符
• console.log(s)
• var s=arr.join()//、可替换任何指定字符
• console.log(s)4.split方法
//
split 字符串的操作。作用是将字符串按照指定的字符拆分后生成一个数组
• var list=s.split(",");
• console.log(list)
• var sentence="How are you"
• var words=sentence.split(" ");
• console.log(words);
• console.log(words.toString());5.reverse方法
//reverse 方法。作用是将字符串中的元素反转
• words.reverse();
• console.log(words);6.sort方法
//sort 方法。 作用是按照字符的ASCII码进行排序
• words.sort();
• console.log(words);7.concat方法
//concat 方法。 作用是可以连接两个数组进行输出
• arr=[1,10,2,20]
• arr.sort();
• console.log(arr)
• var newArr=arr.concat(words);
• console.log(newArr)8.slice方法
//slice()作用是或者数组中指定的从开始索引到结束索引之间的那些元素 因此，它有两个下标
• //分别表示开始和结束索引。 注意：1.取得值不包括结束索引位置的值 2.如果省略的结束索引，那么将从指定位置开始，一直取到最后
• console.log(newArr.slice(2,5));
• console.log(newArr.slice(2));9.多维数组的使用
<body>
<label for="xm">姓名：<input type="text" name="" id="xm" autofocus></label>
<br>
<label for="age">年龄：<input type="text" name="" id="age"></label>
<br>
<label for="age">性别：<input type="radio" value="男" name="sex" checked>男<input type="radio" value="女" name="sex">女</label>
<br>
<button onclick="save()">保存</button>
<button onclick="printValue()">查看数据</button>
</body>
<script>
var persons=[];
var xmObj=document.getElementById("xm");//只找到一个
var ageObj=document.getElementById("age");
var sexObj=document.getElementsByName("sex");//找到的是多个元素的集合，而非一个单独的元素
// console.log(xmObj)
// console.log(sexObj)
function save(){
• var xb;
• persons.push()
• persons.push()
• if(sexObj[0].checked){
• xb=sexObj[0].value;
• }else{
• xb=sexObj[1].value;
• }
• var person=[xmObj.value,ageObj.value,xb];
• persons.push(person)
• console.log(persons)
}
function printValue(){
• for(var i=0;i<persons.length;i++){
• for(var j=0;j<persons[i].length;j++){
• console.log(persons[i][j])
• }
• }
}
</script>10.对象的使用
var arr=["张三",20,"男"]
var obj={name:"张三",age:20,"sex":"男"}
//对象种成员的访问方式不同
console.log(arr[0]);
//访问数组 1.对象名.属性名
console.log(obj.name);
//访问对象中的成员 2.对象名["属性名"]
console.log(obj["name"])实例：
<body>
<label for="xm">姓名：<input type="text" name="" id="xm" autofocus></label>
<br>
<label for="age">年龄：<input type="text" name="" id="age"></label>
<br>
<label for="age">性别：<input type="radio" value="男" name="sex" checked>男<input type="radio" value="女" name="sex">女</label>
<br>
<button onclick="save()">保存</button>
<button onclick="printValue()">查看数据</button>
</body>
<script>
var persons=[];
var xmObj=document.getElementById("xm");//只找到一个
var ageObj=document.getElementById("age");
var sexObj=document.getElementsByName("sex");//找到的是多个元素的集合，而非一个单独的元素
// console.log(xmObj)
// console.log(sexObj)
function save(){
• var xb;
• if(sexObj[0].checked){
• xb=sexObj[0].value;
• }else{
• xb=sexObj[1].value;
• }
• // var person=[xmObj.value,ageObj.value,xb];
• var person={"name":xmObj.value,"age":ageObj.value,"sex":xb};
• persons.push(person)
• console.log(persons)
}
function printValue(){
• for(var i=0;i<persons.length;i++){
• console.log(persons[i].name,persons[i].age,persons[i].sex)
• for(var prop in persons[i]){ //for in循环既可以遍历数组又可以遍历对象
• console.log(persons[i][prop]) //这种访问对象成员的方式，成员属性可以是变量。 而对象名.属性名只能是常量而且不需要加引号，不能用变量
• }
• }
}
</script>
扫一扫
768
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
