JS 入门之对象

var person = {
    firstName: "Bill",
    lastName: "Gates",
    age: 67,
    fullName: function(){
        return this.firstName + " " + this.lastName;
    }
};

使用 JavaScript 关键词 new

例：

var person = new Object();
person.firstName = "Bill";
person.lastName = "Gates";
person.age = 67;
person.fullName = function(){
    return this.firstName + " " + this.lastName;
};

使用对象文字和通过关键词 new 结果是一样的。无需使用 new Object()。

出于简易性、可读性和执行速度的考虑，请使用对象文字方法。

JavaScript 对象是易变的

对象是易变的：它们通过引用来寻址，而非值。

如果 person 是一个对象，下面的语句不会创建 person 的副本：

var x = person;    // 这不会创建 person 的副本。

对象 x 并非 person 的副本。它就是 person。x 和 person 是同一个对象。

对 x 的任何改变都将改变 person，因为 x 和 person 是同一个对象。

注：

JavaScript 变量不是易变的。只有 JavaScript 对象如此。

JavaScript 对象属性

属性是任何 JavaScript 对象最重要的部分。

JavaScript 对象属性

属性指的是与 JavaScript 对象相关的值。

JavaScript 对象是无序属性的集合。

属性通常可以被修改、添加和删除，但是某些属性是只读的。

访问对象属性

访问对象属性的语法是：

objectName.property    // person.name

// 或者

objectName["property"]    // person["name"]

// 或者

objectName[expression]    // x = "name"; person[x]
// 表达式必须计算为属性名。

for...in 循环

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

语法：

for(var key in obj){
    // 要执行的代码
}

// key —— 属性名
// obj[key] —— 属性值
// 您必须在循环中使用 obj[key]
// obj.key 将不起作用（因为 key 是一个变量）

for...in 循环中的代码块会为每个属性执行一次。

添加新属性

您可以通过简单的赋值，向已存在的对象添加新属性。

假设 person 对象已存在，那么您可以为其添加新属性：

person.name = "Bill Gates";

您不能使用预留词作为属性名（或方法名）。请使用 JavaScript 命名规则。

删除属性

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

语法：

delete objectName.property

// 或

delete objectName["property"]

delete 关键词会同时删除属性的值和属性本身。

删除完成后，属性在被添加回来之前是无法使用的。

delete 操作符被设计用于对象属性。它对变量或函数没有影响。

delete 操作符不应被用于预定义的 JavaScript 对象属性。这样做会使应用程序崩溃。

属性值

所有属性都有名称。此外它们还有值。

值是属性的特性之一。

其他特性包括：可列举、可配置、可写。

这些特性定义了属性被访问的方式（是可读的还是可写的？）。

在 JavaScript 中，所有属性都是可读的，但是只有值是可修改的（只有当属性为可写时）。

原型属性

JavaScript 对象继承了它们的原型的属性。

delete 关键词不会删除被继承的属性，但是如果删除了某个原型属性，则将影响到所有从原型继承的对象。

JavaScript 对象方法

JavaScript 对象方法是能够在对象上执行的动作。

JavaScript 方法是包含函数定义的属性。

方法是存储为对象属性的函数。

this 关键词

在 JavaScript 中，被称为 this 的事物，指的是拥有该 JavaScript 代码的对象。

this 的值，在函数中使用时，是“拥有”该函数的对象。

请注意 this 并非变量。它是关键词。您无法改变 this 的值。

this 拥有不同的值，具体取决于它的使用位置：

方法中的 this：在对象方法中，this 指的是此方法的“拥有者”（拥有此方法的对象）

访问对象方法

请使用如下语法创建对象方法：

methodName: function(){ 代码 }

请通过如下语法来访问对象方法：

objectName.methodName()

通常会把 methodName() 描述为对象的方法，把 propertyName 描述为属性（区分：带不带括号）。

methodName 属性在被通过 () 调用后会以函数形式执行。

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

JavaScript 显示对象

如何显示 JavaScript 对象？

在页面中显示 JavaScript 对象将输出 [object Object]。

显示 JavaScript 对象的一些常见解决方案是：

按名称显示对象属性
循环显示对象属性
使用 Object.values() 显示对象
使用 JSON.stringify() 显示对象

按名称显示对象属性

obj.propertyName

在循环中显示对象

可以使用 for...in 语句在循环中收集对象的属性

