前端總結系列
- 前端總結·基礎篇·CSS（一）布局
- 前端總結·基礎篇·CSS（二）視覺
- 前端總結·基礎篇·CSS（三）補充
- 前端總結·基礎篇·JS（一）原型、原型鏈、構造函數和字符串（String）
- 前端總結·基礎篇·JS（二）數組深拷貝、去重以及字符串反序和數組（Array）
- 前端總結·基礎篇·JS（三）arguments、callee、call、apply、bind及函數封裝和構造函數
- 前端總結·基礎篇·JS（四）異步請求及跨域方案
- 前端總結·工具篇·管理（一）常用模塊化方案
目錄
這是《前端總結·基礎篇·JS》系列的第一篇，主要總結一下原型、原型鏈、構造函數及字符串。
一、原型鏈
1.1 原型（prototype）
1.2 原型鏈（__proto__）
1.3 構造函數（constructor）
二、字符串使用
2.1 定義字符串
2.2 使用字符串
三、常用技巧
3.1 字頻統計
四、方法列表
4.1 轉換
4.2 修改
4.3 匹配
4.4 文本
4.5 其他
一、原型鏈
更多有關原型鏈的思考，請見湯姆大叔的博客。
1.1 prototype（原型）
給原型添加屬性和方法，需要添加在對象上。這些屬性和方法，會被后代繼承。實現繼承還有其他方法，更多請見幻天芒的博客。
String.prototype.bibi = 'die' // 原型是作用於對象String上的
var str = ''
console.log(str.bibi)
1.2 __proto__（原型鏈）
原型鏈中包含了此對象的所有方法。
var str = ''
console.log(str.__proto__)
1.3 constructor（構造函數）
構造函數是一類具有某些相同屬性事物的集合。在創建對象的時候，會將傳過來的參數賦值到對象自身的屬性上。父類的靜態屬性和方法會被子類繼承。
/* 定義汽車構造函數 */
var Car = function(brand){
this.brand = brand
this.type = 'Car'
}
var BMW = new Car('BMW') // 創建BMW車型
console.log(BMW.brand) // 顯示品牌名
str.__proto__.constructor // function String() { [native code] }
str.__proto__.__proto__.constructor
二、字符串使用
2.1 定義字符串
字符串使用單引號或者雙引號引起來。可以直接定義，也可以創建字符串對象。
var str = 'I See U.' // 直接定義字符串並且復制給變量
var str = new String('I See U.') // 創建字符串對象並賦值
2.2 使用字符串
字符串的下標從0開始，最后一個下標是字符串長度減1。訪問字符串可以直接訪問，或者對
console.log(str) // 直接訪問
console.log(str[0]) // 通過下標訪問
三、常用技巧
3.1 字頻統計
首先把字符串中的詞庫提取出來（可以將字符串轉成數組，再去重）。在去重的同時可以把次數統計出來。去重的更多方法，請見前端網。call用來改變this的指向，方法請見每天進步一點點！。
統計結果為0次，就是一次。統計函數還有待改善。功能上無問題，細節上還得繼續優化。例如，標點符號和空格應該過濾掉。或者強化一下，統計詞頻。
var wordCount = function(str){
/* 提取字庫 */
var strSorted = str.split('').sort() // 字符串轉數組並排序
var newArr = [] // 保存去重后的數據
countArr = [] // 保存統計結果，下標為出現的次數
/* 去重 */
var nextCount = 0 // 定義是否抵達下一個新詞
var currentCount = 0 // 存儲重復詞的次數
for(x in strSorted){
if(strSorted[x]!==newArr[newArr.length-1]){
nextCount = 1 // 標記已抵達新詞
newArr.push(strSorted[x]) // 去重后的數據保存到newArr
if(Array.isArray(countArr[currentCount]) == false){
countArr[currentCount] = [] // 防止包括，先定義為數組
}
Array.prototype.push.call(countArr[currentCount],strSorted[x-1]) // 把統計結果保存在CountArr
// console.log('if / currentCount:'+currentCount) 調試計數器
currentCount = 0 // 重置上一次的計數
}
else{
if(nextCount === 1){
currentCount+=1 // 補上一個計數
nextCount=0 // 重置抵達下一個的標記
}
currentCount+=1 // 計算器加一
// console.log('else / currentCount:'+currentCount) 調試計數器
}
}
/* 展示數據 */
for(var i = countArr.length-1;i>=0;i--){
if(countArr[i]!==undefined){
console.log('出現'+i+'次：'+countArr[i])
}
}
return countArr
}
/* 使用函數 */
var str = '今天的天氣還是不錯的，不出去走走走走走？' // 定義測試用字符串
wordCount(str)
四、方法列表
為方便閱讀，有如下准則：
- 參數中的[]代表可選參數。如substr(start[,length])中，length為可選參數。
- 本文對常用API做了精准分類，更加便於閱讀。
- 需要讓某些瀏覽器支持某些新功能，，可以使用膩子腳本（Polyfill），詳見[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/
- Reference/Global_Objects/String)。
定義字符串str為'I Love Javascript.'。下面的測試代碼將在此基礎上進行。
var str = 'I Love Javascript.'
4.1 轉換
字符串（通常在其他數據類型轉換成字符串的時候用到）
* toString()（一般轉換）
str.toString() // "I Love Javascript."
[1,2,3].toString() // "1,2,3" 數組轉成字符串
* String(str)（強制轉換）
String(str) // "I Love Javascript."
數組
split([separator[,limit]])（第一個參數為分離的規則，第二個參數為分離后的數組個數）
str.split() // [I Love Javascript.]
str.split('') // ["I", " ", "L", "o", "v", "e", " ", "J", "a", "v", "a", "s", "c", "r", "i", "p", "t", "."]
str.split(' ') // ["I", "Love", "Javascript."]
str.split(' ',2) // ["I", "Love"]
str.split(/\s*/) // ["I", "L", "o", "v", "e", "J", "a", "v", "a", "s", "c", "r", "i", "p", "t", "."]
str.split(/\s{1}/) // ["I", "Love", "Javascript."]
str.split(/\s{2}/) // ["I Love Javascript."]
鏈接
ES6
* link(url)（轉成鏈接）
str.link('z.cn') // '<a href="z.cn">I Love Javascript.</a>'
* anchor(name)（轉成頁內定位鏈接，又叫錨鏈接）
str.anchor('top') // '<a name="top">I Love Javascript.</a>'
4.2 修改
切割
* substr(start[,length])（start參數可為負，第二個參數為長度）
str.substr(2,3) // 'Lov'（start為負時，IE需要使用polyfill）
* substring(indexStart[,indexEnd])（參數皆不可為負，取值>=0）
str.substring(2,3) // 'L'
* slice(beginIndex[,endIndex])（參數皆可為負）
str.slice(-8,-2) // 'ascrip'
* trim()（刪除文本左右兩邊空格，文本中的空格不刪除）
str.trim() // 'I Love Javascript.'
* trimLeft(刪除文本左邊空格)
* trimRight(刪除文本右邊空格)
拼接
concat(string2[,string3,....stringN])（字符串拼接，可有多個參數）
str.concat('Me Too.') // 'I Love Javascript.Me Too.'
ES6
String.raw()（單行字符串，會轉義\n\u000A等轉義字符）
let name = 'Bob';String.raw`Hi\n${name}!` // 'Hi\nBob!'
String.raw`Hi\n${2+3}!`; // 'Hi\n5!'
String.raw`Hi\u000A!`; // 'Hi\u000A!'
String.raw({ raw: 'test' }, 0, 1, 2); // 't0e1s2t'
4.3 匹配
搜索
* indexOf(searchValue[,fromIndex])（大於length返回-1）
str.indexOf('a') // 8
str.indexOf('a',20) // -1
* lastIndexOf(searchValue[,fromIndex])
str.lastIndexOf('a') // 10 fromIndex小於0時轉換為0
str.lastIndexOf('a',20) // 10 fromIndex大於length時搜索整個字符串
str.lastIndexOf('a', 9) // 8 使用了index，搜索完了右邊，還要搜索左邊
* charAt(index)
str.charAt(5) // e
* charCodeAt(index)
str.charCodeAt(5) // 101
* String.fromCharCode(num1[,...[,numN]])
String.fromCharCode(101) // e 使用的是Unicode編碼
ES6
* CodePointAt(index)
* String.fromCodePoint(num1[,...[,numN]])
* includes(searchString[,position])（判斷文本是否存在的搜索，位置參數可選）
str.includes('Love') // true（返回值為true/false）
* startWith(searchstring[,position])
str.endsWith('I') // true
str.endsWith('i') // false
* endsWith(searchstring[,position])
str.endsWith('Javascript.') // true
str.endsWith('Javascript') // false
正則
replace使用函數作為第二參數請見MDN
* match(regexp)（匹配到返回結果，沒有則返回null）
str.match(/Lo/) // ["Lo"]
str.match(/Los/) // null
* search(regexp)（匹配到返回下標，沒有則返回-1）
str.search(/Lo/) // 2
str.match(/Los/) // -1
* repacle(regexp|substr,newSubstr|function)（得到的是返回的新字符串，原字符串不變）
str.replace(/Love/,'like') // 'I like Javascript.'
str.replace(/Love/,'like');str // 'I Love Javascript.'
var newStr = str.replace(/Love/,'like');newStr // 'I like Javascript.'
精確匹配
數字 \d 匹配0-9中任意數字，亦可表示成[0-9]
單詞 \w 匹配數字、大小寫字母和下划線，亦可表示成[A-Za-Z0-9_]
字符 \s 匹配空白字符（空格、水平或垂直制表符、換行、換頁等），亦可表示成[ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]
取反 \D\W\S 這些表示的是對應小寫字母的集合取反，比如\D為[^0-9]，也就是只要不是0-9都可以匹配
邊界 ^x，x$分別匹配字符首和尾。\b，\B分別匹配單詞首和尾。
右值 x(?=y)為當x緊接着的一個字符是y則匹配。x(?!y)表示緊接着的不是y則匹配。
空白 \t、\v、\f、\r、\n、[\b],分別為水平制表符、垂直制表符、換頁、回車、換行和退格。這些都是空白字符。
模糊匹配
0個或以上 *
1個或以上 +
1個或0個 ?
這個或那個 x|y
非換行和回車 .
按組匹配
最起碼一組 {1,}
一組到三組 {1,3}
只要一組 {1}
4.4 文本
狀態
* toUpperCase()（轉成大寫）
str.toUpperCase() // I LOVE JAVASCRIPT.
* toLowerCse()（轉成小寫）
str.toLowerCase() // 'i love javascript.'
* toLocalUpperCase()/toLocalLowerCase()（本地化的大寫和小寫，一般不使用）
ES6語法
repeat(count)（讓文本重復多次，參數為重復的次數，范圍為>=0。）
str.repeat(2) // 'I Love Javascript.I Love Javascript.'
修飾
已廢棄清單（不推薦使用）（以下皆用來生成HTML標簽）
sup() // <sup> 上標
sub() // <sub> 下標
bold() // <b> 粗體
big() // <big> 大號字體
small() // <small> 小號字體
strike() // <strike> 刪除線
italics() // <i> 斜體
fixed() // <tt> 打印機字體
blink() // <blink> 閃爍字體
fintsize(number) // <font size=""> 參數取值范圍為1-7
fontcolor(color) // <font color="">
4.5 其他
更多的用法和解釋請見MDN。
* valueOf() // 轉換成字符串，默認自動調用，不可直接使用
* toSource() // 自動調用
* localeCompare()
ES6
* string[Symbol.iterator]
* normalize()
結語
本文部分參考W3School，主要參考MDN。另外，還參考了湯姆大叔、幻天芒、前端網和每天進步一點點！的博客。
湯姆大叔的深入理解JAVASCRIPT系列，貌似不錯，留個標記，好好學。
前端網也不錯，做個標記，好記得路。