前端數據驅動的框架之下，咱們不得不掌握的數據處理方法

前端簡史

那是1989年的一個秋天，歐洲核子研究中心的物理學家Tim Berners-Lee發明了超文本標記語言...（此處省略數萬字）。

既然是簡史，那固然不能巴拉巴拉一堆的啦，下面我就嘗試着簡單聊一聊前端那點發展史，如圖

在前端刀耕火種的年代，前端的同窗開發項目的時候，就是使用原生JS結合瀏覽器提供的原生API,直接操做DOM，在原生API的晦澀難懂和各類瀏覽器的兼容性問題中掙扎，忽然Duang的一聲，jQuery應運而生，以其簡潔的API,出色的瀏覽器兼容性迅速成爲部署最爲普遍的JavaScript的庫，全球最大搞基網站，GitHub一直都在用jQuery,直到前幾個月才完全放棄jQuery。

在原生JS和jQuery的時代，咱們的開發是事件驅動的思惟模式，流程以下：

在事件驅動向數據驅動的過渡階段，MVC模式，也一度很是流行，ASP,JSP,ASP.NET等，這些技術直到如今仍有一些網站在採用，但這種每一個須要和後端通訊的操做，瀏覽器都會從新接收到一段可能只是改變了部分數據的整段HTML，而後從新渲染的開發模式，也慢慢的在淡出人們的視野。

近幾年隨着MVVM框架的興起，咱們終於擺脫了對DOM的操做，與服務端的通訊接收的只是改變的數據，此時，網站上所能看到的一切，它們再也不是HTML、CSS，一切皆數據，網站的每一處細小的細節，均可以先定義好數據，而後由框架進行渲染，咱們思惟也轉變爲數據驅動的模式，流程以下：

前端常常須要處理的數據

• 基本數據類型：String、Boolean、Number、undefined、null、Symbol(ES6)
• 引用數據類型：object、Function、Array、RegExp等

在平常開發中咱們常常須要處理的數據，無外乎上面的這些基本數據類型和引用數據類型，在這裏引用類型中的object指的是由大括號包含，在括號內部對象的屬性以鍵值對的形式如{name:'frontEnd'},JS中有一句很經典的話：「一切皆對象」，若是咱們使用[引用數據類型] instanceof Object 會發現返回的都是true，

JavaScript中的全部對象都來自Object；全部對象從Object.prototype繼承方法和屬性，儘管它們可能被覆蓋。例如，其餘構造函數的原型將覆蓋constructor屬性並提供本身的toString()方法。Object原型對象的更改將傳播到全部對象，除非受到這些更改的屬性和方法將沿原型鏈進一步覆蓋。(源自MDN)

若是你拿着這句話出去裝逼，說JS中一切皆對象，那你就會被啪啪的打臉，由於String、Boolean、Number、Symbol這些值類型就不是對象，既然不是對象，那咱們日常操做字符串的屬性和方法是怎麼來的呢？想知道嗎？想知道就往下看。

String類型和String對象

String類型用於表示由零或多個16位Unicode字符組成的字符序列，即字符串。 String對象是 JavaScript 原生提供的三個包裝對象之一，用來生成字符串對象。

• 從一道面試題提及

各位童鞋，請看題：

var ranshaw = 'ranshaw',
    str1 = new String(ranshaw),
    str2 = String(ranshaw);
    
// 請確認如下判斷是否準確

str1 === ranshaw

str2 === ranshaw

typeof str1 === typeof str2
複製代碼

若是你都判斷對了，那說明你已經越過了初級前端的門檻，若是沒有，推薦購買步步高打火機，那裏不會點哪裏。

• String對象

在上題中，咱們對str作一些操做，以下圖：

