山野村夫

JavaScript学习笔记

一、初识javascript

1、javascript组成

ECMAscript
文档对象（DOM）
浏览器对象(BOM)

二、变量

javascript是一种弱类型的脚本语言
var c=3;变量声明
变量命名规则:
1）必须以字母或下划线_或“$”开头；
2）长度不能超过255个字条；
3）不允许使用空格；
4）不使用关键字和保留字；
5）区分大小写。
全局变量
在方法外部声明的变量；
方法内部，没有加var关键字声明的变量
局部变量
方法内部，使用var声明的变量

示例：

<script type="text/javascript" charset="utf-8"> var a = 3; //number 全局变量 //两种变量：局部变量；全局变量 function test() { var a = 2; //局部变量 document.write(a); } test(); </script>

三、数据类型

ECMAScript中，数据类型分为基本类型和引用类型两大类；
基本数据类型：Number、Boolean、String、Undefined、Null
-Number：整数和小数、NaN、Infinity，-Infinity
-Undefined：变量声明但未赋值
-Null：表示一个空的对象引用；
引用类型：Object类型，如：对象、数组、RegExp、Date...
Typeof操作符
基本类型和引用类型的值
-基本类型是按照值访问的，因为可以操作保存在变量中的实际值；
-引用类型则是按引用去访问

四、运算符

- 自动转换机制 - “==”表示可以经过自动转换比较的是数值； - “===”表示可以经过自动转换，先比较值，再比较数据类型

五、控制语句

六、引用类型

掌握数组的概念、特性、常用方法
掌握Object，学会使用对象
了解其它引用类型对象

七、数组

数据组是一种对象
特点：“数组”是一组数据的集合；长度可变，元素类型也可以不同；数组长度随时可变，随时可以修改。(length属性)
常用方法：
-push、pop
-shift、unshift
-splice、slice
-concat、join、sort、reverse等

 /** * js中数组类似于java中的map容器，长度可随意改变，元素类型任意。 */ //创建数组的形式 var arr1 = new Array();//不建议使用 var arr =[1,2,3,4,true,'abc',new Date()]; arr.length = 5; document.write(arr); //push document.write("<br />"); var arr = []; var result = arr.push(1,2,true);//返回值为新数组的长度 document.write(arr); document.write("<br />"); document.write(result); //pop var obj = arr.pop();//从数组的尾部移除一个元素,返回值移除的元素 document.write(obj);//true //shift unshift 方法 document.write("<br />---shift--<br />"); var arr = [1,2,3,true,new Date()]; var obj = arr.shift();//从头部移除一个元素，返回移除的元素 document.write(arr); document.write("<br />---unshift--<br />"); arr.unshift(100,false);//从头部插入多个元素(返回新数组长度) document.write(arr); /** * splice:操作数组本身 * 第一个参数：起始位置 * 第二个参数：表示截取的个数 * 第三个参数以后：表示追加的新元数 */ document.write("<br />--splice--<br />"); var arr = [1,2,3,4,5]; arr.splice(1,2,3,4,5);//134545 document.write(arr); //slice：不操作数组本身 document.write("<br />--slice--<br />"); var arr =[1,2,3,4,5]; var result = arr.slice(2,4);//截取范围，左闭右开区间，返回截取的内容 document.write(result); document.write(arr); //操作数组的方法：concat join document.write("<br />--contcat--<br />"); var arr1=[1,2,3]; var arr2 = [4,5]; document.write(arr1.concat(arr2));//合并连接，不操作数组本身 //join 不操作数组本身 document.write("<br />--join--<br />"); var result = arr1.join('-');//在每个元素之间加入内容 document.write(result); /** * sort正序排序 * reverse 倒序排序 */ document.write("<br />--sort--<br />"); var arr1 = [5,2,1,4,3]; var arr2 = [10,2,4,1,7]; document.write(arr1.sort()); document.write("<br />"); document.write(arr1.reverse());//按照集合的位置进行倒序排序 arr2.sort();//1 10 2 4 7 function compare(value1,value2) { if(value1 < value2) { return -1; }else if(value1 value2){ return 1; } else{ return 0; } } arr2.sort(compare);//1 2 4 7 10

八、ECMA5数组新特性

