JavaScript学习笔记
数据类型与变量
- Number：不区分整型和浮点型，特别的
- Infinity: 无限大
- NaN: not a number,无法计算结果时用
- NaN === NaN; //false
- isNaN(NaN); //true
- String
- Boolean
- Null
- Undefine
对象
由一组键值组成的无序组合,键都是字符串类型，值可以是任何类型
1 | var person = { |
变量
JavaScript 是弱类型语言，使用var声明变量
字符串
- \ 转义字符
也可以把自身转义
1 | 1. \n : 换行 |
- 多行字符串
ES6新增表多行字符串(反引号，在键盘1左边)
...
1 | var s = `这是 |
模板字符串
拼接字符串是可以使用 + 连接，但是有时过于麻烦，ES6新增模板字符串
var name = ‘sunxin’;
var age = 20;
var message =我是 ${name},今年${age}岁了;
alert(message);
数组
JavaScript的数组可以包含人和数据类型
1 | var arr = [1, 2, 3.14, 'Hello', null, true]; |
如果给Array的length赋一个新值会导致Array的大小变化
注意：如果索引超出了范围同样会引起Array大小的变化。
1 | var arr = [1, 2, 3]; |
- IndexOf: 搜索数组中指定元素的位置
slice: 对应String中的substring(),截取数组中的部分元素，返回一个新数组
1
2
3
4
5
6
7var 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']
//如果不给slice()传任何参数，它就会从头到尾截取所有元素，这样就可以实现复制一个数组了。
var aCopy = arr.slice();
aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G']
aCopy === arr; // falsepush();向数组末尾添加若干元素
- pop();把数组最后一个元素删掉
- unshift();向数组头部添加若干元素
- shift();删掉数组第一个元素
- sort();对数组进行排序
- reverse();对数组进行翻转
splice();修改Array的“万能方法”，它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素
1
2
3
4
5
6
7
8
9
10var 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']concat();连接两个Array，并返回一个新Array。concat()方法可以接收任意个元素和Array，并且自动把Array拆开，然后全部添加到新的Array里
1
2var arr = ['A', 'B', 'C'];
arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]join();把当前Array的每个元素用一个指定的字符串连接起来，然后返回连接后的字符串
1
2var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'
条件判断
if…else… 执行特点是2选1。在多个if…else…语句中，如果某个条件成立了，则后续不再继续判断。JavaScript把null,undefine,NaN,0,和空字符串’’视为false。
Map 和 Set
ES6新增数据类型
- 初始化Map需要有一个二维数组，或者直接初始化一个空Map。Map的一个Key只对应一个value，如果key重复，那么value将会被覆盖。
1
2
3
4
5
6
7
8
9
10
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
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
- Set，是一组key的集合，不存储value。Set中key不能重复。
1
2
3
4
5
6
7
8
9
10
11
12//添加元素
>>> s.add(4)
>>> s
{1, 2, 3, 4}
>>> s.add(4)
>>> s
{1, 2, 3, 4}
//删除元素
var s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}
iterable
遍历Array可以采用下标循环，遍历Map和Set就无法使用下标。为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型。具有iterable类型的集合可以通过新的for … of循环来遍历。
1 | var a = ['A','B','C']; |
for…in 与 for…of 的区别
for…in 遍历的是对象的属性名称，Array数组的索引下标被视为它的一个属性.当我们为Array添加额外的属性之后，这个属性也会被打印出来。
1
2
3
4
5a.name='Hello';
for(var x in a){
// console.log(a[x]);//A,B,C
console.log(x);//0,1,2，hello
}所以才引入了for…of 循环
使用foreach循环，iterable内置，它接收一个函数，每次迭代就会自动回调该函数。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32var a = ['A','B','C'];
var s = new Set(['D','E','F']);
var m = new Map([[1,'x'],[2,'y'],[3,'z']]);
console.log('foreach遍历Array');
a.forEach(function(element) {
console.log(element);
}, this);
a.forEach(function(element,index,array) {
// element: 指向当前元素的值
// index: 指向当前索引
// array: 指向Array对象本身
console.log('带参数的,'+element+","+index+","+array);
}, this);
console.log('foreach遍历set');
s.forEach(function(element) {
console.log(element);
}, this);
s.forEach(function(element,sameElement,set) {
console.log('带参数的,'+element+","+sameElement+","+set);
}, this);
console.log('foreach遍历Map');
m.forEach(function(element) {
console.log(element);
}, this);
m.forEach(function(value,key,map) {
console.log('带参数的,'+value+","+key+","+map);
}, this);