学习可以到大神的官网学习,http://www.liaoxuefeng.com/ 这里是做的笔记
运行和调试
a. 如何运行javascript
要让浏览器运行JavaScript,必须先有一个HTML页面,在HTML页面中引入JavaScript,然后,让浏览器加载该HTML页面,就可以执行JavaScript代码。
你也许会想,直接在我的硬盘上创建好HTML和JavaScript文件,然后用浏览器打开,不就可以看到效果了吗?
这种方式运行部分JavaScript代码没有问题,但由于浏览器的安全限制,以'file://'开头的地址无法执行如联网等JavaScript代码,最终,你还是需要架设一个Web服务器,然后以'http://' 开头的地址来正常执行所有JavaScript代码。
b. 调试:
使用Google Chrome浏览器,Chrome浏览器对开发者非常友好,可以让你方便地调试JavaScript代码
安装后,随便打开一个网页,然后点击菜单“查看(View)”-“开发者(Developer)”-“开发者工具(Developer Tools)”,浏览器窗口就会一分为二,下方就是开发者工具:
先点击“控制台(Console)“,在这个面板里可以直接输入JavaScript代码,按回车后执行。
要查看一个变量的内容,在Console中输入console.log(a);,回车后显示的值就是变量的内容。
如果你对自己还有更高的要求,可以研究开发者工具的“源码(Sources)”,掌握断点、单步执行等高级调试技巧。
引入javaScript方法;
JavaScript代码可以直接嵌在网页的任何地方,不过通常我们都把JavaScript代码放到<head>中;
1.由<script>...</script>包含的代码就是JavaScript代码,它将直接被浏览器执行。;
2.把JavaScript代码放到一个单独的.js文件,然后在HTML中通过<script src="..."></script>引入这个文件;
有些时候你会看到<script>标签还设置了一个type属性:<script type="text/javascript">
但这是没有必要的,因为默认的type就是JavaScript,所以不必显式地把type指定为JavaScript。注释
1.行注释//...
2.块注释/..../-
数据类型和变量
1.注意两个数据;
NaN;//表示not a number 当无法计算结果时用NAN表示
Infinity;//表示无限大,当数值超过了JavaScript的Number所能表示的最大值时,就表示为Infinity
2.注意相等运算符==JavaScript在设计时,有两种比较运算符;
1.==//会自动转换数据类型再进行比较,很多时候会得到非常诡异的结果
2.===//不会自动转换数据类型,如果数据类型不一致,返回false,如果一致,再比较.
由于JavaScript这个设计缺陷,不要使用==比较,始终坚持使用===比较;
3.NaN 这个特殊的Number与其他所有的值都不相等包括他自己;NaN===NaN;//false
唯一能判断NaN的方法是通过isNaN()
4.注意浮点数的比较:1 / 3 === (1 - 2 / 3); // false
这不是JavaScript的设计缺陷。浮点数在运算过程中会产生误差,因为计算机无法精确表示无限循环小数。要比较两个浮点数是否相等,只能计算它们之差的绝对值,看是否小于某个阈值:
Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true
5.null和undefined
null表示一个空的空,它和0和''不同,0 是一个数值,''表示长度为0的字符串.而null表示空
undefined表示未定义
JavaScript的设计者希望用null表示一个空的值,而undefined表示值未定义。事实证明,这并没有什么卵用,区分两者的意义不大。大多数情况下,我们都应该用null。undefined仅仅在判断函数参数是否传递的情况下有用。- strict模式
JavaScript在设计之初,为了方便初学者学习,并不强制要求用var申明变量。这个设计错误带来了严重的后果:如果一个变量没有通过var申明就被使用,那么该变量就自动被申明为全局变量:
,ECMA在后续规范中推出了strict模式,在strict模式下运行的JavaScript代码,强制通过var申明变量,未使用var申明变量就使用的,将导致运行错误。
启用strict模式的方法是在JavaScript代码的第一行写上:'use strict'; - 字符串
单行字符串 '...' 或者 "..."
ES6新增:多行字符串...
字符串链接可以用+号
ES6新增模板字符串:表示方法和上面的多行字符串一样,但是它会自动替换字符串中的变量:这么读取变量的值:$(变量名)
var name = '小明';
var age = 20;
var message = `你好, ${name}, 你今年${age}岁了!`;
- 对象
JavaScript用一个{...}表示一个对象,键值对以xxx: xxx形式申明,用,隔开。注意,最后一个键值对不需要在末尾加,,如果加了,有的浏览器(如低版本的IE)将报错。
访问属性是通过.操作符完成的,但这要求属性名必须是一个有效的变量名。如果属性名包含特殊字符,就必须用''括起来
var xiaohong = {
name: '小红',
'middle-school': 'No.1 Middle School'
};
xiaohong的属性名middle-school不是一个有效的变量,就需要用''括起来。访问这个属性也无法使用.操作符,必须用['xxx']来访问:
xiaohong['middle-school']; // 'No.1 Middle School'
xiaohong['name']; // '小红'
xiaohong.name; // '小红'
判断一个对象是否拥有某一个属性,可以用in操作符 'name' in xiaohong; //true
in判断一个属性存在,这个属性不一定是这个对象的,也可能是继承来的.
要判断一个属性是不是对象自身拥有而不是从父类集成来的用用hasOwnProperty()方法xiaohong.hasOwnProperty('name')
6.条件判断 如果if的判断语句不是true或者false 怎么办
var s = '123';
if (s.length) { // 条件计算结果为3
//
}
JavaScript把null、undefined、0、NaN和空字符串''视为false,其他值一概视为true,因此上述代码条件判断的结果是true。
7.数组:
1.访问length属性获取数组长度
2.与string类似,数组也可以用indexOf()来搜索一个指定元素的位置.存在返回索引(下标),不存在返回-1;
3.slice()切片 对应于string的substring();截取数组的部分元素,返回一个新的数组,(包括开始索引不包括结束索引)
如果不给slice()传递任何参数,它就会从头到尾截取所有元素。利用这一点,我们可以很容易地复制一个Array:
var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 从索引0开始,到索引3结束,但不包括索引3: ['A', 'B', 'C']
arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']
4.push和pop
push() 向数组末尾添加若干元素,pop()则把Array的最后一个元素删除.
5.unshift和shift
unshift向头部添加若干元素,shift删掉第一个元素
6.sort对数组进行排序
7.reverse对数据进行翻转
8.splice修改数组的万能方法,可以从指定的索引开始删除若干元素,然后再从该位置添加若干元素
var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只删除,不添加:
arr.splice(2, 2); // ['Google', 'Facebook']
arr; // ['Microsoft', 'Apple', 'Oracle']
// 只添加,不删除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
9.concat 把当前数组和另一个数组链接,返回一个新的数组;
concat()方法并没有修改当前Array,而是返回了一个新的Array。
实际上,concat()方法可以接收任意个元素和Array,并且自动把Array拆开,然后全部添加到新的Array里:
10.join()方法是一个非常实用的方法,它把当前Array的每个元素都用指定的字符串连接起来,然后返回连接后的字符串:
8.Map和Set
JavaScript的对象可以视为其他语言的Map或者Dictionary,JavaScript的对象键必须是字符串,但实际上Number或者其他数据类型作为键也是非常合理的。
为了解决这个问题,ES6规范,引入的新的数据类型Map
Map是一组键值对的结构,具有极快的查找速度。
初始化Map需要一个二维数组,var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
或者直接初始化一个空Map。Map具有以下方法:
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined
由于一个key只能对应一个value,所以,多次对一个key放入value,后面的值会把前面的值冲掉:
Set
Set和Map类似,也是一组key的集合,但不存储value。由于key不能重复,所以,在Set中,没有重复的key。
要创建一个Set,需要提供一个Array作为输入,或者直接创建一个空Set:
var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
通过add(key)方法可以添加元素到Set中,可以重复添加,但不会有效果:
通过delete(key)方法可以删除元素:
iterable
遍历Array可以采用下标循环,遍历Map和Set就无法使用下标。为了统一集合类型,ES6标准引入了新的iterable类型,Array、Map和Set都属于iterable类型。
具有iterable类型的集合可以通过新的for ... of循环来遍历。
for ... of循环,它只循环集合本身的元素:
更好的方式是直接使用iterable内置的forEach方法,它接收一个函数,每次迭代就自动回调该函数。以Array为例:
var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
// element: 指向当前元素的值
// index: 指向当前索引
// array: 指向Array对象本身
alert(element);
});
forEach()方法是ES5.1标准引入的,你需要测试浏览器是否支持。
Set与Array类似,但Set没有索引,因此回调函数的前两个参数都是元素本身:
var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
alert(element);
});
Map的回调函数参数依次为value、key和map本身:
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
alert(value);
});
如果对某些参数不感兴趣,由于JavaScript的函数调用不要求参数必须一致,因此可以忽略它们。例如,只需要获得Array的element:
var a = ['A', 'B', 'C'];
a.forEach(function (element) {
alert(element);
});
- strict模式