蓝旭24春季培训-第四周预习-JS进阶+复习

一、JavaScript对象

（一）赋值

1、单一值

这段代码把一个单一值（porsche）赋给名为 car 的变量

var car = "porsche";

2、多个值

对象也是变量，但是对象包含很多值
这段代码把多个值（porsche, 911, white）赋给名为 car 的变量

var car = {type:"porsche", model:"911", color:"white"};

值以名称:值对的方式来书写（名称和值由冒号分隔）
JavaScript 对象是被命名值的容器。

（二）对象属性

1、定义：

名称:值对被称为属性。

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

2、访问属性方法

访问属性有两种方法： .property 或 [“property”]
以.property为例：

var person = {
  firstname:"Bill",
  lastname:"Gates",
  age:62,
  eyecolor:"blue"
};

document.getElementById("demo").innerHTML = person.firstname + " is " + person.age + " years old.";

3、遍历属性

for...in语句遍历对象的属性。

var txt = "";
var person = {fname:"Bill", lname:"Gates", age:62}; 
var x;
for (x in person) {
  txt += person[x] + " ";
}
document.getElementById("demo").innerHTML = txt;

4、添加新属性

可以通过简单的赋值，向已存在的对象添加新属性，但不能使用预留词作为属性名（或方法名）。

var person = {
/*原有属性*/
  firstname:"Bill",
  lastname:"Gates",
  age:62,
  eyecolor:"blue"
};
/*添加新属性*/
person.nationality = "English";

document.getElementById("demo").innerHTML =
person.firstname + " is " + person.nationality + ".";

5、删除属性

delete 关键词从对象中删除属性

var person = {
/*原属性*/
  firstname:"Bill",
  lastname:"Gates",
  age:62,
  eyecolor:"blue"
};
/*删除属性*/
delete person.age;
/*属性删除后属性的值变为undefined*/
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.age + " years old.";

delete 关键词会同时删除属性的值和属性本身。
删除完成后，属性在被添加回来之前是无法使用的。
delete 操作符被设计用于对象属性。它对变量或函数没有影响。
delete 操作符不应被用于预定义的 JavaScript 对象属性。这样做会使应用程序崩溃。

（三）对象方法

1、定义

方法是在对象上执行的动作。
方法以函数定义被存储在属性中。

2、访问对象方法

// 创建对象：
var person = {
    firstName: "Bill",
    lastName : "Gates",
    id       : 12345,
    fullName : function() {
       return this.firstName + " " + this.lastName;
    }
};

// 显示对象中的数据：
document.getElementById("demo").innerHTML = person.fullName();

如果访问 fullName 属性时没有使用 ()，则将返回函数定义：

document.getElementById("demo").innerHTML = person.fullName;

3、使用内建方法

使用 String 对象的 toUpperCase() 方法，把文本转换为大写：

var message = "Hello world!";
var x = message.toUpperCase();

4、添加新的方法

向对象添加方法是在构造器函数内部完成的：

function person(firstName, lastName, age, eyeColor) {
    this.firstName = firstName;  
    this.lastName = lastName;
    this.age = age;
    this.eyeColor = eyeColor;
    this.changeName = function (name) {
        this.lastName = name;
    };
}

changeName() 函数 name 的值赋给了 person 的 lastName 属性。

（四）显示对象

1、显示对象

document.getElementById("demo").innerHTML = person;

2、显示对象属性

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};

let txt = "";
for (let x in person) {
  txt += person[x] + " ";
};

document.getElementById("demo").innerHTML = txt;

3、在循环中显示对象

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};

let txt = "";
for (let x in person) {
txt += person[x] + " ";
};

document.getElementById("demo").innerHTML = txt;

在循环中必须使用 person[x]。person.x 将不起作用（因为 x 是一个变量

4、使用 Object.values()

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};

document.getElementById("demo").innerHTML = Object.values(person);

5、使用 JSON.stringify()

（1）将对象字符串化

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};

document.getElementById("demo").innerHTML = JSON.stringify(person);

（2）日期字符串化

var person = {
  name: "Bill",
  today: new Date()
};

document.getElementById("demo").innerHTML = JSON.stringify(person);

（3）不能对函数进行字符串化

const person = {
  name: "Bill",
  age: function () {return 19;}
};

document.getElementById("demo").innerHTML = JSON.stringify(person);

（4）可以将数组字符串化

const arr = ["Bill", "Steve", "Elon", "David"];
document.getElementById("demo").innerHTML = JSON.stringify(arr);

（五）对象访问器（Getter 和 Setter）

1、Getter

// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "en",
  get lang() {
    return this.language;
  }
};
// 使用 getter 显示来自对象的数据：
document.getElementById("demo").innerHTML = person.lang;

2、Setter

// Create an object:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "en",
  set lang(value) {
    this.language = value;
  }
};
// 使用 set 设置属性：
person.lang = "zh";
// 显示对象的数据：
document.getElementById("demo").innerHTML = person.language;

使用 getter 和 setter 时，JavaScript 可以确保更好的数据质量。

二、JavaScript事件

HTML 事件是发生在 HTML 元素上的“事情”。
当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。
在下面的例子中，onclick 属性（以及代码）被添加到 <button> 元素：

<button onclick="document.getElementById('demo').innerHTML=Date()">时间是？</button>

同时，可以改变其自身元素的内容

<button onclick="this.innerHTML=Date()">时间是？</button>

还可以使用事件调用函数

function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}

常见事件