for(var x in obj){
    // x 为属性名
    // obj[x] 为属性值
}

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

使用 Object.values()

通过使用 Object.values()，任何 JavaScript 对象都可以被转换为数组。

Object.values() 返回一个包含对象自身的所有可枚举属性值的数组。

语法：

Object.values(obj);

自 2016 年以来，所有主要浏览器都支持 Object.values()。

使用 JSON.stringify()

任何 JavaScript 对象都可以使用 JavaScript 函数 JSON.stringify() 进行字符串化（转换为字符串）。

结果将是一个遵循 JSON 标记法的字符串。

JSON.stringify() 包含在 JavaScript 中，所有主流浏览器都支持。

JSON.stringify() 不会对函数进行字符串化。

语法：

JSON.stringify(obj);

对象构造器

对象类型（蓝图）

在之前的学习中，我们已经掌握怎么创建单一对象。

但是有时候我们需要创建相同“类型”的许多对象的“蓝图”。

创建一种“对象类型”的方法，是使用对象构造器函数。

通过 new 关键词调用构造器函数可以创建相同类型的对象。

语法

// 函数 Person() 就是对象构造器函数。
function Person(first, last, age) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.nationality = "English";    // 对象属性可以拥有默认值
    this.name = function() {
        return this.firstName + " " + this.lastName;
    };
}

// 通过 new 关键词调用构造器函数创建相同类型的对象
var myFather = new Person("Bill", "Gates", 62);
var myMother = new Person("Steve", "Jobs", 56);

注：

用大写首字母对构造器函数命名是个好习惯。

this 关键词

在构造器函数中，this 是没有值的。它是新对象的替代物。当一个新对象被创建时，this 的值会成为这个新对象。

为构造器添加属性和方法

为已有的对象添加新属性和新方法很简单。

与向已有对象添加新属性和新方法不同，我们无法为对象构造器添加新属性和新方法。

如需向构造器添加一个新属性或新方法，我们必须添加到构造器函数。

// 为对象添加属性
myFather.height = 175;
// 为对象添加方法
myFather.eat = function () {
    console.log("今天吃了很多。");
};
// 新属性和新方法被添加到 myFather。不是 myMother，也不是任何其他 person 对象。

// 为构造器添加属性和方法
// 错误的做法
// Person.height = 180;
// Person.eat = function () {
//     console.log("今天吃了很多。");
// };

// 正确的做法
function Person(first, last, age, height) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.height = height;
    this.nationality = "English";    // 对象属性可以拥有默认值
    this.name = function() {
        return this.firstName + " " + this.lastName;
    };
    this.eat = function () {
        console.log("今天吃了很多。");
    };
}

内建 JavaScript 构造器

JavaScript 提供用于原始对象的构造器：

var x1 = new Number();     // 一个新的 Number 对象
var x2 = new String();     // 一个新的 String 对象
var x3 = new Boolean();    // 一个新的 Boolean 对象
var x4 = new Object();     // 一个新的 Object 对象
var x5 = new Array();      // 一个新的 Array 对象
var x6 = new Function();   // 一个新的 Function 对象
var x7 = new RegExp();     // 一个新的 GrgExp 对象
var x8 = new Date();       // 一个新的 Date 对象

// Math() 对象不在此列。Math 是全局对象。new 关键词不可用于 Math。

如上所见，JavaScript 提供原始数据类型数字、字符串和布尔的对象版本。但是并无理由创建复杂的对象，原始值快得多：

请使用数值字面量代替 new Number()。
请使用字符串字面量 "" 代替 new String()。
请使用布尔字面量代替 new Boolean()。
请使用对象字面量 {} 代替 new Object()。
请使用数组字面量 [] 代替 new Array()。
请使用函数表达式 (){} 代替 new Function()。
请使用模式字面量代替 new RexExp()。

实例：

var x1 = 0;                // 新的原始数值
var x2 = " ";              // 新的原始字符串
var x3 = true;             // 新的原始逻辑值
var x4 = {};               // 新对象
var x5 = [];               // 新的数组对象
var x6 = function() {}     // 新的函数对象
var x7 = /()/              // 新的正则表达式对象

对象访问器

JavaScript 对象访问器（Getter 和 Setter）

ECMAScript 5（2009）引入了 Getter 和 Setter。

Getter 和 Setter 允许定义对象访问器（被计算的属性）。

JavaScript Getter（get 关键词）

语法

