JavaScript 学习笔记

程序员文章站 2022-03-21 23:27:10

1. 变量提升console.log(a); var a = 1;var a;console.log(a);a = 1;//输出undefined, a已声明, 但未赋值2. 标识符JavaScript 语言的标识符对大小写敏感命名规则第一个字符，可以是任意 Unicode 字母（包括英文字母和其他语言的字母），以及美元符号（$）和下划线（_）第二个字符及后面的字符，除了 Unicode 字母、美元符号和下划线，还可以用数字0-93. 数据类型......

JavaScript教程参考: https://wangdoc.com/javascript/index.html

1. 变量提升

console.log(a);      
var a = 1;

var a;
console.log(a);
a = 1;

//输出undefined,  a已声明, 但未赋值

2. 标识符

JavaScript 语言的标识符对大小写敏感

命名规则

第一个字符，可以是任意 Unicode 字母（包括英文字母和其他语言的字母），以及美元符号（$）和下划线（_）
第二个字符及后面的字符，除了 Unicode 字母、美元符号和下划线，还可以用数字0-9

3. 数据类型(七种 ES6)

数值(number) ：整数和小数（比如1和3.14）
字符串（string）：文本
布尔值（boolean）：true / false
undefined：表示“未定义”或不存在
null：表示空值
对象（object）：各种值组成的集合
Symbol

4. 值类型

typeof 运算符
instanceof 运算符 , 只能用于对象，不适用原始类型的值
Object.prototype.toString方法

5. 字符集

JavaScript 使用 Unicode 字符集

每个字符在 JavaScript 内部都是以16位（即2个字节）的 UTF-16 格式储存

6. Base64 转码

Base64 : 一种编码方法，可以将任意值转成 0～9、A～Z、a-z、+和/这64个字符组成的可打印字符

使用目的 : 为了不出现特殊字符，简化程序的处理。

使用场景 :

(1) 文本里面包含一些不可打印的符号，比如 ASCII 码0到31的符号都无法打印出来，这时可以使用 Base64 编码，将它们转成可以

打印的字符

(2) 需要以文本格式传递二进制数据，那么也可以使用 Base64 编码

相关方法 (不适合非 ASCII 码的字符，会报错) :

(1) btoa()：任意值转为 Base64 编码

(2) atob()：Base64 编码转为原来的值

要将非 ASCII 码字符转为 Base64 编码，必须中间插入一个转码环节，再使用这两个方法

function b64Encode(str) {
  return btoa(encodeURIComponent(str));
}

function b64Decode(str) {
  return decodeURIComponent(atob(str));
}

b64Encode('你好') // "JUU0JUJEJUEwJUU1JUE1JUJE"
b64Decode('JUU0JUJEJUEwJUU1JUE1JUJE') // "你好"

7. object对象

表达式 / 语句

({ foo: 123 }) // 正确   表达式
({ console.log(123) }) // 报错   
{ console.log(123) } // 123   语句

属性操作

//赋值
var obj = {};

obj.foo = 'Hello';
obj['bar'] = 'World';


//读取
var obj = {
  p: 'Hello World'
};

obj.p // "Hello World"
obj['p'] // "Hello World"


//查看 (Object.keys方法, 查看一个对象本身的所有属性)
var obj = {
  key1: 1,
  key2: 2
};

Object.keys(obj); // ['key1', 'key2']


//删除 (只能删除对象本身的属性，无法删除继承的属性)
var obj = { p: 1 };
Object.keys(obj) // ["p"]

delete obj.p // true
obj.p // undefined
Object.keys(obj) // []


//是否存在 (in运算符用于检查对象是否包含某个属性)
var obj = { p: 1 };
'p' in obj // true
'toString' in obj // true
//对象的hasOwnProperty方法判断是否为对象自身的属性


//遍历属性 (包含继承属性)
var obj = {a: 1, b: 2, c: 3};

for (var i in obj) {
  console.log('键名：', i);
  console.log('键值：', obj[i]);
}
// 键名： a
// 键值： 1
// 键名： b
// 键值： 2
// 键名： c
// 键值： 3

8. 函数

声明函数

(1) function 命令

function print(s) {
  console.log(s);
}

(2) 函数表达式

var print = function(s) {
  console.log(s);
};

/*
* 采用函数表达式声明函数时，function命令后面不带有函数名。如果加上函数名，该函数名只在函数体内部有 
* 效，在函数体外部无效。
*/ 

var print = function x(){
  console.log(typeof x);
};

x
// ReferenceError: x is not defined

print()
// function


//作用: (1) 可以在函数体内部调用自身
        (2) 方便除错（除错工具显示函数调用栈时，将显示函数名，而不再显示这里是一个匿名函数）

(3) function 构造函数

var add = new Function(
  'x',
  'y',
  'return x + y'
);

// 等同于
function add(x, y) {
  return x + y;
}

arguments 对象

arguments对象 : 可以在函数体内部读取所有参数

var f = function (one) {
  console.log(arguments[0]);
  console.log(arguments[1]);
  console.log(arguments[2]);
}

f(1, 2, 3)
// 1
// 2
// 3

闭包

定义在一个函数内部的函数

作用 : (1) 读取外层函数内部的变量

(2) 让这些变量始终保持在内存中，即闭包可以使得它诞生环境一直存在

(3) 封装对象的私有属性和私有方法

//闭包
function f1() {
  var n = 999;
  function f2() {
    console.log(n);
  }
  return f2;
}

var result = f1();
result(); // 999


//变量保存在内存中
function createIncrementor(start) {
  return function () {
    return start++;
  };
}

var inc = createIncrementor(5);

inc() // 5
inc() // 6
inc() // 7

/*
* start是函数createIncrementor的内部变量。通过闭包，start的状态被保留了，每一次调用都是在上一次 * 调用的基础上进行计算。从中可以看到，闭包inc使得函数createIncrementor的内部环境，一直存在。所 * 以，闭包可以看作是函数内部作用域的一个接口
*/

//封装对象的私有属性和私有方法
function Person(name) {
  var _age;
  function setAge(n) {
    _age = n;
  }
  function getAge() {
    return _age;
  }

  return {
    name: name,
    getAge: getAge,
    setAge: setAge
  };
}

