前言

在當今數字時代，前端技術正日益成為塑造用戶體驗的關鍵。我們在開發中需要用到很多js的內置對象的一些屬性來幫助我們更快速的進行開發。或許你是剛踏入前端領域的小白，或者是希望深入了解內置對象的開發者，不論你的經驗如何，本篇博客都將給你詳細的講解js的內置對象。

---

🚀 作者簡介：程序員小豪，全棧工程師，熱愛編程，曾就職于蔚來、騰訊，現就職于某互聯網大廠，技術棧：Vue、React、Python、Java
🎈 本文收錄于小豪的前端系列專欄，后續還會更新前端入門以及前端面試的一些相關文章，手把手帶你從零學習前端到面試找工作，并如果有想進入前端領域工作的同學，這個前端專欄會對你有所幫助，歡迎關注起來呀
🌼 本人也會持續的去關注AIGC以及人工智能領域的一些動向并總結到博客中，大家感興趣的可以關注一下我的人工智能專欄
🌊 云原生的入門學習系列，大家有興趣的可以看一看

全局對象

值屬性

Infinity

全局屬性 Infinity 是一個數值，表示無窮大。

Infinity 屬性的屬性特性

屬性特性	布爾值
writable	false
enumerable	false
configurable	false

說明

• Infinity 是全局對象的一個屬性，即它是一個全局變量。
• Infinity 的初始值是 Number.POSITIVE_INFINITY。

Infinity 大于任何值。該值和數學意義上的無窮大很像，例如任何正值乘以 Infinity 為 Infinity ，任何數值（除了 Infinity和 -Infinity ）除以 Infinity 為 0。

示例

🌰 代碼示例：

console.log(Infinity);
// Infinity
console.log(Infinity + 1);
// Infinity
console.log(Math.pow(10, 1000));
// Infinity
console.log(Math.log(0));
// Infinity
console.log(1 / Infinity);
// 0

NaN

全局屬性 NaN 的值表示不是一個數字（Not-A-Number）。

屬性特性	布爾值
writable	false
enumerable	false
configurable	false

說明

• NaN 是一個全局對象的屬性。
• NaN 屬性的初始值就是 NaN，和 Number.NaN 的值一樣。
• 編碼中很少直接使用到 NaN。通常都是在計算失敗時，作為 Math 的某個方法的返回值出現的（例如：Math.sqrt(-1)）或者嘗試將一個字符串解析成數字但失敗了的時候（例如：parseInt('blabla')）。

返回 NaN 的情況總結：

• 無窮大除以無窮大
• 給任意負數做開放運算
• 算術運算符與不是數字或無法轉換為數字的操作數一起使用
• 字符串解析為數字

示例

值校驗

不可使用等號運算符來判斷一個值是否為 NaN。必須采用 Number.isNaN() 或 isNaN()函數進行判斷。

在執行自比較中，NaN 是唯一與自身不全等的值。

NaN === NaN;
//	falseNumber.NaN === NaN;
// falseisNaN(NaN);
// true;isNaN(Number.NaN);
// true;
function valueIsNaN(v) {return v !== v;
}
valueIsNaN(1);
// false
valueIsNaN(NaN);
// true
valueIsNaN(Number.NaN);
// true

使用 isNaN() 前先檢查一下這個值是否是數字類型，即可避免隱式類型轉換的問題。

function detectIsNaN(value) {return typeof value === 'number' && isNaN(value);
}

undefined

undefined 屬性是一個特殊值。如果已聲明了一個變量但還未進行初始化，則其值為 undefined。

該屬性為 Global 對象的一個只讀屬性(準確地說，是一個常量)。所有主流瀏覽器均支持該屬性。

說明

如果一個變量未被初始化賦值，則其值為 undefined。如果一個函數沒有返回值，則其返回值默認為 undefined。

函數屬性

eval

eval() 函數用于計算并執行以字符串表示的 JavaScript 代碼。eval() 函數使 JavaScript 可以動態執行 JavaScript 源代碼。

eval() 函數屬于 Global 對象，所有主流瀏覽器均支持該函數。

語法

eval(code);

參數	類型	說明
code	String 類型	包含有效 JavaScript 代碼的字符串

?? 注意： 參數code必須是原始字符串，不能是 String 對象形式。如果參數 code 不是原始字符串，則 eval() 函數不會執行代碼，并且將其不作任何改變地返回。

如果參數 code 中的 JavaScript 代碼不合法，將會引發異常。

eval() 函數的返回值是任意類型，其返回值由參數 code 中具體的 JavaScript 代碼決定。

說明

• 傳遞給 eval() 函數的代碼執行時所在的上下文和調用 eval() 函數時的上下文一樣（也就是說，作用域不變）。
• 請自行確認 code 代碼的來源是可信的，否則使用 eval() 函數存在一定的安全隱患。

示例

let x = 2,y = 39,z = '42';eval('x + y + 1');
// 42eval(z);
// 42

isNaN

isNaN() 函數用于判斷指定數字是否是非數字值 NaN。

該函數屬于Global對象，所有主流瀏覽器均支持該函數。

語法

isNaN(number);

參數	類型	說明
number	Number 類型	指定的數值

?? 注意： 如果參數 number 不是 Number 類型，則 isNaN() 函數會將其強制轉換為 Number 類型再進行判斷。大多數其他類型的值無法強制轉換為 Number 類型，則其轉換結果為 NaN，即 isNaN() 函數返回 true。

• isNaN()
  

  函數的返回值是 Boolean 類型。

  • 如果指定的數字為 NaN，則返回 true
  • 如果指定的數字為非 NaN 則返回 false。

說明

• 通常使用此函數檢測來自 parseInt() 和 parseFloat() 函數的返回值。
• 將某些不能強制轉換為數字類型的值的非數字類型的值轉換為數字類型的值時，也會得到 NaN。
• NaN 不能通過相等操作符來判斷，因為 NaN 是唯一一個與其自身不等的值。

示例

isNaN(NaN);
// true
isNaN(undefined);
// true
isNaN({});
// trueisNaN(true);
// false
isNaN(null);
// false
isNaN(37);
// false// strings
isNaN('37');
// false: 可以被轉換成數值37
isNaN('37.37');
// false: 可以被轉換成數值37.37
isNaN('');
// false: 空字符串被轉換成0
isNaN(' ');
// false: 包含空格的字符串被轉換成0// dates
isNaN(new Date());
// false
isNaN(new Date().toString());
// trueisNaN('blabla');
// true: "blabla"不能轉換成數值

parseFloat

parseFloat()函數用于將字符串轉換為浮點數并返回。

該函數屬于 Global 對象，所有主流瀏覽器均支持該函數。

語法

parseFloat(numberString);

參數	類型	說明
numberString	String 類型	需要轉換為浮點數的字符串。

• 返回轉換后的浮點數，

  number
  

  類型，

  • 如果指定的字符串中包含非數字字符，只要字符串開頭的一部分符合浮點數規則，則 parseFloat() 函數會將這一部分字符串轉化為數字（從字符串開頭，直到遇到非數字字符為止）。
  • 如果字符串以非數字字符開頭，則返回 NaN。

示例

• 返回正常數字

parseFloat('3.14');
parseFloat('314e-2');
parseFloat('0.0314E+2');
parseFloat('3.14more non-digit characters');// all return 3.14

• 返回 NaN

parseFloat('MDN');
// NaN
parseFloat(null);
// NaN
parseFloat([]);
// NaN
parseFloat({});
// NaN

parseInt

parseInt() 函數用于 將字符串轉換為整數并返回。該函數可以將字符串視作指定的進制形式表示。

該函數屬于 Global 對象，所有主流瀏覽器均支持該函數。

語法

parseInt( numString [, radix ] )

參數	類型	說明
numString	String 類型	需要轉換為整數的字符串
radix	Number 類型	可選，指定的進制基數（介于 [2, 36] 之間的數值。）

例如：參數 radix 為 2，則將 numString 視作二進制；參數 radix 為 8，則視作八進制；參數 radix 為 16，則視作十六進制。

如果沒有提供 radix 參數，則 parseInt() 函數將會根據參數 numString 的前綴來決定轉換的進制基數。如果 numString 的前綴是 0x，則轉換為十六進制；如果前綴是 0，則轉換為八進制；其他情況均轉換為十進制。

• parseInt()函數的返回值為 Number 類型，返回轉換后的整數
  • 如果指定的字符串中包含非數字字符，只要字符串開頭的一部分符合整數的轉換規則，則 parseInt() 函數會將這一部分字符串轉化為整數（從字符串開頭，直到遇到非數字字符為止）。
  • 如果字符串以非數字字符開頭，則返回 NaN。

示例

• 正常使用 parseInt()，以下均返回 15

// Binary
parseInt('1111', 2);// Octal
parseInt('17', 8);
parseInt(021, 8);// Decimal
parseInt('015', 10);
parseInt(15.99, 10);
parseInt('15,123', 10);
parseInt('15 * 3', 10);
parseInt('15e2', 10);
parseInt('15px', 10);parseInt('12', 13);// Hexadecimal
parseInt('0xF', 16);
parseInt('F', 16);
parseInt('FXX123', 16);

• 以下均返回 NaN

parseInt('Hello', 8);
// not a numberparseInt('546', 2);
// except 0 & 1,other number are not valid binary numbers

decodeURI

decodeURI() 函數用于對已編碼的統一資源標識符(URI)進行解碼，并返回其非編碼形式。

該函數屬于 Global 對象，所有主流瀏覽器均支持該函數。

語法

decodeURI(encodedURIString);

參數	類型	說明
encodedURIString	String 類型	已編碼的 URI 字符串

decodeURI() 函數的返回值是 string 類型，返回一個已經解碼的 URI。

將已編碼 URI 中所有能識別的轉義序列轉換成原字符，但不能解碼那些不會被 encodeURI 編碼的內容（例如 #）。

示例

let a = 'Hello JavaScript!';
let b = encodeURI(a);console.log(b);
// return '%E4%BD%A0%E5%A5%BDJavascript!'let c = decodeURI(b);
// return '你好Javascript!'

encodeURI

