VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > JavaScript教程 >
  • 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"
            ]
}
 
 

相关教程