前端数据驱动的框架之下，咱们不得不掌握的数据处理方法

前端简史

那是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"]
复制代码

参考资料

阮一峰大神的包装对象

前端思惟转变--从事件驱动到数据驱动