encodeURI() 函數可把 URI 字符串采用 UTF-8 編碼格式轉化成 escape 格式的字符串。

該函數屬于 Global 對象，所有主流瀏覽器均支持該函數。

語法

encodeURI(URIString);

參數	類型	說明
URIString	String 類型	需要編碼的 URI 字符串

該方法返回一個已經編碼的 URI 字符串。

說明

如果要對使用 encodeURI() 函數編碼的 URI 字符串進行解碼，請使用 decodeURI() 函數。

encodeURI() 函數不編碼字符有 82 個 !、#、$、'、(、)、*、+、,、-、.、/、:、;、=、?、@、_、~、0-9、a-z、A-Z 。

如果你只是想編碼一個帶有特殊字符（比如中文）的 URI，這個 URI 用作請求地址，請使用本函數。

如果你想把 URI 當作請求參數傳遞，那么你可以使用 encodeURIComponent() 函數。encodeURIComponent() 函數會編碼所有的字符。

示例

// 原URI
var ftpUri = 'ftp://192.168.0.100/共享文件夾';// 編碼URI
var encodedFtpUri = encodeURI(ftpUri);
console.log(encodedFtpUri); // ftp://192.168.0.100/%E5%85%B1%E4%BA%AB%E6%96%87%E4%BB%B6%E5%A4%B9// 解碼URI
var decodedFtpUri = decodeURI(encodedFtpUri);
console.log(decodedFtpUri); // ftp://192.168.0.100/共享文件夾

Object

JavaScript 中的 Object 對象，是 JavaScript 中所有對象的基類，也就是說 JavaScript 中的所有對象都是由 Object 對象衍生的。Object 對象主要用于將任意數據封裝成對象形式。

對象也可看做是屬性的無序集合，每個屬性都是一個名值對。屬性名是字符串，因此我們可以把對象看成是從字符串到值的映射。

語法

構造函數

new Object([value]);

對象類型轉換函數

Object([value]);

參數	說明	類型
value	可選參數，需要包裝為對象的值	any

Object.assign

Object.assign() 方法用于將所有可枚舉自有 Property 的值從一個或多個源對象拷貝到目標對象。

語法

Object.assign(target, ...sources);

參數	說明	類型
target	目標對象	object
sources	源對象	object

返回目標對象。

描述

如果目標對象中的屬性具有相同的鍵，則屬性將被源對象中的屬性覆蓋。后面的源對象的屬性將類似地覆蓋前面的源對象的屬性。

Object.assign 方法只會拷貝源對象自身的并且可枚舉的屬性到目標對象。

該方法使用源對象的 [[Get]] 和目標對象的 [[Set]]，所以它會調用相關 getter 和 setter。因此，它分配屬性，而不僅僅是復制或定義新的屬性。如果合并源包含 getter，這可能使其不適合將新屬性合并到原型中。為了將屬性定義（包括其可枚舉性）復制到原型，應使用 Object.getOwnPropertyDescriptor和 Object.defineProperty 。

示例

基本示例

const a = { a: 1 };const b = Object.assign({}, a);console.log(b); // { a: 1 }

Object.create

Object.create() 方法用于創建指定對象為原型對象的新對象。

語法

語法：

Object.create(o: object | null): any;
Object.create(o: object | null, properties: PropertyDescriptorMap & ThisType<any>): any;

類型聲明拓展：

interface PropertyDescriptor {configurable?: boolean;enumerable?: boolean;value?: any;writable?: boolean;get?(): any;set?(v: any): void;
}interface PropertyDescriptorMap {[s: string]: PropertyDescriptor;
}interface ThisType<T> {}

參數說明：

參數	說明	類型
o	新創建對象指向的原型對象	object
properties	可選參數。添加到新創建對象的可枚舉屬性（即自身定義的屬性，而不是原型鏈上的枚舉屬性）	object

?? 注意：

• 如果 properties 參數不是 null 或對象，則拋出一個 TypeError 異常
• 返回指定原型對象和可枚舉屬性的新對象

示例

類式繼承

// Shape = Super Class
function Shape() {this.x = 0;this.y = 0;
}// Super Class Methods
Shape.prototype.move = function () {this.x += x;this.y += y;console.log('Shap moved');
};// Retangle - Sub Class
function Retangle() {Shape.all(this); // call super constructor
}// 子類繼承父類
Retangle.prototype = Object.create(Shape.prototype);
Retangle.prototype.constructor = Retangle;const rect = new Retangle();console.log(rect instanceof Retangle);
// true
console.log(rect instanceof Shape);
// true

Object.defineProperties

Object.defineProperties() 方法用于為一個對象定義 Properties 和/或修改已有的 Properties 的 Attributes。

語法

Object.defineProperties(O, Properties);

參數	說明	類型
O	添加或修改 Properties 的目標對象	object
Properties	要定義其可枚舉屬性或修改的屬性描述符的對象	object

Attributes	默認值
configurable	false
enumerable	false
value	undefined
writable	false
get	undefined
set	undefined

返回變更后的對象。

示例

const abc = { a: 1, b: 2, c: 3 };Object.defineProperties(abc, {a: {value: 'One',writable: false,enumerable: false,configurable: false,},e: {value: 4,},f: {value: 5,},
});console.log(abc);
// {
// b: "Two",
// c: 3,
// a: "One",
// d: "Three",
// e: 4,
// f: 5,
// }abc.a = 10;console.log(abc.a);
// 'One'

Object.defineProperty

Object.defineProperty() 方法用于為一個對象定義一個自有 Property 和/或修改已有 Property 的 Attributes。

語法

Object.defineProperty(O, P, Attributes);

參數	說明	類型
O	定義或修改 Property 的目標對象	object
P	需要定義的 Property 鍵名	string
Attributes	被定義或修改的 Attributes	object

返回變更后的對象。

示例

const foo = {};Object.defineProperty(foo, 'a', {value: 100,writable: true,enumerable: true,configurable: true
})console.log(foo);
// { a: 100 }const bar;// 添加屬性和存取描述符
Object.defineProperty(foo, 'b', {get: function(){return foo},set: function(newValue){bar = newValue},enumerable: true,configurable: true,
})foo.b = 99;console.log(foo.b);
// 99

對象屬性劫持

遍歷劫持對象的所有屬性

