[JavaScript知识库][record] JavaScript基础

JavaScript

JavaScript区分大小写。

【标识符】

• 第一个字符，可以是任意字母，$和_。
• 第二个字符及后面的字符，除了字母、$和_，还可以用数字0-9。

【注释】

// 单行注释
/* 多行注释 */

<!-- 单行注释 -->也可以，但是只有-->在行首时才会被识别成注释，否则会被识别成运算。

x = 1; <!-- x = 2;
--> x = 3;
// 只有x=1会执行，其他会被注释掉。
// 为什么x=3也会被注释掉？


function countdown(n) {
  while (n --> 0) console.log(n);
	// n --> 0会被当做n-- > 0执行。
}
countdown(3)
// 2
// 1
// 0

【字面量】

不可改变的值。

• 比如1、2、3。

【变量】

用来保存字面量，变量的值可以任意改变。
声明变量

• var a;

【标签label】

label: 语句;
标签，相当于定位符，用于跳转到程序的任意位置。
标签可以是任意的标识符，但不能是保留字，语句部分可以是任意语句。
标签通常与break语句和continue语句配合使用，跳出特定的循环。

// 跳出双重循环。
top:
  for (var i = 0; i < 3; i++){
    for (var j = 0; j < 3; j++){
      if (i === 1 && j === 1) break top;
      console.log('i=' + i + ', j=' + j);
    }
  }

// 跳出代码块。
foo: {
  console.log(1);
  break foo;
  console.log('本行不会输出');
}

// 进入下一层外层循环。
top:
  for (var i = 0; i < 3; i++){
    for (var j = 0; j < 3; j++){
      if (i === 1 && j === 1) continue top;
      console.log('i=' + i + ', j=' + j);
    }
  }

【数据类型】

以下Number、String、Boolean、Undefined、Null（前五种）为基本数据类型，而Object为引用数据类型。

• 基本数据类型
  基本数据类型指的是字面量的类型。
  变量和基本数据类型值存储在栈内存中。
• 引用数据类型
  变量和指向对象存储地址的指针存储在栈内存中，对象值存储在堆内存中。

（1）Number

整数或小数。
在JavaScript内部，数字都是以标准 IEEE 754的64位浮点数形式存储。

• 能够表示的数值范围为2^1024到2(-1023)。
• 精确度范围-2^53到253（大约16位十进制数）。
• 正向溢出返回Infinity，负向溢出返回0。

特殊的数字

• Number.MAX_VALUE：能表示的最大值。
• number.MIN_VALUE：最小正值。
• Infinity：正无穷，-Inifinity：负无穷。
• NaN：Not A Number。

由于浮点数不是精确的值，所以涉及小数的比较和运算要特别小心。

0.1 + 0.2 === 0.3
// false

0.3 / 0.1
// 2.9999999999999996

(0.3 - 0.2) === (0.2 - 0.1)
// false

+0和-0在大多数场合下是相等的。但当+0或-0当作分母，返回的值是不相等的。下面的代码之所以出现这样结果，是因为除以正零得到+Infinity，除以负零得到-Infinity，这两者是不相等的。

(1 / +0) === (1 / -0) // false

parseInt
将字符串转为整数。
返回值只有两种可能，要么是一个十进制整数，要么是NaN。

// 如果字符串头部有空格，自动去除空格。
parseInt('    81') // 81

// 如果参数不是字符串，则会先转为字符串再转换。先转换成十进制，再转换成字符串，再按进制解析。
parseInt(1.23) // 1
// 等同于
parseInt('1.23') // 1

// 字符串转为整数的时候，是一个个字符依次转换，如果遇到不能转为数字的字符，就不再进行下去，返回已经转好的部分。
parseInt('8a') // 8
parseInt('12**') // 12
parseInt('12.34') // 12
parseInt('15e2') // 15

// 如果字符串的第一个字符不能转化为数字（后面跟着数字的正负号除外），返回NaN。
parseInt('abc') // NaN

// 如果字符串以0x或0X开头，parseInt会将其按照十六进制解析。
parseInt('0x10') // 16

//如果字符串以0开头，将其按照10进制解析。
parseInt('011') // 11

// 对于那些会自动转为科学计数法的数字，parseInt会将科学计数法的表示方法视为字符串，因此导致一些奇怪的结果。
parseInt(0.0000008) // 8
// 等同于
parseInt('8e-7') // 8

// parseInt方法还可以接受第二个参数（2到36之间），表示被解析的值的进制，返回该值对应的十进制数。默认情况下，parseInt的第二个参数为10，即默认是十进制转十进制。

// 如果超出范围，则返回NaN。如果第二个参数是`0`、`undefined`和`null`，则直接忽略。

// 如果字符串包含对于指定进制无意义的字符，则从最高位开始，只返回可以转换的数值。如果最高位无法转换，则直接返回NaN。
parseInt('1546', 2) // 1
parseInt('546', 2) // NaN