沒錯，str1是一個String對象，What!上面不是說String類型不是一個對象的嗎，嗯，String類型固然不是對象，是字符序列，new String()是將原始類型的字符串'ranshaw'，包裝成了一個對象，經過Chrome控制檯的打印結果咱們能看到 str2顯示結果是一個字符串，而str1顯示是一個對象而且有length屬性，_proto_屬性，經過_proto_屬性咱們還能訪問到工做中經常使用的一些處理字符串的方法，那麼問題來了，做爲一個字符串的str2也能訪問到String對象的屬性和方法，這是咋回事呢？

這裏就得詳細說下「包裝對象」這個東西了，在必定條件下像String這種原始類型的值，會被包裝成一個對象或者說暫時變成一個對象，當字符串調用String對象的屬性和方法的時候，這一操做就會發生，如當咱們取str2的length屬性的時候，實際上就是將str2包裝成了一個對象如str1，而後在調用str2包裝對象的length屬性，而且這個對象在用完後就銷燬了，包裝對象是隻讀的因此字符串沒法添加新的屬性，是否是感受字符串好像也沒那麼簡單，有這感受就對了，這種無知的飢餓感會將你逼上走向高手的路上，而且越走越遠。

數據的增刪查改

對數據的操做，不論是後端仍是前端，最主要的都是增刪改查這四個操做，下面對數據操做的方法，咱們都會從這四個方面進行歸類。

字符串

經過上文中介紹過的包裝對象，咱們知道字符串並不能改變其值的，String對象下的方法基本都是返回一個新的字符串，都沒有對原字符串作更改，因此增刪改這三個操做並不存在，下文是將相似於增刪改的方法或操做歸爲一類，方便整理和記憶。

• 增

var str1 = 'ran';
var str2 = 'shaw';

// 方式一 "+"號拼接
str1 + str2     // 'ranshaw'
// 方式二 模板字符串
`${str1}${str2}` // 'ranshaw'
// 方式三 concat
str1.concat(str2) // 'ranshaw'
複製代碼

• 查

var str = 'hello world'

// charAt  返回指定位置的字符，參數是從0開始編號的位置
str.charAt(1)    // 'e'

// [] 返回指定位置的字符，中括號的值從0開始
str[1]          // 'e'

// indexOf  返回要查詢字符串第一次出現的位置，若是沒有就返回-1；參數1：字符串，參數2：從該位置向後匹配
str.indexOf('o')  // 4
str.indexOf('o',5) // 7

// lastIndexOf 同indexOf，區別是lastIndexOf是從尾部開始匹配，參數2爲今後位置向前匹配
str.lastIndexOf('o') // 7
str.lastIndexOf('o',4) // 4

// match 用於肯定原字符串是否匹配某個子字符串，返回一個數組，成員爲匹配的第一個字符串。若是沒有找到匹配，則返回null
str.match('ll') // ['ll']

// search 和match相似，返回值爲匹配的第一個位置。若是沒有找到匹配，則返回-1
str.search('ll') // 2
複製代碼

• 刪和改

var str = 'hello world';

// slice 從原字符串取出子字符串並返回，不改變原字符串。參數1：起始位置，參數2：結束位置（不包含）
str.slice(0,5)      // 'hello'

// substring 和slice相似
str.substring(0,5)  // 'hello'

//  substr 與slice和substring做用相似，但參數2爲字符串的長度
str.substr(0,5)    // 'hello'

// replace  替換匹配的子字符串,通常狀況下只替換第一個匹配（除非使用正則）
str.replace('o','k')  // 'hellk world'
str.replace(/o/g,'k') // 'hellk wkrld'

複製代碼

• 其餘

var str = '\nhello world '
// trim 去除字符串兩端的空格和製表符（\t、\v）、換行符（\n）和回車符（\r）
str.trim()  // 'hello world'

// split 按照給定規則分割字符串，返回一個由分割出來的子字符串組成的數組
str.trim().split(' ') //  ["hello", "world"]
複製代碼

參考資料

阮一峯大神的包裝對象

前端思惟轉變--從事件驅動到數據驅動