javascript-210317-01

javascript - 210317 - 01

  • Date日期对象
  • JSON
  • 面向对象编程

Date日期对象

	判断数据类型
		typeof 123		number
		typeof "123"	string
		typeof true		boolean
		typeof NaN		number
		typeof []		object
		typeof {}		object

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo01</title>
</head>
<body>

<script>
    var now = new Date();
    console.log(now);                   // Date Mon Apr 12 2021 19:38:46 GMT+0800 (中国标准时间)
    console.log(now.getFullYear());     // 年
    console.log(now.getMonth());        // 月
    console.log(now.getDate());         // 日
    console.log(now.getDay());          // 星期几
    console.log(now.getHours());        // 时
    console.log(now.getMinutes());      // 分
    console.log(now.getSeconds());      // 秒
    console.log(now.getTime());         // 时间戳 全世界同一时间 1970 1.1 0:00:00    得到的结果:1618227224800
    console.log(new Date(1618227224800))    // 时间戳转日期   Date Mon Apr 12 2021 19:38:46 GMT+0800 (中国标准时间)

    console.log(now.toLocaleString());      // 2021/4/12 下午7:38:46

</script>

</body>
</html>

JSON

什么是JSON:
	JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。采用完全独立于编程语言的文本格式来存储和表示数据。
	简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 
	易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
	

在JavaScript中,一切皆为对象,任何js支持的类型都可以用JSON来表示;
格式:
	对象:	{}
	数组:	[]
	所有键值对  都是用  key:value

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonDemo01</title>
</head>
<body>
<script>

    var user = {
        name:'bgy',
        age:21,
        sex:'男'
    }

    // 对象转换为json字符串,{"name":"bgy","age":"21","sex":"男"}
    var jsonUser = JSON.stringify(user);
    
    console.log(user);		//{ name: "bgy", age: 21, sex: "男" }
    console.log(jsonUser);	//{"name":"bgy","age":21,"sex":"男"}

    // 将字符串转化为对象,参数为json字符串
    // var obj = JSON.parse({"name":"bgy","age":"21","sex":"男"});
    
</script>
</body>
</html>

JSON 和 JavaScript 的区别:
	var obj = { name: "bgy", age: 21, sex: "男" }
	var json = {"name":"bgy","age":21,"sex":"男"}

面向对象编程

JavaScript,Java,C#....等面向对象语言,,,,,JavaScript有些区别!!!!

原型对象
原型链  __proto__

	类:模板,原型对象
	对象:具体的实类
原型对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo01</title>
</head>
<body>
<script>
    var Student = {
        name:"bgy",
        age:21,
        run:function (){
            console.log(this.name + " is running.........");
        }
    };
    console.log(Student.run());

    var bxg = {
        name:"baixiaoguang"
    };

    // 设置白小光的原型,,,,白小光的原型现在为Student
    // 原型对象
    bxg.__proto__=Student;
    console.log(bxg.run());

    //=================================================

    var Bird = {
        fly:function (){
            console.log(this.name + " is flying.........");
        }
    };

    // 设置白小光1的原型,,,,白小光的原型现在为Bird
    var bxg1 = {
        name:"baixiaoguang1"
    };
    // 原型对象
    bxg1.__proto__=Bird;
    console.log(bxg1.fly());

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

class继承
class关键字是在ES6引入的

归根结底,,,还是上面的原型链结构,,,只是代码看起来比较爽
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo02</title>
</head>
<body>
<script>

    function Student(name){
        this.name = name;
    }
    // 给student新增一个方法
    Student.prototype.hello = function (){
        alert('hello bgy');
    }


    // ES6之后,,,可以使用class关键字
    class Student01{
        // 构造器
        constructor(name) {
            this.name = name;
        }

        hello(){
            alert('hello,'+this.name);
        }
    }

    var bxg01 = new Student01("白小光01");
    bxg01.hello();
    var bxg02 = new Student01("白小光02");
    bxg02.hello();

    // 继承
    class SmallStudent extends Student01{
        constructor(name,grade) {
            super(name);
            this.grade = grade;
        }
        myGrade(){
            alert(this.name+"的年级是"+this.grade);
        }
    }
    var littleStuent01 = new SmallStudent("小光",3);
    littleStuent01.myGrade();

</script>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值