parseFloat
将字符串转为浮点数。

// 如果字符串符合科学计数法，则会进行相应的转换。
parseFloat('314e-2') // 3.14
parseFloat('0.0314E+2') // 3.14

// 如果字符串包含不能转为浮点数的字符，则不再进行往后转换，返回已经转好的部分。
parseFloat('3.14more non-digit characters') // 3.14

// parseFloat方法会自动过滤字符串前导的空格。
parseFloat('\t\v\r12.34\n ') // 12.34

// 如果参数不是字符串，或者字符串的第一个字符不能转化为浮点数，则返回NaN。
parseFloat([]) // NaN
parseFloat('FF2') // NaN
parseFloat('') // NaN

isNaN
判断一个值是否为NaN。

// isNaN只对数值有效，如果传入其他值，会先被Number函数转成数值，再进行判断。
isNaN('Hello') // true

// 空或非空对象返回true
// 空对象转换为数值为NaN
isNaN({}) // true

// 空数组返回false
// 空数组转换为数值为0
???
isNaN([]) // false

// 只有一个数值成员的数组返回false
isNaN([123]) // false
isNaN(['123']) // false

// 含有非数值成员的数组返回true
isNaN(['xzy']) // true

判断NaN更可靠的方法是，利用NaN为唯一不等于自身的值的特点。

function myIsNaN(value){
	return value !== value;
}

isFinite
除了Infinity、-Infinity、NaN和undefined这几个值会返回false，isFinite对于其他的数值都会返回true。

（2）String

字符串的访问

• 字符串可以被视为字符数组，因此可以使用数组的方括号运算符，用来返回某个位置的字符（位置编号从0开始）。

求字符串的长度

• str.length

由于 HTML 语言的属性值使用双引号，所以很多项目约定 JavaScript 语言的字符串只使用单引号。
如果长字符串必须分成多行，可以在每一行的尾部使用反斜杠，也可以使用连接运算符（+）。

（3）Boolean

除了下面六个值被转为false，其他值都视为true。

• undefined
• null
• false
• 0
• NaN
• ""或’’（空字符串）

空数组[]和空对象{}对应的布尔值都是true。
NaN不等于任何值，包括它本身。

（4）Undefined

• undefined是一个表示”无定义“的原始值，未定义。
• typeof检查一个undefined值，会返回undefined。
• 转为数值时为NaN。

（5）Null

• null是一个表示”空“的对象，空值。
• typeof检查一个null值，会返回object。
• 转为数值时为0。

// 变量声明了，但没有赋值
var i;
i // undefined

// 调用函数时，应该提供的参数没有提供，该参数等于 undefined
function f(x) {
  return x;
}
f() // undefined

// 对象没有赋值的属性
var  o = new Object();
o.p // undefined

// 函数没有返回值时，默认返回 undefined
function f() {}
f() // undefined

（6）obeject

对象的分类

• 内建对象
  由ES标准中定义的对象，在任何的ES的实现中都可以用。
  比如：Math、String、Number、Boolean、Function、Object…
• 宿主对象
  由JS的运行环境（浏览器）提供的对象。
  比如：BOM、DOM
• 自定义对象
  由开发人员创建的对象。

狭义的对象obeject
对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合。
键名key

• 又称为属性property。属性可以动态创建，不必在对象声明时就指定。
• 键名都是字符串（ES6 又引入了 Symbol 值也可以作为键名），所以加不加引号都可以。
• 如果是数值，会被自动转为字符串。
• 如果不符合标识名的条件（比如第一个字符为数字，或者含有空格或运算符），且也不是数字，则必须加上引号，否则会报错。

---

• 创建对象
  var obj = new Object();

• 读取属性
  （1）点运算符。
  key为数字不能用点运算符。
  obj.p
  （2）方括号运算符。
  如果使用方括号运算符，键名必须放在引号里面，否则会被当作变量处理。
  key为数字可以不加引号，因为会自动转成字符串。
  obj.[‘p’]

• 删除属性
  delete obj.p;
  删除一个不存在的属性，delete不报错，而且返回true。只有一种情况，delete命令会返回false，那就是该属性存在，且不得删除。
  delete命令只能删除对象本身的属性，无法删除继承的属性。

• 查看是否存在该属性
  ‘p’ in obj;
  in运算符不能识别哪些属性是对象自身的，哪些属性是继承的（从原型继承过来的）。此时可以使用对象的hasOwnProperty方法判断一下，是否为对象自身的属性。obj.hasOwnProperty(‘toString’);

• 查看所有属性
  Object.keys(obj);