var p1 = Person('张三');
p1.setAge(25);
p1.getAge() // 25

立即调用的函数表达式（IIFE）

根据 JavaScript 的语法，圆括号()跟在函数名之后，表示调用该函数

var f = function f(){ return 1}();
f // 1

(function(){ /* code */ }());
// 或者
(function(){ /* code */ })();

9. 错误类型

Error实例对象是最一般的错误类型，在它的基础上，JavaScript 还定义了其他6种错误对象

SyntaxError : 解析代码时发生的语法错误
ReferenceError : 引用一个不存在的变量时发生的错误
RangeError : 一个值超出有效范围时发生的错误
TypeError : 变量或参数不是预期类型时发生的错误
URIError : URI 相关函数的参数不正确时抛出的错误
EvalError : 函数没有被正确执行时 (该错误类型已经不再使用了，只是为了保证与以前代码兼容，才继续保留)

自定义错误 :

function UserError(message) {
  this.message = message || '默认信息';
  this.name = 'UserError';
}

UserError.prototype = new Error();
UserError.prototype.constructor = UserError;

//继承Error对象

10. JSON

类型和格式的规定 :

复合类型的值只能是数组或对象，不能是函数、正则表达式对象、日期对象
原始类型的值只有四种：字符串、数值（必须以十进制表示）、布尔值和null（不能使用NaN, Infinity, -Infinity和undefined）
字符串必须使用双引号表示，不能使用单引号
对象的键名必须放在双引号里面
数组或对象最后一个成员的后面，不能加逗号

JSON对象是 JavaScript 的原生对象，用来处理 JSON 格式数据。它有两个静态方法：JSON.stringify()和JSON.parse()

JSON.stringify() 将一个值转为 JSON 字符串

(1)忽略对象的不可遍历的属性

var obj = {};
Object.defineProperties(obj, {
  'foo': {
    value: 1,
    enumerable: true
  },
  'bar': {
    value: 2,
    enumerable: false
  }
});

JSON.stringify(obj); // "{"foo":1}"

(2)第二个参数

为数组时, 指定要转换为JSON的属性, 只对对象的属性有效

var obj = {
  'prop1': 'value1',
  'prop2': 'value2',
  'prop3': 'value3'
};

var selectedProperties = ['prop1', 'prop2'];

JSON.stringify(obj, selectedProperties)
// "{"prop1":"value1","prop2":"value2"}"

为函数时, 用来更改返回值

function f(key, value) {
  if (typeof value === "number") {
    value = 2 * value;
  }
  return value;
}

JSON.stringify({ a: 1, b: 2 }, f)
// '{"a": 2,"b": 4}'

(3)第三个参数

用于增加返回的 JSON 字符串的可读性

// 默认输出
JSON.stringify({ p1: 1, p2: 2 })
// JSON.stringify({ p1: 1, p2: 2 })

// 分行输出
JSON.stringify({ p1: 1, p2: 2 }, null, '\t')
// {
// 	"p1": 1,
// 	"p2": 2
// }

(4)参数对象的 toJSON() 方法

如果参数对象有自定义的toJSON()方法，那么JSON.stringify()会使用这个方法的返回值作为参数，而忽略原对象的其他属性

var user = {
  firstName: '三',
  lastName: '张',

  get fullName(){
    return this.lastName + this.firstName;
  },

  toJSON: function () {
    return {
      name: this.lastName + this.firstName
    };
  }
};

JSON.stringify(user)
// "{"name":"张三"}"

JSON.parse() 将JSON字符串转换为对应的值

第二个参数:

function f(key, value) {
  if (key === 'a') {
    return value + 10;
  }
  return value;
}

JSON.parse('{"a": 1, "b": 2}', f)
// {a: 11, b: 2}

11. 实例对象

构造函数

JavaScript 语言使用构造函数（constructor）作为对象的模板。所谓”构造函数”，就是专门用来生成实例对象的函数

为了与普通函数区别，构造函数名字的第一个字母通常大写

new命令

作用 : 执行构造函数，返回一个实例对象

var Vehicle = function () {
  this.price = 1000;
};

var v = new Vehicle();
v.price // 1000

如果构造函数内部有return语句，而且return后面跟着一个对象，new命令会返回return语句指定的对象；否则，就会不管return语

句，返回this对象

var Vehicle = function (){
  this.price = 1000;
  return { price: 2000 };
};

(new Vehicle()).price
// 2000

Object.create() 创建实例对象

以这个现有的对象作为模板，生成新的实例对象

var person1 = {
  name: '张三',
  age: 38,
  greeting: function() {
    console.log('Hi! I\'m ' + this.name + '.');
  }
};

var person2 = Object.create(person1);

person2.name // 张三
person2.greeting() // Hi! I'm 张三.

原型对象（prototype）

原型对象的所有属性和方法，都能被实例对象共享

每个函数都有一个prototype属性，指向一个对象。

function Animal(name) {
  this.name = name;
}
Animal.prototype.color = 'white';

var cat1 = new Animal('大毛');
var cat2 = new Animal('二毛');

cat1.color // 'white'
cat2.color // 'white'

prototype对象有一个constructor属性，默认指向prototype对象所在的构造函数

constructor属性表示原型对象与构造函数之间的关联关系，如果修改了原型对象，一般会同时修改constructor属性，防止引用的时

候出错

// 好的写法
C.prototype = {
  constructor: C,
  method1: function (...) { ... },
  // ...
};

// 更好的写法
C.prototype.method1 = function (...) { ... };

/*
* 将constructor属性重新指向原来的构造函数，要么只在原型对象上添加方法，这样可以保证instanceof运算 
* 符不会失真
*/

constructor属性作用 :

(1) 可以得知某个实例对象，到底是哪一个构造函数产生的

function F() {};
var f = new F();

f.constructor === F // true
f.constructor === RegExp // false

(2)从一个实例对象新建另一个实例

function Constr() {}
var x = new Constr();

var y = new x.constructor();
y instanceof Constr // true

构造函数的继承

function Shape() {
  this.x = 0;
  this.y = 0;
}

Shape.prototype.move = function (x, y) {
  this.x += x;
  this.y += y;
  console.info('Shape moved.');
};


