内容简介:那是1989年的一个秋天,欧洲核子研究中心的物理学家Tim Berners-Lee发明了超文本标记语言...(此处省略数万字)。既然是简史,那当然不能巴拉巴拉一堆的啦,下面我就尝试着简单聊一聊前端那点发展史,如图在前端刀耕火种的年代,前端的同学开发项目的时候,就是使用原生JS结合浏览器提供的原生API,直接操作DOM,在原生API的晦涩难懂和各种浏览器的兼容性问题中挣扎,突然Duang的一声,jQuery应运而生,以其简洁的API,出色的浏览器兼容性迅速成为部署最为广泛的JavaScript的库,全球最大
那是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"] 复制代码
以上所述就是小编给大家介绍的《前端数据驱动的框架之下,我们不得不掌握的数据处理方法(一)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Python数据处理(二):处理 Excel 数据
- R|数据处理|因子型数据
- 大数据 -- 下一代数据处理技术
- Python数据抓取(1) —数据处理前的准备
- 大数据生态圈之流式数据处理框架选择
- 流式数据处理在百度数据工厂的应用与实践
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。