• 遍历属性
  for(var i in obj){
  console.log(i);
  console.log(obj[i]);
  }
  for…in遍历的是对象所有可遍历的属性，会跳过不可遍历的属性（比如toString）。它不仅遍历对象自身的属性，还遍历继承的属性。
  如果要只遍历对象自身的属性，可以
  for(var i in obj){
  if(obj.hasOwnProperty(i))
  …
  }

• 操作同一个对象的多个属性
  不建议使用
  with (document.links[0]){
  console.log(href);
  console.log(title);
  console.log(style);
  }
  // 等同于
  console.log(document.links[0].href);
  console.log(document.links[0].title);
  console.log(document.links[0].style);
  如果with区块内部有变量的赋值操作，必须是当前对象已经存在的属性，否则会创造一个当前作用域的全局变量。
  var obj = {};
  with (obj) {
  p1 = 4;
  p2 = 5;
  }
  obj.p1 // undefined
  p1 // 4

函数

• 函数也可以作为对象的属性，称为对象的方法。
• console.log()调用console对象的log方法。

数组

【强制类型转换】

强制类型转换主要指将其他数据类型转换成String、Number、Boolean。

（1）转换为String

• toString()
  对于null和undefined没有toString()方法，如果调用toString()方法会报错。
  console.log(a.toString());
• String()
  对于Number和Boolean实际上就是调用toString()方法。
  对于null和undefined不会调用toString()方法，而是直接转换成“null”和“undefined”。
  console.log(String(a));
• 算数运算符+
  console.log(a + “”);

（2）转换为Number

• Number()
  a = Number(a);
  ①字符串->数字
  如果字符串中有非数字的内容，则转换为NaN。
  如果字符串是空串或者全是空格，则转换为0。
  ②布尔->数字
  true 1。
  false 0。
  ③null->数字=0
  ④undefined->数字=NaN
• parseInt()
  a = parseInt(a);
• parseFloat()
  a = parseFloat(a);
• 算数运算符-*/
  -0、*1、/1
• 一元运算符+
  +a;

（3）转换为Boolean

• Boolean()
  a = Boolean(a);
  ①数字->布尔
  0和NaN为false，其他都为true。
  ②字符串->布尔
  空串为false，其他都为true。
  ③null->布尔=false
  ④undefined->布尔=false

【判断数据类型】

（1）typeof

以字符串的形式返回一个值的数据类型。

• NaN的类型是number。
• 空数组[]、空对象{}的类型是obeject。
• null的类型是obeject。因为1995年的 JavaScript 语言第一版，只设计了五种数据类型（对象、整数、浮点数、字符串和布尔值），没考虑null，只把它当作object的一种特殊值。后来null独立出来，作为一种单独的数据类型，为了兼容以前的代码，typeof null返回object就没法改变了。

（2）instanceof

检查一个对象是否是一个类的实例，是则返回true，否则返回false。
所有对象都是Object的后代。
可以区分数组和对象。
console.log(per instanceof Person);

（3）Object.prototype.toString

【运算符】

算数运算符±*/

• 当对非Number类型的值进行运算时，会将这些值转换为Number再进行运算。
• 任何值和NaN运算，都等于NaN。
• +
  字符串拼接：任何值和字符串做加法运算，都会先转换为字符串再拼串。

一元运算符±
自增运算符++、–
逻辑运算符!、&&、||
赋值运算符=、+=、-= 、*=、/=
关系运算符>、<、>=、<=

• 当对非Number类型的值进行比较时，会将这些值转换为Number再进行比较。
• 两字符串比较，按字典序比较。

相等运算符==、!=、===、!==

• ==
  比较数值。
  如果两个值类型不同，会自动进行类型转换为相同的类型再进行比较。
  underfined和null都被自动转为false，相等运算符==认为二者是相等的。
  NaN不和任何值相等，包括它本身。
  当比较两个基本数据类型的值时，就是比较值；当比较两个引用数据类型时，是比较对象的内存地址，如果两个对象一模一样但是地址不同，也会返回false。
• !=
  类似==。
• ===
  全等。
  比较类型和数值。
  如果两个值类型不同，不会自动进行类型转换，直接返回false。
• !==
  不全等。
  类似===。

条件运算符/三元运算符 条件a?语句b:语句c

• 如果条件a的结果是非布尔值，会先转换成布尔值。

运算符的优先级

【Date对象】

var d = new Date();

• 封装当前代码执行时间。
  var d = new Date(“12/03/2016 11:10:30”);
• 封装指定时间。
• 传入字符串“月/日/年 时:分:秒”。

d.getDate()

• 返回几号（前面不带0）。

d.getDay()

• 返回周几（0-6）。

d.getMonth()

• 返回月份（0-11）。

d.getFullYear()

• 返回年份。

d.getHours()

• 返回小时（0-23）。

d.getMinutes()

• 返回分钟（0-59）。

d.getSeconds()

• 返回秒（0-59）。

d.getMilliseconds()

• 返回毫秒（0-999）。

d.getTime()

