人人网FED博客

专注于前端技术

前端新司机上路指南(上)

1 简介

javascript由三部分组成:ECMAScriptDOM对象模型(文档)、BOM对象模型(浏览器)。书上讲得很难懂,其实javascript就是ecmascript的一种扩展,ecmascript是一种语言标准,其实广义上通常把他们混淆,应该没什么大碍。这门语言是可以在浏览器上操作文档以及浏览器的。其他没什么好记的。

script标签

script标签一般是这样包含type属性,src代表外部引用位置,deferasyns属性代表加载方式,script标签之间也可以写script代码。最开始的时候我把script标签写在head里面,但是这样浏览器必须加载完所有的js才能渲染dom。后来我放在body标签之后,但是我在浏览器中打开查询源代码的时候发现script标签自己就跑到body标签里面了,之后我就都写在body结束标签之前了。

下图是script加入deferasync的渲染时间对比图。什么都不加的是加载到script脚本就停下来下载然后执行再加载dom,加defer的是同时加载domscript,只能用于外部引用,加载完了再执行script。加async叫异步脚本,只能外部引用,domscript同时加载,加载后直接执行。

3 数据类型

Undefined,Null,Boolean,Number,String,Object只有这六种类型。typeof函数检测类型,typeof(null)返回object。因为null是个空的对象引用。null == undefined返回的是 true,因为undefined值派生自null值,前两种类型应该就这两点。

Boolean:

truefalse两个值。转化方式Boolean(object)!!object两种。

基本上值为false的都在这里,一般直接用if(object){}来做为空的判断

Number:

浮点计算的number精度较低 0.1 + 0.2 == 0.30000000000000004 这就很难受了,所以尽量不要用javascript进行这种判断计算。
NaN:not a number,很好理解一种number类型,用来表示那些转化不成number类型的数。
一般用Number(object)+object来转化成number类型

还可以用parseInt()来转化成int 

parseInt(‘1234abc12’)//1234 从第一位开始,是数字就继续匹配,知道不是数字位置
parseInt(‘abc12’) //NaN
parseInt(‘0xa’) //10 十六进制
parseInt(‘070’) //70
parseInt(070) //56 八进制
parseInt函数的arguments[1]里面可以放进制数,方便转换为多少进制

任何类型与number类型比较大小都是转化为number类型再比较大小

如果是字符就从第一个比起了,NaN和谁比较大小都返回一个false包括他自己

String:

“+”在字符串中扮演着连接符号,任何类型与字符串相加都会得到字符串

一般来说,在变量传递的时候会这样写 a = b || default;利用短路原则如果b的值为空的时候则赋给a一个default值,如果b确有其值则直接赋予这个值给他。

Object:
var obj = new Object();var obj = {};
两种声明方式,对象这个就太大了,包括函数,数组,类这些需要放在后面细讲,这里先讲一个对象赋值。


这里obj2obj1指向的都是同一个对象,他们在这里类似于指针,所以改变了obj1name同时也就等价于改变了obj2所指向Objectname属性。

4 引用类型

Object

两种方式访问对象中的属性:一般在属性名确定的情况直接用person.name访问,在属性名不定需要用变量存储属性名时则用person[“name”]来访问。

Array:

声明方式 var arr = new Array(length)var arr = []

数组转字符串三种方法

.sort().reverse()分别为arr排列升序和降序,但是比较的是先toString()后的字符串。
.sort()函数厉害的地方在于可以传一个排序函数进去,如果arguments[0]<arguments[1]返回值为正数,则是升序,反之则是降序。

splice可谓十分强大,接受三个及以上参数,第一个参数是起始位置,第二个参数是删除个数,第三个及其之后的就是替换对象,返回删除的部分并且对原数组进行更改最后变成这样 [6, 7, 2, 3, 4, 5]


brr.indexOf(6) //0 brr.lastIndexOf(6) //0 返回位置一个从前往后查一个从后往前查,找到第一个就停,接受第二个参数是查询起点位置索引
brr.every(function(item,index,array){ return (item > 2) }) //flase
brr.some(function(item,index,array){ return (item > 2) }) //true
这两个方法从字面上很好理解,一个是对数组内每一项的判断取&&,一个是取||
brr.filter(function(item,index,array){ return (item > 2) })//[3,4,5] 返回数组中满足条件的项所组成的数组
brr.map(function(item,index,array){ return (item * 2) }) //[2, 4, 6, 8, 10] 返回对数组每项操作后的数组
brr.forEach(function(item,index,array){ console.log(item) }) //1 2 3 4 5 对每一项想干啥干啥

目录: 基础技术

1 回复

  1. Array.reduce() 也是一个很好用的方法。进行累加时很是方便。

发表评论

电子邮件地址不会被公开。 必填项已用*标注