一、初识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 垃圾收集、块级作用域
//TODO
13.8 Closuer闭包
概念：一个函数可以访问另外一个函数作用域中的变量。封闭性：private 起到一个保护变量的作用
//作用域1 function f(x){ //作用域2 var temp = x;//局部变量，已经没有被使用 return function(x){//作用域2 temp += x;//temp又被使用 alert(temp); } } var a = f(10); a(5);//15 a(10);//25 a(100);//125
十四 面向对象程序设计
- 学习目标
- -了解面向对象程序的特点
- -学会JS模拟面向对象的方式
- -理解prototype
- -理解继承
14.1 类创建
//类的概念 //第一种形式 工厂模型 function createPerson(name, sex, age){ var obj = []; obj.name = name; obj.sex = sex; obj.age = age; obj.sayName = function(){ alert(obj.name); } return obj; } var p1 = createPerson("z3", "男", "25"); var p2 = createPerson("lis", "女", "18"); p1.sayName(); //第二种形式 构造函数式 推荐 //函数的第一个字母大写（类的模板） function Person(name, age, sex){ this.name = name; this.age = age; this.sex = sex; this.sayName = function(){ alert(this.name); } } //构造一个对象: new 参数 执行模板代码 返回对象 var p1 = new Person("manager", 20, '男'); p1.sayName();
14.2 原型
prototype创建每一个函数都 有一个prototype属性，该属性其实是一个指针，总是指向一个对象，该对象的作用就是将特定的属性和方法包含在内，起到一个所有实例共享的作用。
function Person(){ } var obj = Person.prototype; obj.name = "z3"; obj.age = 20; obj.sayName = function(){ alert(this.name); }; var p1 = new Person(); var p2 = new Person(); alert(p1.sayName == p2.sayName);//true
- 构造函数、原型对象、实例对象的关系
- 构造函数.prototype == 原型对象
- 原型对象.constructor ==构造函数
- 实例对象.prototype ==原型对象
5411
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