• 返回时间戳（从格林威治标准时间1970年1月1日0时0分0秒，到当前日期所花费的毫秒数）。
• 时间戳/1000 秒
  时间戳/1000/60 分
  …

Date.now();

• 获取当前的时间戳。

【Math】

Math.PI

• 返回圆周率。

Math.abs()

• 返回一个值的绝对值。

Math.ceil()

• 向上取整。

Math.floor()

• 向下取整。

Math.around()

• 四舍五入。

Math.random()

• 生成0-1的随机数。
• 生成0-x的随机数Math.round(Math.random()*x)。
• 生成1-10的随机数Math.round(Math.random()*9+1)。
• 生成x-y的随机数Math.round(Math.random()*(y-x)+x)。

Math.max()

• 返回一组数中的最大值。

Math.min()

• 返回一组数中的最小值。

Math.sqrt()

• 返回平方根。

Math.pow(x, y)

• 返回x的y次幂。

【包装类】

JS为我们提供了三个包装类，可以将基本数据类型转化为对象。

• 当我们对一些基本数据类型的值调用属性和方法时，浏览器会临时使用包装类将其转换为对象，然后调用对象的属性和方法，调用完以后再将其转换为基本数据类型。

---

String()

• var str = new String(‘aaa’);
• charAt()
  返回字符串指定位置的字符。
• charCodeAt()
  返回字符串指定位置的字符的Unicode编码。
• String.fromCharCode()
  根据字符编码获取字符。
• concat()
  连接两个或多个字符串。
• indexOf()
  检索字符串中是否有指定内容，有则返回其第一次出现的索引，无则返回-1。
  第二个参数：开始查找的位置，没有则默认从0开始。
• lastIndexOf()
  检索字符串中是否有指定内容，有则返回其最后一次出现的索引，无则返回-1。（从后往前找）
  第二个参数：开始查找的位置，没有则默认从0开始。
• slice()
  截取字符串中[start, end)字符。
  不会改变原字符串。
  同数组。
• substring()
  截取字符串中[start, end)字符。
  参数传递负值，则视为0。
  自动调整参数位置（如果第二个参数小于第一个参数，自动交换位置）。
• substr()
  截取字符串。
  第一个参数：开始位置的索引。
  第二个参数：截取长度。
• split()
  按照参数（可以是正则表达式）将字符串拆分成数组。
• search()
  搜索字符串中是否有指定内容，有则返回其第一次出现的索引，无则返回-1。
  可以用正则表达式作为参数。
• match()
  根据正则表达式，从一个字符串中将符合条件的内容以数组形式返回。
• replace()
  将字符串中指定内容替换为新的内容。
  第一个参数：被替换的内容（可以正则表达式）。
  第二个参数：新的内容。
• toUpperCase()
  将字符串转换成大写并返回。
• toLowerCase()

Number()
Boolean()

【函数】

用typeof检查一个函数对象时，会返回function。

（1）函数的声明

• 函数声明
  function print(s){
  console.log(s);
  }
  // 不用加分号

• 函数表达式
  var print = function(s){
  console.log(s);
  };
  // 加分号
  相当于将一个匿名函数（函数表达式）赋值给变量。

• 以字符串形式传递给构造函数
  var add = new Function(
  ‘x’,
  ‘y’,
  ‘return x + y’
  );
  // 等同于
  function add(x, y) {
  return x + y;
  }
  add();//调用
  ①固定最后一个参数为函数体。
  ②封装到函数中的代码不会立即执行，在函数调用时才执行。

• 立即执行函数
  (function(a, b){
  console.log(a+b);
  })(123, 456)

（2）函数的属性和方法

f.name;

• 获取函数的名字。

f.length

• 返回函数预期传入的参数个数。

f.toString()

• 返回一个字符串，内容是函数的源码。

f.call()、f.apply()

• 调用函数。
• 在调用call()和apply()时可以将一个对象指定为第一个参数，此时这个对象成为函数执行时的this。
• call()可以将实参在对象之后一次传递。f.call(obj, 1, 2);
• apply()可以将实参封装到一个数组中统一传递。f.apply(obj, [1,2]);

（3）变量的作用域

全局作用域

• 在页面打开时创建，在页面关闭后销毁。
• 在全局作用域中有一个全局对象window，由浏览器创建，可以直接使用。
• 在全局作用域中，创建的变量都会作为window对象的属性保存。创建的函数都会作为window对象的方法保存。

函数作用域

• 在调用函数时创建，在函数执行完毕后销毁。
• 每调用一次函数就会创建一个新的函数作用域，它们之间是相互独立的。（注意是每次！即使是调用同一个函数不同次，也会创建新的函数作用域）
• 当在函数作用域中操作一个变量时，它会先在自身作用域中寻找（注意声明提升），如果有就直接使用；如果没有则向上一级作用域中寻找，直到找到全局作用域；如果全局作用域也没有，则报错。
• 在函数中要使用全局变量，可以使用window对象。
• 在函数中不使用var声明的变量，都会成为全局变量。
• 定义形参就相当于在函数中声明了变量。