// 第一步，子类继承父类的实例
function Rectangle() {
  Shape.call(this); // 调用父类构造函数
}
// 另一种写法
function Rectangle() {
  this.base = Shape;
  this.base();
}

// 第二步，子类继承父类的原型
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

多重继承

JavaScript 不提供多重继承功能，即不允许一个对象同时继承多个对象。但是，可以通过变通方法，实现这个功能

function M1() {
  this.hello = 'hello';
}

function M2() {
  this.world = 'world';
}

function S() {
  M1.call(this);
  M2.call(this);
}

// 继承 M1
S.prototype = Object.create(M1.prototype);
// 继承链上加入 M2
Object.assign(S.prototype, M2.prototype);

// 指定构造函数
S.prototype.constructor = S;

var s = new S();
s.hello // 'hello'
s.world // 'world'

//子类S同时继承了父类M1和M2。这种模式又称为 Mixin（混入）

12. 异步操作

模式

(1) 回调函数

function f1(callback) {
  // ...
  callback();
}

function f2() {
  // ...
}

f1(f2);

(2) 事件监听

//jQuery 的写法
f1.on('done', f2);

function f1() {
  setTimeout(function () {
    // ...
    f1.trigger('done');
  }, 1000);
}

//f1.trigger('done')表示，执行完成后，立即触发done事件，从而开始执行f2

(3) 发布/订阅

jQuery.subscribe('done', f2);

function f1() {
  setTimeout(function () {
    // ...
    jQuery.publish('done');
  }, 1000);
}

jQuery.unsubscribe('done', f2);

定时器

(1) setTimeout(func | code, delay, param...)

func | code 执行函数/代码, delay 推迟执行的毫秒数, param 回调函数参数, 执行一次

指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器

如果回调函数是对象的方法，那么setTimeout使得方法内部的this关键字指向全局环境，而不是定义时所在的那个对象

(2) setInterval(func | code, interval, param...)

func | code 执行函数/代码, 间隔interval毫秒数执行一次, param 回调函数参数, 无限次执行

由于不考虑每次任务执行本身所消耗的时间。因此实际上，两次执行之间的间隔会小于指定的时间

为了确保两次执行之间有固定的间隔，可以不用setInterval，而是每次执行结束后，使用setTimeout指定下一次执行的具

体时间

(3) clearTimeout(TimerId)，clearInterval(TimerId)

取消对应定时器

(4) setTimeout(f, 0)

尽可能早地执行f，但是并不能保证立刻就执行f

Promise对象

异步操作解决方案，为异步操作提供统一接口。它起到代理作用（proxy），充当异步操作与回调函数之间的中介，使得异步操作具

备同步操作的接口

(1) 对象状态

异步操作未完成（pending）, 成功（fulfilled）, 失败（rejected）

(2) 基本用法

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并

将异步操作的结果，作为参数传递出去

reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将

异步操作报出的错误，作为参数传递出去

then() 方法

指定resolved状态和rejected状态的回调函数

可以接受两个回调函数作为参数。第一个回调函数是状态变为resolved时调用，第二个回调函数是状态变为rejected时调用。这两

个函数都是可选的，不一定要提供。它们都接受Promise对象传出的值作为参数

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

catch() 方法

是then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数, 推荐第二种写法

// bad
promise
  .then(function(data) {
    // success
  }, function(err) {
    // error
  });

// good
promise
  .then(function(data) { //cb
    // success
  })
  .catch(function(err) {
    // error
  });

finally() 方法

不管 Promise 对象最后状态如何，都会执行的操作

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

all() 方法

将多个 Promise 实例，包装成一个新的 Promise 实例

const p = Promise.all([p1, p2, p3]);

只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函

数

只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数

注意，如果作为参数的 Promise 实例，自己定义了catch方法，那么它一旦被rejected，并不会触发Promise.all()的catch方法

any() 方法

将多个 Promise 实例，包装成一个新的 Promise 实例

const p = Promise.any([p1, p2, p3]);

只要p1、p2、p3的状态有一个变成fulfilled，p的状态就会变成fulfilled

只有p1、p2、p3的状态都变成rejected，p的状态就变成rejected

抛出的错误为AggregateError 实例。它相当于一个数组，每个成员对应一个被rejected的操作所抛出的错误

var resolved = Promise.resolve(42);
var rejected = Promise.reject(-1);
var alsoRejected = Promise.reject(Infinity);

Promise.any([resolved, rejected, alsoRejected]).then(function (result) {
  console.log(result); // 42
});

Promise.any([rejected, alsoRejected]).catch(function (results) {
  console.log(results); // [-1, Infinity]
});

race() 方法

将多个 Promise 实例，包装成一个新的 Promise 实例

const p = Promise.race([p1, p2, p3]);

只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函

数

const p = Promise.race([
  fetch('/resource-that-may-take-a-while'),
  new Promise(function (resolve, reject) {
    setTimeout(() => reject(new Error('request timeout')), 5000)
  })
]);

p
.then(console.log)
.catch(console.error);

//如果 5 秒之内fetch方法无法返回结果，变量p的状态就会变为rejected，从而触发catch方法指定的回调函数

allSettled() 方法

不关心异步操作的结果，只关心这些操作有没有结束

const promises = [
  fetch('/api-1'),
  fetch('/api-2'),
  fetch('/api-3'),
];

await Promise.allSettled(promises);
removeLoadingIndicator();

//对服务器发出三个请求，等到三个请求都结束，不管请求成功还是失败，加载的滚动图标就会消失

resolve()方法

将现有对象转为 Promise 对象

Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))

参数 :

Promise实例 : 不做任何修改, 返回实例

thenable对象 :

thenable对象指的是具有then方法的对象

let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};

let p1 = Promise.resolve(thenable);
p1.then(function (value) {
  console.log(value);  // 42
});

不具有then方法的对象或不是对象 : 返回一个新的 Promise 对象，状态为resolved

不带有参数 : 直接返回一个resolved状态的 Promise 对象

reject() 方法

返回一个新的 Promise 实例，该实例的状态为rejected

try() 方法

不区分同步/异步函数, 统一使用Promise 处理, then指定下一步操作, catch处理异常

13. DOM

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript

