日韩欧美人妻无码精品白浆,夜夜嗨AV免费入口,国产欧美官网在线看,高校回应聋哑女生因长相完美被质疑

曾經(jīng)有人說 JS 語言中萬物皆對(duì)象，雖然這種說法不一定完全準(zhǔn)確，但也有一定的道理。原因是 JS 的語法看起來所有的數(shù)據(jù)類型都像是一個(gè)對(duì)象，包括原始類型。

const a = 1.234;
console.log(a.toString());
console.log(a.valueOf());
console.log(a.toFixed(2));
console.log(Number.prototype); // 查看所有 Number 類型的原型鏈方法屬性
const b = '前端路引';
console.log(b.length);
console.log(b.substring(2));
console.log(b.padEnd(10, '*')); // 后填充 * 字符
console.log(String.prototype); // 查看所有 String 類型的原型鏈方法屬性
const c = true;
console.log(c.toString());
console.log(Boolean.prototype); // 查看所有 Boolean 類型的原型鏈方法屬性

以上展示了 Number、String、Boolean 三種原始類型的方法。a.xxx() 這種寫法就表示 xxx 是 a 的方法。

一般定義在對(duì)象上的 函數(shù) 都稱之為 對(duì)象方法，使用語法： xxx.yyy()。對(duì)象除了方法還有 對(duì)象屬性，使用語法： xxx.yyy。

方法和屬性的區(qū)別是：方法是函數(shù)，屬性是值。

舉個(gè)例子：

const obj = {
  name: '前端路引', // 對(duì)象屬性
  age: 1, // 對(duì)象屬性
  sayHi() { // 對(duì)象方法
    console.log(`我是${this.name}，我今年${this.age}歲`);
  }
}

以上是一個(gè) JS 的對(duì)象字面量定義方式，除了最常用的對(duì)象字面量，還可以像 Array 一樣，使用構(gòu)造函數(shù)來定義對(duì)象，也可以使用 Class 自定義對(duì)象。

對(duì)象定義

JS 的對(duì)象定義可比 數(shù)組 的花樣多多了，下面來一一展示。

對(duì)象字面量

JS 的對(duì)象值與數(shù)組一樣，無任何限制，可以是任意值，包括函數(shù)、數(shù)組、對(duì)象、undefined、null、NaN 等。

const dynamicKey = 'dynamicKey';
const fnKey = () => {};
const obj1 = {
  name: '前端路引', 
  age: 1,
  'favorite-color': 'blue', // 含特殊字符的鍵需用引號(hào)包裹
  [Symbol('id')]: 123, // Symbol 作為鍵
  [dynamicKey]: 'value', // 使用動(dòng)態(tài)變量作為屬性名
  [fnKey]: '使用函數(shù)作為鍵名稱',
  greet() { // 方法簡寫（ES6+）
    console.log('Hello!');
  },
  say: function () { // 函數(shù)
    console.log('Hi!');
  }
};

構(gòu)造函數(shù)

雖然此方法使用較少，但這種方式也可以用來定義一個(gè)對(duì)象。以下代碼與上面的對(duì)象字面量定義的對(duì)象一樣：

const dynamicKey = 'dynamicKey';
const fnKey = () => {};
const obj2 = new Object();
obj2.name = '前端路引';
obj2.age = 1;
obj2['favorite-color'] = 'blue';
obj2[Symbol('id')] = 123;
obj2[dynamicKey] = 'value';
obj2[fnKey] = '使用函數(shù)作為鍵名稱';
obj2.greet = function () {
  console.log('Hello!');
}
obj2.say = function () {
  console.log('Hi!');
}

Object.create()

使用對(duì)象的靜態(tài)方法 Object.create() 來創(chuàng)建對(duì)象。

靜態(tài)方法和對(duì)象原型鏈方法的區(qū)別是：靜態(tài)方法屬于對(duì)象本身，對(duì)象原型鏈上的方法屬于對(duì)象實(shí)例。

看例子：

const obj3 = Object.create({ // 使用靜態(tài)方法創(chuàng)建對(duì)象
  name: '前端路引',
})
obj3.toString() // 調(diào)用原型鏈方法，也稱為實(shí)例方法

Object.create 多用于繼承一個(gè)對(duì)象，擴(kuò)展原有對(duì)象的功能：

const obj4 = {
  name: '前端路引',
}
const obj5 = Object.create(obj4);
obj5.age = 1;
obj5['favorite-color'] = 'blue';

自定義構(gòu)造函數(shù)

除了使用 JS 提供的內(nèi)置構(gòu)造函數(shù)，還可以自定義構(gòu)造函數(shù)來創(chuàng)建一個(gè)對(duì)象。比如：

function WeChat () {
  this.name = '前端路引';
  this.age = 1;
  this['favorite-color'] = 'blue';
}
const obj6 = new WeChat();

function 關(guān)鍵字可不止用于函數(shù)定義，還能用來自定義構(gòu)造函數(shù)，這是在 ES6 出現(xiàn)之前自定義類最常用的方式。