（4）变量、函数提升

变量提升

• JavaScript 引擎的工作方式是，先解析代码，获取并声明所有被var声明的变量（未赋值，是undefined），然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。
• 使用var关键字声明的变量，会在所有的代码执行之前被声明。如果没有使用var关键字，则变量不会被声明提升。

函数提升

• 所有的函数的声明语句，都会被提升到代码的头部。
• 使用函数表达式声明的函数，会在所有的代码执行之前声明它的函数名。如果使用函数声明的函数，会在所有的代码执行之前声明整个函数包括它的函数名和函数语句。

（5）参数

可以省略参数。

• 没有办法只省略靠前的参数，而保留靠后的参数。如果一定要省略靠前的参数，只有显式传入undefined。

• 解析器在调用函数每次都会向函数内部传递2个隐含的参数。

this

• this指向的是一个对象，这个对象是函数执行的上下文对象。
• 根据函数的调用方式不同，this会指向不同的对象。
  ①以函数的形式调用时，this就是window对象。
  fun();
  ②以方法的形式调用时，this就是调用方法的对象。
  obj.fun();
  ③以构造函数的形式调用时，this就是新创建的对象。
  ④使用call()和apply()时，this就是指定的对象。

arguments

• arguments对象包含了函数运行时的所有参数。arguments[0]就是第一个参数，arguments[1]就是第二个参数，以此类推。这个对象只有在函数体内部，才可以使用。
• 通过arguments对象的length属性，可以判断函数调用时到底带几个参数。
• 正常模式下，arguments对象可以在运行时修改。
  严格模式下，修改arguments对象不会影响到实际的函数参数。
• arguments对象带有一个callee属性，返回当前正在执行的函数对象。
  arguments.callee();

虽然arguments是一个类数组对象，但它是一个对象。数组专有的方法（比如slice和forEach），不能在arguments对象上直接使用。
以下为常用的将arguments对象转换成数组的方法：

// slice
var args = Array.prototype.slice.call(arguments);


var args = [];
for(var i = 0; i < arguments.length; i++){
	args.push(arguments[i]);
}

（6）构造函数（类）

首字母大写。
使用同一个构造函数创建的对象，称为一类对象。
通过一个构造函数创建的对象，称为是该类的实例。
构造函数和普通函数的区别

• 调用方式的不同：普通函数是直接调用，而构造函数使用new关键字来调用。

构造函数的执行流程

• ①创建一个对象。
  ②将新建的对象作为函数中的this。
  ③逐行执行函数中的代码。
  ④将新建的对象作为返回值返回。

function Person(name, age, gender){
	this.name = name;
	this.age = age;
	this.gender = gender;
	
	//执行n次创建n次
	//浪费内存空间。
	this.sayHello = function(){
		alert(this.name);
	};
	
	//执行n次创建1次
	//把函数声明在全局作用域，污染全局作用域的命名空间，且不安全。
	this.sayHello = fun;
	
}
function fun(){
	alert(this.name);
}
//建议使用原型
Person.prototype.sayHello = function(){
	alert(this.name);
};
var per = new Person('孙悟空', 18, '男');
per.sayHello();

（7）原型prototype

解析器会向每个函数（不论是普通函数还是构造函数）中添加一个属性prototype，prototype属性指向原型对象。
通过构造函数创建的对象中会有一个隐含属性__proto__，隐含属性指向原型对象。

原型对象

• 原型对象相当于一个公共区域，所有同一个类的实例都可以访问到这个原型对象。可以将对象中共有的内容，统一设置到原型对象中。
• 原型对象也是对象，也有原型。
• 当访问对象的属性或方法时，会先在对象自身中寻找，如果有则直接使用；
  如果没有则去原型对象中寻找，如果有则使用；
  如果没有则去原型对象的原型中寻找，直到找到Obeject对象的原型，但是Object对象的原型没有原型（Obeject对象的原型的原型是null），如果在Obeject中依然没有找到，则返回undefined。

https://www.cnblogs.com/libin-1/p/5820550.html

【数组】

用typeof检查一个数组对象时，会返回object。

（1）数组的基本操作

创建数组

• var arr = new Array(10);
• var arr = [];
• 数组元素可以是任意数据类型。

读取数组

• 如果不存在返回undefined。

获取数组长度

• arr.length;
• length是属性，不用加()。
• 对于连续的数组，会获取到数组的长度（元素的个数）。
  对于非连续的数组，会获取到数组的最大索引+1。
• 也可以利用length修改数组长度。

向数组的最后一个位置添加元素

• arr[length]=22;

（2）数组的方法

push()

