JavaScript 随笔1

第一章 JavaScript实现

JavaScript由三个不同部分组成：

ECMAScript，提供核心语言功能

DOM，提供访问和操作网页内容的方法和接口

BOM，提供与浏览器交互的方法和接口。

第二章 在HTML中使用JavaScript

1.如何提高网页加载效率

A）将Script文件放在Body最后面

B）使用defer延迟脚本

C）使用async 异步脚本

第三章 基本概念

3.1数据类型

ECMAScript 有五种简单数据类型，分别是：Undefined、Null、Number、String、Boolean

有一种复杂数据类型 Object

Object类型是其他引用类型的基类，每个实例都有如下属性和方法：

A） constructor：保存着用于创建当前对象的函数 默认是Object（）

B） hasOwnProperty(“属性名”): 只检测给定的属性是否存在于当前对象实例中，而不检测原型。

C） isPrototypeOf（Object）：用于检测传入的对象是否传入对象的原型

D）其他： toString（）、valueOf（）、propertyIsEnumerable（）

3.2 操作符

数字加 + 字符串=字符串

数字 – 字符串=数字

数字 < 或 = 字符串  字符串会被转换为数字

Eg：

var result=5+5 ; // “55”

var result=5 – “3”; // 2

(5==”5”) //true

3.3 初识函数

1、函数参数是用数组实现的，arguments对象保存着传入的参数 arguments[0]==第一个命名参数

2、arguments.callee  保存着当前函数引用

3、arguments.callee.caller 保存着调用当前函数的引用

4、函数没有重载 但可以检测arguments 的个数和类型 模拟重载

第四章 作用域和内存问题

4.1 执行环境与作用域

执行环境定义了变量和函数有权访问的数据范围，每个执行环境都关联一个 变量对象，每个函数都有自己的执行环境。代码在一个环境中执行时会创建变量对象的一个作用域链。作用域链 保证执行环境有权访问所有变量和函数的有序访问。作用域链本质上是一个执行变量对象的指针列表，它只引用但不包括实际的变量对象。

执行环境有全局执行环境和函数执行环境之分。

4.2 垃圾回收包括： 标记清除 和 引用计数两种方式

第五章：引用类型

简介：引用类型是一种数据结构，用于将数据和功能组织在一起，很像C++里的类，但ECMAScript没有类的概念。

对象是某个引用类型的实例。

5.1 Object类型

1、使用new操作符创建Object实例

var objectDemo= new Object();

objectDemo.propretyone=”属性1”;  //动态属性

2、使用对象字面量 创建对象 要以分号；结尾

var Clock={

date  time:”2016-6-30”,

hour:”24”,

second:”1”

};

3、访问对象属性 点表示法和方括号语法

var hour= Clock.hour;  // ”24”

var date=Clock[“ date  time”];  //”2016-6-30”  属性名有空格时点表示法失效，只能用方括号表示法

5.2 Array 类型

1、创建Array类型

var arr=new Array(20);

var arr=[“字符串” , 100 , false];  // JS数组内的数据不一定是同一数据类型

2、检测一个变量是不是数组

(arr instanceof Array)  //true

Array.isArray(arr) //true

2、Array的转换方法

arr.toString(); // 字符串，100，false

arr.valueOf(); // 字符串，100，false

arr.join(“||”); // 字符串||100||false

3、Array的栈方法 模拟数据结构

堆栈(后进先出)： arr.push(“末尾新项”); //在数组末尾新增一项

arr.pop();// 弹出数组末尾的最后一项

队列（先进先出）： arr.push(“末尾新项”);

arr.shift();//弹出数组第一项

反向队列： arr.unshift(“开头新项”);//在数组开头添加新项

arr.pop();//弹出数组最后一项

4、数组的重排序 reverse()和sort()

arr.reverse(); // [false,100,”字符串”]  翻转数组

sort()函数会把数组的每一项转换为字符串 ，然后按照字符串编码来排序。（没什么卵用，要自己写，如下）

如果是排序数字型数组：

var numberArr=[1,2,10,9,4];

function compare(value1,value2){

if(value1<value2) return -1;

else if(value1>value2) return 1;

else return 0;

}