-位置方法：indexOf、lastIndexOf
-迭代方法：every、filter、forEach、some、map
-缩小方法：reduce、reduceRight

1. indexof、lastIndexOf

indexOf按照索引的升序比较 searchElement 和数组里的元素们，它使用内部的严格相等比较算法 (11.9.6)，如果找到一个或更多这样的位置，返回这些位置中第一个索引；否则返回 -1。
可选的第二个参数 fromIndex 默认是 0（即搜索整个数组）。如果它大于或等于数组长度，返回 -1，即不会搜索数组。如果它是负的，就把它当作从数组末尾到计算后的 fromIndex 的偏移量。如果计算后的索引小于 0，就搜索整个数组。
lastIndexOf 按照索引的降序比较 searchElement 和数组里的元素们，它使用内部的严格相等比较算法 (11.9.6)，如果找到一个或更多这样的位置，返回这些位置中最后一个索引；否则返回 -1。
可选的第二个参数 fromIndex 默认是数组的长度减一（即搜索整个数组）。如果它大于或等于数组长度，将会搜索整个数组。如果它是负的，就把它当作从数组末尾到计算后的 fromIndex 的偏移量。如果计算后的索引小于 0，返回 -1。

 //1个参数时表示传值，返回索引位置（index从0开始） var arr = [1,2,3,4,5,4,3,2,1]; var index = arr.indexOf(4);//3 //2个参数时，第一个参数是值，第二参数是起始位置 var index = arr.indexOf(2,2);//7

2. every

/** - * every ( callbackfn [ , thisArg ] ) - * callbackfn 应该是个函数，它接受三个参数并返回一个可转换为布尔值 true 和 false 的值。 - * every 按照索引的升序，对数组里存在的每个元素调用一次 callbackfn，直到他找到一个使 callbackfn 返回 false 的元素。 - * 如果找到这样的元素，every 马上返回 false，否则如果对所有元素 callbackfn 都返回 true，every 将返回 true。 - * callbackfn 只被数组里实际存在的元素调用；它不会被缺少的元素调用。 - 如果提供了一个 thisArg 参数，它会被当作 this 值传给每个 callbackfn 调用。如果没提供它，用 undefined 替代。 -调用 callbackfn 时将传入三个参数：元素的值，元素的索引，和遍历的对象。 - */

var arr = [1,2,3,4,5,4,3,2,1]; var result = arr.every(function(item,index,array){ return item >2; });//false

3. filter

callbackfn 应该是个函数，它接受三个参数并返回一个可转换为布尔值 true 和 false 的值。filter 按照索引的升序，对数组里存在的每个元素调用一次 callbackfn，并用使 callbackfn 返回 true 的所有值构造一个新数组。callbackfn 只被实际存在的数组元素调用；它不会被缺少的数组元素调用。

var arr = [1,2,3,4,5,4,3,2,1]; var result = arr.filter(function(item,index,array){ return item >2; });//3,4,5,4,3

4.forEach

forEach ( callbackfn [ , thisArg ] )
callbackfn 应该是个函数，它接受三个参数。forEach 按照索引的升序，对数组里存在的每个元素调用一次 callbackfn。callbackfn 只被实际存在的数组元素调用；它不会被缺少的数组元素调用。

 var arr = [1,2,3,4,5,4,3,2,1]; arr.forEach(function(item,index,array){ return document.write(item*2+",");; });//2,4,6,8,10,8,6,4,2,

5.map

map ( callbackfn [ , thisArg ] )
callbackfn 应该是个函数，它接受三个参数。map 按照索引的升序，对数组里存在的每个元素调用一次 callbackfn，并用结果构造一个新数组。callbackfn 只被实际存在的数组元素调用；它不会被缺少的数组元素调用。

 var arr = [1,2,3,4,5,4,3,2,1]; var result = arr.map(function(item,index,array){ return item*2; });//2,4,6,8,10,8,6,4,2

5.some

some ( callbackfn [ , thisArg ] )
callbackfn 应该是个函数，它接受三个参数并返回一个可转换为布尔值 true 和 false 的值。some 按照索引的升序，对数组里存在的每个元素调用一次 callbackfn，直到他找到一个使 callbackfn 返回 true 的元素。如果找到这样的元素，some 马上返回 true，否则，some 返回 false。callbackfn 只被实际存在的数组元素调用；它不会被缺少的数组元素调用。

 var arr = [1,2,3,4,5,4,3,2,1]; var result = arr.some(function(item,index,array){ return item>2; });//true