• 向数组的末尾添加一个或多个元素，并返回新的数组长度。
• arr.push(11);

pop()

• 删除数组的最后一个元素，并返回被删除的元素。

unshift()

• 向数组开头添加一个或多个元素，并返回新的数组长度。

shift()

• 删除数组的第一个元素，并返回被删除的元素。

forEach()

• 遍历数组。
• 只支持ie8以上。
• 参数为一个回调函数，该回调函数传递三个参数：当前正在遍历的元素，当前正在遍历的元素的索引，正在遍历的数组。
• arr.forEach(function(value, index, a){
  …
  });

slice()

• 截取数组[start, end)元素并返回截取元素。
• 不会改变原数组。
• 第二个参数可以不写，则默认从start截取到最后一个元素。
• 参数可以传递负值，表示倒数第n个。
• arr.slice(0, 1);

splice()

• 删除数组指定元素并返回被删除元素。
• 会改变原数组。
• 第一个参数：表示开始位置的索引。
• 第二个参数：表示删除的数量。
• 第三个及以后的参数：传递一些新元素，并插入到开始位置前。

concat()

• 连接两个或多个数组并返回新的数组。
• 不会改变原数组。

join()

• 将数组转化为字符串并返回。
• 不会改变原数组。
• 参数为连接符，不写默认逗号。

reverse()

• 反转数组。
• 会改变原数组。

sort()

• 按unicode编码，给数组排序。
• 会改变原数组。
• 可以传入一个回调函数，来指定排序规则。浏览器会根据回调函数的返回值来决定元素的顺序。
  如果返回一个>0的值，则元素会交换位置。
  如果返回一个<0的值，则元素位置不变。
  如果返回一个0，则认为两个元素相等也不交换位置。
  arr.sort(function(a, b){
  return a-b;
  });

【正则表达式】

用于定义一些字符串的规则。计算机可以根据正则表达式，检查一个字符串是否符合规则。
用typeof检查正则对象，会返回object。

正则表达式对象

• var 变量 = new RegExp(“正则表达式”, “匹配模式”);
  var reg = new RegExp(“a”，“i”);
  创建正则表达式的对象。
• var 变量 = /正则表达式/匹配模式
  var reg = /a/i;
• test()
  reg.test(str);
  检查字符串是否符合正则表达式的规则。如果符合则返回true，否则返回false。

匹配模式
默认匹配到第一个就结束。

• i：忽略大小写。
• g：全局匹配模式。

语法

• |或[]表示或
  是否有a或b：reg = /a|b/; reg = /[ab]/;
  是否含有abc或adc或aec：reg = /a[bde]c/;
  任意小写字母：reg = /[a-z]/;
  任意大写字母：reg = /[A-Z]/;
  任意字母：reg = /[A-z]/;
  任意数字：reg = /[0-9]/;
• [^]表示除了
  含有除了a、b以外的：reg = /[^ab]/;
• {n}表示内容出现n次
  是否含ababab：reg = /(ab){3}/;
• {a, b}表示内容出现[a,b]次
• {a, }表示内容出现a次及a次以上
• +表示内容出现至少1次
• *表示内容出现0次或多次
• ?表示内容出现0次或1次
• ^表示以内容开头
• $表示以内容结尾
  只能是’a’：reg = /^a$/;
• .表示任意字符
  是否含有.：reg = /\./;
• \w表示任意字母、数字、_
• \W表示除了字母、数字、_
• \d表示任意数字
• \D表示除了数字
• \s表示空格
• \S表示除了空格
• \b表示单词边界
  是否含有独立单词child：reg = /\bchild\b/;
• \B表示除了单词边界
  去除开头或结尾的空格：reg = /^\s*|\s*$/g;

【DOM】

Document Object Model文档对象模型
通过document对象获取节点

• ducument.getElementById(’’)
  var bj = document.getElementById(‘bj’);
• document.getElementsByTagName(’’)
  var inputs = document.getElementsByTagName(“input”);
• document.getElementsByTagName(’*’)
  获取所有元素。
• document.getElementsByName(’’)
• document.getElementsByClassName(’’)
  ie9以上。
• document.querySelector()
  根据css选择器查询元素节点。
  只会返回第一个。
  ie8也可以。
• document.querySelectorAll()
  根据css选择器查询元素节点。
  以数组形式返回全部。
  ie8也可以。
• document.body
  获取body标签。
• document.documentElement
  获取html标签。
• document.createElement()
  根据标签名创建一个元素节点对象并返回。
• document.createTextNode()
  根据文本内容创建文本节点对象并返回。

通过节点获取节点

• getElementsByTagName("")
• childNodes
  会获取包括文本节点在内的所有结点，标签间空白也会被当成文本节点（ie8及以下不会）。
• children
  会获取包括文本节点在内的所有结点。
  标签间空白不会被当做文本节点。
• firstChild
  标签间空白也会被当成文本节点。