numberArr.sort(compare); //1、2、4、9、10

如果是排序对象数组：

var objectArr=[{age:200,name=”张三”}，{age:100,name:”李四”}];

//按照年龄排序

function compareobject(age){

return function(obj1,obj2){

var age1=obj1.age;

var age2=obj2.age;

if(age 1< age 2) return -1;

else if(age 1> age 2) return 1;

else return 0;

};  //返回一个 闭包 ，闭包引用age；

}

objectArr.sort(compareobject(“age”));

// [{age:100,name:”李四”}，{age:200,name=”张三”}];

5、数组的操作方法

1） concat(“1个参数”) 为数组追加新项

var newArr=arr.concat(“新项”); //[“字符串”,100,false,”新项”]

2） slice(arg1，[arg2]) 截取数组

var newArr=arr.slice(1); //[100,false,”新项”]

var newArr=arr.slice(1,3); //[100,false]

arg1参数为截取数组的起始索引，

arg2是子串末尾之后的那个索引（不是子串末尾）

3） splice(arg1,arg2,[……]) 胶结数组

arg1表示要删除的项的起始索引

arg2 表示要删除的项数

arg… 表示要追加的新项

eg:

var arr=[1,2,3,4];

var arr1 =arr.splice(0,2);  //[3,4]

var arr2 =arr.splice(1,0,”新插入项”);  //[1,2,”新插入项”,3,4]

6.数组的位置方法

indexOf(arg1,[arg2]) 和 lastIndexOf(arg1,[arg2])

arg1 表示要查找的项

arg2 是可选项 表示要查找的起始索引

eg:

var arr=[1,4,3,4,5,4,7];

var index1=arr.indexOf (4);// 1

var index2=arr.indexOf (100);//-1

var index3=arr.indexOf (4,2)//3

var index4=arr.lastIndexOf(4);//5

7、数组的迭代方法 every 、some、 map 、filter、 forEach

var arr=[1,4,3,4,5,4,7];

1、every()会迭代数组中的每一项，每一项都验证成功才返回true

var everyResult= arr.every(function(item,index,this_arr){

return (item>2);

}); //false

2、some()会迭代数组中的每一项，只要有一项验证成功就返回true

var some Result= arr.some(function(item,index,this_arr){

return (item>2);

}); //true

3、map()会迭代数组中的每一项，返回计算过的数组

var everyResult= arr.map(function(item,index,this_arr){

return (item*2);

}); //[2,8,6,10,8,14]

4、filter()会迭代数组中的每一项，返回满足过滤条件的数组

var filterResult= arr.filter(function(item,index,this_arr){

return (item>4);

}); //[5,7]

5、farEach()会迭代数组中的每一项，和for循环一样

arr.filter(function(item,index,this_arr){

//do Something

});

8、数组的归并方法 reduce()和 reduceRight()

var arr=[1,4,3];

var sum=arr.reduce(function(prev,cur,index,this_arr){

return prev+cur;

});

alert(sum);//8

prev：前一个值 每次迭代前一个值都会是本次计算后的结果

cur：当前值

index：当前项索引

this_arr:本数组地址

5.3 Date 类型

var now=new Date();//自动获取当前日期和时间Fri Jul 01 2016 17:14:11 GMT+0800

var someDate=new Date( “may 25,2004”);

var second=Date.now()//返回日期和时间毫秒数1467364715206

日期的格式化方法：

now.toLocalString();//2016/7/1 下午5:20:45

now.toLocalDateString();// 2016/7/1

now.toLocalTimeString();//下午5:27:11

now.toTimeString();//17:28:21 GMT+0800

now.toString();//Fri Jul 01 2016 17:21:13 GMT+0800

日期的组件方法：

getFullyear();//2016

getMonth();//0表示1月 ，11表示12月

getDate(); //1-31

getHours();//0-23

getMinutes();//0-59

getSeconds();//0-59

……

5.4 RegExp 类型

创建正则表达式：

1）字面量表示法

var expression=/pattern/flag

eg:

var pattern1=/at/gim; //g：全局；i：不区分大小写； m:多行

2）构造函数

var pattern2=new RegExp(“at”,”gim”)

正则表达式方法：

