JavaScript基础知识点整理

此文章内容是学习廖雪峰的JavaScript教程的知识点总结。

一、基本语法

1. 每个语句结尾用;（不强制），语句块用{...}
2. 行注释//；块注释/* ... */

二、 数据类型和变量

1. 数据类型

1. Number（数值）：JavaScrept不分整数和浮点数；
2. String：（字符串）以单引号'...'或双引号"..."括起来的文本；
3. Boolean：（布尔值）true和false；布尔运算与&&、或||、非!；
4. Null：空值，与0和“ ”不同；
5. undefined：值未定义；
6. Array：（数组）[x1,x2,x3,..]；
7. Object：（对象）键（属性）：值；
8. 相等运算符
   = = ：自动转换类型再比较；
   === ：不会自动转换类型，若类型一致比较，不一致则返回 false。推荐
9. NaN属性：说明某个值不是数字值。
   NaN值与任何值都不相等，包括自身，需使用全局函数isNaN（）来判断是否为NaN值。

2. 变量

用var name声明变量

1. 变量名：不能以数字开头，不能为关键字；
2. 用=为变量赋值；
3. strict模式：Js第一行使用：use strict；，此模式下未用var定义变量会报错。

三、字符串

用’ '或" “括起来的字符表示。如果字符串里既包含’又包含”，用转义字符标示 \ 。

1. 转义字符 \ ： \ n表示换行， \ t表示制表符， \ \ 表示 \ 。
2. 多行字符串：可用 \ n，ES6新增了反引号 `` 。

console.log(`多多多
行行行
字符串`);

3. 模版字符串：将多个字符串连接，可用+号；ES6新增模版字符串 ${stringName}

conlose.log(`你好，${name}，你今年${age}岁了！`);

4. 操作字符串
   • 字符串长度：s.length；
   • 获取字符串指定位置内容：s[n]；
   • 字符串不可变，对其赋值无效果；
   • 常用方法：
     s.toUpperCase()：字符串全部变为大写；
     s.toLowerCase()：字符串全部变为小写；
     s.indexOf(string)：搜索指定字符出现的位置；
     s.subString(0,5)：返回指定索引区的字符。

四、数组（Array）

1. 可包含任意数据类型，通过索引访问，可直接修改数组，访问索引和通过索引赋值时超过范围会引起Array的大小变化，须确保不会越界。
2. 获取Array长度：arr.length；
3. 常用方法
   arr.indexOf(string)：搜索指定元素位置；
   arr.slice(a,b)：截取指定部分元素，返回一个新的Array，从a开始截取，但不包括b，如不设a，从头开始截取，若不设b，则截取到数组结束；
   arr.push('a', 'b', 1, 2)：向Array末尾添加元素;
   arr.pop()：删除最后一个元素；
   arr.unshift()：向Array头部添加元素；
   arr.shift()：删掉第一个元素；
   arr.sort()：对Array进行排序，直接修改Array的元素顺序；
   arr.reverse()：将整个Array返向掉转ABC->CBA；
   arr.splice()：从指定位置删除若干元素，再从该位置添加若干元素；

   var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
   // 从索引2开始删除3个元素,然后再添加两个元素;
   arr.splice(2, 3, 'A', 'B'); // 返回删除的元素 ['c', 'd', 'f']
   arr; // ['a', 'b', 'A, 'B', 'f']
   // 只删除,不添加:
   arr.splice(2, 2); // ['A', 'B']
   arr; // ['a', 'b', 'f']
   // 只添加,不删除:
   arr.splice(2, 0, 'A', 'B'); // 返回[],因为没有删除任何元素
   arr; // ['a', 'b', 'A', 'B', 'f] 
   

   arr.concat(arr2)：把arr与arr2连接起来，返回一个新的Array；
   arr.join('-')：用指定的字符串将arr中的每个元素连接起来，然后返回连接后的字符串。
   4. 多维数组
      如果数组的某个元素也是一个Array，就可形成多维数组。

五、对象

1. 一种无序的集合数据类型，表示为：key : value, key : value}，访问属性用.操作符。若属性名包括特殊字符声明时需要用' '括起来，需用[' ' ]访问。若访问不存在的属性会返回undefined。
2. 对象属性的操作方法
   • 新增属性：object.name = value；
   • 删除属性：delete object.name；
   • 检测属性是否存在：'name' in object;返回true或false；
   • 判断属性是否为自身拥有而不是继承得到：object.hasOwnProperty('name')返回true或false。

六、条件判断

语句：if(){...} else{...}

1. 多行条件判断：使用多个if…else… 组合。
2. 执行条件是二选一，若前面满足则直接结束循环。
3. JavaScript中，null、undefined、0、NaN为false，其余皆为true。

七、循环

1. for循环

已知初始条件和结束条件适用
语句for(初始条件; 判断条件; 递增条件){...}

1. for循环最常用于利用索引遍历数组

for(i=0;i<arr.length;i++){
	x = arr[i];
	console.log(x);
}

2. for循环的三个条件可以省略，若无判断条件，需利用break语句退出循环，否则为死循环。
3. for...in...循环：可以将一个对象的所有属性依次循环出来：

for(var key in object){
	console.log(key);
}

for…in…对于Array的循环得到的是String不是Number。

2. while循环

只有判断条件时适用
语句：
while(判断语句）{...}
do{...}while(判断语句）
注意：do…while()至少执行一次循环体，if和while循环可能一次都不执行。

八、Map和Set

1. Map

1. 一组键值对，极快的查找速度。
2. 常用方法

• 初始化：var m = new Map([[k1,v1], [k2,v2], [k3,v3]]);；
• 获取：m.get('key');；
• 添加新的key-value:m.set('key', value)；
• 判断是否存在： m.has('key');；
• 删除：m.delete('key').

2. Set

1. 一组key的集合，不存储value，且key不重复。
2. 创建‘var s = new Set()’或‘var s = new Set([1,2,3])’;
3. 重复元素在Set中会被自动过滤；
4. 添加：‘s.add('key')’；
5. 删除：‘s.delete('key')’。

九、iterable

1. ES6新增的iterable（可遍历的对象）类型，Array、Map、Set都属于iterable类型，此类型的集合可用for...of循环遍历。
2. for...of是ES6新增语法，用法如下：

for (var x of arr){  //遍历数组
	console.log(x);
}

3. for...of与for...in的区别
   for...in遍历数组的元素索引实际上是对象的属性名称，若额外给数组添加其他属性，也会被遍历出来。

var a = ['A', 'B', 'C']
a.name = 'Hello';
for (var x in a){
	console.log(x); // 'A','B','C','name'
} 

for…in循环将属性name包括在内，但Array的length不包括在内。
for...of只循环集合本身的元素。

4. forEach：iterable内置的方法，接受一个函数，每次迭代就自动回调该函数。

• Array的回调参数：element（元素的值）、index（索引）、array（数组本身）。

var a = ['A', 'B', 'C'];
a.forEach(function(element, index, array){
	console.log(element + ', index = '+index);
});
	/*运行结果：
	A，index=0
	B，index=1
	C，index=2*/

• Set的回调参数：element、sameElement、set，set没有索引，所以前两个参数都是元素本身。

var s = new Set(['A', 'B', 'C']);
a.forEach(function(element, sameElement, set){
	console.log(element );
});

• Map的回调参数：value、key、map本身。

var m = new Map([ [1,'A'], [2, 'B'], [3, 'C'] ]);
a.forEach( function(value, key, map){
	console.log(value);
});