关于JavaScript基础知识

变量

1.变量的类型

基本类型：String Number Null Undefined Boolean

引用类型：Object(function Array ....)

2.变量的定义

基本类型：

var example；（弱类型）

引用类型：

var example =new Array()[或者用example=[]]

两种类型定义的方法相同，但是引用类型定义之后具有属性和方法。

例：var example = new Object()

example.name ="xiao ming"(为变量增加属性)

alert("name"+“：”+example.name)//输出：name：xiao ming

delete example.name(删除变量的属性)

alert("name"+“：”+example.name)//输出：name：undefined

3.变量值的复制

基本类型：

数据类型是各种语言组成的基本要素，在javaScript中也不例外。

javaScript中的数据类型初次接触你会感觉So easy但深入学习之后才会了解其复杂程度。

学习JavaScript的数据类型，首先我们要掌握能如何准确快速的判定出某个值的数据类型。

 

javaScript的变量的数据类型判定

1.typeof "variable"

适用范围：除Null外的类型

返回值：变量的类型（除Null外）

优点：对于数据类型的变量，可以准确无误的判定出数据类型，方便程序员的编码操作。

缺点：不能判断Null类型、不能精准的判定引用类型

例如：

typeof “dd”//String

typeof  2//Number

typeof  undefined//Undefined

typeof  false//Boolean

var a =new Object()

var b=new Array()

var c=new Date()

...

typeof  a//Object

typeof  b//Object

typeof c//Object

typeof  null//Object

2. a instanceof b(必须是Object)

使用范围：引用类型

返回值：Boolean 类型值

优点：对于引用类型而言，instanceof可以判断a是否是b类型的变量

缺点：对于变量是基本类型时，instanceof不起作用

例如

var a=[]

var b="string"

var c=new String()

a instanceof Date//false

a instanceof Array//true

a instanceof String(包装类)//false

b instanceof String(包装类)//false

c instanceof String//true

a instanceof Null/Undefined(不存在包装类)//无意义

数据类型NULL和Undefined

1.Undefined类型 

此种类型的值有三种情况：

一个未初始化的变量的值为undefined

一个没有传入实参的形参变量的值为undefined

一个函数什么都不返回,则该函数默认返回undefined

eg：

1.var a（此时直接输出a的值则为undefined）

2.function example(a){}（在函数未传入值之前a的值则为undefined）

3..function a(){}（函数a的返回值为undefined）

注意：在web编程中常会在firebug中遇到undefined的错误，原因多数是因为在调用某个变量之前未对其声明，或是调用的函数不具有你调用的属性

 

2.Null类型(唯一值为null)

从逻辑角度看，null表示的是一个空对象指针（typeof null返回值为object，因为在JavaScript中null一切对象的父类）

有以下两点需要注意：

1.null == undefined 的返回值时true（因为undefined是自null中派生的o，因此在遇到需要判定null与undefined时应该用"==="来判定）

2.另外string中的空字符""与null完全不是同个意思

BOM对象

在我们使用JavaScript进行开发时，BOM（浏览器对象模型）是我们必须要掌握的知识。w3c为了把浏览器中的JavaScript最基本的部分标准化，已经将BOM的主要方面纳入了HTML5的规范中，可见了解BOM对我们JavaScript的开发有多重要。

BOM的对象核心是window，它表示浏览器的一个实例，下面来详细了解window对象。

在浏览其中window有双重角色：JavaScript访问浏览器的接口 和 ECMAScript规定的全局对象。

1、全局的window对象

JavaScript中的任何一个全局函数或变量都是window的属性

var globalVariable = "hello everyone!"

document.write(window.globalVariable)//输出"hello everyone"

2、window与self对象

self对象与window对象完全相同，self通常用于确认就是在当前的窗体内。

console.info(window === self)//返回值为true

3、常用的window子对象：

Location

History

Navigitor

Document

Screen

4、常用window方法:

window.alert()
window.confirm()
window.setTimeout()
window.setInterval()
window.close()
window.resizeBy()
window.resizeTo()
window.scrollTo()
window.scrollBy()

MDN中的注释：Location接口表示其关联的对象所展示的页面的地址等信息，对该对象的修改会反映到关联的对象上。 Document 和 Window 接口都有一个关联的Location，可以分别用Document.location和Window.location来访问它们对应的Location。

Window.location

1)Window.location是一个只读属性返回一个location对象

document.write(window.location)//输出：

Location {href: "http://write.blog.youkuaiyun.com/postedit", ancestorOrigins: DOMStringList, origin: "http://write.blog.youkuaiyun.com", replace: function, assign: function…}

2)window.location常用的属性：

hash //返回一个URL的锚部分
host //返回一个URL的主机名和端口
hostname //返回URL的主机名
href //返回完整的URL
pathname //返回的URL路径名。
port //返回一个URL服务器使用的端口号
protocol //返回一个URL协议
search //返回一个URL的查询部分

3)window.location常用的方法：

location.assign（）//导航到新页面

location.reload(true)//强制重新从服务器加载页面

location.replace()//用一个新文档取代当前文档

 

注：assign（）和replace（）的区别如下
window.location.assign(url) ： 加载 URL 指定的新的 HTML 文档。 就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。
window.location.replace(url) ： 通过加载 URL 指定的文档来替换当前文档 ，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的

