学习廖雪峰课程笔记：
原地址：https://www.liaoxuefeng.com/wiki/1022910821149312/1023020925712064
快速入门
JavaScript代码可以直接嵌在网页的任何地方，通常都把JS代码放到中：
<html>
<head>
<script>
alert('Hello, world');
</script>
</head>
<body>
...
</body>
</html>
由包含的代码就是JS代码，它将直接被浏览器执行。
第二种方式是把JS代码写到一个**.js**文件中，通过引入这个文件：
<html>
<head>
<script type="text/javascript" src="/static/js/abc.js"></script>
</head>
<body>
...
</body>
</html>
这样，/static/js/abc.js就会被浏览器执行。上面的type="text/javascript"属性可不加，因为script元素的type属性默认是JavaScript。
把JS代码单独放在一个.js文件中，更利于维护和多个页面使用。浏览器按照顺序依次执行引入的JS代码。
01 基本语法
JS的语法与Java语言类似，每个语句以;结束，语句块用｛｝。但在JS中，不强制加;，执行JS代码的引擎会自动在每个语句结尾补上；不过最好还是自己加上。
- JS中注释：
单行注释：//
多行：/* */ - 常见语句
//赋值语句
var x = 1;
//判断语块
if(2>1){
x = 1;
y = 2;
z = 3;
}
02 数据类型和变量
2.1 数据类型
在JavaScript中定义了以下几种数据类型：
- Number：表示整数和浮点数
123; // 整数123
0.456; // 浮点数0.456
1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5
-99; // 负数
NaN; // NaN表示Not a Number，当无法计算结果时用NaN表示
Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity
Number可以直接做四则运算，其中%表示求余：
1 + 2; // 3
1 + 2; // 3
(1 + 2) * 5 / 2; // 7.5
2 / 0; // Infinity
0 / 0; // NaN
10 % 3; // 1
10.5 % 3; // 1.5
- 字符串
以’'或者""括起来的文本 - 布尔值：true、false两种值
var age = 15;
if(age>=18){
alert("成年人");
}else{
alert("未成年人");
}
- 数组：
JavaScript的数组可以包括任意数据类型，例如：
[1, 2, 3.14, ‘Hello’, null, true];
另一种创建数组的方法是通过Array()函数实现：
new Array(1,2,3); //创建了数组[1,2,3]
访问数组，索引从0开始：
var arr = [1, 2, 3.14, 'Hello', null, true];
arr[0];
arr[5];
arr[6];
- 对象
JavaScript的对象是一组由键-值组成的无序集合，例如：
var person = {
name: 'Bob',
age: 20,
tags: ['js', 'web', 'mobile'],
city: 'Beijing',
hasCar: true,
zipcode: null
};
JavaScript对象的键都是字符串类型，值可以是任意数据类型。上述person对象一共定义了6个键值对，其中每个键又称为对象的属性，例如，person的name属性为’Bob’，zipcode属性为null。
获取一个对象的属性，我们用对象变量.属性名的方式：
person.name;
2.2 比较运算符
&&是与运算，||是或运算，!是非运算和Java中相同；其中比较运算符比较特殊。
JavaScript允许对任意数据类型做比较：
false == 0; // true
false === 0; // false
- ==运算符，会自动转换数据类型再做比较，得到的结果比较奇怪。
- ===运算符，不会自动转换数据类型，如果数据类型不一致，直接返回false，如果一致，再比较。
- 因此， 始终使用===进行比较。
此外，NaN的值与其它所有Number类型的值都不相等，包含他自己。可以通过isNaN(NaN)函数判断是否是NaN。
NaN === NaN; // false
还有一个特殊的，浮点数的大小比较：
Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true
null和undefined
JS中，设计者希望用null表示一个空的值，而undefined表示值未定义。大多数情况下，我们都应该用null。undefined仅仅在判断函数参数是否传递的情况下有用。
2.3 变量
变量名是大小写英文、数字、$和_的组合，且不能用数字开头。变量名也不能是JavaScript的关键字，如if、while等。声明一个变量用var语句，比如：
var a; //声明变量a，a的值此时未定义
var $b = 1; //声明变量$b并赋值1
var s_007 = '007'; // s_007是一个字符串
var Answer = true; // Answer是一个布尔值true
var t = null; // t的值是null
在JavaScript中，可以把任意数据类型赋值给变量，同一个变量可以反复赋值，而且可以是不同类型的变量，但是要注意只能用var申明一次，例如：
var a = 123; // a的值是整数123
a = 'ABC'; // a变为字符串
这种变量本身类型不固定的语言称之为动态语言，与之对应的是静态语言。静态语言在定义变量时必须指定变量类型，如果赋值的时候类型不匹配，就会报错。例如Java是静态语言。
要显示变量的内容，可以用console.log(x)，打开Chrome的控制台就可以看到结果。
var x = 100;
console.log(x);
2.4 strict模式
如果一个变量没有通过var申明就被使用，那么该变量就自动被申明为全局变量，在同一个页面的不同的JavaScript文件中，如果都不用var申明，恰好都使用了变量i，将造成变量i互相影响，产生难以调试的错误结果。
为了修补JavaScript这一严重设计缺陷，推出了strict模式，在strict模式下运行的JavaScript代码，强制通过var申明变量，未使用var申明变量就使用的，将导致运行错误。
启用strict模式是在JavaScript代码的第一行写上：
‘use strict’;
03 字符串
JavaScript的字符串就是用’'或""括起来的字符表示。通过转义字符\来表示很多特殊字符。
“I’m OK” 由6个字符组成
“I’m"OK”!" 字符串内部同时包含’和”
\n \t \ 分别表示换行，制表，
ASCII字符可以\x##形式的十六进制表示：’\x41’; // 完全等同于 ‘A’
多行字符串
由于多行字符串用\n写起来比较费事，所以最新的ES6标准新增了一种多行字符串的表示方法，用反引号 ·…· 表示：
`这是一个
多行
字符串·；
模板字符串
要把多个字符串连接起来，可以用+号连接：
var name = '小明';
var age = 20;
var message = '你好, ' + name + ', 你今年' + age + '岁了!';
alert(message);
如果有很多变量需要连接，用+号就比较麻烦。ES6新增了一种模板字符串，表示方法和上面的多行字符串一样，但是它会自动替换字符串中的变量：
var name = '小明';
var age = 20;
var message = `你好, ${name}, 你今年${age}岁了!`;
alert(message);
操作字符串
字符串是不可变的，如果对字符串的某个索引赋值，不会有任何错误，但是，也没有任何效果：
var s = 'Hello';
s.length; // 5
s[0]; // 'H'
s.toUpperCase(); //'HELLO' 把一个字符串全部变为大写；
s.toLowerCase(); //'hello' 把一个字符串全部变为小写；
s.indexOf('He'); //0 返回字符串出现的位置，没有找到就返回-1
s.substring(0.3); //'Hel' 返回指定索引区间的子串，从0为起点，2为终点
s.substring(4); //'o' 返回从4开始到结束的子串
04 数组
JavaScript的Array可以包含任意数据类型，并通过索引来访问每个元素。要取得Array的长度，直接访问length属性。
var arr = [1,2,3.14,'Hello',null,true];
arr.length; // 6
arr[0]; // 1
arr.indexOf(1); //0 , 没有就返回-1
arr.slice(0,2); //[1,2] 截取Array的部分元素,返回一个新的Array：
arr.slice(); //[1,2,3.14,'Hello',null,true], 与原来不相等
arr[0] = 100; // 可修改
直接给arr的length赋一个新的值，会导致Array大小发生变化。同样通过索引赋值，索引超过范围也会引起Array大小变化：
arr = [1,2,3]
arr.length = 5; //arr变为[1, 2, 3, undefined, undefined]
arr.length = 2; //arr变为[1, 2]
arr[4] = 'x'; //arr变为[1, 2, 3, undefined, 'x']
在编写代码时，不建议直接修改Array的大小，访问索引时要确保索引不会越界。
- **push()**向数组末尾添加若干元素，**pop()**删除数组末尾元素；
- **unshift()**往Array的头部添加若干元素，**shift()**删除数组头部元素；
var arr = [1, 2];
arr.push('A', 'B'); // 返回Array新的长度: 4
arr.pop(); // pop()返回'B'
arr; // [1, 2, 'A']
arr.unshift('A', 'B'); // 返回Array新的长度: 5
arr.shift(); // 'A'
arr; // ['B', 1, 2,'B']
- **sort()**可以对当前Array进行排序：
var arr = ['B', 'C', 'A'];
arr.sort();
arr; // ['A', 'B', 'C']
- **reverse()**反转整个数组：
var arr = ['one', 'two', 'three'];
arr.reverse();
arr; // ['three', 'two', 'one']
- **splice()**是修改Array的“万能方法”：
var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只删除,不添加:
arr.splice(2, 2); // ['Google', 'Facebook']
// 只添加,不删除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
- **concat()**方法把当前的Array和另一个Array连接起来，并返回一个新的Array：
var arr = ['A', 'B', 'C'];
var added = arr.concat([1, 2, 3]);
arr; //['A', 'B', 'C',1,2,3]
- **join()**方法是一个非常实用的方法，把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串：
var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'
多维数组
如果数组的某个元素又是一个Array，则可以形成多维数组，例如：
var arr = [[1, 2, 3], [400, 500, 600], ‘-’];
上述Array包含3个元素，其中头两个元素本身也是Array。
05 对象
JavaScript的对象是一种无序的集合数据类型，它由若干键值对组成。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; // '小红'
JavaScript规定，访问不存在的属性不报错，而是返回undefined；由于JavaScript的对象是动态类型，可以自由地给一个对象添加或删除属性：
var xiaoming = {
name : '小明'
}
xiaoming.age;
xiaoming.age = 10;
delete xiaoming.age;// 删除age属性
delete xiaoming.school; // 删除一个不存在的school属性也不会报错
用in操作符，检测xiaoming是否拥有某一属性：
var xiaoming = {
name : '小明',
birth : 1995,
school : 'No.1 Middle School',
height: 1.70,
score : null
}
"name" in xiaoming; //true
"grade" in xiaoming; //false
如果in判断一个属性存在，这个属性不一定是xiaoming的，它可能是xiaoming继承得到的：
'toString' in xiaoming;// true
因为toString定义在object对象中，而所有对象最终都会在原型链上指向object，所以xiaoming也拥有toString属性。
要判断一个属性是否是xiaoming自身拥有的，而不是继承得到的，可以用hasOwnProperty()方法：
var xiaoming = {
name: '小明'
};
xiaoming.hasOwnProperty('toString')// false
xiaoming.hasOwnProperty('name'); // true
06 条件判断
- 单行条件判断： JavaScript使用if () { … } else { … }来进行条件判断。
- 多行条件判断： 如果还要更细致地判断条件，可以使用多个if…else…的组合；在多个if…else…语句中，如果某个条件成立，则后续就不再继续判断了。
'use strict';
var age = 20;
if (age >= 6) {
console.log('teenager'); //只打印teenager
} else if (age >= 18) {
console.log('adult');
} else {
console.log('kid');
}
注意：
JavaScript把null、undefined、0、NaN和空字符串’'视为false，其他值一概视为true，因此上述代码条件判断的结果是true。
07 循环
JavaScript的循环有两种for循环和while循环。
for循环
//计算1+2+...+1000
'use strict';
var sum = 0;
var i;
for(i=1;i<1000;i++){
sum = sum+i;
}
x;
//遍历数组
var arr = ['A','B','C'];
var i,x;
for(i=0;i<arr.length;i++){
x = arr[i];
console.log(x);
}
for … in（遍历对象，数组也是对象）
for循环的一个变体是for … in循环，把一个对象的所有属性依次循环出来：
var object = {
name : 'jack',
age : 20,
city : 'Beijing'
};
for(var key in object){
console.log(key); // 'name', 'age', 'city'
if(object.hasOwnProperty(key)){
console.log(key); // 过滤掉对象继承的属性
}
}
由于Array也是对象，而它的每个元素的索引被视为对象的属性，因此，for … in循环可以直接循环出Array的索引：
var a = ['A', 'B', 'C'];
for(var i in a){
console.log(i); // 'name', 'age', 'city'
console.log(a[i]); // 'A', 'B', 'C'
}
请注意，for … in对Array的循环得到的是String而不是Number。
while
//计算100以内所有奇数之和
'use strict';
var sum = 0;
var i = 1;
while(i<100){
sum = sum + i;
i = i + 2;
}
sum;
do … while
最后一种循环是do { … } while()循环，它和while循环的唯一区别在于，不是在每次循环开始的时候判断条件，而是在每次循环完成的时候判断条件：
//计算100以内所有奇数之和
'use strict';
var sum = 0;
var i = 1;
do{
sum = sum + i;
i = i + 2;
}while(i<100);
sum;
08 Map和Set
JavaScript的默认对象表示方式{}可以视为其他语言中的Map或Dictionary的数据结构，即一组键值对。JavaScript的对象的键必须是字符串，为了解决这个问题，最新的ES6规范引入了新的数据类型Map。
Map
Map是一组键值对的结构，具有极快的查找速度。
举个例子，假设要根据同学的名字查找对应的成绩，如果用Array实现，需要两个Array：
var names = ['Michael', 'Bob', 'Tracy'];
var scores = [95, 75, 85];
若用数组，需要先查询名字，再查询对应的分数数组，耗时较长；
用Map，只需要“名字”-“成绩”的对照表，直接根据名字查找成绩。用JavaScript写一个Map如下：
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
var m1 = new Map();
m1.set('Adam',75);
m1.set('Bob',89);
m1.has('Adam'); //是否存在key 'Adam':true
m1.get('Adam');//75
m1.delete('Adam');
m.get('Adam'); // undefined
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
var s = new Set([1,2,3,3,'3']);
s; //Set {1,2,3,'3'}
//通过add(key)方法可以添加元素到Set中，可以重复添加，但不会有效果：
s.add(4);
s.add(4);
//通过delete(key)方法可以删除元素：
s.delete(3);
09 iterable
ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型。具有iterable类型的集合可以通过新的for … of循环来遍历。
用for … of循环遍历集合，用法如下：
var a = ['A', 'B' , 'C'];
var s = new Set(['A', 'B' , 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
//遍历Array
for(var x of a){
console.log(x);
}
for(var x of s){
console.log(x);
}
for(var x of m){
console.log(x[0] + '=' + x[1]);
}
for … in循环由于历史遗留问题，它遍历的实际上是对象的属性名称。
//for ... in 用来遍历对象的属性
var a = ['A', 'B', 'C'];
a.name = 'Hello';
for(var x in a){
console.log(x);//0,1,2,name
}
for … of循环则完全修复了这些问题，它只循环集合本身的元素：
//for ... of只循环集合本身的元素
var a = ['A', 'B', 'C'];
a.name = 'Hello';
for(var x of a){
console.log(x);//A', 'B', 'C'
}
遍历集合更好的方式是直接使用iterable内置的forEach方法，它接收一个函数，每次迭代就自动回调该函数。以Array为例：
//forEach()方法是ES5.1标准引入
'use strict'
var a = ['A', 'B', 'C'];
a.forEach(function(element,index,array){
//element：指向当前元素的值
//index：指向当前索引
//array: 指向Array对象本身
console.log(element + ', index = '+ index);
});
//Set的forEach遍历,Set没有索引，回调函数的前两个参数都是元素本身
var s = new Set(['A','B','C']);
s.forEach(function(element,sameElement,set){
console.log(element);
});
//Map的forEach遍历
var m = new Map([[1,'x'],[2,'y'],[3,'z']]);
s.forEach(function(value,key,map){
console.log(value);
});
forEach中的function中的参数是和位置相关的，第一个参数就是表示array的元素，不能用作其他用途表示。
扫一扫
1490
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