var student = {
    name: "zhangsan",
    age: 18,
    get getName() {
        return this.name;
    }
};

console.log(student.getName);

JavaScript Setter（set 关键词）

语法

var student = {
    name: "zhangsan",
    age: 18,
    get getName() {
        return this.name;
    },
    set setName(name) {
        this.name = name;
    }
};

student.setName = "lisi";

console.log(student.getName);

为什么使用 Getter 和 Setter？

它提供了更简洁的语法
它允许属性和方法的语法相同
它可以确保更好的数据质量
有利于后台工作

例：

// JavaScript 函数还是 Getter ？

// 例子 1
var student = {
    name: "zhangsan",
    getName: function() {
        return this.name;
    }
};

// 例子 2
var student = {
    name: "zhangsan",
    get getName(){
        return this.name;
    }
};

// 例子 1 以函数形式访问 getName：student.getName()
// 例子 2 以属性形式访问 getName：student.getName
// 第二个例子提供了更简洁的语法

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

// 使用 getName 属性以大写形式返回 name 属性的值
var student = {
    name: "zhangsan",
    get getName() {
        return this.name.toUpperCase();
    }
};

// 使用 setName 属性将大写值存储在 name 属性中
var student = {
    name: "zhangsan",
    set setName(name) {
        this.name = name.toUpperCase();
    }
};

原型和原型链

（如需了解原型和原型链相关内容，请阅读笔者另一篇文章：原型和原型链）

Date 对象

Date 对象用于处理日期与时间。

创建 Date 对象：new Date()

var date = new Date();    // Tue Mar 07 2023 15:47:06 GMT+0800 (中国标准时间)

Date 对象方法

getFullYear()

从 Date 对象以四位数字返回年份。

var year = new Date().getFullYear();    // 2023
// 获取当前完整的年份

getMonth()

从 Date 对象返回月份（0 ~ 11）。

var month = new Date().getMonth();    // 2
// 获取当前月份（0-11,0代表1月）

getDate()

从 Date 对象返回一个月中的某一天（1 ~ 31）。

var date = new Date().getDate();    // 7
// 获取当前日（1-31）

getDay()

从 Date 对象返回一周中的某一天（0 ~ 6）

var day = new Date().getDay();    // 2
// 获取当前星期几（0-6,0代表星期日）

getHours()

返回 Date 对象的小时（0 ~ 23）。

var hours = new Date().getHours();    // 15
// 获取当前小时数（0-23）

getMinutes()

返回 Date 对象的分钟（0 ~ 59）。

var minutes = new Date().getMinutes();    // 47
// 获取当前分钟数（0-59）

getSeconds()

返回 Date 对象的秒数（0 ~ 59）。

var seconds = new Date().getSeconds();    // 6
// 获取当前秒数（0-59）

toLocaleString()

根据本地时间格式，把 Date 对象转换为字符串。

toLocaleDateString()

根据本地时间格式，把 Date 对象的日期部分转换为字符串。

toLocaleTimeString()

根据本地时间格式，把 Date 对象的时间部分转换为字符串。

Math 对象

Math 对象用于执行数学任务。

Math 对象并不像 Date 那样是对象的类，因此没有构造函数 Math()。

Math 对象属性

PI —— 返回圆周率（约等于3.14159）。

Math 对象方法

abs(x) —— 返回 x 的绝对值
pow(x,y) —— 返回 x 的 y 次幂
sqrt(x) —— 返回 x 的平方根
round(x) —— 四舍五入
ceil(x) —— 对 x 进行上舍入（向上取整）
floor(x) —— 对 x 进行下舍入（向下取整）
random() —— 返回 0（包含） ~ 1（不包含）之间的随机数（ [0,1) ）
max(x,y,z,...,n) —— 返回 x,y,z,...,n 中的最高值
min(x,y,z,...,n) —— 返回 x,y,z,...,n 中的最低值

例：

// 求 [1,10] 之间的随机整数
var x = Math.floor(Math.random() * 10) + 1;

起啥名呢？？？

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 入门之对象

对象也是变量。但是对象能够包含很多值。值按照名称:值对的形式编写（名称和值以冒号分隔）。每个名称:值对之间以逗号（,）分隔。请不要在最后一个名称:值对之后写逗号。JavaScript 对象是命名值的集合。JavaScript 对象是被称为属性和方法的命名值的容器。
复制链接

扫一扫