《JavaScript第五章》

软件2201 方琏琏

已于 2023-10-22 16:03:18 修改

阅读量42

点赞数

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

于 2023-10-15 17:18:52 首次发布

本文链接：https://blog.csdn.net/ReviewI/article/details/133844774

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、对象的概念

在JavaScript中，对象属于复杂数据类型，它是由属性和方法组成的一个对象。
属性是指对象的特征。
方法是指对象的行为。

下面以学生的特征和行为为例进行说明。
学生的特征：姓名、年龄和性别，这些特征可以用对象的属性来表示。
学生的行为：打招呼、唱歌、写作业，这些行为可以用对象的方法来表示。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
           <script>

//将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>")
           }

           </script>
   </body>
</html>

2、创建对象

判断一个变量是否为对象的小技巧:通过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);

//补充:对象由:属性和方法
       // 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();

使用场景:如果对象很多就用方法2 反之方法1

3、如何遍历一个对象

由于直接输出s10将只会显示object我们需要内部的属性值/
方法1:如果只需要某一个属性值, 直接通过s10.属性名即可
方法2:如果所有的属性值都需要,那么也可以通过s10.属性名只是比较麻烦.
学习:如何遍历对象:语法如下:
for(var i = 0;i<a10.length;i++){
//错误的写法:1.对象的键并不是012 其次对象并没有长度
}

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       <script>

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

           var s10 = {
                           id :10010,
                           name:"张三",
                           age:20,
                           sex:'男',
                           height : 188,
                           weight :200
           };
           // console.log(s10);

//i表示对象的下标(属性) s10表示遍历的对象
           for(var i in s10){
               console.log(s10[i]);
           }

       </script>
   </body>
</html>

4、值对象和引用对象

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       <script>
           //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

       </script>
   </body>
</html>

5、Math对象

Math对象的用法和Java中Math对象的用法几乎一致。

唯一不同的就是 Java的数据类型分为int double等但是js里面只有number。

第一个 Math.min(a,b,c,d,...); //获取最小的值

alert(Math.min(2,534,32,43,76,86));

第二个 Math.max(a,b,c,d,...); //获取最大值

alert(Math.min(2,534,32,43,76,86));

第三个 Math.ceil(a); 向上取整舍去小数点 (但是Java是保留的)

alert(Math.ceil(11.1));

第四个 Math.floor(a); 向下取整舍去小数点 (但是Java是保留的)

alert(Math.floor(11.1));

第五个 Math.round(x);四舍五入如果是临界值都是往高的入

alert(Math.round(1.5) + "~" + Math.round(-1.5));

第六个 Math.random();返回一个随机数范围 0~1 官方概念:可以取0但是不能取1 但是实际场景可以忽略0

alert(Math.random());

6、Date对象

date对象创建的2种方式：

第一种不放任何参数表示获取当前时间

var d = new Date();

console.log(d);

第二种方式:放若干个数字,分别表示年月日时分秒按照顺序其中月份比较特殊 0表示1月

var d = new Date(2020,11,11);//表示2020年12月11日 0点0分0秒

date对象的常见方法:

var d = new Date(2020,11,11,12,6,33);;//表示2020年12月11日 0点0分0秒

console.log(d.getFullYear());//获取年份

console.log(d.getMonth() + 1);//获取月份注意0表示1

console.log(d.getDate());//获取日期

console.log(d.getHours());//获取小时

console.log(d.getMinutes() );//获取分钟

console.log(d.getSeconds() );//获取秒

console.log(d.toLocaleString());//返回当前日期的字符串格式

console.log(d.getTime());//返回从1970年1月1日0时0分0秒到指定时刻的毫秒数

7、倒计时

计算当前时刻距离2024年1月1日0时还差多少时间

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var d1 = new Date();

var d2 = new Date(2024,0,1);

var sjc = d2.getTime() - d1.getTime(); //计算出两个时间节点的相差毫秒数

sjc = parseInt(sjc / 1000);//得到是两者的秒数

var s = sjc%60;

var m = parseInt(sjc/60%60);

var h = parseInt(sjc/60/60%24);

var day = parseInt(sjc/60/60/24);

document.write("距离倒计时还剩下" + day +"天 " + h +"时" + m +"分" + s + "秒");

</script>

</body>

</html>

8、Array对象

var arr = [];

arr.push("aa");//表示奖元素添加到数组的尾部

console.log(arr);

var arr = ['张三','分','阿萨德三','类似'];

var str =arr.toString();//默认以,分割

console.log(str);

var str = arr.join(":");

console.log(str);

适用常见: 用户选择自己的爱好框

9、String对象

JS中的String对象的方法和Java几乎完全一致。

判断输入的账号是否合法

要求：长度8-18位。必须以yyzy开头。账号的最后6位必须是纯数字组成。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var str = "yyzysaf111111";

// console.log(str.substring(str.length-6,str.length));

// console.log(Number(str.substring(str.length-6,str.length))) ;

var b = panduan(str);

alert(b);

function panduan(str){

if( !(str.length>=8 && str.length<=18) ){

alert("长度不符合条件");

return false;

}

if( ! str.startsWith("yyzy") ){

alert("不是以yyzy开头");

return false;

}

//思路:如何判断后6位是否为纯数字

//步骤1: 取出后6位思路通过subString(a,b);截取

//其中b是定死了就是str.length 其中a=str.length-6

if(Number(str.substring(str.length-6,str.length))+"" =="NaN"){

alert("后6位不是纯数字");

return false;

}

return true;

}

</script>

</body>

</html>

软件2201 方琏琏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《JavaScript第五章》

/ var student1 = { 'id' :1001 ,name:"张三" , age : 18 , 'sex-sex' : '男' };var s1 = {id:1001,name:"张三1" , age:18};var s4 = {id:1004,name:"张三4" , age:18};var s8 = {id:1008,name:"张三8" , age:18};var s9 = {id:1008,name:"张三9" , age:18};
复制链接

扫一扫

专栏目录