对象，从而可以用脚本进行各种操作（比如增删内容）

节点

DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文

档树的一片叶子

(1) Document：整个文档树的顶层节点

(2) DocumentType：doctype标签（比如<!DOCTYPE html>）

(3) Element：网页的各种HTML标签（比如<body>、<a>等）

(4) Attr：网页元素的属性（比如class="right"）

(5) Text：标签之间或标签包含的文本

(6) Comment：注释

(7) DocumentFragment：文档的片段

节点树

浏览器原生提供document节点，代表整个文档。

文档的第一层有两个节点，第一个是文档类型节点（<!doctype html>），第二个是 HTML 网页的顶层容器标签<html>。后者构成了

树结构的根节点（root node），其他 HTML 标签节点都是它的下级节点

除了根节点，其他节点都有三种层级关系 :

(1) 父节点关系（parentNode）：直接的那个上级节点

(2) 子节点关系（childNodes）：直接的下级节点

(3) 同级节点关系（sibling）：拥有同一个父节点的节点

Node接口

所有 DOM 节点对象都继承了 Node 接口，拥有一些共同的属性和方法

(1)属性

nodeType 节点的类型

nodeName 节点名称

nodeValue 节点的文本值

baseURI 当前绝对路径

ownerDocument 当前节点所在的顶层文档对象

nextSibling 紧跟在当前节点后面的第一个同级节点

childNodes 当前节点所有子节点

(2)方法

appendChild() 接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点

hasChildNodes() 当前节点是否有子节点

NodeList接口

能够容纳多个节点, 可以包含各种类型的节点

HTMLCollection接口

能够容纳多个节点, 只能包含 HTML 元素节点

ParentNode 接口

当前节点是一个父节点，提供一些处理子节点的方法

只有元素节点（element）、文档节点（document）和文档片段节点（documentFragment）拥有子节点，因此只有这三类节点会拥

有ParentNode接口

(1)属性

children 返回一个HTMLCollection实例，成员是当前节点的所有元素子节点。该属性只读

firstElementChild 返回当前节点的第一个元素子节点

lastElementChild 返回当前节点的最后一个元素子节点

childElementCount 返回一个整数，表示当前节点的所有元素子节点的数目

(2)方法

append() 为当前节点追加一个或多个子节点，位置是最后一个元素子节点的后面

prepend() 为当前节点追加一个或多个子节点，位置是第一个元素子节点的前面

ChildNode 接口

如果一个节点有父节点，那么该节点就拥有了ChildNode接口

方法

remove() 从父节点移除当前节点

before() 在当前节点的前面，插入一个或多个同级节点

after() 在当前节点的后面，插入一个或多个同级节点

replaceWith() 使用参数节点，替换当前节点

Document 节点

代表整个文档，每张网页都有自己的document对象

window.document属性就指向这个对象。只要浏览器开始载入 HTML 文档，该对象就存在了，可以直接使用

document对象继承了EventTarget接口和Node接口，并且混入（mixin）了ParentNode接口。这意味着，这些接口的方法都可以在

document对象上调用

(1)获取document对象

正常的网页，直接使用document或window.document

iframe框架里面的网页，使用iframe节点的contentDocument属性

Ajax 操作返回的文档，使用XMLHttpRequest对象的responseXML属性

内部节点的ownerDocument属性

(2)属性

scrollingElement 返回文档的滚动元素

activeElement 返回获得当前焦点（focus）的 DOM 元素

fullscreenElement 返回当前以全屏状态展示的 DOM 元素

links 返回当前文档所有设定了href属性的<a>及<area>节点

forms 返回所有<form>表单节点

images 返回页面所有<img>图片节点

documentURI / URL 返回当前文档的网址

domain 返回当前文档的域名

location 浏览器提供的原生对象

hidden 当前页面是否可见窗口最小化、浏览器切换了 Tab，都会导致导致页面不可见

visibilityState 返回文档的可见状态 visible / hidden / prerender / unloaded

readyState 返回当前文档的状态 loading / interactive / complete

(3)方法

open() 清除当前文档所有内容，使得文档处于可写状态

write() 写入内容

close() 关闭文档

getElementsByTagName() 搜索 HTML 标签名，返回符合条件的元素

getElementsByClassName() class名字符合指定条件的元素

getElementsByName() 选择拥有name属性的 HTML 元素

getElementById() 返回匹配指定id属性的元素节点

createElement() 生成元素节点

createEvent() 生成一个事件对象

hasFocus() 是否有元素被激活或获得焦点

Element 节点

Element节点对象对应网页的 HTML 元素。每一个 HTML 元素，在 DOM 树上都会转化成一个Element节点对象

继承了Node接口，因此Node的属性和方法在Element对象都存在

(1)属性

accessKey 读写分配给当前元素的快捷键

draggable 当前元素是否可拖动

lang 当前元素的语言设置

hidden 当前元素是否可见, 只在 CSS 没有明确设定当前元素的可见性时才有效

contentEditable 使得元素的内容可以编辑

attributes 当前元素节点的所有属性节点

dataset 返回一个对象，可以从这个对象读写data-属性(自定义)

innerHTML 该元素包含的所有 HTML 代码

outerHTML 该元素包含的所有 HTML 代码, 包括该元素本身和所有子元素

(2)方法

getAttribute() 读取某个属性的值

getAttributeNames() 返回当前元素的所有属性名

setAttribute() 写入属性值

hasAttribute() 某个属性是否存在

hasAttributes() 当前元素是否有属性

removeAttribute() 删除属性

getElementsByClassName() 具有指定 class 的子元素节点

getElementsByTagName() 匹配指定标签名的子元素节点

addEventListener() 添加事件的回调函数

removeEventListener() 移除事件监听函数

dispatchEvent() 触发事件

getBoundingClientRect() 返回一个对象，提供当前元素节点的大小、位置等信息，基本上就是 CSS 盒状模型的所有信息

insertAdjacentElement() 相对于当前元素的指定位置，插入一个新的节点

focus() 将当前页面的焦点，转移到指定元素上

blur() 用于将焦点从当前元素移除

click() 相当于触发了click事件

Text 节点

代表元素节点（Element）和属性节点（Attribute）的文本内容

(1)属性

