1. js中並不是所有值都是物件
- 基本資料型別不是物件,沒有方法和屬性
方法:是某個特定物件才能呼叫的函式
屬性:是隸屬於某個特定物件的變數
物件:是一種字包含的資料型別 - ECMAScript和JavaScript的關係是,前者是後者的規格,後者是前者的一種實現。在日常場合,這兩個詞是可以互換的。
2. 語法
2.1基本語法
- 等號右邊是表示式,每一行用;分開的程式碼都是一個語句,
- 語句和表示式的區別在於,前者主要為了進行某種操作,一般情況下不需要返回值, 語句的值就是是undefined;後者則是為了得到返回值,一定會返回一個值
- 變數提升:就是所有的變數的宣告語句,都會被提升到程式碼的頭部
- for迴圈和while迴圈相同
- 三元運算子
(條件) ? 表示式1 : 表示式2
可視為if...else的簡寫 - do...while迴圈不管條件是否為true至少執行一次
- continue語句用於立即終止本輪迴圈,返回迴圈結構的頭部,開始下一輪迴圈
- break用於直接跳出迴圈或程式碼塊
2.2資料型別
- typeof null返回object
- if語句中
undefined
和null
都會轉為false - null是一個表示“空”的物件,轉為數值時為0;
- undefined是一個表示”此處無定義”的原始值,轉為數值時為NaN。
- 轉換規則是除了下面六個值被轉為false,其他值都視為true。 undefined null false 0 NaN "或''(空字串)
2.3數值
2.3.1 js中所有數字都是64位雙精度浮點數
- 第1位:符號位,0表示正數,1表示負數
- 第2位到第12位(共11位):指數部分
- 第13位到第64位(共52位):小數部分(即有效數字)
- 絕對值小於等於2的53次方的整數,即2^-53到2^53,都可以精確表示。
2.3.2 數值的進位制
十進位制:沒有前導0的數值。 八進位制:有字首0o或0O的數值,或者有前導0、且只用到0-7的八個阿拉伯數字的數值。 十六進位制:有字首0x或0X的數值。 二進位制:有字首0b或0B的數值。
2.3.3 parseInt方法用於將字串轉為整數。
- 如果parseInt的引數不是字串,則會先轉為字串再轉換。
- 字串轉為整數的時候,是一個個字元依次轉換,如果遇到不能轉為數字的字元,就不再進行下去,返回已經轉好的部分。 3.如果以0x開頭會照16進位制解析 4如果以0開頭會以10進位制解析
- parseInt方法還可以接受第二個引數(2到36之間),表示被解析的值的進位制
- 如果第一個引數不是字串,"0x11"寫成0x11則會先轉換為10進位制,在進行第二個引數的轉換 -isNaN()
2.3.4 isNaN()可以用來判斷一個值是否為NaN。
- isNaN只對數值有效,如果傳入其他值,會被先轉成數值。相當於isNaN(Number('xxx'))
2.4字串
1. 字串只能寫在一行內,如果要分成多行,每一行末尾加上\和換行符
2. 反斜槓(\)在字串內有特殊含義,用來表示一些特殊字元,所以又稱為轉義符。
3. 字串可視為字元陣列可以使用[]運算子返回某個位置的字元
反斜槓\有3種特殊的用法:
- \HHH 反斜槓後面緊跟三個八進位制數(000到377),代表一個字元。HHH對應該字元的 Unicode 碼點,比如\251表示版權符號。顯然,這種方法只能輸出256種字元。
- \xHH \x後面緊跟兩個十六進位制數(00到FF),代表一個字元。HH對應該字元的 Unicode 碼點,比如\xA9表示版權符號。這種方法也只能輸出256種字元。
- \uXXXX \u後面緊跟四個十六進位制數(0000到FFFF),代表一個字元。HHHH對應該字元的 Unicode 碼點,比如\u00A9表示版權符號。
4. 字符集:
- 每個字元在javascript中都以16位(2個位元組)的utf-16格式儲存
- JavaScript 使用 Unicode 字符集。JavaScript 引擎內部,所有字元都用 Unicode 表示。
- 由於歷史原因,對於碼點在U+10000到U+10FFFF之間的字元,JavaScript 總是認為它們是兩個字元
5. Base64 轉碼
- 文字有不可列印的符號可以使用base64轉碼
btoa():
任意值轉為 Base64 編碼atob():
Base64 編碼轉為原來的值- 必須是ASCII 碼的字元
2.5物件
- 物件就是hash,就是一組“鍵值對”(key-value)的集合,是一種無序的複合資料集合。
- 物件中所有的key(鍵名)的都是字串,如果是數值會自動轉換為字串
- 如果key不符合識別符號的條件,(比如第一個字元為數字,或者含有空格或運算子且也不是數字),必須加上引號
- key也叫屬性,如果value為函式,那麼通常把這個屬性稱為“方法”,如果屬性的值還是一個物件,就形成了鏈式引用。
- 如果只採用大括號。JavaScript 規定,如果行首是大括號,一律解釋為語句(即程式碼塊),如果想表達物件則要咋在外加上圓括號
({a:123})
- 讀取屬性
obj.p
或者obj['p']
如果不加引號則指向一個變數 - 檢視物件的所有屬性
Object.keys
-delete
命令可以刪除物件的屬性,刪除不存在的屬性也會返回true,不能刪除繼承的屬性 in
運算子檢查某個物件是否包含某個屬性(key) (不能識別是否為繼承的,都會返回true)for(...in...){}
用於遍歷物件的全部屬性- with 語句用來批量操作同一個物件的多個屬性(如果with區塊內部有變數的賦值操作,必須是當前物件已經存在的屬性,否則會生成一個全域性變數)
2.6陣列
- 陣列其實是固定key的物件(hash),key['0'],['1'],['2'].['3'],['4']...都是字串
- 陣列的length是其中最大key+1,不是其中的個數
- 當陣列的某個元素是空元素,即2個逗號之間沒有任何值,我們稱改陣列存在空位
- 空位不會影響length屬性,空位是可讀取的,返回undefined,delete命令刪除某個屬性,這個位置就形成了空位
- 空位就是陣列沒有這個元素,所以不會被遍歷到,而undefined則表示陣列有這個元素,值是undefined,所以遍歷不會跳過。
- 類似陣列的物件,特徵是具有lenght屬性,length不是動態的
- 可以使用
var arr = Array.prototype.slice.call(arrayLike)
把物件變成真正的陣列
2.7函式
-
函式名也會提升,如果同時採用function命令和賦值語句宣告同一個函式,最後總是採用賦值語句的定義。
-
根據es5規範,不得在條件語句中宣告函式,由於存在函式名提升,所以可能不報錯,如果非要在條件語句中定義函式,請使用變數宣告函式
-
建構函式:return一個物件的函式
-
函式也是物件,他的原型中有個call方法來通過eval執行函式體
-
函式的toString返回函式的原始碼
-
函式內部定義的變數會在該作用於內覆蓋同名全域性變數
-
函式執行時所在的作用域,是定義時的作用域,而不是呼叫時所在的作用域
-
引數可以省略,如果要省略靠前的引數,則傳入undefined 比如→
f(undefined,b)
-
arguments物件包含了函式執行時的所有引數,arguments[0]就是第一個引數,普通模式下,arguments物件可以修改,嚴格模式不行,arguments是一個偽陣列
-
把arguments變成真陣列:
var args = Array.prototype.slice.call(arguments);
-
閉包看我寫的函式文章
-
立即執行函式(IIFE):一般情況下只對匿名函式使用立即執行函式,不汙染全域性變數,內部形成單獨作用域,可封裝私有變數
(function()){}
(function(){})
!function(){}
-
eval命令:把字串當作語句來執行,eval沒有單獨的作用域,可以修改當前作用域中變數的值,有安全風險
2.8運算子
2.8.1過載
-
加法在相加的時候決定,是執行相加還是相連,導致不同的語法行為,這種現象叫過載。
-
減法、除法和乘法運算子,都是將字串自動轉為數值,然後再運算。
'3' + 4 + 5 // "345" 3 + 4 + '5' // "75" 複製程式碼
2.8.2 物件轉成原始型別的值,規則如下
x.valueOf().toString()
複製程式碼
- valueOf方法最適合該物件型別的原始值,這時再自動呼叫物件的toString方法,將其轉為字串。
- 在數值運算裡,會優先呼叫valueOf(),如a + b; 在字串運算裡,會優先呼叫toString(),如alert(c)。
2.8.3自增和自減
- 下面程式碼中,x是先返回當前值,然後自增,所以得到1;y是先自增,然後返回新的值,所以得到2。
var x = 1;
var y = 1;
x++ // 1
++y // 2
複製程式碼
- +也是數值運算子,可以把任何值轉換為number
2.8.3比較運算子
- 字串比較
JavaScript 引擎內部首先比較首字元的 Unicode 碼點。如果相等,再比較第二個字元的 Unicode 碼點,以此類推。
- 非字串比較
true > false // true
// 等同於 Number(true) > Number(false)
// 即 1 > 0
複製程式碼
先轉換為數值在進行比較
- 物件比較
物件轉換成原始型別的值,演算法是先呼叫valueOf方法;如果返回的還是物件,再接著呼叫toString方法
x.valueOf().toString() >y.valueOf().toString()
2.8.4嚴格相等運算子
- 兩個複合型別(物件、陣列、函式)的資料比較時,不是比較它們的值是否相等,而是比較它們是否指向同一個地址。
{} === {} // false
[] === [] // false
(function () {} === function () {}) // false
複製程式碼
- 如果兩個變數引用同一個物件,則它們相等。
var a = {}
var b = a
a === b//true
複製程式碼
2.8.5 &&且運算子
它的運算規則是:如果第一個運運算元的布林值為true,則返回第二個運運算元的值(注意是值,不是布林值);如果第一個運運算元的布林值為false,則直接返回第一個運運算元的值,且不再對第二個運運算元求值。
返回值就是遇到的第一個falsy值,如果全為真,則返回最後一個值
1 && 0 //0
1 && 0 && 2 && 3 && 4 //0
1 && 2 && 3 && 4 && 5 //5
複製程式碼
if (i) {
doSomething();
}
// 等價於
i && doSomething();
複製程式碼
2.8.6 或運算子(||)
它的運算規則是:如果第一個運運算元的布林值為true,則返回第一個運運算元的值,且不再對第二個運運算元求值;如果第一個運運算元的布林值為false,則返回第二個運運算元的值。
返回值就是遇到的第一個truthy值,如果全為假,則返回最後一個值
0 || 1 //1
0 || null || undefined || NaN || 1 //1
0 || null || undefined || NaN || "" //""
複製程式碼
2.8.7 位運算子
二進位制或運算子(or):符號為|,表示若兩個二進位制位都為0,則結果為0,否則為1。
二進位制與運算子(and):符號為&,表示若兩個二進位制位都為1,則結果為1,否則為0。
二進位制否運算子(not):符號為~,表示對一個二進位制位取反。
異或運算子(xor):符號為^,表示若兩個二進位制位不相同,則結果為1,否則為0。
左移運算子(left shift):符號為<<,詳見下文解釋。
右移運算子(right shift):符號為>>,詳見下文解釋。
帶符號位的右移運算子(zero filled right shift):符號為>>>,詳見下文解釋。
複製程式碼
有一點需要特別注意,位運算子只對整數起作用,如果一個運運算元不是整數,會自動轉為整數後再執行。另外,雖然在 JavaScript 內部,數值都是以64位浮點數的形式儲存,但是做位運算的時候,是以32位帶符號的整數進行運算的,並且返回值也是一個32位帶符號的整數。
2.8.8 void運算子
void運算子的作用是執行一個表示式,然後不返回任何值,或者說返回undefined。
這個運算子的主要用途是瀏覽器的書籤工具(bookmarklet),以及在超級連結中插入程式碼防止網頁跳轉。
<a href="javascript: void(f())">文字</a>
複製程式碼
2.8.9逗號運算子
逗號運算子用於對兩個表示式求值,並返回後一個表示式的值。
'a', 'b' // "b"
var x = 0;
var y = (x++, 10);
x // 1
y // 10
複製程式碼
2.8.10 優先順序
圓括號的作用
圓括號()
可以用來提高運算的優先順序,因為它的優先順序是最高的,即圓括號中的表示式會第一個運算。
左結合與右結合
對於優先順序別相同的運算子,大多數情況,計算順序總是從左到右。
x + y + z
複製程式碼
但是少數運算子的計算順序是從右到左,即從右邊開始計算。
其中,最主要的是賦值運算子(=)和三元條件運算子(?:)。
w = x = y = z;
q = a ? b : c ? d : e ? f : g;
--------------------------------
w = (x = (y = z));
q = a ? b : (c ? d : (e ? f : g));
複製程式碼
2.8資料型別轉換
強制轉換
2.8.1 Number()
使用Number函式,可以將任意型別的值轉化成數值。
下面分成兩種情況討論,一種是引數是原始型別的值,另一種是引數是物件。
Number()
ture會變為1,false變為0
null變成0
undefined變為NaN
""變為0
parseInt('1',進位制) 會忽略掉前面的空格,知道找到第一個非數字就停止
parseFloat() 浮點數
複製程式碼
老司機採用-0
such as:"1"-0===1
老司機採用+
such as:+"1"===1
物件
簡單的規則是,Number方法的引數是物件時,將返回NaN,除非是包含單個數值的陣列。
Number({a: 1}) // NaN
Number([1, 2, 3]) // NaN
Number([5]) // 5
複製程式碼
2.8.2 String()
String函式可以將任意型別的值轉化成字串,強制轉換,null
會變成'null'
,undefined
變成'undefined'
String(null) //'null'
複製程式碼
tostring()
√:number,boolean
×(報錯:null,undefined
obj.tostring()會得到"{object:Object}" 不是你想要的
√:number,boolean null undefinded
obj+''還是會得到"{object:Object}"
tips:因為+會把兩邊的型別趨向2個string相加,1+"1"=(1).tostring+"1"="11"
window.string()
複製程式碼
老司機採用+' '
方法轉為字串`
物件
String方法的引數如果是物件,返回一個型別字串;如果是陣列,返回該陣列的字串形式。
String({a: 1}) // "[object Object]"
String([1, 2, 3]) // "1,2,3"
複製程式碼
2.8.3 Boolean()
Boolean函式可以將任意型別的值轉為布林值。 它的轉換規則相對簡單:除了以下五個值的轉換結果為false,其他的值全部為true。
undefined
null
-0或+0
NaN
''(空字串)
複製程式碼
2.8程式設計風格
2.8.1區塊
總是使用大括號
2.8.2圓括號
表示函式呼叫時,函式名與左括號之間沒有空格。
表示函式定義時,函式名與左括號之間沒有空格。
其他情況時,前面位置的語法元素與左括號之間,都有一個空格。
// 圓括號表示函式的呼叫
console.log('abc');
// 圓括號表示表示式的組合
(1 + 2) * 3
複製程式碼
2.8.3全域性變數
JavaScript 最大的語法缺點,可能就是全域性變數對於任何一個程式碼塊,都是可讀可寫。這對程式碼的模組化和重複使用,非常不利。
因此,建議避免使用全域性變數。如果不得不使用,可以考慮用大寫字母表示變數名,這樣更容易看出這是全域性變數,比如UPPER_CASE
。
2.8.4相等和嚴格相等
建議不要使用相等運算子(==),只使用嚴格相等運算子(===)
2.8.5自增和自減運算子
自增(++)和自減(--)運算子,放在變數的前面或後面,返回的值不一樣,很容易發生錯誤。事實上,所有的++運算子都可以用+= 1代替。
2.8.6分號
建議在行尾新增分號,在有些情況下,不新增分好可能出現錯誤
x = y
(function () {
// ...
})();
// 等同於
x = y(function () {...})();
複製程式碼
3. 標準庫
3.1 Object物件
Object本身是一個函式,可以當作工具方法使用,將任意值轉為物件。這個方法常用於保證某個值一定是物件。
如果引數為空(或者為undefined和null),Object()返回一個空物件。
instanceof運算子用來驗證,一個物件是否為指定的建構函式的例項。obj instanceof Object
返回true,就表示obj物件是Object的例項。
3.1.2 Object 建構函式
雖然用法相似,但是Object(value)
與new Object(value)
兩者的語義是不同的,Object(value)
表示將value轉成一個物件,new Object(value)
則表示新生成一個物件,它的值是value。
3.1.3 Object 的靜態方法
所謂“靜態方法”,是指部署在Object物件自身的方法
3.1.3.1 Object.keys(),Object.getOwnPropertyNames()
Object.keys方法和Object.getOwnPropertyNames方法都用來遍歷物件的屬性。
var obj = {
p1: 123,
p2: 456
};
Object.keys(obj) // ["p1", "p2"]
Object.getOwnPropertyNames(obj) // ["p1", "p2"]
複製程式碼
Object.keys()和Object.getOwnPropertyNames()返回的結果是一樣的。只有涉及不可列舉屬性時,才會有不一樣的結果。Object.keys方法只返回可列舉的屬性,Object.getOwnPropertyNames方法還返回不可列舉的屬性名。
3.1.3.2 Object 的例項方法
還有不少方法定義在Object.prototype物件。它們稱為例項方法,所有Object的例項物件都繼承了這些方法。
Object.prototype.valueOf():返回當前物件對應的值。 //valueOf方法的主要用途是,JavaScript 自動型別轉換時會預設呼叫這個方法
Object.prototype.toString():返回當前物件對應的字串形式。
Object.prototype.toLocaleString():返回當前物件對應的本地字串形式。
Object.prototype.hasOwnProperty():判斷某個屬性是否為當前物件自身的屬性,還是繼承自原型物件的屬性。
Object.prototype.isPrototypeOf():判斷當前物件是否為另一個物件的原型。
Object.prototype.propertyIsEnumerable():判斷某個屬性是否可列舉。
複製程式碼
3.1.3.2 Object.prototype.isPrototypeOf()和object instanceof 建構函式
A.isPrototypeOf(B) 判斷的是A物件是否存在於B物件的原型鏈之中
A instanceof B 判斷的是B.prototype是否存在與A的原型鏈之中
A.isPrototypeOf(B) 返回true 則B instanceof A 一定返回true
//A是B的原型,B在由A構造,B.prototype指向A 物件instanceof 建構函式
複製程式碼
3.1.3.3 Object.prototype.toString()
上面程式碼表示,對於一個物件呼叫toString方法,會返回字串[object Object],該字串說明物件的型別。
字串[object Object]本身沒有太大的用處
陣列、字串、函式、Date 物件都分別部署了自定義的toString方法,覆蓋了Object.prototype.toString方法
3.1.3.4 toString() 的應用:判斷資料型別
空物件呼叫toString()結果返回一個字串object Object,其中第二個Object表示該值的建構函式。這是一個十分有用的判斷資料型別的方法。
由於例項物件可能會自定義toString方法,覆蓋掉Object.prototype.toString方法,所以為了得到型別字串,最好直接使用Object.prototype.toString方法。通過函式的call方法,可以在任意值上呼叫這個方法,幫助我們判斷這個值的型別。
Object.prototype.toString.call(value)
數值:返回[object Number]。
字串:返回[object String]。
布林值:返回[object Boolean]。
undefined:返回[object Undefined]。
null:返回[object Null]。
陣列:返回[object Array]。
arguments 物件:返回[object Arguments]。
函式:返回[object Function]。
Error 物件:返回[object Error]。
Date 物件:返回[object Date]。
RegExp 物件:返回[object RegExp]。
其他物件:返回[object Object]。
複製程式碼
3.1.3.5 Object.prototype.toLocaleString()
Object.prototype.toLocaleString方法與toString的返回結果相同,也是返回一個值的字串形式。
這個方法的主要作用是留出一個介面,讓各種不同的物件實現自己版本的toLocaleString,用來返回針對某些地域的特定的值
。目前,主要有三個物件自定義了toLocaleString方法。
Array.prototype.toLocaleString()
Number.prototype.toLocaleString()
Date.prototype.toLocaleString()
複製程式碼
舉例來說,日期的例項物件的toString和toLocaleString返回值就不一樣,而且toLocaleString的返回值跟使用者設定的所在地域相關。
var date = new Date();
date.toString() // "Tue Jan 01 2018 12:01:33 GMT+0800 (CST)"
date.toLocaleString() // "1/01/2018, 12:01:33 PM"
複製程式碼
3.1.3.6 Object.prototype.hasOwnProperty()
Object.prototype.hasOwnProperty方法接受一個字串作為引數,返回一個布林值,表示該例項物件自身是否具有該屬性。(可列舉屬性)
var obj = {
p: 123
};
obj.hasOwnProperty('p') // true
obj.hasOwnProperty('toString') // false
複製程式碼
3.2 Array物件
3.2.1 建構函式
Array是 JavaScript 的原生物件,同時也是一個建構函式,可以用它生成新的陣列。
Array建構函式有一個很大的缺陷,就是不同的引數,會導致它的行為不一致。辣雞js
// 無引數時,返回一個空陣列
new Array() // []
// 單個正整數引數,表示返回的新陣列的長度
new Array(1) // [ empty ]
new Array(2) // [ empty x 2 ]
// 非正整數的數值作為引數,會報錯
new Array(3.2) // RangeError: Invalid array length
new Array(-3) // RangeError: Invalid array length
// 單個非數值(比如字串、布林值、物件等)作為引數,
// 則該引數是返回的新陣列的成員
new Array('abc') // ['abc']
new Array([1]) // [Array[1]]
// 多引數時,所有引數都是返回的新陣列的成員
new Array(1, 2) // [1, 2]
new Array('a', 'b', 'c') // ['a', 'b', 'c']
複製程式碼
不要用 我估計你也不會用,
// bad 辣雞
var arr = new Array(1, 2);
// good nice馬飛
var arr = [1, 2];
複製程式碼
3.2.2 靜態方法
3.2.2.1 Array.isArray()
Array.isArray方法返回一個布林值,表示引數是否為陣列。它可以彌補typeof運算子的不足。
var arr = [1, 2, 3];
typeof arr // "object"
Array.isArray(arr) // true
複製程式碼
3.2.3 例項方法
3.2.3.1 push(),pop()
push方法用於在陣列的末端新增一個或多個元素,並返回新增新元素後的陣列長度。注意,該方法會改變原陣列。
var arr = [];
arr.push(1) // 1
arr.push('a') // 2
arr.push(true, {}) // 4
arr // [1, 'a', true, {}]
複製程式碼
pop方法用於刪除陣列的最後一個元素,並返回該元素。注意,該方法會改變原陣列。
var arr = ['a', 'b', 'c'];
arr.pop() // 'c'
arr // ['a', 'b']
複製程式碼
對空陣列使用pop方法,不會報錯,而是返回undefined。
[].pop() // undefined
複製程式碼
push和pop結合使用,就構成了“後進先出”的棧結構(stack)。
var arr = [];
arr.push(1, 2);
arr.push(3);
arr.pop();
arr // [1, 2]
複製程式碼
3.2.3.2 shift(),unshift()
shift方法用於刪除陣列的第一個元素,並返回該元素。注意,該方法會改變原陣列。
var a = ['a', 'b', 'c'];
a.shift() // 'a'
a // ['b', 'c']
複製程式碼
shift方法可以遍歷並清空一個陣列。
push和shift結合使用,就構成了“先進先出”的佇列結構(queue)
unshift方法用於在陣列的第一個位置新增元素,並返回新增新元素後的陣列長度。注意,該方法會改變原陣列。
var a = ['a', 'b', 'c'];
a.unshift('x'); // 4
a // ['x', 'a', 'b', 'c']
複製程式碼
3.2.3.3 join()
join方法以指定引數作為分隔符,將所有陣列成員連線為一個字串返回。如果不提供引數,預設用逗號分隔。
var a = [1, 2, 3, 4];
a.join(' ') // '1 2 3 4'
a.join(' | ') // "1 | 2 | 3 | 4"
a.join() // "1,2,3,4"
複製程式碼
如果陣列成員是undefined或null或空位,會被轉成空字串。
[undefined, null].join('#')
// '#'
['a',, 'b'].join('-')
// 'a--b'
複製程式碼
3.2.3.4 concat()
concat方法用於多個陣列的合併。它將新陣列的成員,新增到原陣列成員的後部,然後返回一個新陣列,原陣列不變。
['hello'].concat(['world'])
// ["hello", "world"]
['hello'].concat(['world'], ['!'])
// ["hello", "world", "!"]
[].concat({a: 1}, {b: 2})
// [{ a: 1 }, { b: 2 }]
[2].concat({a: 1})
// [2, {a: 1}]
複製程式碼
如果陣列成員包括物件,concat方法返回當前陣列的一個淺拷貝。所謂“淺拷貝”,指的是新陣列拷貝的是物件的引用。
var obj = { a: 1 };
var array = [obj];
var newArray = array.concat();
obj.a = 2;
newArray[0].a
// 2
複製程式碼
3.2.3.5 reverse()
reverse方法用於顛倒排列陣列元素,返回改變後的陣列。注意,該方法將改變原陣列。
3.2.3.6 slice()
slice() 方法返回一個從開始到結束(不包括結束)選擇的陣列的一部分淺拷貝到一個新陣列物件。且原始陣列不會被修改。。
arr.slice(start, end);
複製程式碼
3.2.3.7 splice()
splice方法用於刪除原陣列的一部分成員,並可以在刪除的位置新增新的陣列成員,返回值是被刪除的元素。注意,該方法會改變原陣列。
arr.splice(start, count, addElement1, addElement2, ...);
// 從start開始包括strat刪除count個,在strat前面新增addElement1、addElement2
複製程式碼
如果只提供第一個引數,等同於將原陣列在指定位置拆分成兩個陣列。
var a = [1, 2, 3, 4];
a.splice(2) // [3, 4]
a // [1, 2]
複製程式碼
3.2.3.8 sort()
sort方法對陣列成員進行排序,預設是按照unicode順序排序。排序後,原陣列將被改變。
如果想讓sort方法按照自定義方式排序,可以傳入一個函式作為引數。
[10111, 1101, 111].sort(function (a, b) {
return a - b;
})
// [111, 1101, 10111]
複製程式碼
上面程式碼中,sort的引數函式本身接受兩個引數,表示進行比較的兩個陣列成員。如果該函式的返回值大於0,表示第一個成員排在第二個成員後面;其他情況下,都是第一個元素排在第二個元素前面。
3.2.3.9 map()
map方法將陣列的所有成員依次傳入引數函式,然後把每一次的執行結果組成一個新陣列返回。
var numbers = [1, 2, 3];
numbers.map(function (n) {
return n + 1;
});
// [2, 3, 4]
numbers
// [1, 2, 3]
複製程式碼
3.2.3.10 forEach()
- forEach() 方法對陣列的每個元素執行一次提供的函式,沒有返回值
array.forEach(callback(value, key, arr){
//do something
}, this)
//arr,this可選
-----------------------------------------------------------------
array.forEach( function(value,key){
//do some thing
})
複製程式碼
- forEach用this傳參給裡面的函式呼叫 ,所以
array.forEach(function(value,key){//do something})
能夠遍歷array - a.forEacj中的函式接受3個引數
arr.value,arr.key,arr自己
,第三個可以省略,下面2行程式碼相等
array.forEach(function(value,key){})
array.forEach.call(this,function(value,key ){})
複製程式碼
- 我們可以自己手寫一個forEach
let foo={0:'a',1:'b',length:2}
foo.forEach=function(fn){
for(let i = 0;i < foo.length; i++){
fn(this[i],i) //foo的每一項都呼叫一下fn
}
}
複製程式碼
3.2.3.11 filter()
過濾器:filter() 方法建立一個新陣列, 其包含通過所提供函式實現的測試的所有元素
array.filter(function(currentValue,index,arr){
}, thisValue)
//thisValue可選。物件作為該執行回撥時使用,傳遞給函式,用作 this 的值。如果省略了 thisValue ,this 的值為"undefined
複製程式碼
let array=[1,2,3,4,5,6,7,8,9,10]
array.fillter(function(value,key){
return value >= 5
})
//[5,6,7,8,9,10]
複製程式碼
3.2.3.12 reduce()
reduce() 方法對累加器和陣列中的每個元素(從左到右)應用一個函式,最後返回單個值。
arr.reduce(function(a, b, c, d){},e)
a:累加器的返回值,上一次的結果
b:當前處理的元素,現在
c:當前處理的元素的索引,第一次處理時,如果提供了初始值,則為0,沒有提供則為1,可選
d:d:arr自己本身,可選
e:初始值,如果沒有指定,則arr中的第一個值為初始值,可選
複製程式碼
let arr=[1,2,3,4]
arr.reduce((prev, curr) => prev + curr )
//10
複製程式碼
reduce可以表示map
a = [1,2,3]
a.reduce(function(arr,n){
arr.push(n*2)
return arr
},[])
//[2,4,6]
//每一項平方
複製程式碼
reduce可以表示filter
a = [1,2,3,4,5,6,7,8,9,10]
a.reduce(function(arr,n){
if(n % 2 === 0){
arr.push(n)
}
return arr
},[])
//[2,4,6,8,10]
複製程式碼
3.2.3.13 indexOf()lastIndexOf()
indexOf方法返回給定元素在陣列中第一次出現的位置,如果沒有出現則返回-1。
var a = ['a', 'b', 'c'];
a.indexOf('b') // 1
a.indexOf('y') // -1
複製程式碼
indexOf方法還可以接受第二個引數,表示搜尋的開始位置。
['a', 'b', 'c'].indexOf('a', 1) // -1
複製程式碼
lastIndexOf方法返回給定元素在陣列中最後一次出現的位置,如果沒有出現則返回-1
var a = [2, 5, 9, 2];
a.lastIndexOf(2) // 3
a.lastIndexOf(7) // -1
複製程式碼
3.3包裝物件
物件是 JavaScript 語言最主要的資料型別,三種原始型別的值——數值、字串、布林值——在一定條件下,也會自動轉為物件,也就是原始型別的“包裝物件”。
所謂“包裝物件”,就是分別與數值、字串、布林值相對應的Number、String、Boolean三個原生物件。這三個原生物件可以把原始型別的值變成(包裝成)物件。
var v1 = new Number(123);
var v2 = new String('abc');
var v3 = new Boolean(true);
複製程式碼
包裝物件的最大目的,首先是使得 JavaScript 的物件涵蓋所有的值,其次使得原始型別的值可以方便地呼叫某些方法。
Number、String和Boolean如果不作為建構函式呼叫(即呼叫時不加new),常常用於將任意型別的值轉為數值、字串和布林值
Number(123) // 123
String('abc') // "abc"
Boolean(true) // true
複製程式碼
3.3.1例項方法
3.3.1.1 valueOf()
valueOf方法返回包裝物件例項對應的原始型別的值。
new Number(123).valueOf() // 123
new String('abc').valueOf() // "abc"
new Boolean(true).valueOf() // true
複製程式碼
3.3.2原始型別與例項物件的自動轉換
原始型別的值,可以自動當作物件呼叫,即呼叫各種物件的方法和引數。這時,JavaScript 引擎會自動將原始型別的值轉為包裝物件例項,在使用後立刻銷燬例項。
比如,字串可以呼叫length屬性,返回字串的長度。
'abc'.length // 3
複製程式碼
上面程式碼中,abc是一個字串,本身不是物件,不能呼叫length屬性。JavaScript 引擎自動將其轉為包裝物件,在這個物件上呼叫length屬性。呼叫結束後,這個臨時物件就會被銷燬。這就叫原始型別與例項物件的自動轉換。
3.4Number物件
Number物件是數值對應的包裝物件,可以作為建構函式使用,也可以作為工具函式使用。
作為建構函式時,它用於生成值為數值的物件。
var n = new Number(1);
typeof n // "object"
複製程式碼
作為工具函式時,它可以將任何型別的值轉為數值。
Number(true) // 1
複製程式碼
3.4.1屬性
Number物件擁有以下一些屬性
Number.POSITIVE_INFINITY:正的無限,指向Infinity。
Number.NEGATIVE_INFINITY:負的無限,指向-Infinity。
Number.NaN:表示非數值,指向NaN。
Number.MAX_VALUE:表示最大的正數,相應的,最小的負數為-Number.MAX_VALUE。
Number.MIN_VALUE:表示最小的正數(即最接近0的正數,在64位浮點數體系中為5e-324),相應的,最接近0的負數為-Number.MIN_VALUE。
Number.MAX_SAFE_INTEGER:表示能夠精確表示的最大整數,即9007199254740991。
Number.MIN_SAFE_INTEGER:表示能夠精確表示的最小整數,即-9007199254740991。
複製程式碼
3.4.2例項方法
3.4.2.1 Number.prototype.toString()
toString方法可以接受一個引數,表示輸出的進位制。如果省略這個引數,預設將數值先轉為十進位制,再輸出字串;否則,就根據引數指定的進位制,將一個數字轉化成某個進位制的字串
10).toString() // "10"
(10).toString(2) // "1010"
(10).toString(8) // "12"
(10).toString(16) // "a"
複製程式碼
上面程式碼中,10一定要放在括號裡,這樣表明後面的點表示呼叫物件屬性。如果不加括號,這個點會被 JavaScript 引擎解釋成小數點,從而報錯
toString方法只能將十進位制的數,轉為其他進位制的字串。如果要將其他進位制的數,轉回十進位制,需要使用parseInt方法。
3.4.2.2 Number.prototype.toFixed()
toFixed方法先將一個數轉為指定位數的小數,然後返回這個小數對應的字串。
(10).toFixed(2) // "10.00"
10.005.toFixed(2) // "10.01"
複製程式碼
3.4.2.3 Number.prototype.toExponential()
toExponential方法用於將一個數轉為科學計數法形式。toExponential方法的引數是小數點後有效數字的位數
(10).toExponential() // "1e+1"
(10).toExponential(1) // "1.0e+1"
(10).toExponential(2) // "1.00e+1"
(1234).toExponential() // "1.234e+3"
(1234).toExponential(1) // "1.2e+3"
(1234).toExponential(2) // "1.23e+3"
複製程式碼
3.4.2.4 Number.prototype.toPrecision()
toPrecision方法用於將一個數轉為指定位數的有效數字。
(12.34).toPrecision(1) // "1e+1"
(12.34).toPrecision(2) // "12"
(12.34).toPrecision(3) // "12.3"
(12.34).toPrecision(4) // "12.34"
(12.34).toPrecision(5) // "12.340"
複製程式碼
3.5 String物件
String物件是 JavaScript 原生提供的三個包裝物件之一,用來生成字串物件。除了用作建構函式,String物件還可以當作工具方法使用,將任意型別的值轉為字串
var s1 = 'abc';
var s2 = new String('abc');
typeof s1 // "string"
typeof s2 // "object"
s2.valueOf() // "abc"
複製程式碼
字串物件是一個偽陣列
3.5.1 靜態方法
3.5.1.1 String.fromCharCode()
String物件提供的靜態方法(即定義在物件本身,而不是定義在物件例項的方法),主要是String.fromCharCode()。該方法的引數是一個或多個數值,代表 Unicode 碼點,返回值是這些碼點組成的字串。
String.fromCharCode() // ""
String.fromCharCode(97) // "a"
String.fromCharCode(104, 101, 108, 108, 111)
// "hello"
複製程式碼
3.5.2 例項屬性
3.5.2.1 String.prototype.length
字串例項的length屬性返回字串的長度。
'abc'.length // 3
複製程式碼
3.5.2 例項方法
3.5.2.1 String.prototype.charAt()
charAt
返回指定位置的字元,引數從0開始
'abc'.charAt(1) // "b"
'abc'[1] // "b"
複製程式碼
3.5.2.2 String.prototype.concat()
concat用於連線兩個字串,返回一個新字串,不改變原字串
var s1 = 'abc';
var s2 = 'def';
'a'.concat('b', 'c') // "abc"
s1.concat(s2) // "abcdef"
s1 // "abc"
複製程式碼
3.5.2.3 String.prototype.slice()
slice方法用於從原字串取出子字串並返回,不改變原字串。它的第一個引數是子字串的開始位置,第二個引數是子字串的結束位置(不含該位置)。
'JavaScript'.slice(0, 4) // "Java"
'JavaScript'.slice(4) // "Script"
'JavaScript'.slice(2, 1) // "" 如果第一個引數大於第二個引數,slice方法返回一個空字串
複製程式碼
3.5.2.4 String.prototype.substring()
substring方法用於從原字串取出子字串並返回,不改變原字串,跟slice方法很相像。它的第一個參數列示子字串的開始位置,第二個位置表示結束位置(返回結果不含該位置)。 不建議使用substring
'JavaScript'.substring(10, 4) // "Script"
// 等同於 //如果第二個引數大於第一個引數,substring方法會自動更換兩個引數的位置
'JavaScript'.substring(4, 10) // "Script"
'Javascript'.substring(-3) // "JavaScript"
'JavaScript'.substring(4, -3) // "Java"
//如果引數是負數,substring方法會自動將負數轉為0。
複製程式碼
3.5.2.5 String.prototype.substr()
substr方法用於從原字串取出子字串並返回,不改變原字串,跟slice和substring方法的作用相同。
substr方法的第一個引數是子字串的開始位置(從0開始計算),第二個引數是子字串的長度
'JavaScript'.substr(4, 6) // "Script"
複製程式碼