|
主题设置

卡片式面板通常用于非白色背景色的主体内

JS 对象

在 JS 中,对象是一种数据结构,用于存储键值对的集合。

自定义对象

// 用系统构造函数创建对象
var person = new Object();
person.name = "小明";		// 这是对象的属性
person.sex = "男";
person.height = "170";
person.sayHi = function(){	// 这是对象的方法
    console.log("hello");
    console.log(this.name);	// 在当前对象中,可以使用 this关 键字访问属性
}
console.log(person.name);	// 输出对象的某个属性
console.log(person["sex"]);	// 也可以用这种方式输出对象的属性
person.sayHi();				// 调用对象的方法

// 自定义构造函数创建对象(也叫工厂模式创建对象)
// 构造函数和普通函数的区别:就是看首字符是不是大写,构造函数首字母需要大写
function Human(name,height){
    // 跟用普通函数创建对象相比,这里就不需要 new Object() 了,直接用 this
    this.name = name;
    this.height = height
    this.sayHello = function(){
    	console.log("大家好,我是" + this.name + ",我的身高是" + this.height);
    }
    // 跟用普通函数创建对象相比,这里也不需要 return
}
var per2 = new Human("李四",170);	// 注意这里 new 的不是 Object,而是 Human
per2.sayHello();

// 用普通函数的方式创建对象,并给对象的属性赋值(这不是自定义构造函数创建对象)
// 这种方式需要用 return 返回值
function persons(name,height){
    var pers = new Object();
    pers.name = name;
    pers.height = height;
    pers.sayHello = function(){
    	console.log("大家好,我是" + pers.name + ",我的身高是" + this.height);	// 这里用对象名或者this都可以
    }
    return pers;
}
var per1 = persons("张三",180);	// 创建一个 persons 对象(不用 new)
per1.sayHello();

// 用函数方式创建对象和用自定义构造函数(工厂模式)创建对象的区别:
// 1. 自定义构造函数创建对象首字母大写。
// 2. 自定义构造函数创建对象,不需要用 new Object();
// 3. 自定义构造函数创建对象,不需要 return。
// 4. 自定义构造函数创建的对象,可以用 instanceOf 校验类型,比如:per1 instanceOf Person,但是用函数方式创建的对象,不能用 instanceOf 校验类型。



// 字面量形式创建对象,方法一:
var obj = {
    name:"小明",		// 这里使用逗号,不是分号
    age:18,
    height:170,
    sayHello:function(){
    	console.log("我是" + this.name + ",我的年龄是" + this.age + ",我的身高是" + this.height);
    }
}

// 字面量形式创建对象,方法二:
// 这种方式有缺陷,创建的是一次性对象,即对象在被多次使用时,需要多次给属性赋值
var obj={};
obj.name = "小明";
obj.age = 18;
obj.height = 170;
obj.sayHello = function(){
    console.log("我是" + this.name + ",我的年龄是" + this.age + ",我的身高是" + this.height);
}
console.log(obj.name);		// 第 1 种输出方法
console.log(obj["name"]);	// 第 2 种输出方法
obj.sayHello();				// 第 1 种调用方法
obj["sayHello"]();			// 第 2 种调用方法



// 声明 json 对象
var jason = {
	"name":"王五",
    "age":"18",
    "height":"183"
}
jason["sex"] = "男";		// 添加 jason 键值对
console.log(jason.name);	// 第 1 种输出方法
console.log(jason["age"]);	// 第 2 种输出方法
var key = "height";			// 声明键名
console.log(jason[key]);	// 第 3 种输出方法(如果键不存在,则输出 undefined )

// 遍历 json 对象
for(var key in jason){		// 因为 json 是无序的,所以不能用 for(int i=0;i<...) 这种方式遍历
    console.log(key);		// 输出键
    console.log(jason[key]);// 输出值
}



// 对象的方法
console.log(per2 instanceof(Human));	// instanceof:per2 是否属于 Human 类,返回值是 true/false
delete per2.name;			// 删除对象中的 name 属性



// 判断对象中有没有某个属性
if(obj[key]){
    
}else{
    
}

内置对象

// Math 对象:不是函数,是静态对象,无需创建,其里面的所有方法都是静态的。
Math.PI;				// 获取 PI 值
Math.E;					// 自然对数的底数,e,约等于 2.718
Math.abs(-11);			// 11,获取绝对值,如果传入 null 则返回 0,传入字符串则返回 NaN
Math.ceil(12.09);		// 向上取整,返回 13
Math.floor(12.09);		// 向下取整,返回 12
Math.max(10,20,50,70);	// 70,获取一组数据的最大值
Math.min(10,20,50,70);	// 10,获取一组数据的最小值
Math.pow(25,2);			// 25 的平方
Math.pow(2,4);			// 2 的 4 次方
Math.random();			// 获取随机数 [0,1),包括 0,不包括 1;可以搭配 parseInt 获取随机的整数
Math.random() * 5;		// 获取随机数 [0,5)
Math.sqrt();			// 获取平方根

// 自定定义一个对象,实现系统的 max 方法
function MyMath(){
    // getMax 方法
    this.getMax = function(){
        // 假定第一个参数为最大值
        var max = arguments[0];
        for(var i=0; i<arguments.length; i++){
            if(max < arguments[i]){
                max = arguments[i];            
            }
        }
        return max;
    };
}
var myMath = new MyMath();	// 实例化对象
myMath.getMax(10,20,30,40);	// 调用 getMax 方法

// Date对象
var ms = Date.now();				// 返回 1970 年 1 月 1 日至今的毫秒数
var dt = new Date();
var dt =+ new Date();				// 不支持 HTML5 的浏览器就这样写,多了一个+
var dt = new Date("2020-02-21");	// 指定时间创建 Date 对象
var dt = new Date("2020/02/21");	// 指定时间创建 Date 对象
console.log(dt);					// 输出当前时间
dt.getTime();						// 返回 1970 年 1 月 1 日至今的毫秒数
dt.valueOf();						// 返回 1970 年 1 月 1 日至今的毫秒数
console.log(dt.getYear());			// 获取年 20,已废弃,不要使用
console.log(dt.getFullYear());		// 获取年 2020
console.log(dt.getMonth()+1);		// 获取月:因为国外是从 0 开始,所以我们要 +1
console.log(dt.getDate());			// 获取日
console.log(dt.getHours());			// 获取小时
console.log(dt.getMinutes());		// 获取分钟
console.log(dt.getSeconds());		// 获取秒
console.log(dt.getDay());			// 获取星期几,0 代表周日
console.log(dt.toDateString());		// 获取年月日(英文格式)
console.log(dt.toLocaleDateString());	// 获取年月日(中文格式)
console.log(dt.toTimeString());			// 获取时分秒(英文格式)
console.log(dt.toLocaleTimeString());	// 获取时分秒(中文格式)

// String 对象
见 “变量——string 类型” 部分。

// Array 对象
见数组部分

浏览器对象

见 DOM 部分。