• firstElementChild
  标签间空白不会被当做文本节点。
  ie8及以下不支持。
• lastChild
  标签间空白也会被当成文本节点。
• parentNode
• previousSibling
• previousElementSibling
  标签间空白不会被当做文本节点。
  ie8及以下不支持。
• nextSibling
• innerHTML
  获取元素内部的HTML代码。
  有标签。
  自结束标签没用。
  console.log(bj.innerHTML);
  bj.innerHTML += ‘<li>广东</li>’;
• innerText
  获取元素内部的文本内容。
  没有标签。
• 元素.属性名
  class属性不能用，可以用className读取class属性。
  console.log(inputs[i].value);
• 父节点.appendChild(子节点)
  向一个父节点中添加一个新的子节点。
• 父节点.insertBefore(新节点, 旧节点)
  在指定的子节点前插入新的子节点。
• 父节点.replaceChild(新节点, 旧节点)
  使用指定的子节点替换已有的子节点。
• 父节点.removeChild(子节点)
  删除一个子节点。

通过节点修改样式
（设置和读取的是内联样式）

• 元素.style.样式名 = 样式值
  修改元素的样式值。
  box.style.width = ‘600px’;
  样式名需要改成小驼峰。
  box.style.backgroundColor = ‘orange’;
• 元素.currentStyle.样式名
  读取元素当前正在显示的样式，没有则是默认值（maybe auto。只有ie能用。
  其他浏览器可以使用getComputedStyle()返回css元素对象，没有则获取到真实的值。不支持ie8及以下。
  第一个参数：要获取样式的元素；第二个参数：可以传递一个伪元素，一般传null。
  console.log(getComputedStyle(box, null));
  完美版本：
  if(window.getComputedStyle){
  return getComputedStyle(obj, null)[name];
  }else{
  return obj.currentStyle[name];
  }
• 元素.cilentWidth
• 元素.clientHeight
  获取元素的可见高度（返回的是数字，内容区和内边距），只读。
• 元素.offsetWidth
• 元素.offsetHeight
  获取整个元素的高度（内容区、内边距和边框）。
• 元素.offsetParent
  获取当前元素的定位父元素（最近的开启了定位的祖先元素）。
• 元素.offsetLeft
  当前元素相对于其定位父元素的水平偏移量。
• 元素.offsetTop
  当前元素相对于其定位父元素的垂直偏移量。
• 元素.scrollWidth
• 元素.scrollHeight
  元素整个滚动区域的高度。
• 元素.scrollLeft
• 元素.scrollTop
  垂直滚动条滚动的距离。
  scrollHeight - scrollTop == cilentHeight成立说明滚动条滚动到底了。

节点Node
构成HTML文档最基本的单位。

• 文档节点：整个HTML文档。
  nodeName: #document
  nodeTyep: 9
  nodeValue: null
• 元素节点：HTML文档中的标签。
  nodeName: 标签名
  nodeType: 1
  nodeValue: null
• 属性节点：元素的属性。
  nodeName: 属性名
  nodeType: 2
  nodeValue: 属性值
• 文本节点：HTML标签中的文本内容。
  nodeName: #text
  nodeType: 3
  nodeValue: 文本内容

for循环在页面加载后立即执行，onlick事件在响应后才执行（此时for循环早已执行完毕）。

【事件】

文档或浏览器窗口中发生的一些特定的交互瞬间。

（1）事件对象event

• 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数。在事件对象中封装了当前事件相关的一切信息。
• 在ie8中，浏览器不会传递事件对象，是将事件对象作为window对象的属性保存的。
  event = event || window.event;

event.target

• 触发事件的对象。

event.wheelDelta

• 鼠标滚轮滚动的方向。

event.keyCode

• 获取按键ASCII编码。

event.altKey

• 判断alt是否被按下。
• if(event.keyCode == 89 && event.altKey){}

event.ctrlKey
event.shiftKey
event.key

• 获取按键。

• clientX
  获取鼠标在当前可见窗口的水平坐标。
  ie8及以下不可用。
• cilentY
  获取鼠标在当前可见窗口的垂直坐标。
• pageX
  获取鼠标在当前页面的水平坐标。
  ie8及以下不可用。
• pageY
  获取鼠标在当前页面的垂直坐标。

绑定事件
①btn.onclick = function(){};
使用该方法只能为一个元素的相同事件同时绑定一个函数，如果绑定了多个，则后边的会覆盖掉前边的。
②btn.addEventListener(‘click’, function(){});
第一个参数：事件的字符串，不要on；第二个参数：回调函数；第三个参数：是否在捕获阶段触发事件（布尔值，一般false）。
可以为一个元素的相同事件绑定多个函数，按照函数的绑定顺序执行。
ie8及以下不可用。ie8可以用attachEvent()来绑定事件，第一个参数：事件的字符串，要on；第二个参数：回调函数。可以为一个元素的相同事件绑定多个函数，后绑定的先执行。

