关于我成长为前端高级工程师的前进之路

1.对象Object

1.1 对象的概念

• 对象是一种引用数据类型
• 在ECMAScript中对象可以存储变量和函数(数据和功能)

1.2 创建对象

new构造函数创建对象

//定义一个人的信息
//语法1 构造函数创建对象
//1.创建一个空对象
var person = new Object();
//(new关键字可以省略,但是不推荐)

//2.给空对象添加属性和值
//  key     value
person.name = "张三";
person.age = 20;
person.sex = "男";

//3.查看某一个属性
console.log(person.name);

//4.修改
person.name = "李四";

//5.删除 指定属性的数据
delete person.age;
console.log(person);

//6.遍历 for...in
for(var key in person){
    console.log(key,person[key]);   //使用 []
}

字面量方式 (推荐)

//对象的字面量表达式  推荐
//1.创建一个空对象
var person = {}

//2.添加属性
person.name = "张三";
person.age = 21;
person.address = "中国";

//3.修改属性
person.address = "北京";

//4.查看属性
console.log(person.address);

//5.遍历
for(var key in person){
    console.log(key,person[key]);
}

定义对象并设置属性和值

//定义对象,并且设置属性和值
var person = {
    name:"张三",
    age:33,
    sex:"男"
}

//添加
person["address"] = "中国"
person.height = 160
console.log(person);

//修改
person["address"] = "北京"
person.height = 170
console.log(person);

//删除
delete person.address;
delete person["sex"];
console.log(person);

//遍历
for(var key in person){
    console.log(key,person[key]);
}

1.3 创建对象方法

方法1 函数名:function(){}

var person = {
    name:"张三",
    //初始化方法1
    run: function(){
        console.log(this.name + `正在run...`);
    }
}
person.run();

方法2 函数名(){} (推荐)

 var person = {
    name:"张三",
    //初始化方法2   推荐写法
    eat(str){
        console.log(`我${this.name},正在吃${str}`);
    }
}
person.eat("饭");

方法3 对象名.函数名 = function(){}

var person = {
    name:"张三"
}
person.work = function(){
    console.log("我" + this.name + "正工作");
    console.log("我" + person.name + "正工作");
}
person.work();

2.日期对象(Date)

开始前一定分清楚Date 和 Data

2.1 Date对象

Date类型使用自UTC(Coordinated Universal Time,国际协调时间) 1970年1月1日午夜(零时)开始经过的毫秒数来保存日期。Date类型保存的日期能够精确到1970年1月1日之前或之后的 285616年.

2.2 创建Date对象

创建一个日期对象，使用new运算符和 Date构造函数即可.

var date = new Date();  
//在调用Date构造方法而不传递参数的情况下，新建的对象自动获取当前的时间和日期

创建日期对象并指定时间

var d = new Date("2015/08/22");
var d = new Date(2016, 8, 13, 14, 34);
//日期的格式可以是“2015/08/22”，“2015-08-22”，
//或1970年当前日期的毫秒数1443453475234

2.3 日期Date的常用方法

//年
console.log(date.getYear()); //123,需要加1900, 1900-->1900
//年
console.log(date.getFullYear());
//月
console.log(date.getMonth()+1); //0-11, +1
//日
console.log(date.getDate());    //1-31
//星期
console.log(date.getDay());     //0-6   0是星期天
//时
console.log(date.getHours());   //24小时
//分
console.log(date.getMinutes()); //60
//秒
console.log(date.getSeconds());
//毫秒
console.log(date.getMilliseconds());   //1000毫秒==>1秒
//时间戳    4个
//从指定的日期,到现在的毫秒数
console.log(date.getTime());
console.log(date.valueOf());
console.log(Date.now());    //静态方法
console.log(Date.parse("2020-12-12 12:12:12:12"));//把一个指定日期转换成时间戳 parse 解析

2.4 插件使用

momentjs

在head标签中引用 <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

• 更多了解搜索momentjs中网

//<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
var date = new Date();
console.log(date.toLocaleDateString()+" "+ date.toLocaleTimeString());

console.log(moment().format("YYYY-MM-DD"));
console.log(moment().format("YYYY/MM/DD"));
console.log(moment().format("YYYY年MM月DD日"));
console.log(moment().format("YYYY年MM月DD日 hh时mm分ss秒SSS毫秒"));

dayjs

• 使用跟momentjs差不多