data 设置或读取文本节点的内容

length 当前文本节点的文本长度

nextElementSibling 当前文本节点后面的那个同级元素节点

previousElementSibling 当前文本节点前面最近的同级元素节点

(2)方法

appendData() 追加字符串

deleteData() 删除子字符串, 第一个参数为子字符串开始位置，第二个参数为子字符串长度

insertData() 插入字符串, 第一个参数为插入位置，第二个参数为插入的子字符串

replaceData() 用于替换文本，第一个参数为替换开始位置，第二个参数为需要被替换掉的长度，第三个参数为新加入的字符串

subStringData() 用于获取子字符串，第一个参数为子字符串在Text节点中的开始位置，第二个参数为子字符串长度

remove() 移除当前Text节点

DocumentFragment 节点

代表一个文档的片段，本身就是一个完整的 DOM 树形结构。它没有父节点，parentNode返回null，但是可以插入任意数量的子节

点。它不属于当前文档，操作DocumentFragment节点，要比直接操作 DOM 树快得多

var docFrag = document.createDocumentFragment();
// 等同于
var docFrag = new DocumentFragment();

var li = document.createElement('li');
li.textContent = 'Hello World';
docFrag.appendChild(li);

document.querySelector('ul').appendChild(docFrag);

Mutation Observer API

监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知

(1) 与事件对比

事件 : 同步触发, DOM变动会立即出发相应的事件

Mutation Observer : 异步触发, 等到当前所有 DOM 操作都结束才触发

(2) 特点

等待所有脚本任务完成后，才会运行（即异步触发方式）

DOM 变动记录封装成一个数组进行处理，而不是一条条个别处理 DOM 变动

可以观察 DOM 的所有类型变动，也可以指定只观察某一类变动

(3) 构造函数

可指定回调函数, 接受两个参数, 第一个是变动数组，第二个是观察器实例

(4) 实例方法

observe() 启动监听

参数1：所要观察的 DOM 节点

参数2: 所要观察的特定变动变动类型(childList / attributes / characterData)

var article = document.querySelector('article');

var  options = {
  'childList': true,
  'attributes':true
} ;

observer.observe(article, options);

disconnect() 停止观察

takeRecords() 清除变动记录

(5) MutationRecord 对象

DOM 每次发生变化，就会生成一条变动记录（MutationRecord 实例）。该实例包含了与变动相关的所有信息

14. 事件

EventTarget 接口

DOM 的事件操作（监听和触发），都定义在EventTarget接口。所有节点对象都部署了这个接口

实例方法:

addEventListener() 绑定事件监听函数

参数1 : 事件名称

参数2 : 监听函数或具有handleEvent函数的对象

参数3 : 布尔值，表示监听函数是否在捕获阶段（capture）触发, 或者, 为配置对象(capture, once 监听函数是否只触发一次

passive 监听函数不会调用事件的preventDefault方法)

removeEventListener() 移除事件监听函数, 参数与addEventListener方法一致

dispatchEvent() 触发指定事件, 参数为Event对象实例

事件模型

浏览器的事件模型，就是通过监听函数（listener）对事件做出反应。事件发生后，浏览器监听到了这个事件，就会执行对应的监听

函数。这是事件驱动编程模式（event-driven）的主要编程方式

绑定事件监听函数 :

(1)HTML的on属性

属性值为执行的代码, 不是函数, 只会在冒泡阶段触发

(2)元素节点的事件属性

值为函数名, 只会在冒泡阶段触发

(3)addEventListener()方法

事件的传播 :

一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段

第一阶段: 从window对象传导到目标节点（上层传到底层），称为“捕获阶段”（capture phase）

第二阶段: 在目标节点上触发，称为“目标阶段”（target phase）

第三阶段: 从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）

事件的代理 : 由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处

理多个子元素的事件。这种方法叫做事件的代理（delegation）

Event 对象

事件发生以后，会产生一个事件对象，作为参数传给监听函数。浏览器原生提供一个Event对象，所有的事件都是这个对象的实例

(1)参数

参数1 : 事件名称

参数2 : 配置对象(bubbles, 默认false, 事件对象是否冒泡, cancelable, 默认false, 是否可取消)

(2)属性

bubbles: 是否会冒泡

eventPhase: 事件目前所处的阶段 (0 事件未发生 1 处于捕获阶段 2 到达目标节点 3 处于冒泡阶段)

cancelable: 是否可以取消

target: 触发事件的节点

isTrusted: 是否由用户产生

detail: 只有浏览器的 UI （用户界面）事件才具有。该属性返回一个数值，表示事件的某种信息。具体含义与事件类型相关

(3)方法

preventDefault() : 取消浏览器对当前事件的默认行为

stopPropagation() : 阻止事件在 DOM 中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上其他的

事件监听函数

stopImmediatePropagation() : 阻止同一个事件的其他监听函数被调用，不管监听函数定义在当前节点还是其他节点。也就是说,

该方法阻止事件的传播，比Event.stopPropagation()更彻底

鼠标事件

(1)种类

click : 按下鼠标（通常是按下主按钮）时触发

dblclick : 在同一个元素上双击鼠标时触发

mousedown : 按下鼠标键时触发

mouseup : 释放按下的鼠标键时触发

mousemove : 在一个节点内部移动时触发

wheel : 滚动鼠标的滚轮时触发

(2)MouseEvent 接口

构造函数接受两个参数, 参数1事件类型, 参数2配置对象

属性 :

altKey / ctrlKey / metaKey / shiftKey 是否按下对应键

button 按下了鼠标哪个键 (0 左键或没有初始化这个属性 1 中间/滚轮 2 右键)

buttons 同时按下哪个键 , 返回二进制和(1 左键 2 右键 4 中键)

方法 :

getModifierState() 判断有没有按下特定的功能键

(3)WheelEvent 接口

鼠标滚轮事件的实例对象, 浏览器原生提供WheelEvent()构造函数，用来生成WheelEvent实例

键盘事件

(1)种类

keydown : 按下键盘触发

keypress : 按下有值的键触发, 不包括( Ctrl、Alt、Shift、Meta), 有值键先触发keydown事件, 再触发本事件

keyup : 松开键盘时触发

(2)KeyboardEvent 接口

