主要源于廖雪峰老师的JavaScript教程
1. 网页嵌套位置
- 可以直接嵌套在网页的任何地方，在页面中多次编写
<script>js代码</script>,浏览器按照顺序依次执行。 - 放在
<head>标签中
<html>
<head>
<script>
alert('Hello, world');
</script>
</head>
<body>...</body>
</html>
- 放置在一个单独的
.js文件，然后通过<script src="..."></script>引入文件
<html>
<head>
<script src="/static/js/abc.js"></script>
</head>
<body>
...
</body>
</html>
2. 基本语法
- 每个语句以
;结束，语句块用{...}。(;可以省略，但是建议添加，因为不添加，浏览器执行代码时会补上，但是有可能会改变语义) - 注释
//单行注释/*...*/多行注释 - 严格区分大小写
3. 数据类型和变量
- Number
JavaScript不区分整数和浮点数，统一用Number表示。NaN表示Not a Number，当无法计算结果时用NaN表示。Infinity表示无限大，数值超过了Number所能表示的最大值时。 - 字符串
字符串以单引号'或者双引号"括起来的人以文本。 - 布尔值
true false - 比较运算符
> >= == ===
==会自动转换数据类型再比较;===如果数据类型不一致返回fasle,一致再比较; NaN与所有其他值都不相等,包括NaN自己isNaN();浮点数比较只能计算它们之间的差值是不是小于某个值。 - null 和 undefined
null表示一个空的值；undefined表示未定义。 - 数组
数组是一组按顺序排列的集合，集合的每个值称为元素。JavaScript的数组可以包括任意数据类型。例如：[1, 2, 3.14, 'Hello', null, true];。创建数组还可以用new Array(1, 2, 3)。
var arr = [1, 2 , 3.24, 'hello', null, true];
arr[0];
- 对象
JavaScript的对象是一组由键-值组成的无序集合，例如：
var person = {
name : 'Bob',
age : 20,
tags : ['js', 'web', 'mobile'],
hasCar : true,
zipcode : null
};
键又称之为属性，获取属性值，用对象变量.属性名方式。
变量
变量名可以为大小写英文、数字、$和_组合，且不能用数字开头，申明一个变量用var语句var name = 'lilei';，同一变量申明只能申明一次，后续可以反复赋值。
JavaScript为动态语言，变量本身类型不固定，可以赋值字符串，也可以再次赋值为Number。strict模式
JavaScript在设计之初，为了方便初学者学习，并不强制要求用var申明变量。这个设计错误带来了严重的后果：如果一个变量没有通过var申明就被使用，那么该变量就自动被申明为全局变量：
i = 10; // i现在是全局变量
在同一个页面的不同的JavaScript文件中，如果都不用var申明，恰好都使用了变量i，将造成变量i互相影响，产生难以调试的错误结果。
使用var申明的变量则不是全局变量，它的范围被限制在该变量被申明的函数体内（函数的概念将稍后讲解），同名变量在不同的函数体内互不冲突。
为了修补JavaScript这一严重设计缺陷，ECMA在后续规范中推出了strict模式，在strict模式下运行的JavaScript代码，强制通过var申明变量，未使用var申明变量就使用的，将导致运行错误。
启用strict模式的方法是在JavaScript代码的第一行写上：'use strict';
这是一个字符串，不支持strict模式的浏览器会把它当做一个字符串语句执行，支持strict模式的浏览器将开启strict模式运行JavaScript。
4. 字符串
- 转义字符
\的使用'I\'m \"OK\"!'\n \t \\ \x41 \u4e2d\u6587(中文) - 多行字符串 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, world!'; //声明字符串，并进行赋值
s.length; //获取字符串的长度
s[0]; //获取字符串第一个字符
s[15]; //undefined 超出范围的索引不会报错，但一律返回undefined
s[0] = 'X'；//ERROR,字符串是不可变的，对字符串的某个索引赋值，不会有任何错误，但是也没有任何效果
# 字符串常用方法，调用方法不会改变原有字符串的内容，返回一个新的字符串
s.toUpperCase();
s.toLowerCase();
s.indexOf('world'); //返回7
s.indexOf('wwor'); //没有找到指定的子串，返回-1
s.substring(0, 5); //子串，索引从0到5（不包括5），返回‘hello’
s.substring(7); //从索引7开始到结束
5. 数组
JavaScript中的Array可以包含任意数据类型，并通过索引来访问每个元素。
var arr = [1, 2, 3,14, 'Hello', null, true];
arr.length; //获取数组长度 6
请注意,直接给Array的length赋一个新值会导致Array大小的变化：
var arr = [1, 2, 3];
arr.length; //3
arr.length = 6;
arr; //arr变为[1, 2, 3, undefined, undefined, undefined]
arr.length = 2;
arr; //arr变为[1, 2]
Array可以通过索引把对应的元素修改为新的值，因此，对Array的索引进行赋值会直接修改这个 Array:
var arr = ['A', 'B', 'C'];
arr[1] = 99;
arr; //arr为['A', 99, 'C']
请注意， 如果通过索引赋值，索引超过范围，同样会引起Array大小的变化：
var arr = [1, 2, 3];
arr[5] = 'x';
arr; // arr变为[1, 2, 3, undefined, undefined, 'x']
#
#indexOf 对应String的indexOf()
arr.indexOf('zzz'); //找到返回元素的索引，未找到返回-1
#
#slice 对应String的substring()版本，截取Array部分元素，返回一个新的Array
arr.slice(0, 3); //截取 0，1， 2这三个元素
arr.slice(3); //截取从3开始到结束的所有元素
arr.slice(); //截取所有元素，利用这一点，可以复制一个Array
#
#push和pop
##push()向Array末尾添加若干缘故，pop()则把Array最后一个元素删除
arr.push('A', 'B'); //返回Array的新长度
arr.pop(); //返回pop掉的元素
arr.pop(); //空数组pop不会报错，返回undefined
arr; //[]
#
#unshift和shift
##unshift(...)可以向Array的头部添加若干元素，shift()则把Array的第一个元素删除
arr.unshift('A', 'B')；//返回Array的新的长度
arr.shift(); //返回删除的元素
arr.shift(); //对空数组进行操作，返回undefined
#
#sort() 排序
arr.sort(); //直接修改当前Array的元素位置
#
#reverse() 反转
arr.reverse(); //把整个Array的元素掉个反转
#
#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'],从2的位置进行了添加
arr.splice(2, 3); //只删除，不添加，返回删除的元素['Google', 'Facebook']
arr; //['Microsoft', 'Apple', 'Oracle']
arr.splice(2, 0, 'Google', 'Facebook'); //只添加，不删除，返回[]
arr; //['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
#
#concat() 把当前Array和另一个Array连接起来并返回一个新的Array
var added = arr.concat([1, 2, 3]);
## concat()可以接收人一个元素和Array，并且自动把Array拆开，全部添加到新的Array中
arr.concat(1, 2, [3, 4]);
#
#join() 把当前Array的每个元素都用指定的字符串连接起来，返回连接后的字符串
arr.join('-'); //A-B-C-1-2-3
多维数组表示：var arr = [[1,2,3],[100,200,300]]
6. 对象
JavaScript对象用于描述现实世界的某个对象。用一个{...}表示一个对象，键值对以xxx : xxx申明，用,隔开，最后一个键值对末尾不需要,，加了，有的浏览器会报错。
如果属性包含特殊字符，必须用``括起来,这个属性也无法使用.来访问,使用['xxx']来访问：
var xiaohong = {
name : '小红',
'middle-school' : 'No.1 Middle School'
};
xiaohong['middle-school']; // No.1 Middle School
xiaohong.name;
xiaohong.age; //不存在该属性，但是不会报错，返回undefined
由于JavaScript的对象是动态类型，可以自由地给一个对象添加或者删除属性：
var xiaoming = {
name : '小明'
};
xiaoming.age; //undefined
xiaoming.age = 18; //新增一个age属性
xiaoming.age; //18
delete xiaoming.age; //删除age属性
xiaoming.age; //undefined
delete xiaoming['name']; //删除name属性
xiaoming.name; //undefined
delete xiaoming.school; //删除一个不存在的school属性也不会报错
检测对象是否拥有某一属性，可以用in操作符，判断属性是否是对象自身拥有而不是通过继承得到的，用hasOwnProperty()方法：
var xiaoming = {
name : '小明'
};
'name' in xiaoming; //true
'grade' in xiaoming; //false
'toString' in xiaoming; //true，toString 定义在Object对象中，所有的对象最终都会指向object
xiaoming.hasOwnProperty('name'); //true
xiaoming.hasOwnProperty('toString'); //false
7. 条件判断
条件判断语句 if(...){...}else(...){...} if(){...}else if(){...}else{...}
JavaScript把null、undefined、0、NaN、和空字符串''视为false。
8. 循环
- for 循环,如果是for(,,)将无限循环下去
var x = 0;
var i;
for (i=1; i<=10000; i++) {
x = x + i;
}
x; // 50005000
- for ... in ,可以对对象的所有属性一次循环出来，遍历Array的时候会把Number转为String
var o = {
name: 'Jack',
age: 20,
city: 'Beijing'
};
for (var key in o)
{
if(o.hasOwnProperty(key)){
console.log(key); //'name', 'age', 'city'
}
}
#请注意，for ... in对Array的循环得到的是String而不是Number。
var a = ['A', 'B', 'C'];
for (var i in a) {
console.log(i); // '0', '1', '2'
console.log(a[i]); // 'A', 'B', 'C'
}
- while
var x = 0;
var n = 99;
while (n > 0) {
x = x + n;
n = n - 2;
}
x; // 2500
- do ... while
#用do { ... } while()循环要小心，循环体会至少执行1次，而for和while循环则可能一次都不执行。
var n = 0;
do {
n = n + 1;
} while (n < 100);
n; // 100
9. Map和Set
JavaScript默认的对象表示方式{}可以视为其他语言中的Map或Dictionary的数据结构。但是对象的键必须是字符串。但是实际上，Number或者其他数据类型做为键也是合理的。ES6中引入了新的数据类型Map。
- Map
Map是一组键值对的结构，具有极快的查找速度。初始化Map需要一个二维数组，或者直接初始化衣蛾空Map。
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); //95
m = new Map(); //重新对m赋值，附一个空的Map
m.set('Adam', 67); //添加新的key-value
m.set('Bob', 59); //继续添加
m.has('Adam'); //true
m.get('Adam');
m.delete('Adam'); //删除key 'Adam'
m.get('Adam'); //undefined
- Set
Set和Map类似，也是一组key的集合，但不存储value。key不能重复，所以在Set中，没有重复的key。重复元素在Set中自动被过滤。要创建一个Set，需要提供一个Array做为输入,或者直接创建一个空'Set':
var s1 = new Set(); //空的Set
var s2 = new Set([1, 2, 3]); //含1，2， 3
s2.add(4);
s2; // {1， 2， 3， 4}
s2.delete(3);
s2; //{1, 2, 3}
9. iterable
遍历Array可以采用下标循环，遍历Map就无法使用下标。为了统一集合类型，在ES6中引入新的iterable类型，Array、Map、Set都属于iterable类型。
具有iterable类型的集合可以通过新的for ... of(ES6引入的新语法)循环来比遍历。
- for ... of
var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
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 ... of 循环和for ... in 循环有何区别？for ... in由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。当我们手动给Array对象添加了额外的属性后，for ... in将带来意想不到的意外效果：
var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
console.log(x); //'0','1','2','name'
}
#for...in 循环把name包括在内，但是Array的length属性确不包括在内，for...of循环修复了这些问题，只循环集合本身的元素
- forEach()
更好方式直接使用iterable内置的forEach方法，它接收一个函数，每次迭代就自动回调该函数。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 与 Array 类似，但Set没有索引，因此回调函数的前两个参数都是元素本身
var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
console.log(element);
});
#Map的回调函数参数依次为 value、key、map本身
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
console.log(value);
});
#如果对某些参数不感兴趣，由于JavaScript的函数调用不要求参数必须一致，因此可以忽略它们。例如，只需要获得Array的element：
var a = ['A', 'B', 'C'];
a.forEach(function (element) {
console.log(element);
});