const data = {a: 'a',b: 'b',c: 'c'
};// 遍歷對象，對其屬性值進行劫持
Object.keys(data).forEach(function(key) {Object.defineProperty(data, key, {enumerable: true,configurable: true,get: function() {console.log('GET')},set: function(value) {// 當屬性值發生變化時我們可以進行額外操作console.log('SET')}})
})

Object.entries

?? ES2017(ES8)新特性

Object.entries() 方法用于枚舉指定對象并返回以鍵值對組成的數組為元素的二維數組。

語法

語法：

Object.entries(obj);

類型聲明：

interface ObjectConstructor {values<T>(o: { [s: string]: T } | ArrayLike<T>): T[];values(o: {}): any[];
}

參數說明：

參數	說明	類型
obj	用于枚舉的對象	object

返回值：

返回給定對象自身可枚舉 Property 的鍵值對數組。

方法說明

給定對象自身可枚舉屬性的鍵值對數組，其排列與使用 for-in循環遍歷該對象時返回的順序一致，區別在于 for-in 循環也枚舉原型鏈中的屬性。

代碼示例

const a = { foo: 1, bar: 2 };
Object.entries(a);
// [['foo', 1], ['bar', 2]]Object.entries('foo');
// [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]const obj = { a: 5, b: 7, c: 9 };
for (const [key, value] of Object.entries(obj)) {console.log(`${key} ${value}`);// "a 5", "b 7", "c 9"
}Object.entries(obj).forEach(([key, value]) => {console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
});

Object.entries

?? ES2017(ES8)新特性

Object.entries() 方法用于枚舉指定對象并返回以鍵值對組成的數組為元素的二維數組。

語法

語法：

Object.entries(obj);

類型聲明：

interface ObjectConstructor {values<T>(o: { [s: string]: T } | ArrayLike<T>): T[];values(o: {}): any[];
}

參數說明：

參數	說明	類型
obj	用于枚舉的對象	object

返回值：

返回給定對象自身可枚舉 Property 的鍵值對數組。

方法說明

給定對象自身可枚舉屬性的鍵值對數組，其排列與使用 for-in循環遍歷該對象時返回的順序一致，區別在于 for-in 循環也枚舉原型鏈中的屬性。

代碼示例

const a = { foo: 1, bar: 2 };
Object.entries(a);
// [['foo', 1], ['bar', 2]]Object.entries('foo');
// [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]const obj = { a: 5, b: 7, c: 9 };
for (const [key, value] of Object.entries(obj)) {console.log(`${key} ${value}`);// "a 5", "b 7", "c 9"
}Object.entries(obj).forEach(([key, value]) => {console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
});

Object.getOwnPropertyDescriptor

Object.getOwnPropertyDescriptor() 方法可以獲取對象自有 Property 的某個 Attributes。

語法

Object.getOwnPropertyDescriptor(O, Property);

參數	說明	類型
O	需要查找的目標對象	object
Property	目標對象的 Property	string

示例

const foo = { a: 1 };Object.getOwnPropertyDescriptor(foo, 'a');
// Object {
// 	value: "a",
// 	writable: true,
// 	enumerable: true,
// 	configurable: true,
// }

Object.getOwnPropertyDescriptors

?? ES2017(ES8)新特性

Object.getOwnPropertyDescriptors() 方法用于獲取一個對象的所有自身 Property 的 Attributes。

語法

語法：

Object.getOwnPropertyDescriptors(obj);

類型聲明：

interface ObjectConstructor {getOwnPropertyDescriptors<T>(o: T): { [P in keyof T]: TypedPropertyDescriptor<T[P]> } & { [x: string]: PropertyDescriptor };
}interface TypedPropertyDescriptor<T> {enumerable?: boolean;configurable?: boolean;writable?: boolean;value?: T;get?: () => T;set?: (value: T) => void;
}interface PropertyDescriptor {configurable?: boolean;enumerable?: boolean;value?: any;writable?: boolean;get?(): any;set?(v: any): void;
}

參數說明：

參數	說明	類型
obj	用于獲取 Property 的 Attributes 的對象	object

代碼示例

const a = {name: 'Ben',get age() {return '18';},
};Object.getOwnPropertyDescriptors(a);

Object.getPrototypeOf

Object.getPrototypeOf() 方法用于獲取指定對象的原型（內部 [[Prototype]] 屬性的值）。

語法

Object.getPrototypeOf(O);

參數	說明	類型
O	目標對象	object

返回目標對象的原型對象。

示例

基本示例

const proto = {};const foo = Object.create(proto);
Object.getPrototypeOf(foo) === proto;
// trueconst reg = /a/;
Object.getPrototypeOf(reg) === Regexp.prototype;
// true

標準內置對象

const foo = new Object();Object.getPropertyOf(Object);
// f () { [native code] }
Object.getPropertyOf(Function);
// f () { [native code] }Object.getPropertyOf(Object) === Function.prototype;
// trueconst bar = new Object();
Object.prototype === Object.getPrototypeOf(bar);
// true
Obejct.prototype === Object.getPrototypeOf({});
// true

Object.is

Object.is() 方法用于判斷兩個值是否是相同的值。

語法

Object.is(value1, value2);

參數	說明	類型
value1	比較值 1	any
value2	比較值 2	any

返回判斷表達式的結果。

描述

判斷下列任何一項成立，則兩個值相同：

• 兩個值均為 undefined
• 兩個值均為 null
• 兩個值都是 true 或 false
• 兩個值是由相同個數的字符按照相同順序組成的字符串
• 兩個值指向同一個對象
• 兩個值都是數字并且
  • 都是正零 +0
  • 都是負零 -0
  • 都是 NaN
  • 都是除零和 NaN 外的其他同一個數字

這種相等性判斷邏輯和傳統的 == 運算不同，== 運算符會對它兩邊的操作數做隱式類型轉換，然后才進行相等性比較，（所以才會有類似 "" == false 等于 true 的現象），但 Object.is 不會做這種類型轉換。

這與 === 運算符的判定方式也不一樣。=== 運算符（和 == 運算符）將數字值 -0 和 +0 視為相等，并認為 Number.NaN 不等于 NaN。

示例

Object.is(undefined, undefined);
// trueObject.is(null, null);
// trueObject.is(true, true);
// trueObject.is(100, 100);
// trueObject.is('foo', 'bar');
// falseObject.is([], []);
// falseObject.is(0, -0);
// false
Object.is(-0, -0);
// true
Object.is(NaN, 0 / 0);
// true

Object.keys

Object.keys() 方法用于獲取指定對象自身可枚舉 Property 組成的鍵名數組。

語法

Object.keys(O);

參數	說明	類型
O	指定對象	object

返回對象所有可枚舉 Property 的鍵名組成的數組。

描述

獲取到的數組中鍵名順序與使用 for 系列循環語句獲取到的鍵名順序一致。

示例

數組

const foo = ['a', 'b', 'c'];console.log(Object.keys(foo));
// console: ['0', '1', '2']

類數組

const foo = { 0: 'a', 1: 'b', 2: 'c' };console.log(Object.keys(foo));
// console: ['0', '1', '2']

不可枚舉屬性

// getBar is a property which isn't enumerable
const foo = Object.create({},{getBar: {value: function() {return this.bar;},},}
);foo.bar = 1;console.log(Object.keys(foo));
// ['bar']

Object.setPrototypeOf

Object.setPrototypeOf() 方法用于設置一個指定的對象的原型 ( 即，內部 [[Prototype]] 屬性）到另一個對象或 null。

語法

Object.setPrototypeOf(O, proto);

參數	說明	類型
O	要設置其原型的對象	object
proto	原型對象	object

返回設置原型后的對象。

示例

const foo = Object.setPrototypeOf({}, null);

代碼實現

if (!Object.setPrototypeOf) {Object.setPrototypeOf = function() {};
}

Object.values

?? ES2017(ES8)新特性

Object.values() 方法用于指定對象自身的所有可枚舉 Property 值的數組。

語法

語法：

Object.values(obj);

類型聲明：

interface ObjectConstructor {values<T>(o: { [s: string]: T } | ArrayLike<T>): T[];values(o: {}): any[];
}

參數說明：

參數	說明	類型
obj	指定對象	object

返回對象可枚舉 Property 值的數組集合。

方法說明

返回的數組中鍵值的順序與使用循環語句獲取的鍵值組合一致。

代碼示例

const obj = {a: '1',b: '2',c: '3',
};console.log(Object.values(obj));
// ['1', '2', '3']

Object.prototype.hasOwnProperty

Object.prototype.hasOwnProperty 方法用于檢測指定對象自有 Properties 中是否具有指定的 Property。

語法

O.prototype.hasOwnProperty(V);

參數	說明	類型
V	需要檢測的 Property 字符串名稱或者 Symbol	string/symbol

返回該對象是否含有指定 Property 的 Boolean 值。

描述

所有繼承了 Object 的對象都會繼承到 hasOwnProperty 方法。

這個方法可以用來檢測一個對象是否含有特定的自身屬性；和 in 運算符不同，該方法會忽略掉那些從原型鏈上繼承到的屬性。

示例

基本示例

const foo = new Object();
foo.a = 'exist';function change() {foo.b = foo.a;delete foo.a;
}foo.hasOwnProperty('a');
// truechange();foo.hasOwnProperty('b');
// false

自有屬性與繼承屬性

const foo = new Object();foo.a = 'Hello world!';foo.hasOwnProperty('a');
// true
foo.hasOwnProperty('toString');
// false
foo.hasOwnProperty('hasOwnProperty');
// false

Object.prototype.isPrototypeOf

Object.prototype.isPrototypeOf() 方法用于測試指定對象是否存在于目標對象的原型鏈上。

語法

O.prototype.isPrototypeOf(V);

參數	說明	類型
V	目標對象（在該對象原型鏈上搜尋）	object

返回指定對象是否位于目標對象原型鏈上的 Boolean 類型值。

示例

function Foo() {}
function Bar() {}
function Baz() {}Bar.prototype = Object.create(Foo.prototype);
Baz.prototype = Object.create(Bar.prototype);const baz = new Baz();console.log(Baz.prototype.isPrototypeOf(baz));
// trueconsole.log(Bar.prototype.isPrototypeOf(baz));
// trueconsole.log(Foo.prototype.isPrototypeOf(baz));
// trueconsole.log(Object.prototype.isPrototypeOf(baz));
// true

Object.prototype.prototypeIsEnumerable

Object.prototype.prototypeIsEnumerable() 方法用于檢測指定 Property 是否可枚舉。

語法

O.prototype.prototypeIsEnumerable(V);

參數	說明	類型
V	需要檢測的 Property 鍵名	string

返回表示指定 Property 鍵名是否可枚舉的 Boolean 類型值。

示例

基本示例

const foo = {};
const bar = [];foo.a = 'is enumerable';
bar[0] = 'is enumerable';foo.propertyIsEnumerable('a');
// true
bar.propertyIsEnumerable(0);
// true

自有屬性與繼承屬性

原型鏈上 的 Properties 不被 propertyIsEnumerable 考慮。

const a = [];a.propertyIsEnumerable('constructor');function b() {this.property = 'b';
}b.prototype.firstMethod = function() {};function c() {this.method = function method() {return 'c';};
}c.prototype = new b();
c.prototype.constructor = c;const d = new c();d.arbitraryProperty = 'd';d.prototypeIsEnumerable('arbitraryProperty');
// true
d.prototypeIsEnumerable('method');
// true
d.prototypeIsEnumerable('property');
// falsed.property = 'd';d.prototypeIsEnumerable('property');
// true

Object.prototype.toString

Object.prototype.toString() 方法用于表示指定對象的字符串。

語法

O.prototype.toString();

表示該對象的字符串。

描述

所有經過標準內置對象創建的值均能通過 toString() 方法獲取 String 類型值。

示例

基本示例

const foo = new Object();foo.toString();
// [object Object]

檢測對象類型

需要使用 Function.prototype.call() 和 Function.prototype.apply() 的形式調用，輸入需要檢測的對象作為第一參數。

const toString = Object.prototype.toString();toString.call(new Date());
// [object Date]toString.call(new String());
// [object String]toString.call(Math);
// [object Math]// Since JavaScript 1.8.5
toString.call(undefined);
// [object Undefined]
toString.call(null);
// [object Null]

Object.isExtensible

Object.isExtensible() 方法用于檢測指定對象是否可擴展。

語法

Object.isExtensible(O);

參數	說明	類型
O	指定用于檢測的對象	object

返回 Boolean 類型的值表示用于檢測的對象是否可擴展。

描述

默認情況下，對象是可擴展的：即可以為他們添加新的屬性。

Object.preventExtensions、Object.seal或 Object.freeze方法都可以標記一個對象為不可擴展（non-extensible）。

示例

let foo = {a: 1,
};
console.log(Object.isExtensible(foo));
// truefoo.b = 2;console.log(foo);
// {a: 1, b: 2}console.log(Object.preventExtensions(foo));
// { a: 1, b: 2}// 由于對象 foo 禁止擴展，所以該賦值語句靜默失敗
foo.c = 3;console.log(Object.isExtensible(foo));
// falseconsole.log(foo);
// { a: 1, b: 2}

Function

Function 構造函數通過 new 創建一個新的 Function 對象。 在 JavaScript 中，每個函數實際上都是一個 Function 對象。

語法

構造函數

new Function ( [ argName1 [, argName1 [, argNameN... [, funcBody ]]]] )

函數類型轉換函數

Function ( [ argName1 [, argName1 [, argNameN... [, funcBody ]]]] )

參數	說明	類型
argName1	定義的第 1 個參數的名稱	string
argName2	定義的第 2 個參數的名稱	string
argNameN	定義的第 N 個參數的名稱，可以有任意多個	string
funcBody	定義的函數主體，即函數內部的執行代碼，默認為空字符串("")	string

Function() 會把傳入的最后一個參數作為函數定義的執行代碼，之前的所有參數均依次作為函數定義的參數。

• 如果沒有指定任何參數，則表示該函數沒有定義參數列表，函數的執行代碼也為空。
• 如果只指定了一個參數，則該參數將被視作函數的執行代碼。如果你想定義一個參數、執行代碼為空，請傳入兩個參數，第二個參數為空字符串即可：new Function("argName1", "")。

Function() 的返回值是 Function 類型，返回一個函數對象。

Function.prototype.apply

Function.prototype.apply 方法用于指定函數調用指向的 this 指針，并提供類數組類型的參數列表作為指定函數的參數。

語法

語法：

apply(thisArg: any, argArray?: any): any;

參數：

參數	說明	類型
thisArg	可選參數。調用函數時指向的 this 指針。	/
argArray	可選參數。調用函數參數列表。	Array | TypedArray

描述

Function.prototype.apply 與 Function.prototype.call 非常相似，不同之處在于提供參數的方式，apply 使用參數數組而非一組參數列表。

你可以使用 arguments 對象作為 argArray 參數。arguments 是一個函數的局部變量，它可以被用作被調用對象的所有未指定的參數。這樣，你在使用 apply 方法時就不需要知道被調用的對象的所有參數。你可以使用 arguments 來把所有的參數傳遞給被調用對象。 被調用對象接下來就負責處理這些參數。

示例

數組元素添加

使用 Array.prototype.push能將元素追加到數組中，并且，該方法可以接受可變數量的參數。

但是如果，我們需要傳遞一個數組追加到數組中，它實際上會將該數組作為單個元素添加，而不是單獨添加元素，因此我們最終得到一個數組內的數組。

這種情況下，雖然可以通過 Array.prototype.concat實現我們想要的行為，但它實際上不是附加到原有數組中，而是創建并返回新的數組。

而我們可以通過 Function.prototype.apply 實現該需求。

const foo = [];
const bar = [1, 2, 3, 4];foo.push.apply(foo, bar);console.log(foo);
// [1, 2, 3, 4]

內置函數使用

可以使用 Function.prototype.apply 實現本來需要遍歷數組變量的任務中使用內建的的函數。

以下例子使用 Math.max 和 Math.min 來找出一個數組中的最大 / 最小值。

const foo = [2, 4, 6, 8, 10];const max = Math.max.apply(null, foo);
const min = Math.min.apply(null, foo);

?? 注意：使用上述方式調用 Function.prototype.apply，會有超出 JavaScript 引擎的參數長度限制的風險。當對一個函數傳入非常多的參數（比如一萬個）時，就非常有可能會導致越界問題，這個臨界值是根據不同的 JavaScript 引擎而定的（JavaScript 核心中已經做了硬編碼 參數個數限制在 65536），因為這個限制（實際上也是任何用到超大棧空間的行為的自然表現）是未指定的，有些引擎會拋出異常。更糟糕的是其他引擎會直接限制傳入到方法的參數個數，導致參數丟失。

如果參數數組可能很大，可以使用以下策略處理：將參數數組切塊后循環傳入目標方法。

function minOfArray(arr) {var min = Infinity;var QUANTUM = 32768;for (var i = 0, len = arr.length; i < len; i += QUANTUM) {var submin = Math.min.apply(null, arr.slice(i, Math.min(i + QUANTUM, len)));min = Math.min(submin, min);}return min;
}var min = minOfArray([5, 6, 2, 3, 7]);

Function.prototype.call

Function.prototype.call 方法用于指定函數調用指向的 this 指針，并分別提供參數作為指定函數的參數。

語法

語法：

call(thisArg: any, ...argArray: any[]): any;

參數

參數	說明	類型
thisArg	可選參數。調用函數時指向的 this 指針。
args	可選參數。調用函數參數列表。

示例

function Product(name, price) {this.name = name;this.price = price;
}function Food(name, price) {Product.call(this, name, price);this.category = 'food';
}function Toy(name, price) {Product.call(this, name, price);this.category = 'toy';
}const cheese = new Food('cheese', 5);
const robot = new Toy('robot', 40);console.log(cheese);
// {
//   category: "food",
//   name: "cheese",
//   price: 5,
// }
console.log(robot);
// {
//   category: "toy",
//   name: "robot",
//   price: 40,
// }

Function.prototype.bind

Function.prototype.bind 方法創建一個新函數，在 bind() 被調用時，這個新函數的 this 被指定為 bind() 的第一個參數，而其余參數將作為新函數的參數，供調用時使用。

語法

語法：

bind(thisArg: any, ...argArray: any[]): any;

參數

參數	說明	類型
thisArg	可選參數。調用函數時指向的 this 指針。	/
arg1,arg2,…	可選參數。當目標函數被調用時，被預置入綁定函數的參數列表中的參數。	any

描述

Function.prototype.bind 函數會創建一個新 綁定函數（Bound Function，BF）。綁定函數是一個 Exotic Function Object（怪異函數對象，ECMAScript 2015 中的術語），它包裝了原函數對象。調用綁定函數通常會導致執行 包裝函數。

綁定函數具有以下內部屬性：

• [[BoundTargetFunction]]：包裝的函數對象
• [[BoundThis]]：在調用包裝函數時始終作為 this 值傳遞的值。
• [[BoundArguments]]：列表，在對包裝函數做任何調用都會優先用列表元素填充參數列表。
• [[Call]]：執行與此對象關聯的代碼。通過函數調用表達式調用。內部方法的參數是一個 this 值和一個包含通過調用表達式傳遞給函數的參數的列表。

當調用綁定函數時，它調用 [[BoundTargetFunction]] 上的內部方法 [[Call]]，就像這樣 Call(boundThis, args)。其中，boundThis 是 [[BoundThis]]，args 是 [[BoundArguments]] 加上通過函數調用傳入的參數列表。

綁定函數也可以使用 new 運算符構造，它會表現為目標函數已經被構建完畢。提供的 this 值會被忽略，但前置參數仍會提供給模擬函數。

示例

創建綁定函數

Function.prototype.bind() 最簡單的用法是創建一個函數，不論怎么調用，這個函數都有同樣的 this 引用。JavaScript 新手經常犯的一個錯誤是將一個方法從對象中拿出來，然后再調用，期望方法中的 this 是原來的對象（比如在回調中傳入這個方法）。如果不做特殊處理的話，一般會丟失原來的對象。基于這個函數，用原始的對象創建一個綁定函數，巧妙地解決了這個問題。

this.a = '100';const foo = {a: '99',getA: function () {return this.a;},
};foo.getA();
// '99'const retrieveA = foo.getA;retrieveA();
// '100'const boundGetA = retrieveA.bind(foo);boundGetA();
// '99'

偏函數

Function.prototype.bind() 方法的另一個最簡單的用法是使一個函數擁有預設的初始參數。只要將這些參數（如果有的話）作為 bind() 的參數寫在 this 后面。當綁定函數被調用時，這些參數會被插入到目標函數的參數列表的開始位置，傳遞給綁定函數的參數會跟在它們后面。

const foo = function (a, b, c, d, e, f) {console.log(a, b, c, d, e, f);
};// 預設三個參數 1 2 3 -> 對應 foo 參數 a b c
const bar = foo.bind(null, 1, 2, 3);bar(4, 5, 6);
// 1 2 3 4 5 6

配合定時器

默認情況下，使用 window.setTimeout 時，this 關鍵字會指向 Window 對象。當類的方法中需要 this 指向類的實例時，你可能需要顯式地把 this 綁定到回調函數，就不會丟失該實例的引用。

function LaterBloomer() {this.petalCount = Math.ceil(Math.random() * 12) + 1;
}LaterBloomer.prototype.bloom = function () {window.setTimeout(this.declare.bind(this), 1000);
};LateBloomer.prototype.declare = function () {console.log('I am a beautiful flower with ' + this.petalCount + ' petals!');
};const flower = new LateBloomer();flower.bloom();

String

String 對象是一個用于 字符串 或一個 字符序列 的構造函數。

String 對象是文本字符串的對象形式。String 對象允許操作和格式化文本字符串以及確定和定位字符串中的子字符串。

語法

構造函數

new String([value]);

字符串類型轉換函數

String([value]);

參數	類型	說明
value	任意類型	任何可以被轉換成字符串的值。

說明

模板字面量

從 ECMAScript 2015 開始，字符串字面量也可以稱為 模板字面量：

const w = 'world'`Hello ${w}!`;

String.fromCharCode

靜態 String.fromCharCode() 方法返回由指定的 UTF-16 代碼單元序列創建的字符串。

語法

String.fromCharCode(num1 [, num2 [, num3 ...[, numN]]]);

參數：

• num：一系列 UTF-16 代碼單元的數字。范圍介于 0 到 65535（0xFFFF）之間。大于 0xFFFF 的數字將被截斷。不進行有效性檢查。

使用示例

String.fromCharCode(65, 66, 67);
// ABCString.fromCharCode(0x2014);
// -

String.prototype.charAt()

charAt() 方法從一個字符串中返回指定的字符。

語法

str.charAt(index);

參數	說明	類型
index	一個介于 0 和字符串長度減 1 之間的整數。 (0~length-1)。如果沒有提供索引，默認值為 0。	number

說明

字符串中的字符從左向右索引：

• 第一個字符的索引值為 0
• 最后一個字符（假設該字符位于字符串 stringName中）的索引值為 stringName.length - 1
• 如果指定的 index 值超出了該范圍，則返回一個空字符串 ''

示例

const javascript = 'JAVASCRIPT';javascript.charAt();
// J
javascript.charAt(0);
// J
javascript.charAt(1);
// A
javascript.charAt(2);
// V
javascript.charAt(3);
// A
javascript.charAt(4);
// S
javascript.charAt(5);
// C
javascript.charAt(6);
// R
javascript.charAt(7);
// I
javascript.charAt(8);
// P
javascript.charAt(9);
// T
javascript.charAt(100);
// ''

String.prototype.charCodeAt()

charCodeAt() 方法返回 0 到 65535 之間的整數，表示給定索引處的 UTF-16 代碼單元（在 Unicode 編碼單元表示一個單一的 UTF-16 編碼單元的情況下，UTF-16 編碼單元匹配 Unicode 編碼單元。但在——例如 Unicode 編碼單元 > 0x10000 的這種——不能被一個 UTF-16 編碼單元單獨表示的情況下，只能匹配 Unicode 代理對的第一個編碼單元） 。如果你想要整個代碼點的值，使用 codePointAt()。

語法

str.charCodeAt(index);

參數	說明	類型
index	一個大于等于 0，小于字符串長度的整數。如果不是一個數值，則默認為 0。	number

返回值表示字符串對象指定索引處的字符的 Unicode 編碼；如果索引超出范圍，則返回 NaN。

說明

Unicode 編碼單元（code points）的范圍從 0 到 1114111（0x10FFFF）。開頭的 128 個 Unicode 編碼單元和 ASCII 字符編碼一樣。

?? 注意，charCodeAt 總是返回一個小于 65536 的值。這是因為高位編碼單元（higher code point）使用一對（低位編碼（lower valued））代理偽字符（“surrogate” pseudo-characters）來表示，從而構成一個真正的字符。因此，為了查看或復制（reproduce）65536 及以上編碼字符的完整字符，需要在獲取 charCodeAt(i) 的值的同時獲取 charCodeAt(i+1) 的值，或者改為獲取 codePointAt(i) 的值。

如果指定的 index 小于 0 或不小于字符串的長度，則 charCodeAt 返回 NaN。

示例

下例介紹了不同索引情況下返回的 Unicode 值：

'ABC'.charCodeAt(0);
// 65
'ABC'.charCodeAt(1);
// 66
'ABC'.charCodeAt(2);
// 67
'ABC'.charCodeAt(3);
// NaN

String.prototype.concat()

concat() 函數用于將當前字符串與指定字符串進行拼接，并返回拼接后的字符串。

語法

str.concat( string2, string3 [, ..., stringN] )

參數	說明	類型
str2...strN	和原字符串連接的多個字符串。	string

concat() 函數的返回值為 String 類型，其返回值為拼接后的字符串。

concat() 函數的作用等同于運算符 +，例如：str.concat(str1, str2) 等同于 str + str1 + str2。

說明

concat 方法將一個或多個字符串與原字符串連接合并，形成一個新的字符串并返回。 concat 方法并不影響原字符串。

示例

下面的例子演示如何將多個字符串與原字符串合并為一個新字符串

var hello = 'Hello, ';hello.concat('Kevin', ' have a nice day.');
// Hello, Kevin have a nice day.

建議使用賦值操作符（+ 或 +=）代替字符串的 concat 方法。

var hello = 'Hello, ';hello += 'world';console.log(hello);
// Hello, world

String.prototype.endsWith()

endsWith() 用來判斷當前字符串是否是以另外一個給定的子字符串 結尾 的，根據判斷結果返回 true 或 false。

語法

str.endsWith( searchString [, length] )

參數	說明	類型
searchString	要搜索的子字符串	string
length	作為 str 的長度	number

這個方法幫助你確定一個字符串是否在另一個字符串的末尾。這個方法是大小寫敏感的。

說明

concat 方法將一個或多個字符串與原字符串連接合并，形成一個新的字符串并返回。 concat 方法并不影響原字符串。

示例

const str = 'Hello world!';console.log(str.endsWith('world!'));
// trueconsole.log(str.endsWith('abc'));
// false

String.prototype.includes()

includes() 方法用于判斷一個字符串是否包含在另一個字符串中，根據情況返回 true 或 false。

語法

str.includes( searchString [, startIndex] )

參數	說明	類型
searchString	要在字符串中搜索的字符串	string
startIndex	從當前字符串指定索引位置開發搜索子字符串，默認為 0，包含該索引	number

這個方法可以幫你判斷一個字符串是否包含另外一個字符串。

這個方法搜索匹配的字符串是區分大小寫的。

示例

var str = 'To be, or not to be, that is the question.';console.log(str.includes('To be'));
// trueconsole.log(str.includes('question'));
// trueconsole.log(str.includes('nonexistent'));
// falseconsole.log(str.includes('To be', 1));
// falseconsole.log(str.includes('TO BE'));
// false

String.prototype.indexOf()

indexOf() 函數用于查找子字符串在當前字符串中第一次出現的位置。

語法

str.indexOf( searchValue[, startIndex])

參數	說明	類型
searchValue	需要查找的子字符串。	string
startIndex	可選，在當前字符串中查找的起始索引，默認為 0。	number

indexOf() 方法的返回值為 Number 類型，返回子字符串在當前字符串中第一次查找到的起始位置（索引）。

示例

字符串中的字符被從左向右索引。首字符的索引（index）為 0，字符串 stringName 的最后一個字符的索引是 stringName.length - 1。

'Blue Whale'.indexOf('Blue');
//  0
'Blue Whale'.indexOf('Blute');
// -1
'Blue Whale'.indexOf('Whale', 0);
//  5
'Blue Whale'.indexOf('Whale', 5);
//  5
'Blue Whale'.indexOf('', 9);
//  9
'Blue Whale'.indexOf('', 10);
// 10
'Blue Whale'.indexOf('', 11);
// 10

區分大小寫

下例定義了兩個字符串變量。

兩個變量包含相同的字符串，除了第二個字符串中的某些字符為大寫。第一個 log 方法輸出 19。但是由于 indexOf 方法 區分大小寫，因此不會在 myCapString 中發現字符串 “cheddar"，結果第二個 log 方法輸出 -1。

var myString = 'brie, pepper jack, cheddar';
var myCapString = 'Brie, Pepper Jack, Cheddar';console.log('myString.indexOf("cheddar") is ' + myString.indexOf('cheddar'));
// 19
console.log('myCapString.indexOf("cheddar") is ' + myCapString.indexOf('cheddar'));
// -1

統計字符串中字母數量

使用 indexOf 統計一個字符串中某個字母出現的次數

在下例中，設置了 count 來記錄字母 e 在字符串 str 中出現的次數：

let str = 'To be, or not to be, that is the question.';
let count = 0;
let cur = str.indexOf('e');// 當 cur 為 -1 時表示，字符串中已無檢索子字符串
while (cur !== -1) {count++;cur = str.indexOf('e', cur + 1);
}console.log(count); // displays 4

檢測字符是否存在

當檢測某個字符串是否存在于另一個字符串中時，可使用下面的方法：

'Blue Whale'.indexOf('Blue') !== -1;
// true'Blue Whale'.indexOf('Bloe') !== -1;
// false

String.prototype.match()

match()函數用于使用指定的正則表達式模式在當前字符串中進行匹配查找，并返回數組形式的查找結果。

語法

str.match(regexp);

參數	說明	類型
regexp	包含正則表達式模式的 RegExp 對象的實例。也可以是包含正則表達式模式的變量名或字符串。	RegExo

💡 如果參數 regExp 不是正則表達式對象（RegExp），而是字符串類型，則 match() 先將該字符串傳遞給 RegExp 的構造函數，將其轉換為一個 RegExp 對象。

match()方法的返回值為 Array 類型，其返回數組的成員取決于指定的正則表達式模式是否設有全局標志 g。

• 如果參數regExp沒有全局標志g，則match()函數只查找第一個匹配，并返回包含查找結果的數組，該數組對象包含如下成員：
  • 索引 0：存放第一個匹配的子字符串。
  • 屬性 index：匹配文本在字符串中的起始索引位置。
  • 屬性 input：整個字符串對象（str）。

在 IE 6 ~ IE 8 中，該數組還具有額外的 lastIndex 屬性，用于存儲匹配文本最后一個字符的下一個位置。

• 如果參數regExp設有全局標志g，則match()函數會查找所有的匹配，返回的數組不再有index和input屬性，其中的數組元素就是所有匹配到的子字符串，形如：

  • 索引 0：存放第一個匹配的子字符串(如果存在的話)。
  • 索引 1：存放第二個匹配的子字符串(如果存在的話)。
  • ……
  • 索引 N-1：存放第 N 個匹配的字符串(如果存在的話)。

• match() 函數如果沒有查找到任何匹配，則返回 null。

說明

• 如果你需要知道一個字符串是否匹配一個正則表達式 RegExp ，可使用 String.prototype.search()。
• 如果你只是需要第一個匹配結果，你可能想要使用 RegExp.prototype.exec()。
• 如果你想要獲得捕獲組，并且設置了全局標志，你需要用 RegExp.prototype.exec() 。

示例

在下例中，使用 match 查找 "Hello world!" 緊跟著 1 個或多個數值字符，再緊跟著一個小數點和數值字符 0 次或多次。正則表達式包含 i 標志，因此大小寫會被忽略。

var str = 'Hello world!';str.match();
// ["", index: 0, input: "Hello world!", groups: undefined]str.match(/\b\w/);
// ["H", "w"]str.match(/\w(?=r)/g);
// nullstr.match(/\w[^\w]/g);
// ["o", "d!"]

全局模式和不區分大小寫模式

下例展示了 match() 使用 global 和 ignore case 標志。A-E、a-e 的所有字母將會作為一個數組的元素返回。

var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
var regexp = /[A-E]/gi;
var matchArray = str.match(regexp);console.log(matchArray);
// ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e']

不傳參數

var str = 'Nothing will come of nothing.';str.match();
// [""]

判斷是否是微信瀏覽器

const isWeixin = function() {const ua = naviagtor.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) === 'micromessenger') {return true} else {return false;}
}

String.prototype.replace()

replace() 函數用于使用指定字符串替換當前字符串中匹配指定正則表達式模式的子字符串，并返回完成替換后的字符串。

語法

str.replace(pattern, replacement);

參數	說明	類型
pattern	指定的正則表達式模式的 RegExp 對象的實例。也可以是字符串。	string / RegExp
replacement	用于替換的字符串，或返回替換字符串的函數。	string / function

一個部分或全部匹配由替代模式所取代的新的字符串。

描述

• 如果參數 pattern 是字符串，則 replace() 函數將直接根據該字符串進行精確匹配，而不會試圖轉換為正則表達式，并且 只替換第一個匹配到 的子字符串
• 參數 replacement 可以使用以下以 $ 開頭的 匹配變量 來動態確定用于替換的字符串內容（參數 pattern 為正則表達式時才生效）

字符	描述
$n	假如第一個參數是 RegExp 對象，并且 n 是個小于 100 的非負整數，那么插入第 n 個括號匹配的字符串。
$&	插入匹配的子串。
`$``	插入當前匹配的子串左邊的內容。
$'	插入當前匹配的子串右邊的內容。
$$	插入一個 $。

在進行全局的搜索替換時，正則表達式需包含 g 標志。

• 指定一個函數作為參數

你可以指定一個函數作為第二個參數。在這種情況下，當匹配執行后， 該函數就會執行。 函數的返回值作為替換字符串。（注意: 上面提到的特殊替換參數在這里不能被使用。) 另外要注意的是， 如果第一個參數是正則表達式， 并且其為全局匹配模式， 那么這個方法將被多次調用， 每次匹配都會被調用。

下面是該函數的參數：

變量名	代表的值
match	匹配的子串。（對應于上述的 \$&。）
p1,p2, …	假如 replace() 方法的第一個參數是一個 RegExp 對象，則代表第 n 個括號匹配的字符串。（對應于上述的 $1，$2等。）
offset	匹配到的子字符串在原字符串中的偏移量。（比如，如果原字符串是 'abcd'，匹配到的子字符串是 'bc'，那么這個參數將是 1）
string	被匹配的原字符串。

精確的參數個數依賴于 replace()的第一個參數是否是一個正則表達式對象， 以及這個正則表達式中指定了多少個括號子串。

示例

代碼示例

在下面的例子中，replace() 中使用了正則表達式及忽略大小寫標示。

var str = 'Twas the night before Xmas...';var newstr = str.replace(/xmas/i, 'Christmas');console.log(newstr);
// Twas the night before Christmas...var str = 'Hello world!';// 將字符 'lo' 替換為 '**'
str.replace('lo', '**');
// "Hel** world!"// 將所有 'h' 替換為 '**'（全局，忽略大小寫）
str.replace(/h/ig);// '**ello world!'// 將位于單詞邊界前的兩個字母替換為 '**'
str.replace(/\w{2}\b/g, '**');// "Hel** wor**!"// 將位于起始位置與單詞邊界的兩個字母替換為 '**'（沒有匹配項）
str.replace(/^\w{2}\b/g/, '**');
// "Hello world!"// 在所有的連續兩個字母并且后面不跟字母 'l' 的字母前添加 "**"
// 這里的 "$1" 就表示正則表達式中第一個小括號內的子表達式匹配到的內容
str.replace(/(\w{2}(?!l))/g, '**$1');
// "He**llo **wo**rld!"

String.prototype.slice()

slice() 方法提取字符串的某部分，并返回一個新的字符串。

語法

str.slice( startIndex [, endIndex] )

參數	說明	類型
startIndex	指向字符串指定部分的開頭的索引。	number
endIndex	可選，指向字符串指定部分的結尾的索引（不包括該索引），默認到字符串的結尾。	number

返回一個從原字符串中提取出來的新字符串

描述

slice() 函數一直從索引 startIndex 復制到 endIndex 所指示的字符，但是不包括 endIndex 索引上的字符。

• 如果 startIndex 為負，則將其視為 str.length + startIndex。
• 如果省略 endIndex，則將一直提取到字符串的結尾。
• 如果 endIndex 為負，則將其視為 str.length + endIndex。
• 如果 endIndex 小于等于 startIndex，則不會復制任何字符，返回空字符串。

示例

代碼示例

var str = 'abcdefghij';// 開始索引省略即從 0 開始提取，結束索引省略即提取到字符串末尾
str.slice(); // 'abcdefghij'// 開始索引為 0，結束索引省略即提取到字符串末尾
str.slice(0);
// 'abcdefghij'// 開始索引為 0，結束索引為2
str.slice(0, 2);
// 'ab'// 開始索引為 -3 即負數，即為 -3+10=7，結束索引省略即提取到字符串末尾
str.slice(-3);
// 'hij'// 開始索引為 0，結束索引為 -3 即 -3+10=7
str.slice(0, -3);
// 'abcdef'// 開始索引為 -3 即 -3+10=7，結束索引為 -1+10=9
str.slice(-3, -1);

String.prototype.split()

split() 函數用于使用指定分隔符分割字符串，并返回分割后的若干個子字符串組成的數組。

語法

str.split( [separator [, limit]] )

參數	說明	類型
separator	指定表示每個拆分應發生的點的字符串。separator 可以是一個字符串或正則表達式。 如果純文本分隔符包含多個字符，則必須找到整個字符串來表示分割點。如果在 str 中省略或不出現分隔符，則返回的數組包含一個由整個字符串組成的元素。如果分隔符為空字符串，則將 str 原字符串中每個字符的數組形式返回。	string / RegExp
limit	可選，一個整數，限定返回的分割片段數量。當提供此參數時，split 方法會在指定分隔符的每次出現時分割該字符串，但在限制條目已放入數組時停止。如果在達到指定限制之前達到字符串的末尾，它可能仍然包含少于限制的條目。新數組中不返回剩下的文本。	number

• 找到分隔符后，將其從字符串中刪除，并將子字符串的數組返回。

• 如果沒有找到或者省略了分隔符，則該數組包含一個由整個字符串組成的元素。

• 如果分隔符為空字符串，則字符串會在每個字符之間分割。

• 如果分隔符出現在字符串的開始或結尾，或兩者都分開，分別以空字符串開頭，結尾或兩者開始和結束。因此，如果字符串僅由一個分隔符實例組成，則該數組由兩個空字符串組成。

• 如果分隔符是包含捕獲括號的正則表達式，則每次分隔符匹配時，捕獲括號的結果（包括任何未定義的結果）將被拼接到輸出數組中。但是，并不是所有瀏覽器都支持此功能。

• 當被查找的字符串為空時，返回一個包含一個空字符串的數組，而不是一個空數組，如果字符串和分隔符都是空字符串，則返回一個空數組。

描述

如果提供了 limit 參數，此函數返回的數組最多包含 limit 個元素。如果參數 limit 為負數，則該參數將被忽略掉。如果省略了 limit，則 split() 函數不會考慮長度，直到分割完畢為止。如果 limit 為 0，則返回空的數組。

示例

代碼示例

'abcd'.split();
// ["abcd"]
'abcd'.split('b');
// ["a", "cd"]
'abcd'.split('a');
// ["", "bcd"]
'abcd'.split('d');
// ["abc", ""]
'abcd'.split('abcd');
// ["", ""]
'abcd'.split('');
// ["a", "b", "c", "d"]
'abcd'.split(' ');
// ["abcd"]''.split();
// [""]
''.split('');
// []
''.split(' ');
// [""]

String.prototype.toLowerCase()

toLowerCase() 函數用于將當前字符串的所有字母轉為小寫，并返回轉換后的字符串。該函數基于常規的 Unicode 大小寫映射進行轉換。

語法

str.toLowerCase();

描述

toLowerCase 將調用該方法的字符串值轉換為小寫形式，并返回。toLowerCase() 方法不影響字符串本身的值，返回的是新的字符串。

示例

var abc = 'ABC';abc.toLowerCase();
// 'abc'

String.prototype.toUpperCase()

toUpperCase() 函數用于將當前字符串中的所有字母轉為大寫，并返回轉換后的字符串。該函數基于常規的 Unicode 大小寫映射進行轉換。

語法

str.toUpperCase();

描述

toUpperCase 將調用該方法的字符串值轉換為大寫形式，并返回。toUpperCase 方法不影響字符串本身的值，返回的是新的字符串。

示例

var abc = 'abc';abc.toUpperCase();
// 'ABC'

Array 對象

Array 對象時用于構造數組的全局對象，類似時類似于列表的高階對象。

Array 對象主要用于存儲多個數據項，數據可以是任意類型。

所有主流瀏覽器均支持該對象。

語法

字面量

[element0, element1, ..., elementN]

數組類型轉換函數

Array(element0, element1, ..., elementN)

構造函數

new Array(element0, element1, ..., elementN)new Array(arrayLength)

Array.from()

?? ES2015(ES6)新特性

Array.from() 方法用于將一個類數組對象或可迭代對象轉換成一個新的數組實例。

語法

語法：

Array.from(arrayLike [, mapfn [, thisArg]])

類型聲明：

interface ArrayLike<T> {readonly length: number;readonly [n: number]: T;
}interface ArrayConstructor {from<T>(arrayLike: ArrayLike<T>): T[];from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
}

參數說明：

參數	說明	類型
arrayLike	想要轉換成數組的偽數組對象或可迭代對象	typed array
mapfn	（可選）如果指定了該參數，新數組中的每個元素會執行該回調函數。	function
thisArg	（可選）執行回調函數 mapFn 時 this 對象	object

返回值：

返回一個新的數組實例。

方法說明

• 具備以下兩種條件的的對象可以通過

  Array.from()
  

  方法轉換成真正的數組：

  • 類數組對象：即擁有 length 屬性和若干索引屬性的任意對象
  • 可迭代對象：即部署了 Iterator 接口的對象，可以獲取對象中的元素，如 Map 和 Set 等

• Array.from() 方法有一個可選參數 mapfn，讓你可以在最后生成的數組上再執行一次 Array.prototype.map 方法后再返回。也就是說 Array.from(arrayLike, mapfn, thisArg) 就相當于 Array.from(arrayLike).map(mapfn, thisArg) ，除非創建的不是可用的中間數組。 這對一些數組的子類，如對類型化數組來說很重要，因為中間數組的值在調用 map() 時需要是適當的類型。

• from() 的 length 屬性為 1 ，即 Array.from.length === 1。

• 在 ES2015 中， Class 語法允許我們為內置類型（比如 Array）和自定義類新建子類（比如叫 SubArray）。這些子類也會繼承父類的靜態方法，比如 SubArray.from()，調用該方法后會返回子類 SubArray 的一個實例，而不是 Array 的實例。

代碼示例

基本用法

const bar = ['a', 'b', 'c'];Array.from(bar); // ["a", "b", "c"]Array.from('foo'); // ["f", "o", "o"]

Array.isArray()

Array.isArray() 方法用于確定某個值是否是數組類型。

語法

語法：

Array.isArray(arg);

類型聲明：

interface ArrayConstructor {isArray(arg: any): arg is any[];
}declare var Array: ArrayConstructor;

參數說明：

參數	說明	類型
arg	需要檢測的值	any

返回值：

如果對象是 Array 的實例，則返回 true ；否則為 false。

代碼示例

下面的函數調用都返回 true

Array.isArray([]);Array.isArray([1]);Array.isArray(new Array());Array.isArray(Array.prototype);

鮮為人知的事實：其實 Array.prototype 也是一個數組。

Array.isArray(Array.prototype);

下面的函數調用都返回 false。

Array.isArray();Array.isArray({});Array.isArray(null);Array.isArray(undefined);Array.isArray(17);Array.isArray('Array');Array.isArray(true);Array.isArray(false);Array.isArray({ __proto__: Array.prototype });

Array.prototype.concat()

Array.prototype.concat() 方法用于合并兩個或多個數組。此方法不會更改現有數組，而是返回一個新數組。

語法

語法：

const new_array = old_array.concat( item1[, itemN ] )

類型聲明：

interface ConcatArray<T> {readonly length: number;readonly [n: number]: T;join(separator?: string): string;slice(start?: number, end?: number): T[];
}interface Array<T> {concat(...items: ConcatArray<T>[]): T[];concat(...items: (T | ConcatArray<T>)[]): T[];
}

參數說明：

參數	描述	類型
item1	添加到當前數組末尾處的數據項	any
itemN	要添加到當前數組末尾處的其他項，可以有多個。	any

返回值：

返回合并后新的 Array 實例。

方法說明

concat 方法創建一個新的數組，它由被調用的對象中的元素組成，每個參數的順序依次是該參數的元素（如果參數是數組）或參數本身（如果參數不是數組）。它不會遞歸到嵌套數組參數中。

concat 方法不會改變 this 或任何作為參數提供的數組，而是返回一個淺拷貝，它包含與原始數組相結合的相同元素的副本。 原始數組的元素將復制到新數組中，如下所示：

• 對象引用（而不是實際對象）：concat 將對象引用復制到新數組中。原始數組和新數組都引用相同的對象。 也就是說，如果引用的對象被修改，則更改對于新數組和原始數組都是可見的。這包括也是數組的數組參數的元素。
• 數據類型如字符串，數字和布爾（不是 String，Number 和 Boolean 對象）：concat 將字符串和數字的值復制到新數組中。

注意：數組/值在連接時保持不變。此外，對于新數組的任何操作（僅當元素不是對象引用時）都不會對原始數組產生影響，反之亦然。

代碼示例

連接兩個數組

以下代碼將兩個數組合并為一個新數組。

const alpha = ['a', 'b', 'c'];
const numeric = [1, 2, 3];alpha.concat(numeric);
// Outputs: ['a', 'b', 'c', 1, 2, 3]

Array.prototype.indexOf()

Array.prototype.indexOf() 方法用于查找數組成員第一次出現指定字符的位置。

語法

語法：

arr.indexOf( searchElement [, fromIndex] )

類型聲明：

interface Array<T> {indexOf(searchElement: T, fromIndex?: number): number;
}

參數說明：

參數	說明	類型
searchElement	要查找的數組元素	any
fromIndex	可選，在當前字符串中查找的起始索引，默認為 0	number

返回值：

返回數組元素在當前數組中第一次查找到的起始位置（索引）

方法說明

該方法使用 Strict Equality（無論是絕對相等 ===，還是 Triple-equals 操作符都基于同樣的方法）進行判斷查找的元素與數組中包含的元素之間的關系。

代碼示例

基本用法

var arr = [1, 2, 3, 4, 5];arr.indexOf(1);
// 0
arr.indexOf(7);
// -1
arr.indexOf(4, 2);
// 3
arr.indexOf(3, -1);
// -1
arr.indexOf(3, -3);
// 2

Array.prototype.join()

Array.prototype.join() 方法將數組（或類數組對象）的所有成員連接到字符串中。

語法

語法：

const str = arr.jon(separator);

類型聲明：

interface Array<T> {join(separator?: string): string;
}

參數說明：

參數	說明	類型
separator	將數組各元素連接成字符串的字符	string

返回值：

返回一個所有數組成員連接的字符串。如果數組長度為 0，則返回空字符串。

方法說明

所有的數組成員被轉換成字符串，再用一個分隔符將這些字符串連接起來。如果元素是 undefined 或者 null， 則會轉化成空字符串。

代碼示例

基本用法

const arr = ['1', '2', '3', '4', '5'];// 不傳參數默認以逗號作為分隔符
arr.join();
// '1,2,3,4,5'arr.join(', ');
// '1, 2, 3, 4, 5'arr.join(' + ');
// '1 + 2 + 3 + 4 + 5'arr.join('');
// '12345'

Array.prototype.flat()

?? ES2019(ES10)新特性

Array.prototype.flat() 方法會按照一個可指定的深度遞歸遍歷數組，并將所有元素與遍歷到的子數組中的元素合并為一個新數組返回。

語法

語法：

arr.flat([depth]);

類型聲明：

type FlatArray<Arr, Depth extends number> = {done: Arr;recur: Arr extends ReadonlyArray<infer InnerArr>? FlatArray<InnerArr,[-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20][Depth]>: Arr;
}[Depth extends -1 ? 'done' : 'recur'];interface ReadonlyArray<T> {flat<A, D extends number = 1>(this: A, depth?: D): FlatArray<A, D>[];
}interface Array<T> {flat<A, D extends number = 1>(this: A, depth?: D): FlatArray<A, D>[];
}

參數說明：

參數	說明	類型
depth	（可選參數）指定要提取嵌套數組的結構深度，默認值為 1	number

返回值：

返回一個包含將數組與子數組種所有元素的新數組。

代碼示例

基本用法

const arr1 = [0, 1, 2, [3, 4]];console.log(arr1.flat());
// exprected output: [0, 1, 2, 3, 4]const arr2 = [0, 1, 2, [[[3, 4]]]];console.log(arr2.flat());
// exprected output: [0, 1, 2, [ 3, 4]];

Array.prototype.every()

every() 方法遍歷數組中每個成員，通過回調函數判斷是否所有成員都滿足特定條件。

語法

語法：

arr.every( predicate [, thisArg ] )

類型聲明：

interface Array<T> {every<S extends T>(predicate: (value: T, index: number, array: T[]) => value is S,thisArg?: any): this is S[];every(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): boolean;
}

參數說明：

參數	說明	類型
predicate	用于判定數組成員的回調函數	function
thisArg	執行回調函數的 this 值

callback 函數的參數：

• currentValue：當前數組中處理的元素
• index：數組中正處理的當前元素的索引
• array：被調用的數組

返回值：

返回當所有數組元素滿足回調函數的判斷時返回 true，否則返回 false。

方法說明

• 執行該方法會為數組每個成員執行一次回調函數，回調函數需要通過判斷代碼塊后，返回布爾值作為該成員是否通過檢測的憑證，如果通過則再為下一個數組成員執行回調函數，直到遇到第一個判斷為 false 的數組成員則立即給實例方法返回 false，否則全部成員都通過檢測的回調函數，則返回 true。
• 回調函數只會為那些已經被賦值的索引調用，不會為那些被刪除或從來沒有被賦值的索引調用。
• 如果為實例方法提供一個 thisArg 參數，則該參數為調用回調函數時的 this 值。如果省略該參數，則為回調函數被調用時的 this 值，在非嚴格模式下為全局對象，在嚴格模式下傳入 undefined。
• 遍歷的數組成員范圍在第一次調用回調函數之前就已確定了。在調用 every() 之后添加到數組中的成員不會被回調函數訪問到。如果數組中存在的成員被更改，則他們傳入回調函數的值是 every() 訪問到他們那一刻的值。那些被刪除的成員或未被賦值的成員將不會被訪問到。

代碼示例

下例檢測數組中的所有元素是否都大于 10。

const isBigEnough = (element, index, array) =>(element >= 10)[(12, 5, 8, 130, 44)].every(isBigEnough)[// false(12, 54, 18, 130, 44)].every(isBigEnough);
// true

Array.prototype.filter()

Array.prototype.filter() 方法創建一個新數組，其包含通過所提供函數實現的測試的所有元素。

語法

語法：

arr.filter( callback = function (currentValue, index, arr) {} [, thisArg ] )

類型聲明：

interface Array<T> {filter<S extends T>(predicate: (value: T, index: number, array: T[]) => value is S,thisArg?: any): S[];filter(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): T[];
}

參數說明：

參數	說明	類型
callback	用于判定數組成員的回調函數	function
thisArg	執行回調函數的 this 值

callback 函數的參數：

• currentValue：當前數組中處理的元素
• index：數組中正處理的當前元素的索引
• array：被調用的數組

返回值：

返回一個新的通過測試的成員的集合的數組。

方法說明

• 該方法為數組中的每個成員調用一次回調函數，并利用所有使得回調函數返回 true 或 等價于 true 的值的成員創建一個新數組。回調函數只會在已經賦值的索引上被調用，對于那些已經被刪除或者從未被賦值的索引不會被調用。那些沒有通過回調函數測試的元素會被跳過，不會被包含在新數組中。
• 如果提供 thisArg 參數，則它會被作為回調函數被調用時的 this 值。否則，回調函數的 this 值在非嚴格模式下將是全局對象，嚴格模式下為 undefined。
• 遍歷的元素范圍在第一次調用回調函數之前就已經確定了。在調用該方法之后被添加到數組中的元素不會被 遍歷到。如果已經存在的元素被改變了，則他們傳入回調函數的值是遍歷到它們那一刻的值。被刪除或從來未被賦值的元素不會被遍歷到。

代碼示例

基本用法

const isBigEnough = (value) => value >= (10)[(12, 5, 8, 130, 44)].filter(isBigEnough);
// false

Array.prototype.find()

Array.prototype.find() 方法返回數組中滿足提供的判定函數的第一個成員。

語法

語法：

arr.find( callback [, thisArg ] )

類型聲明：

interface Array<T> {find<S extends T>(predicate: (this: void, value: T, index: number, obj: T[]) => value is S,thisArg?: any): S | undefined;find(predicate: (value: T, index: number, obj: T[]) => unknown, thisArg?: any): T | undefined;
}

參數說明：

參數	說明	類型
callback	用于判定數組成員的回調函數	function
thisArg	執行回調函數的 this 值

callback 函數的參數：

• currentValue：當前數組中處理的元素
• index：數組中正處理的當前元素的索引
• array：被調用的數組

返回值：

當遍歷到的數組成員通過回調函數的判定時，返回數組中該成員，否則返回 undefined。

代碼示例

用對象的屬性查找數組里的對象

let foo = [{ name: 'a', quantity: 2 },{ name: 'b', quantity: 0 },{ name: 'c', quantity: 5 },
];const getFoo = (key) => (arr) => arr.name === key;console.log(foo.find(getFoo('c')));
// { name: 'c', quantity: 5 }

Array.prototype.findIndex()

findIndex()方法返回數組中滿足提供的測試函數的第一個元素的索引。否則返回-1。

語法

語法：

arr.findIndex( callback [, thisArg ])

類型聲明：

interface Array<T> {findIndex(predicate: (value: T, index: number, obj: T[]) => unknown, thisArg?: any): number;
}

參數說明：

參數	類型	說明
callback	用于判定數組成員的回調函數	function
thisArg	執行回調函數的 this 值

callback 函數的參數：

• currentValue：當前數組中處理的元素
• index：數組中正處理的當前元素的索引
• array：被調用的數組

代碼示例

基本用法

const arr = [1, 2, 3, 4, 5, 12, 22, 2, 2, 2];const foo = arr.findIndex(function (currentValue, index, array) {return currentValue === 2;
});console.log(foo);
// 1

Array.prototype.forEach()

Array.prototype.forEach() 方法用于迭代數組的每項成員。

語法

語法：

arr.forEach( callbackfn [, thisArg ] )

類型聲明：

interface Array<T> {forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void;
}

參數說明：

參數	說明	類型
callbackfn	用于遍歷數組成員時執行的回調函數	function
thisArg	執行回調函數的 this 值

callbackfn 函數的參數：

• currentValue：當前數組中處理的元素
• index：數組中正處理的當前元素的索引
• array：被調用的數組

返回值：

返回 undefined。

方法說明

• 該方法按升序為數組中含有效值的每一項執行一次回調函數，那些已刪除（使用 delete 方法等情況）或者未初始化的項將被跳過（但不包括那些值為 undefined 的項，例如在稀疏數組中）。
• 該方法遍歷的范圍在第一次調用回調函數前就會確定。調用 forEach() 后添加到數組中的項不會被 callbackfn 訪問到。如果已經存在的值被改變，則傳遞給 callbackfn 的值是 forEach 遍歷到他們那一刻的值。已刪除的項不會被遍歷到。如果已訪問的元素在迭代時被刪除了（例如使用 shift() ） ，之后的元素將被跳過。
• forEach() 為每個數組元素執行 callbackfn 函數；不像 map() 或者 reduce() ，它總是返回 undefined 值，并且不可鏈式調用。典型用例是在一個鏈的最后執行副作用。

注意： 沒有辦法中止或者跳出 forEach 循環，除了拋出一個異常。如果你需要這樣，使用 forEach() 函數是錯誤的，你可以用一個簡單的循環作為替代。如果您正在測試一個數組里的元素是否符合某條件，且需要返回一個布爾值，那么可使用 every() 或 some()。如果可用，新方法 find() 或者 findIndex() 也可被用于真值測試的提早終止。

代碼示例

const arr = ['a', 'b', 'c'];arr.forEach(function (element) {console.log(element);
});arr.forEach((element) => console.log(element));
// a b c

Array.prototype.map()

Array.prototype.map() 根據傳遞的轉換函數，更新給定數組中的每個值，并返回一個相同長度的新數組。它接受一個回調函數作為參數，用以執行轉換過程。

語法

語法：

const new_arr = old_arr.map(callback = function(currentValue, index, array){} [, thisArg])

類型聲明：

interface Array<T> {map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];
}

參數說明：

參數	說明	類型
callbackFunc	用于遍歷數組成員時執行的回調函數	function
thisArg	執行回調函數的 this 值

callback 函數的參數：

• currentValue：當前數組中處理的元素
• index：數組中正處理的當前元素的索引
• array：被調用的數組

返回值：

返回回調函數的結果，如果未設定返回值，則返回當前遍歷的數組成員。

方法說明

• 該方法按升序為數組中含有效值的每一項執行一次回調函數，那些已刪除（使用 delete 方法等情況）或者未初始化的項將被跳過（但不包括那些值為 undefined 的項，例如在稀疏數組中）。
• 使用 map 方法處理數組時，數組元素的范圍是在 callback 方法第一次調用之前就已經確定了。在 map 方法執行的過程中：原數組中新增加的元素將不會被 callback 訪問到；若已經存在的元素被改變或刪除了，則它們的傳遞到 callback 的值是 map 方法遍歷到它們的那一時刻的值；而被刪除的元素將不會被訪問到。

代碼示例

下面的代碼創建了一個新數組，值為原數組中對應數字的平方根。

const numbers = [1, 4, 9];
const roots = numbers.map(Math.sqrt);// Math.sqrt(x)console.log(numbers);
// [1, 4, 9]
console.log(roots);
// [1, 2, 3],

Array.prototype.push()

Array.prototype.push() 方法用于向當前數組的末尾添加一個或多個元素，并返回新的數組長度。

語法

語法：

arr.push( item1 [, items...] )

類型聲明：

interface Array<T> {push(...items: T[]): number;
}

參數說明：

參數	說明	類型
item1	添加元素	any
itemN	添加的其他元素	any

如果添加的元素類型為數組類型，仍然會被當作一個元素看待，只是這個元素是數組類型而已。如果要合并兩個數組，請使用 concat() 函數。

返回值：

返回添加元素后的數組長度。

方法說明

當向數組中添加新的元素時，數組的 length 屬性也會隨之改變。一般而言，數組的 length 屬性將會加 N （ N 為添加的元素個數）。

push() 方法有意具有通用性。該方法和 call() 或 apply() 一起使用時，可應用在類似數組的對象上。push() 方法根據 length 屬性來決定從哪里開始插入給定的值。如果 length 不能被轉成一個數值，則插入的元素索引為 0，包括 length 不存在時。當 length 不存在時，將會創建它。

代碼示例

基本用法

const foo = ['a', 'b'];
const bar = foo.push('c', 'd');console.log(foo);
// ['a', 'b', 'c', 'd']console.log(bar);
// 4

Array.prototype.pop()

Array.prototype.pop() 方法用于移除數組最后一個成員，并返回該數組成員。

語法

語法：

arr.pop();

類型聲明：

interface Array<T> {pop(): T | undefined;
}

返回值：

返回被移除的數組成員。如果該數組為空（沒有任何元素），則返回 undefined。

方法說明

• 該方法和 call() 或 apply() 一起使用時，可應用在類數組對象上。pop 方法根據 length 屬性來確定最后一個元素的位置。如果不包含 length 屬性或 length 屬性不能被轉成一個數值，會將 length 置為 0，并返回 undefined。
• 由于該方法會移除數組中的最后一個元素，數組的 length 屬性也會隨之改變（如果數組中有元素的話），一般而言，數組的 length 屬性將會減 1。
• 如果你在一個空數組上調用 pop()，它返回 undefined。

代碼示例

基本用法

let foo = ['a', 'b', 'c', 'd'];let popped = foo.pop();console.log(foo);
// ['a', 'b', 'c', 'd']console.log(popped);
// 'd'

Array.prototype.sort()

Array.prototype.sort() 方法用于將數組對象的成員按指定順序進行排序，并返回排序后的數組。

語法

語法：

arr.sort(compareFn);

類型聲明：

interface Array<T> {sort(compareFn?: (a: T, b: T) => number): this;
}

參數說明：

參數	說明	類型
compareFn	（可選）指定如何比較元素順序的函數名稱	function

返回值：

返回排序后的數組對象。

在排序過程中，并不會創建新的數組對象，返回的數組對象就是經過排序后的當前數組本身。

方法說明

如果省略 compareFn 參數，元素將按 ASCII 字符順序的升序進行排列。ASCII 字符表

如果提供了 compareFn 參數，那么該函數必須返回下列值之一：

• 如果所傳遞的第一個參數小于第二個參數，則返回負值。
• 如果兩個參數相等，則返回零。
• 如果第一個參數大于第二個參數，則返回正值。

比較函數格式如下：

function compare(a, b) {if (a is less than b by some ordering criterion) {return -1;}if (a is greater than b by the ordering criterion) {return 1;}return 0;
}

代碼示例

基本用法

const foo = ['b', 'c', 'a'];fruit.sort();
// ['a', 'b', 'c']
const bar = [1, 10, 21, 2];bar.sort();
// [1, 10, 2, 21]

注意 10 在 2 之前，因為在 Unicode 指針順序中 "10" 在 "2" 之前。

const baz = ['word', 'Word', '1 Word', '2 Words'];baz.sort();
// ['1 Word', '2 Words', 'Word', 'word']

在 Unicode 中，數字在大寫字母之前，大寫字母在小寫字母之前。

總結

在本篇博客中，我們一起探索了JavaScript內置對象，比如：Object、Array、全局對象、String和Funtion。JavaScript是一門非常強大且廣泛應用的編程語言。掌握了這些基本的語法和概念，你已經具備了入門JavaScript編程的基礎。未來，你將能夠創建更加交互性的網頁，實現更多驚艷的動態效果，甚至搭建出屬于自己的Web應用。但這只是一個開始，還有許多更深入的主題等待你去探索。
后續我們這個前端專欄還會講述ES6、垃圾回收、js算法技巧、Vue入門實戰、React實戰、前端面試題等等文章，如果您感興趣的話，歡迎點贊三連并關注我以及我的前端專欄，我們下期文章再見。