onscroll

• 元素的滚动条滚动时触发。

onwheel

• 鼠标滚轮滚动时触发。

onmousemove

• 鼠标在元素中移动时触发。

onmousedown

• 按下鼠标时触发。

onmouseup

• 鼠标松开时触发。

onkeydown

• 某个键盘按键被按下。
• 键盘事件一般绑定给可以获取焦点的对象（如input）或者document。
• 一直按着不松开则会一直触发。

onkeyup

• 某个键盘按键被松开。

onload

• 页面加载后才会触发，确保所有DOM对象都已加载。
• window.onload = function(){};

（2）事件冒泡Bubble

事件冒泡指的是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。

• 取消冒泡
  event.cancelBubble = true;

（3）事件委派

• 事件委派指的是将事件统一绑定给元素的共同的祖先元素，当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。
• 事件委派利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。

（4）事件传播

ie8及以下没有事件传播。
捕获阶段

• 在捕获阶段时，从最外层的祖先元素向目标元素进行事件的捕获。
  但是默认此时不会触发事件。如果希望在捕获阶段触发事件可以将addEventListener()函数第三个参数设为true。

目标阶段

• 事件捕获到目标元素，捕获结束开始在目标元素上触发事件。

冒泡阶段

• 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件。

【BOM】

Browser Object Model浏览器对象模型

BOM对象
这些对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用。

• Window
  代表的是整个浏览器的窗口，同时window也是网页中的全局对象。
  （1）setInterval()
  定时调用。
  第一个参数：回调函数；第二个参数：间隔时间（ms）。
  返回值：Number类型，表示定时器的唯一标识。
  （2）clearInterval()
  关闭定时器。
  参数：定时器的标识。
  （3）setTimeout()
  延时调用。
  参数同setInterval()。

• Navigator
  代表的是当前浏览器的信息，通过该对象可以来识别不同的浏览器。
  （1）userAgent
  字符串，描述浏览器的信息。

• Location
  代表浏览器的地址栏信息，通过该对象可以获取地址栏信息，或者操纵浏览器跳转页面。
  （1）直接打印
  获取到浏览器的地址栏信息。
  （2）assign()
  跳转页面。
  location = ‘url’;
  location.assign(‘url’);
  （3）reload()
  刷新当前页面，默认不清空缓存。
  传入参数true，强制清空缓存。
  （4）replace()
  替换当前页面（不会生成历史记录）。

• History
  代表浏览器的历史记录，通过该对象可以操纵浏览器的历史记录。由于隐私问题，该对象不能获取到具体的历史记录，只能操纵浏览器向前或向后翻页，且该操作只在当次访问时有效。
  （1）length
  获取当次访问的链接数量。
  （2）back()
  回退到上一个页面。
  （3）forward()
  跳转到下一个页面。
  （4）go(n)
  跳转到指定的页面。

• Screen
  代表用户的屏幕信息，通过该对象可以获取到与用户显示器的相关信息。

【JSON】

JavaScript Object Notation JS对象表示法。
特殊格式的字符串，能被任意语言识别并转换成任意语言中的对象。
JSON和JS对象的格式一样，不过JSON字符串中的属性名必须加双引号。
JSON中允许的值：字符串、数值、布尔值、null、对象、数组。

---

类型

• 对象
  var obj = ‘{ “name”: “孙悟空”, “age”: 18, “gender”: “男” }’;
• 数组
  var arr = ‘[1, 2, 3, “hello”]’；

---

JSON转化为JS对象

• o = JSON.parse(obj);

JS对象转化为JSON

• o = JSON.stringify(obj);

ie7及以下没有JSON。
可以使用以下方法将JSON转化为JS对象：
①eval()

• 该函数可以用来执行一段字符串形式的JS代码，并返回执行结果。
• 如果使用eval()执行的字符串中含有{}，会将{}当成代码块。如果不希望将其作为代码块解析，则需要在字符串前后加一个();
• 尽量不要使用，性能慢且具有安全隐患。
• o = eval(’(’ + obj + ‘)’ );

②引用工具包

【垃圾回收Garbage Collection】

当一个对象没有任何的变量或属性对其进行引用时，将永远无法操纵该对象，此时这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢，所以这种垃圾必须进行清理。
在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，我们不需要也不能进行垃圾回收的操作，只需要将不再使用的对象设置为null即可。

【base64】

Base64 是一种编码方法，可以将任意值转成 0～9、A～Z、a-z、+和/这64个字符组成的可打印字符。使用它的主要目的，不是为了加密，而是为了不出现特殊字符，简化程序的处理。

• btoa()：将任意值转为Base64编码。
• atob()：将Base64编码转为原来的值。
  不适合非 ASCII 码的字符，会报错。