构造函数接受两个参数, 参数1事件类型, 参数2配置对象

属性 :

code 返回一个字符串，表示当前按下的键的字符串形式

key 返回一个字符串，表示按下的键名

location 返回一个整数，表示按下的键处在键盘的哪一个区域

repeat 返回一个布尔值，代表该键是否被按着不放，以便判断是否重复这个键

方法 :

getModifierState() 判断有没有按下特定的功能键

进度事件

(1)种类

abort 外部资源中止加载时（比如用户取消）触发

error 由于错误导致外部资源无法加载时触发

load 加载成功时触发

loadstart 开始加载时触发

loadend 停止加载时触发

progress 加载过程中不断触发

timeout 加载超时触发

(2)ProgressEvent 接口

构造函数接受两个参数, 参数1事件类型, 参数2配置对象

配置项 :

lengthComputable 布尔值，表示加载的总量是否可以计算，默认是false

loaded 整数, 表示已加载的量

total 整数, 表示需要加载的总量

表单事件

(1)种类

input事件值发生变化时触发

select事件选中文本时触发

change事件失去焦点时触发

invalid事件表单元素的值不满足校验条件触发

reset事件表单重置

submit事件表单提交

(2)InputEvent 接口

构造函数接受两个参数, 参数1事件名称, 参数2配置对象

属性 :

data 返回字符串, 表示变动的内容

inputType 返回字符串, 表示发生变更的类型(insertText / insertFromPaste)

dataTransfer 接受粘贴内容或拖拽内容时有效

触摸事件

(1)种类

touchstart 开始触摸时触发

touchend 不再接触屏幕时触发

touchmove 移动触摸点时触发

touchcancel 触摸点取消时触发

(2)Touch 接口

代表单个触摸点

构造函数接受一个配置对象参数

属性 :

identifier 返回整数, 表示触摸点唯一ID

force 0 无压力 1 硬件识别的最大压力

target 返回一个元素节点, 触摸发生时所在的元素节点

(3)TouchList 接口

代表一组触摸点的集合

通过TouchEvent.touches、TouchEvent.changedTouches、TouchEvent.targetTouches这几个属性获取

length属性, 表示成员数量

item()方法, 返回指定位置的成员, 参数为位置编号

(4)TouchEvent 接口

构造函数接受两个参数, 参数1事件类型, 参数2配置对象

属性 :

changedTouches 返回TouchList实例, 本次触摸事件的触摸点

touches 返回TouchList实例, 仍然处于活动状态的触摸点

targetTouches 返回TouchList实例, 触摸事件目标元素节点内部, 处于活动的触摸点

拖拉事件

(1)DragEvent 接口

拖拉事件都继承DragEvent接口

构造函数接受两个参数, 参数1事件类型, 参数2配置对象

(2)DataTransfer 接口

拖拉事件的实例有一个dataTransfer属性, 读写需要传递的数据

属性 :

dropEffect : 设置被拖拉节点时的效果

effectAllowed : 本次拖拉中允许的效果

files : 一组本地文件

types : 拖拉的数据格式

方法 :

setData() 设置拖拉事件的数据

getData() 返回指定类型的数据

clearData() 删除事件所带指定类型的数据

setDragImage() 自定义拖动时图片

资源事件

beforeunload 资源将要卸载前触发

unload 窗口关闭或者document对象将要卸载时触发

load 页面或资源加载成功时触发, 从缓存中加载不会触发

error 页面或资源加载失败时触发

session 历史事件

pageshow 页面加载时触发(persisted属性 false为第一次加载, true为从缓存中加载)

pagehide 离开当前页面触发(persisted属性 false不保存在缓存中, true保存在缓存中)

popstate history对象的当前记录发生显式切换时触发

hashchange URL的hash部分发生变化时触发

网页状态事件

DOMContentLoaded 网页下载解析完成后触发, 比load事件早

readystatechange 当 Document 对象和 XMLHttpRequest 对象的readyState属性发生变化时触发(loading / interactive / complate)

窗口事件

scroll 在文档或文档元素滚动时触发

resize 改变浏览器窗口时触发

fullscreenchange 进入/退出全屏时触发

fullscreenerror 无法切换到全屏时触发

剪贴板事件

cut 将选中的内容从文档中移除，加入剪贴板时触发

copy 复制动作时触发

paste 剪贴板内容粘贴到文档后触发

焦点事件

focus 获得焦点后触发，该事件不会冒泡

blur 失去焦点后触发，该事件不会冒泡

focusin 将要获得焦点时触发，发生在focus事件之前。该事件会冒泡

focusout 将要失去焦点时触发，发生在blur事件之前。该事件会冒泡

CustomEvent 接口

用于生成自定义的事件实例

如果需要在触发事件的同时，传入指定的数据，就可以使用 CustomEvent 接口生成的自定义事件对象

构造函数接受两个参数, 参数1事件名称, 参数2配置对象(detail 事件附带数据)

GlobalEventHandlers 接口

只能为每个事件指定一个回调函数，并且无法指定事件触发的阶段

各种 HTML 元素、document对象、window对象上面都可以使用GlobalEventHandlers接口提供的属性

属性 :

onabort 停止加载发生时触发, 一般只用在<img>元素上

onerror JavaScript 的运行时错误, 触发window.onerror() / 资源加载错误, 触发元素的onerror属性

onload 元素完成加载时触发, window对象所有资源加载完成触发 / <img><video> 加载开始时, 触发onloadstart

onfocus 获得焦点触发

onblur 失去焦点时触发

onscroll 页面元素滚动时触发

oncontextmenu 按下右键触发, 返回false禁止右键菜单

onshow 右键菜单显示时触发

15. 浏览器模型

概述

嵌入网页的方法 :

(1)<script> 元素直接嵌入代码

(2)<script> 标签加载外部脚本(integrity属性, 写入hash签名, 验证脚本一致性)

(3)事件属性网页元素的事件属性(onclick), 可以写入JavaScript 代码

(4)URL协议 URL支持javascript: 协议, 在URL的位置写入代码, 使用的时候即执行

建议 : <script>标签都放在页面底部, 防止外部脚本加载时间长, 造成页面假死状态

正常网页加载流程 :

