VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > temp > JavaScript教程 >

  • 快速学习JavaScript第一章

  • Javascript简介：
首先简单说一下Javascript这门语言。JavaScript是一种属于网络的解释型的脚本语言，已经被广泛用于Web应用开发。最早是在HTML网页上使用，用来给HTML网页增加各式各样的动态功能。在过去，JavaScript只是被用来做一些简单的网页效果，比如表单验证、浮动广告等，所以那时候JavaScript并没有受到重视。自从AJAX开始流行后，人们发现利用JavaScript可以给用户带来更好的体验，甚至利用这一优点开发了大型网页游戏，于是这门语言被重视了起来。
     
  1. Javascript代码存放的位置
1.JavaScript代码可以直接嵌在网页的任何地方，不过通常我们把Javascript代码放在<head></head>中。
2.可以将JavaScript代码放到一个单独.js文件中，如将文件命名为:script.js那么引用方式为：
 <script type = "text/javascript" src = "script.js" />
 
  • Javascript中的数据类型
Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了五种基本的数据类型(Number,String，Boolean，Null，Undefined)和两种特殊数据类型(数组，对象)用来处理数据和文字。
  1. Number
JavaScript不区分整数和浮点数，统一用Number表示。Number可以直接做四则运算，规则和数学一致：
  1. String
字符串是以单引号'或双引号"括起来的任意文本，比如'abc'，"xyz"等等。请注意，''或""本身只是一种表示方式，不是字符串的一部分，因此，字符串'abc'只有a，b，c这3个字符。
  1. Boolean
布尔值和布尔代数的表示完全一致，一个布尔值只有true、false两种值，要么是true，要么是false。
  1. Null
null表示一个“空”的值，它和0以及空字符串''不同，0是一个数值，''表示长度为0的字符串，而null表示“空”。
  1. Undefined
在JavaScript中，还有一个和null类似的undefined，它表示“未定义”。
  1. 数组
数组是一组按顺序排列的集合，集合的每个值称为元素。JavaScript的数组可以包括任意数据类型。例如：
[1, 2, 3.14, 'Hello', null, true];
  1. 对像
JavaScript的对象是一组由键-值组成的无序集合。JavaScript对象的键都是字符串类型，值可以是任意数据类型。例如：
var person = {
    name: 'Bob',
    age: 20,
    tags: ‘js’, ‘web', ‘mobile’],
    city: ‘Beijing',
    hasCar: true,
};
Javascript 标识符可以使用数字、大小写字母，下划线，美元符号构成，标识符不能以数字开头。JavaScipt严格区分大小写，代码必须以分号结束。
 
  • Javascript中的函数
  1. 方法
在一个对象中绑定函数，称为这个对象的方法。
在JavaScript中，对象的定义是这样的：
var xiaoming = {
       name: '小明',
       birth: 1990
};
但是，如果我们给xiaoming绑定一个函数，就可以做更多的事情。比如，写个age()方法，返回xiaoming的年龄：
var xiaoming = {
       name: '小明',
       birth: 1990,
       age: function () {
           var y = new Date().getFullYear();
           return y - this.birth;
       }
};
 
xiaoming.age; // function xiaoming.age()
xiaoming.age(); // 今年调用是25,明年调用就变成26了
 
2.高阶函数
JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。
(1). map()
举例说明，比如我们有一个函数f(x)=x*x，要把这个函数作用在一个数组[1, 2, 3, 4, 5, 6, 7, 8, 9]上，就可以用map实现如下：
function pow(x) {
           return x * x;
}
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
由于map()方法定义在JavaScript的Array中，我们调用Array的map()方法，传入我们自己的函数，就得到了一个新的Array作为结果：
 
  1. . reduce()
Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算，
比方说对一个Array求和，就可以用reduce实现：
var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
           return x + y;
}); // 25
 
  1. . filter()
filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。
和map()类似，Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。
例如，在一个Array中，删掉偶数，只保留奇数，可以这么写：
var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
           return x % 2 !== 0;
});
r; // [1, 5, 9, 15]
 
  1. . sort()
JavaScript的Array的sort()方法就是用于排序的，但是排序结果可能让你大吃一惊：
 
// 看上去正常的结果:
['Google', 'Apple', 'Microsoft'].sort(); // ['Apple', 'Google', 'Microsoft'];
 
// apple排在了最后:
['Google', 'apple', 'Microsoft'].sort(); // ['Google', 'Microsoft", 'apple']
 
// 无法理解的结果:
[10, 20, 1, 2].sort(); // [1, 10, 2, 20]
这是因为Array的sort()方法默认把所有元素先转换为String再排序。sort()方法也是一个高阶函数，它还可以接收一个比较函数来实现自定义的排序。
 
例如：要按数字大小排序，我们可以这么写：
var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
           if (x < y) {
               return -1;
           }
           if (x > y) {
               return 1;
           }
           return 0;
}); // [1, 2, 10, 20]
 
  1. 闭包
闭包（closure）定义非常抽象，很难看懂。我的理解是，闭包就是能够读取其他函数内部变量的函数。
由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
闭包的用处，一个是可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
  1. . 读取函数内部的变量