1.exec();

2.test();

…..

详细见下回分解

5.5 function 类型

简介：函数名是一个指向函数的指针，一个函数可以有多个函数名，函数没有重载。函数也是对象，也有直接的属性和方法。

1、函数的内部属性

arguments 和 this在函数执行时才初始化

arguments.callee :指向函数本身

arguments.callee.caller:指向调用该函数的函数

2、函数的属性和方法

属性：

length：表示函数希望接收的命名参数的个数；

prototype：指向函数的原型属性和方法

方法（非继承而来的）：

apply(arg1,[arg2]);

call(arg1,[arg….]);

arg1:运行函数的作用域

arg1：参数数组

eg：

function sum1(arg1,arg2){

return arg1+arg2;

}

function callsum1(num1,num2){

sum1.apply(this,arguments);

sum1.apply(this,[num1,num2]);

sum1.call(this,num1,num2);

}

传递参数并不是apply和call的主要用途，主要是用来实现松散耦合的，可以扩充函数的作用域。

Eg：

var obj=[color:”red”];

function sayColor(){

alert(this.color);

}

sayColor.call(obj);//red

函数绑定Bind(); 第22章 高级应用有详解

var objSayColor=sayColor.bind(obj);

objSayColor();

5.6 基本包装类型 之Number

简介：Boolean，Number，String是中特殊的引用类型，用于简化操作基本类型。每当读取一个基本类型的时候，后台就会创建一个对应的基本包装类型，从而可以调用相关的方法（逻辑上基本类型没有方法）；

var number =10;

alert(number.toString());//”10”

number.toString();//”10”

number.toString(2);//”1010”

number.toString(8);//”12”

number.toString(10);//”10”

number.toString()16;//”a”

number.toFixed(2);//”10.00”  把数字格式化为n位小数的字符串

var number=Number(“10”);//10   typeof number== number

var number=new Number(“10”);//10   typeof number== Object

5.7基本包装类型 之String

1、声明一个字符串：

var str=new String(“newstring”);

str.length//9

2、字符串的 字符方法

str.charAt(1);//返回特定索引下的字符 “e”

str.charCodeAt(1);//返回特定位置字符编码 “101”

3、截取字符串的操作方法

var newstr= str.concat(“-newstr”);//newstring-newstr

var slicestr=str.slice(1,5);//ewst  arg2 是子串最后一位的后面一位的索引 arg2是可选参数

var subtr=str.substring(1,5);//ewstr arg2 同上

4、字符串的位置方法(arg1,[arg2])和数组一样

var str=”hellonokia”;

var index1=str.indexOf(“o”);//4

var index2=str.lastIndexOf(“o”);//6

5、字符串的其他常用方法

var str=”hanyakui,liyan,liyanan”;

var array=str.spilt(“,”);//按照特定字符分割字符串为数组 [“hanyakui”,”liyan”,”liyanan”]

var upperStr= array.toUpperCase();

var lowerStr=array.toLowerCase();

var trimstr=str.trim();//去掉字符串开头和结尾的空格

6、字符串的模式匹配

见正则表达式总结

…………

5.8 Global对象

1.URI编码方法

encodeURI 和decodeURI :不会对任何本身属于URI的字符编码 如/ : ? #

encodeURIComponent和decodeURIComponent: 会对任何非标准的字符编码

eg：

var uri=”http://www.hanyakui.cn?id=zzu gis”;

var uri1=uri.encodeURI();//http://www.hanyakui.cn?id=zzu%20gis

var uri2=uri.encodeURIComponent();//http%3a%f%fwww.hanyakui.cn%2id=zzu%20gis

2.eval() 执行传入的代码 怎么用不知道

5.9 Math对象

1、求数组中最大值：

var max=Math.max(1,2,2,3,5);//5

var min=Math.min(1,2,3,3);//1

var arr=[1,2,3,13,100];

var maxInArr=Math.apply(Math,arr);//100

2、四舍五入

Math.ceil(25.1);//26 向上求整

Math.floor(25.9);//25 向下求整

Math.round(25.4);//25 标准四舍五入

3、求（low--up）范围内的随机数

var random=Math.floor(Math.random*(up-low+1)+low);