(1)浏览器一边下载 HTML 网页，一边开始解析

(2)解析过程中，浏览器发现<script>元素，就暂停解析，把网页渲染的控制权转交给 JavaScript 引擎

(3)如果<script>元素引用了外部脚本，就下载该脚本再执行，否则就直接执行代码

(4)JavaScript 引擎执行完毕，控制权交还渲染引擎，恢复往下解析 HTML 网页

defer属性(保证执行顺序)

解决脚本文件下载阻塞网页渲染的问题, 延迟脚本执行, 等到DOM加载生成后, 再执行

async属性

解决脚本文件下载阻塞网页渲染的问题, 使用另一个进程下载脚本, 下载时不会阻塞渲染

脚本的动态加载

['a.js', 'b.js'].forEach(function(src) {
  var script = document.createElement('script');
  script.src = src;
  script.async = false;
  document.head.appendChild(script);
});

动态生成不会造成浏览器假死, async设为false, 即可保证执行顺序

window对象

指当前浏览器窗口, 也是当前页面顶层对象, 一个变量未声明, 默认为顶层对象的属性

对象属性 :

name 当前浏览器窗口的名称

closed 窗口是否关闭

opener 打开当前窗口的父窗口

self / window 指向窗口本身

frames 页面内所有框架窗口, 实际上是window对象的别名

length 当前网页包含框架总数

组件属性(visible 是否可见) :

locationbar 地址栏对象

menubar 菜单栏对象

scrollbars 窗口的滚动条对象

toolbar 工具栏对象

statusbar 状态栏对象

personalbar 用户安装的个人工具栏对象

全局对象属性 :

location 获取当前窗口的URL信息

navigator 获取环境信息

history 浏览器历史

localStorage 本地存储的localStorage数据

sessionStorage 本地存储的sessionStorage数据

console 操作控制台

screen 屏幕信息

方法 :

alert() 通知信息

prompt() 获取用户输入信息

confirm() 征询用户是否同意

open() 新建新窗口

close() 关闭当前窗口

stop() 停止加载图像, 视频

moveTo() 移动窗口到指定位置

moveBy() 移动窗口到相对位置

scrollTo() 将文档滚动到指定位置

scrollBy() 将网页滚动指定距离

print() 弹出打印对话框

focus() 激活窗口, 获得焦点

blur() 将焦点从窗口移除

getSelection() 返回Selection对象, 表示选中的文本

requestAnimationFrame() 推迟到浏览器下一次重流时执行

requestIdleCallback() 推迟到系统资源空闲时执行

Navigator 对象

指向一个包含浏览器和系统信息的 Navigator 对象

属性 :

userAgent 浏览器的厂商和版本信息

plugins 浏览器安装的插件

platform 用户的操作系统信息

onLine 在线 / 离线, 在线触发online事件, 离线触发onoffline事件

language 浏览器首选语言

languages 用户可以接受的语言

geolocation 用户地理位置信息

cookieEnabled cookie功能是否打开

connection 当前网络连接的相关信息

sendBeacon()方法异步发出请求, 参数1目标服务器URL, 参数2发送的数据

服务器保存在浏览器的一小段文本信息，一般大小不能超过4KB。浏览器每次向服务器发出请求，就会自动附上这段信息

元数据(名称, 值, 过期时间, 所属域名, 生效的路径)

用途 :

保存登录、购物车等需要记录的信息

保存用户的偏好，比如网页的字体大小、背景色等

记录和分析用户行为

生成 :

服务器如果希望在浏览器保存 Cookie，就要在 HTTP 回应的头信息里面，放置一个Set-Cookie字段

发送 :

使用 HTTP 头信息的Cookie字段

属性 :

Expires 指定具体的到期时间, 不设置, 则只在当前会话有效, 关闭窗口, 即删除

Max-Age 从现在开始, Cookie存在的秒数, 优先生效

Domain 哪些域名需要附带cookie, 不设置, 当前域名

Path 哪些路径需要附带cookie, 前提域名一致

Secure 加密协议HTTPS下附带, 通信为HTTPS协议自动打开

HttpOnly 指定该 Cookie 无法通过 JavaScript 脚本拿到

SameSite 限制第三方cookie (Strict , Lax , None)

删除一个现存 Cookie 的唯一方法，是设置它的expires属性为一个过去的日期

同源限制

同源 : 协议 / 域名 / 端口相同

目的 : 保证用户信息的安全，防止恶意的网站窃取数据

非同源限制范围 :

无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

无法接触非同源网页的 DOM

无法向非同源地址发送 AJAX 请求

规避限制 :

cookie 设置document.domain, 共享cookie

片段识别符 URL的#号后的部分, 可以把信息写入父/子窗口的片段标识符

window.postMessage 允许跨窗口通信, 不论是否同源, 参数1信息内容, 参数2URL地址或*向所有窗口发送

LocalStorage 子窗口将父窗口发来的消息, 写入自己的LocalStorage

JSONP 服务器与客户端跨源通信常用方法, 没有兼容问题, 只能发GET请求

WebSocket 支持跨源通信

CORS 跨源资源分享, 跨源AJAX请求根本解决方法, 允许任何类型请求

CORS通信

跨源资源分享, 允许浏览器向跨域的服务器，发出XMLHttpRequest请求，从而克服了 AJAX 只能同源使用的限制

简单请求

条件 :

(1)请求方法为HEAD, GET , POST

(2)HTTP头信息不超出以下字段(Accept, Accept-Language, Content-Language, Last-Event-ID, Content-Type限三个值)

流程 :

请求头信息添加Origin字段

响应头Access-Control-Allow-Origin, 为请求时Origin值或为*, 即在许可范围内

非简单请求

正式通信前, 先发起OPTIONS预请求, 询问服务器当前域名是否在许可名单中, 以及支持哪些HTTP方法和头信息字段

Storage 接口

用于脚本在浏览器保存数据, 以键值对的形式存储

sessionStorage 保存的数据用于浏览器的一次会话, 会话结束, 数据清空

localStorage 保存的数据长期存在

length属性保存数据项的个数

方法 :

setItem() 存入数据, 参数1键名, 参数2值

getItem() 读取数据, 参数键名