6.reduce

reduce ( callbackfn [ , initialValue ] )
callbackfn 应该是个函数，它需要四个参数。reduce 按照索引的升序，对数组里存在的每个元素 , 将 callbackfn 作为回调函数调用一次。

 var arr = [1,2,3,4,5,4,3,2,1]; var result = arr.reduce(function(previousValue,currentValue,index,array){ return previousValue+currentValue; });//25

九、Object

Object类型的创建方式、使用
对于Object类型应用for in 枚举循环

- Object实例有下例属性和方法：

Constructor
hasOwnProperty(propertyName)
isPrototypeOf(Object)
propertyIsEnumerablepropertyName)
toLocaleString()
toString()
valueOf();

十、Object模拟Map

 > function Map(){

 var obj={}; // this.put = function(key,value){ obj[key]=value; } // this.size = function(){ var count=0; for(var attr in obj) { count++; } return count; } // this.get = function(key){ if(obj.hasOwnProperty(key)) { return obj[key]; }else{ return null; } }; // this.remove = function(key) { if(obj.hasOwnProperty(key)) delete obj[key]; } // this.forEach = function(fn) { for(var attr in obj){ fn(attr,obj[attr]); } } }

十一、Object练习去掉数组的重复项

 > var arr = [2, 1, 2, 10, 2, 3, 5, 5, 1, 10, 13];

 function toObject(arr){ var obj = {}; for (var i = 0; i < arr.length; i++) { obj[arr[i]] = true; } return obj; } function toArray(obj){ var arr = []; for (var attribute in obj) { if (obj.hasOwnProperty(attribute)) { arr.push(attribute); } } return arr; } function uniq(arr) { return toArray(toObject(arr)); } document.write(uniq(arr));

十二、其它引用类型对象

单体对象：
-Global对象：encodeURIComponent、encodeURI、decodeURI、decodeURIComponent、eval、parseInt、parseFloat、isNaN、escape、unescape
Math对象
Date对象
基本包装类型
Function类型、RegExp类型

十三、函数

学习目标：
-了解函数的基本概念
-函数的定义方式
-函数的参数
-this
-call、apply
-执行环境、作用域链
-垃圾收集、块级用命域
-closue

13.1 初识函数

Function类型，即函数类型。
一个典型的javascript函数定义如下：
function 函数名称(参数表)
｛
函数执行部分；
｝
注意：参数列表直接写形参名称，不用写var。
函数可以看做数据来进行传递。
没有返回值类型。
函数可以嵌套，但尽量少用。

function test(a,b){ return a+b; } var c = test(10,20);

13.2 定义函数

function语句形式；只定义一次；具有静态属性；效率较高；优先解析。
函数直接量形式；顺序解析，先声明再使用。
通过Function构造函数形式定义函数；每次新建一个函数；具有动态属性，效率低；顺序解析，先声明再使用。顶级作用域

//1 function语句式 function test1() { alert("I am test1"); } //test1(); //函数直接量形式 var test2 = function() { alert("I am test2"); } //test2(); //Function构造函数式 var test3 = new Function("a","b","return a+b");

13.3 函数参数

arguments:用得最多的是做递归操作，arguments.callee

 function fact(num) { if(num<=1) return 1; else return num*arguments.callee(num-1); } var F = fact; fact = null; alert(F(5));

13.4 this

this是在运行时期基于函数的执行环境绑定。 this总是指向调用者，也就是说，谁调用了我，我就指向谁

 var k =10; function test(){ this.k = 20; } test(); alert(k);//20

13.5 call 和 apply

简单的用法：绑定一些函数用于传递参数

 function sum(x,y) { return x+y; } function call1(num1,num2) { return sum.call(this,num1,num2); } function apply1(num1,num2) { return sum.apply(this,[num1,num2]) }

强大的用法：扩充作用域，最大的好处是对象不需要与方法有任何耦合关系

 window.color = 'red'; var obj = {color:'blue'}; function showColor(){ alert(this.color); } showColor.call(this);//red showColor.call(obj);//blue

13.6 执行环境、作用域链

//TODO

13.7 垃圾收集、块级作用域