Class

為了消除語法歧義，ES6 引入了 Class 定義類，再通過 new 關(guān)鍵字創(chuàng)建實(shí)例對(duì)象，這種方式完全像是 function 的語法糖。

class WeChat {
  constructor() {
    this.name = '前端路引';
    this.age = 1;
    this['favorite-color'] = 'blue';
  }
  say() {
    console.log('Hi!');
  }
}
const obj7 = new WeChat();

對(duì)象取值

對(duì)象的取值方法也多得眼花繚亂，下面一一展示。

點(diǎn)語法

常規(guī)屬性可以使用 . 取值，比如：

const obj1 = {
  name: '前端路引', 
  age: 1,
  'favorite-color': 'blue',
  say() {
    console.log('Hi!');
  }
}
console.log(obj1.name); // 獲取屬性值
console.log(obj1.say()); // 調(diào)用方法

方括號(hào)取值

. 語法有個(gè)問題，比如上面對(duì)象中 favorite-color 屬性，如果直接使用 obj1.favorite-color，會(huì)報(bào)錯(cuò)，因?yàn)?nbsp;- 會(huì)被當(dāng)做減號(hào)處理，導(dǎo)致報(bào)錯(cuò) ReferenceError: color is not defined。

這時(shí)候可以把對(duì)象當(dāng)做數(shù)組來處理，使用方括號(hào) [] 取值，比如：

const obj1 = {
  name: '前端路引', 
  age: 1,
  'favorite-color': 'blue',
  say() {
    console.log('Hi!');
  }
}
console.log(obj1['favorite-color']); // 獲取屬性值
console.log(obj1['say']()); // 調(diào)用方法

使用方括號(hào)取值時(shí)，如果屬性名是動(dòng)態(tài)的，可以使用變量來取值，比如：

const dynamicKey = 'dynamicKey';
const obj1 = {
  [dynamicKey]: '前端路引',
}
console.log(obj1[dynamicKey]);

解構(gòu)賦值

作為 ES6 引入的新特性，此寫法如果不了解，那么代碼可能都看不懂。

const obj1 = {
  name: '前端路引', 
  age: 1,
}
const { name, age, up = '微信公眾號(hào)' } = obj1;
console.log(name, age);
// 解構(gòu)賦值，可以添加默認(rèn)值，如果找不到屬性，則使用默認(rèn)值
console.log(up);

Object 靜態(tài)方法

Object 自身還提供了一些靜態(tài)方法，用于獲取數(shù)組的鍵值。

const obj1 = {
  name: '前端路引', 
  age: 1,
}
const keys = Object.keys(obj1);    // 返回所有可枚舉屬性名數(shù)組
const values = Object.values(obj1);// 返回所有值數(shù)組
const entries = Object.entries(obj1); // 返回鍵值對(duì)數(shù)組
console.log(keys); // ['name', 'age']
console.log(values); // ['前端路引', 1]
console.log(entries); // 二維數(shù)組  [['name', '前端路引'], ['age', 1]]

Getter / Setter 方法

使用 get 方法，可以設(shè)置對(duì)象的計(jì)算屬性，用于攔截對(duì)象的取值，比如：

const obj1 = {
  firstName: '微信公眾號(hào)：',
  lastName: '前端路引',
  get name() {
    return `${this.firstName}：${this.lastName}`; // 微信公眾號(hào)：：前端路引
  },
  set name(value) {
    [this.firstName, this.lastName] = value.split('：');
  }
}
console.log(obj1.name); // 微信公眾號(hào)：前端路引
obj1.name = '前端路引：微信公眾號(hào)';
console.log(obj1.name); // 前端路引：微信公眾號(hào)

原型鏈訪問

如果取的屬性對(duì)象本身不存在，則會(huì)順著原型鏈查找，直到找到為止，比如：

const obj1 = {
  name: '前端路引', 
  age: 1,
}
console.log(obj1.toString()); // toString 方法不在對(duì)象本身，是 Object 原型鏈上的方法，也可以使用取值語法訪問

可選鏈

ES2020 引入了可選鏈，用于解決對(duì)象取值時(shí)，如果屬性不存在，會(huì)報(bào)錯(cuò)的問題，比如：

const obj1 = {
  name: '前端路引', 
  age: 1,
}
// 如果直接取值，將會(huì)報(bào)錯(cuò) TypeError: Cannot read properties of undefined (reading 'city')
console.log(obj1.address.city);
// 使用可選鏈，如果屬性不存在，則返回 undefined，不會(huì)報(bào)錯(cuò)
console.log(obj1?.address?.city);

寫在最后

以上已包含絕大多數(shù)應(yīng)用場(chǎng)景，但是也會(huì)有一些不太常用的寫法未包含，比如 Reflect.get(obj, 'a')。作為入門條件，掌握以上內(nèi)容已經(jīng)完全夠用。

轉(zhuǎn)自https://www.cnblogs.com/linx/p/18903865