removeItem() 清除指定键名

clear() 清除所有保存的数据

存储的数据方法变化时, 触发storage事件

History 对象

当前窗口的浏览历史

属性 :

length 当前窗口访问过的网址数量

state History 堆栈最上层的状态值

方法 :

back() 移动到上一个网址

forward() 移动到下一个网址

go() go(1)相当于forward(), go(-1) 相当于back()

pushState() 在历史中添加一条记录

同一个文档的浏览历史出现变化时, 触发popstate事件

Location 对象

提供 URL 相关的信息和操作方法

属性 :

href 整个URL, 写入新的URL地址, 会立刻跳转

protocol 当前URL的协议

pathname URL的路径部分

search 查询字符串部分, 从问号开始

hash 片段字符串部分

origin URL协议, 主机名, 端口

方法 :

assign() 接受URL字符串为参数, 立刻跳转

replace() 作用同上, 会在浏览历史删除当前网址

reload() 重新加载当前网址

URL 对象

JavaScript 提供四个 URL 的编码/解码方法

encodeURI() 转码整个URL

encodeURIComponent 转码URL组成部分, 包括元字符

decodeURI() 解码整个URL

decodeURIComponent() 解码URL片段

实例属性与Location对象属性基本一致

URL.createObjectURL() 为上传/下载的文件 ,流媒体文件生成一个URL字符串, 代表File对象或Blob对象的URL

URL.revokeObjectURL() 释放上一个方法生成的URL实例

URLSearchParams 解析处理URL的查询字符串, 问号后面的部分

ArrayBuffer 对象

操作内存

Blob 对象

操作二进制文件

File 对象

构造函数接受三个参数, 参数1数组, 文件内容, 参数2文件名, 参数3配置对象(type, MIME类型, lastModified 时间戳, 上次修改时间)

属性 :

lastModified 最后修改时间

name 文件名或文件路径

size 文件大小

type 文件的MIME类型

FileReader 对象

读取File对象或Blob对象所包含的文件内容

FormData 对象

通过脚本构造/编辑表单, 发送至服务器

表单属性 :

novalidate 关闭浏览器的自动校验

enctype 编码格式

GET方法该属性无效, 以URL的查询字符串发出

POST方法默认以application/x-www-form-urlencoded格式发送

text/plain 以纯文本格式发送

multipart/form-data 混合格式发送

方法 :

get() 获取指定键名对应的值

set() 设置指定键名的值

delete() 删除指定键名

append() 添加一个键值对

has() 是否有指定键名

keys() 用于遍历所有键名

values() 用于遍历所有键值

entries() 用于遍历键值对

数据校验 :

required / minlength / maxlength / min / max

控件通过验证, 匹配到:valid的CSS伪类; 没通过验证, 匹配到:invalid的CSS伪类

checkValidity() 手动触发校验, true通过校验

setCustomValidity() 自定义校验失败时的报错信息

willValidate属性该控件是否会在提交时进行校验

validationMessage属性返回字符串, 没通过校验时, 浏览器提示文本

validity属性返回ValidityState对象, 包含当前校验状态的信息

IndexedDB

浏览器提供的本地数据库

特点 :

键值对存储对象仓库中, 数据以键值对的形式保存

异步不会锁死浏览器

支持事务失败即回滚

同源限制每一个数据库对应创建它的域名, 网页只能访问自身域名下的数据库

存储空间大一般不少于250M

支持二进制存储

概念 :

数据库 IDBDatabase 对象 , 相关数据的容器

对象仓库 IDBObjectStore 对象, 每个数据库包含若干对象仓库, 类似关系型数据库表格

索引 IDBIndex 对象, 加速数据检索

事务 IDBTransaction 对象, 提供error, abort, complete事件

操作请求 IDBRequest 对象

指针 IDBCursor 对象

主键集合 IDBKeyRange 对象

Web Worker

作用 : 创建多线程环境, 允许主线程创建Worker线程

属性/方法 :

name worker名称, 由构造函数指定

onmessage 指定message事件监听函数

onmessageerror 发送的数据无法序列化成字符串时, 触发

close() 关闭worker线程

postMessage() 向产生这个worker的线程发送消息

importScripts 加载JS脚本

基本用法 :

主线程 :

worker构造函数, 参数为脚本文件, 必须来自网络

postMessage() 向worker发消息

onmessage 指定监听函数, 接受子线程发回来的消息

terminate() 关闭

worker线程 :

postMessage() 向主线程发消息

onmessage 指定监听函数, 接受主线程发来的消息

close() 关闭自身

错误处理 : 主线程可以监听worker是否发生错误

注意 :

同源限制分配的脚本文件, 必须与主线程脚本文件同源

DOM限制 worker线程所在的全局对象, 无法读取主线程所在网页的DOM对象, 可以使用navigator对象和location对象

全局对象限制全局对象WorkerGlobalScope, 不同于网页全局对象Window, 很多接口拿不到

通信联系 worker线程和主线程不在同一个上下文, 不能直接通信, 必须通过消息完成

脚本限制 worker线程不能执行alert, confirm方法

文件限制 worker线程无法读取本地文件, 所加载的脚本, 必须来自网络

本文地址：https://blog.csdn.net/WP081600/article/details/111319297

JavaScript 学习笔记

JavaScript教程参考: https://wangdoc.com/javascript/index.html

1. 变量提升

2. 标识符

3. 数据类型(七种 ES6)

4. 值类型

5. 字符集

6. Base64 转码

7. object对象

8. 函数

9. 错误类型

10. JSON

11. 实例对象

12. 异步操作

13. DOM

14. 事件

15. 浏览器模型

联想小新Air Pro值得买吗？联想小新Air Pro航海王定制版笔记本电脑全面深度评测图解

JavaScript观察者模式(publish/subscribe)原理与实现方法

昂达小马41值得买吗？昂达小马41笔记本全面深度体验评测图解

JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法

机器学习python实战之手写数字识别

ThinkPad P50值得买吗？联想ThinkPad P50笔记本全面详细评测图解

机器学习python实战之决策树

Acer宏碁21寸双1080显卡笔记本性能拆解图文评测

10种企业营销策略法则，您学习了吗？

JavaScript中 ES6变量的结构赋值