History
 

History接口用来处理用户操作浏览器的浏览历史  history属性：history.length(返回浏览器列表中url的数量)  history的方法： history.back()//加载 history 列表中的前一个 URL。 history.forward()//加载 history 列表中的下一个 URL。 history.go()//加载 history 列表中的某个具体页面。 Screen接口是用来访问当前显示屏的信息,以便更好的处理用户的需求。 常用的screen属性： availHeight  // 返回显示屏幕的高度 (除 Windows 任务栏之外)。 availWidth  // 返回显示屏幕的宽度 (除 Windows 任务栏之外)。

width    // 返回显示器屏幕的宽度。

height     //返回显示屏幕的高度。

bufferDepth  //   设置或返回调色板的比特深度。
colorDepth     //返回目标设备或缓冲器上的调色板的比特深度。
deviceXDPI    // 返回显示屏幕的每英寸水平点数。
deviceYDPI    // 返回显示屏幕的每英寸垂直点数。
fontSmoothingEnabled    // 返回用户是否在显示控制面板中启用了字体平滑。
logicalXDPI//     返回显示屏幕每英寸的水平方向的常规点数。
logicalYDPI   //  返回显示屏幕每英寸的垂直方向的常规点数。
pixelDepth     //返回显示屏幕的颜色分辨率（比特每像素）。
updateInterval  //   设置或返回屏幕的刷新率。

JavaScript中"=="

“==”比较的内容

在比较时，会进行强制类型的转换如：

a.当其中一个数为boolean类型时，则在比较前将false转为0，true转为1(true==1返回true)

b.当其中一个值为字符串另一个值为number时，先将字符串转换为number型的

c.当其中一个值为对象而另一个不是时，需要调用valueOf()的方法得到的基本类型值在进行比较

d.null == undefined

e.如果两个值都为对象，则比较这两个对象是否指向同一个对象的值

常用方法

一  splice和slice

1.splic(start,number,item1,item2.....)

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目

start：必需输入项。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。

number：必需输入项。要删除的项目数量。如果设置为 0，则不会删除项目。

item可选。向数组添加的新项目。

优点：改法可以灵活的改变数据。

缺点：该方法会改变原始数组（使用时要考虑到页面刷新问题）。

返回值：如果从 数组中删除了元素，则返回的是含有被删除的元素的数组。

例如:

var a=["a","b","c","d"]

alert(a.splice(0,2))//输出"a","b"

------------------------

alert(a.splice(0,2,"aaa"))//输出"a","b"

------------------------

alert(a.splice(0,2,"aaa"))

alert(a)//输出"aaa","c","d"

-----------------------------------

 

alert(a.splice(1,0))

alert(a)//输出"aaa","c","d"

 

alert(a.splice(0,2))

 

alert(a)//输出"a","b","c","d"

2.slice(start,end)

slice() 方法从数组中复制项目，然后返回新的数组

start：必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

end：可选项。整数，规定复制数组的结束位置。未设置时表示数组元素的结尾。

优点：不改变原有的数组。

缺点：只能复制数组，无法添加新元素，过滤数组中间元素是操作比较繁琐。

返回值：一个新生成的数组。元素为原数组中复制的元素。

 

例如:

var a=["a","b","c","d"]

alert(a.slice(1,0))//输出["b","c","d"]

------------------------

alert(a.slice(0,2))//输出["a","b"]

------------------------

alert(a.slice(0,2))

alert(a)//输出"a","b","c","d"

二 setTimeout 和setInterval

 

在JavaScript中的window对象中封装了两个很有用的方法，setTimeout()【超时调用】和setInterval()【间歇调用】。

1.setTimeout()方法

1)调用方式:

var timeOut=setTimeout(function(){

alert("setTimeout")

},1000);

【"function"第一个参数可以是字符串，"1000"第二个参数表示超时调用的时间，单位时毫秒】

可以直接传递字符串，但不建议使用。

2)优点：不用考虑占用内存的问题，因为他仅仅在满足条件是执行执行一次。

3)缺点：如果想要多次执行，必须添加循环的方法。

4)停止方法：clearTimeOut(timeOut);

2.setInterval()方法

 

1)调用方式:

var timeOut=setInterval()(function(){

alert("setInterval()")

},1000)；

【"function"第一个参数可以是字符串，"1000"第二个参数表示调用方法的间隔时间，单位时毫秒】

可以直接传递字符串，但不建议使用。

2)优点：如果每隔某段时间就调用（不停的执行方法，例如：界面时间的显示），可以直接用此方法实现。

3)缺点：内存消耗过大，容易造成死循环。

4)停止方法：clearInterval(timeOut);

总结：在项目中我们最好还是使用setTimeout这个方法，因为它可以用循环实现setInterval的功能，避免了setInterval中一些不必要的问题。另外在使用setInterval是会出现不按我们所指定的时间来进行调用。这是因为setInterval的回调函数并不是到时后立即执行,而是等到系统计算资源空闲下来后才会执行.而下一次触发时间则是在setInterval回调函数执行完毕之后才开始计时,所以如果setInterval内执行的计算过于耗时,或者有其他耗时任务在执行,setInterval的计时会越来越不准,延迟很厉害.