UNPKG

manual-javascript

Version:

JavaScript 是一种具有函数优先的轻量级、解释型、即时编译型的编程语言。

325 lines (280 loc) 6.44 kB
# 对象使用 执行下面的代码,声明对象并访问其属性。 ```javascript let obj = { name: 'Tom', age: 18, 'user-name': 'Tom' }; console.log(obj); console.log(obj.name); console.log(obj.age); console.log(obj['user-name']); ``` 执行下面的代码,删除对象中的指定属性。 ```javascript let obj = { name: 'Tom', age: 18 }; console.log(obj); delete obj.name; console.log(obj); console.log(obj.name); ``` 执行下面的代码,声明对象并访问其方法。 ```javascript let obj = { func: function() { return 'Hello World!'; } }; console.log(obj); console.log(obj.func()); ``` 执行下面的代码,遍历对象中的所有属性与方法。 ```javascript let obj = { name: 'Tom', age: 18, func: function () { return 'Hello World!'; } }; console.log(Object.keys(obj)); console.log(Object.values(obj)); console.log(Object.entries(obj)); for (let k in obj) { console.log(k, obj[k]); } ``` 执行下面的代码,使用 Symbol 作为对象属性名或方法名。 ```javascript let name = Symbol(); let age = Symbol(); let func = Symbol(); let obj = { [name]: 'Tom', [age]: 18, [func]: function () { return 'Hello World!'; } }; console.log(obj); console.log(obj[name]); console.log(obj[age]); console.log(obj[func]()); ``` 执行下面的代码,使用解构语法为变量赋值。 ```javascript let obj = { name: 'Tom', age: 18 }; let { name, age } = obj; console.log(name); console.log(age); ``` 构造函数是一种特殊的函数,主要用来初始化对象。 ```javascript function Person(name, age) { this.name = name; this.age = age; } const Tom = new Person('Tom', 20); const Jerry = new Person('Jerry', 18); console.log(Tom); console.log(Jerry); ``` 构造函数的属性和方法被称为静态属性和静态方法。 ```javascript function Person() {} Person.username = 'anonymous'; Person.call = function() { console.log('Hello World!'); } console.log(Person.username); Person.call(); ``` 在 JavaScript 中所有构造函数中都存在一个原型对象。 ```javascript function Person(name, age) { this.name = name; this.age = age; } Person.prototype.call = function() { console.log('Hello World!'); } const Tom = new Person('Tom', 20); const Jerry = new Person('Jerry', 18); console.log(Tom); Tom.call(); console.log(Jerry); Jerry.call() ``` 执行下面的代码,用定义类的方式来声明对象。 ```javascript class Person { name = 'anonymous'; age = 18; constructor(name, age) { this.name = name; this.age = age; } } const Tom = new Person('tom', 20); console.log(Tom); ``` 执行下面的代码,实现类的继承。 ```javascript class Person { name = 'anonymous'; age = 18; constructor(name, age) { this.name = name; this.age = age; } func() { return [this.name, this.age]; } } class SmartPerson extends Person { gender; constructor(name, age, gender) { super(name, age); this.gender = gender; } func() { return [this.name, this.age, this.gender]; } } const Tom = new Person('tom', 20); console.log(Tom); console.log(Tom.func()); const Jerry = new SmartPerson('jerry', 18, 'female'); console.log(Jerry); console.log(Jerry.func()); ``` 执行下面的代码,定义并访问对象中的私有属性。 ```javascript class Person { name = 'anonymous'; #age = 18; constructor(name, age) { this.name = name; this.#age = age; } func() { return this.#age; } } const Tom = new Person('tom', 20); console.log(Tom); console.log(Tom.name); console.log(Tom.func()); ``` 执行下面的代码,自定义类的读取和修改行为。 ```javascript class Person { name = 'anonymous'; get name() { return this.name; } set name(name) { this.name = name; } } const Tom = new Person(); console.log(Tom.name); Tom.name = 'tom'; console.log(Tom.name); ``` 执行下面的代码,使用可选链操作符访问指定变量。 ```javascript const person = { name: 'tom', age: 20, call: { foo: 'bar', func: () => 'Hello World!' } }; console.log(person?.call?.foo); console.log(person?.call?.bar); console.log(person?.call?.func()); ``` 执行下面的代码,使用空值合并操作符访问指定变量。 ```javascript let num; console.log(num ?? 233); num ??= 233; console.log(num); ``` Math 对象中包含了 JavaScript 提供的一系列数学运算方法。 ```javascript console.log(Math.random()); console.log(Math.ceil(3.7)); console.log(Math.floor(3.7)); console.log(Math.max(1, 2, 3)); console.log(Math.min(1, 2, 3)); console.log(Math.pow(3, 2)); console.log(Math.abs(-233)); console.log(Math.trunc(3.5)); console.log(Math.sign(100)); console.log(Math.sign(0)); console.log(Math.sign(-100)); function equal(a, b) { return Math.abs(a - b) < Number.EPSILON; } console.log(0.1 + 0.2 === 0.3); console.log(equal(0.1 + 0.2, 0.3)); ``` Number 对象包含了 JavaScript 提供的一系列数值处理方法。 ```javascript console.log(Number.isFinite(100)); console.log(Number.isFinite(100 / 0)); console.log(Number.isFinite(Infinity)); console.log(Number.isNaN(233)); console.log(Number.isInteger(666)); console.log(Number.isInteger(1.23)); console.log(Number.parseInt('233Hello')); console.log(Number.parseFloat('3.1415926World')); ``` Date 对象中包含了 JavaScript 提供的一系列日期操作方法。 ```javascript const date = new Date(); console.log(date); console.log(date.getFullYear()); console.log(date.getMonth()); console.log(date.getDay()); console.log(date.getHours()); console.log(date.getMinutes()); console.log(date.getSeconds()); console.log(Date.now()); ``` Object 对象中包含了 JavaScript 提供的一系列对象操作方法。 ```javascript console.log(Object.is(233, 233)); console.log(Object.is(NaN, NaN)); let obj1 = { name: 'Tom', age: 20, func: function () { return 'Hello World!'; } }; let obj2 = { name: 'Jerry', age: 18 }; console.log(Object.assign(obj1, obj2)); ``` ES11 引入了 globalThis 内置对象,目的是为所有 JavaScript 运行环境提供标准化接口来访问全局对象。 ```javascript console.log(globalThis); ``` 执行下面的代码,控制浏览器前进与后退。 ```javascript history.back(); history.forward(); ```