例如：
　function f1(){
　　　　var n=999;
　　　　function f2(){
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
把f2作为返回值，我们就可以在f1外部读取它的内部变量
 
  1. . 将变量的值始终保持在内存中
例如：
　 function f1(){
　　　　var n=999;
　　　　nAdd=function(){n+=1}
　　　　function f2(){
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
　　nAdd();
　　result(); // 1000
在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制回收。
 
  1. 箭头函数
ES6标准新增了一种新的函数：Arrow Function（箭头函数）。
为什么叫Arrow Function？因为它的定义用的就是一个箭头：
x => x * x
 
上面的箭头函数相当于：
function (x) {
       return x * x;
}
 
箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种像上面的，只包含一个表达式，连{ ... }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ ... }和return：
x => {
       if (x > 0) {
           return x * x;
       }
       else {
           return - x * x;
       }
}
 
如果参数不是一个，就需要用括号()括起来：
(x, y) => x * x + y * y
 
  1. generator
generator（生成器）是ES6标准引入的新的数据类型。一个generator看上去像一个函数，但可以返回多次。
generator跟函数很像，定义如下：
function* foo(x) {
       yield x + 1;
       yield x + 2;
       return x + 3;
}
generator和函数不同的是，generator由function*定义（注意多出的*号），并且，除了return语句，还可以用yield返回多次。
 
  • 标准对象
  1. Date
在JavaScript中，Date对象用来表示日期和时间。
 
要获取系统当前时间，用：
var now = new Date();
now;//Tue Nov 01 2016 11:34:14 GMT+0800(中国标准时间)
now.getFullYear(); // 2016, 年份
now.getMonth(); // 10, 月份，注意月份范围是0~11，10表示11月
now.getDate(); // 1, 表示1号
now.getDay(); // 2, 表示星期二
now.getHours(); // 11, 24小时制
now.getMinutes(); // 30, 分钟
now.getSeconds(); // 22, 秒
now.getMilliseconds(); // 490, 毫秒数
now.getTime(); // 1477971254490, 以number形式表示的时间戳
 
注意，当前时间是浏览器从本机操作系统获取的时间，所以不一定准确，因为用户可以把当前时间设定为任何值。
如果要创建一个指定日期和时间的Date对象，可以用：
var d = new Date(2016, 5, 19, 20, 15, 30, 123);
d; // Fri Jun 19 2016 20:15:30 GMT+0800 (CST)
 
  1. RegExp
正则表达式是一种用来匹配字符串的强有力的武器。它的设计思想是用一种描述性的语言来给字符串定义一个规则，凡是符合规则的字符串，我们就认为它“匹配”了，否则，该字符串就是不合法的。
在javascript我们可以通过内建的类来定义一个正则表达式。
var reName = new RegExp();
 
在javascript中处理正则表达式的方法。
test -- RegExp的test方法用来测试字符串是否匹配给出的匹配模式，返回布尔值；
exec -- RegExp的exec方法返回包含第一个匹配的的数组或null；
match -- String的match方法返回包含所有匹配子字符串的数组；
replace -- String的replace方法完成string的替换操作，支持正则表达式；
search -- 与String的indexof方法类似，不同的是search支持正则表达式，而不仅仅是字符串；
split -- 按照一定规则拆分字符串并将子字符串存储到数组中的String方法。
 
关于这些函数的具体使用方法，可以参阅JS的相关函数手册。
 
  1. JSON
JSON是JavaScript Object Notation的缩写，它是一种数据交换格式。在JSON中有以下几种数据类型：
number：和JavaScript的number完全一致；
boolean：就是JavaScript的true或false；
string：就是JavaScript的string；
null：就是JavaScript的null；
array：就是JavaScript的Array表示方式——[]；
object：就是JavaScript的{ ... }表示方式。
以及上面的任意组合。
 
并且，JSON还定死了字符集必须是UTF-8，表示多语言就没有问题了。为了统一解析，JSON的字符串规定必须用双引号""，Object的键也必须用双引号""。
 
序列化
让我们先把小明这个对象序列化成JSON格式的字符串：
var xiaoming = {
       name: '小明',
       age: 14,
       gender: true,
       height: 1.65,
       grade: null,
       'middle-school': '\"W3C\" Middle School',
       skills: ['JavaScript', 'Java', 'Python', 'Lisp']
};
JSON.stringify(xiaoming,null,’’);
 
结果：
{
    "name": "小明",
    "age": 14,
    "gender": true,
    "height": 1.65,
    "grade": null,
    "middle-school": "\"W3C\" Middle School",
    "skills": [
       "JavaScript",
       "Java",
       "Python",
       "Lisp"
        ]
}
第二个参数用于控制如何筛选对象的键值，如果我们只想输出指定的属性，可以传入Array：
JSON.stringify(xiaoming, ['name', 'skills'], '  ');
结果：
{
            "name": "小明",
            "skills": [
           "JavaScript",
           "Java",
           "Python",
           "Lisp"
            ]
}
 
 


相关教程