全栈学习的知识点梳理（一）

 目录

一、模块化编程思想：export  import；

二、class的使用及静态方法定义：stataic；

三、Promise的使用（异步处理、then、catch、resolve、reject；）

1、Promise对象有以下两个特点。

2、Promise基本用法

3、Promise.prototype.then()

4、Promise.prototype.catch()

四、XMLHttpRequest 的使用及封装

（一）、方法

 1、open（）

2、send（）

（二）、属性

1、readyState

2、onreadystatechange

3、responseType

4、response

5、status；

五、数组的操作（主要复习了join和push）

1. join (原数组不受影响)

2. split (原数组不受影响)

 3、push（数组的增删操作会直接改变原数组）

六、安全过滤（encodeURI()和encodeURIComponent()）

---

一、模块化编程思想：export  import；

 ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

参考文档：

http://t.csdn.cn/obkDmhttp://t.csdn.cn/obkDm

二、class的使用及静态方法定义：stataic；

类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。

class Foo {
  static classMethod() {
    return 'hello';
  }
}

Foo.classMethod() // 'hello'

var foo = new Foo();
foo.classMethod()
// TypeError: foo.classMethod is not a functio

上面代码中，Foo类的classMethod方法前有static关键字，表明该方法是一个静态方法，可以直接在Foo类上调用（Foo.classMethod()），而不是在Foo类的实例上调用。如果在实例上调用静态方法，会抛出一个错误，表示不存在该方法。

注意，如果静态方法包含this关键字，这个this指的是类，而不是实例。

class Foo {
  static bar() {
    this.baz();
  }
  static baz() {
    console.log('hello');
  }
  baz() {
    console.log('world');
  }
}

Foo.bar() // hello

上面代码中，静态方法bar调用了this.baz，这里的this指的是Foo类，而不是Foo的实例，等同于调用Foo.baz。另外，从这个例子还可以看出，静态方法可以与非静态方法重名。

父类的静态方法，可以被子类继承。

class Foo {
  static classMethod() {
    return 'hello';
  }
}

class Bar extends Foo {
}

Bar.classMethod() // 'hello'

上面代码中，父类Foo有一个静态方法，子类Bar可以调用这个方法。

静态方法也是可以从super对象上调用的。

class Foo {
  static classMethod() {
    return 'hello';
  }
}

class Bar extends Foo {
  static classMethod() {
    return super.classMethod() + ', too';
  }
}

Bar.classMethod() // "hello, too"

 参考文档：Class 的基本语法 - ECMAScript 6入门 (ruanyifeng.com)https://es6.ruanyifeng.com/?search=class%E7%9A%84%E4%BD%BF%E7%94%A8%E5%8F%8A%E9%9D%99%E6%80%81%E6%96%B9%E6%B3%95%E5%AE%9A%E4%B9%89%EF%BC%9Astataic%EF%BC%9B&x=0&y=0#docs/class%23%E9%9D%99%E6%80%81%E6%96%B9%E6%B3%95

三、Promise的使用（异步处理、then、catch、resolve、reject；）

1、Promise对象有以下两个特点。

（1）对象的状态不受外界影响。

  Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。

  Promise对象的状态改变，只有两种可能：从 pending 变为 fulfilled 和从 pending 变为rejected。

2、Promise基本用法

ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。

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

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

（1）resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

（2）reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

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

then方法可以接受两个回调函数作为参数。

第一个回调函数是Promise对象的状态变为resolved时调用，

第二个回调函数是Promise对象的状态变为rejected时调用。

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

3、Promise.prototype.then()

        Promise 实例具有then方法，也就是说，then方法是定义在原型对象Promise.prototype上的。它的作用是为 Promise 实例添加状态改变时的回调函数。前面说过，then方法的第一个参数是resolved状态的回调函数，第二个参数是rejected状态的回调函数，它们都是可选的。

  then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。

getJSON("/posts.json").then(function(json) {
  return json.post;
}).then(function(post) {
  // ...
});

上面代码中，getJSON是对 XMLHttpRequest 对象的封装，用于发出一个针对 JSON 数据的 HTTP 请求，并且返回一个Promise对象。

4、Promise.prototype.catch()

Promise.prototype.catch()方法是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数。

getJSON('/posts.json').then(function(posts) {
  // ...
}).catch(function(error) {
  // 处理 getJSON 和 前一个回调函数运行时发生的错误
  console.log('发生错误！', error);
});

getJSON()方法返回一个 Promise 对象，如果该对象状态变为resolved，则会调用then()方法指定的回调函数；如果异步操作抛出错误，状态就会变为rejected，就会调用catch()方法指定的回调函数，处理这个错误。另外，then()方法指定的回调函数，如果运行中抛出错误，也会被catch()方法捕获。

下面是一个例子，promise抛出一个错误，就被catch()方法指定的回调函数捕获。注意，上面的写法与下面两种写法是等价的。

// 写法一
const promise = new Promise(function(resolve, reject) {
  try {
    throw new Error('test');
  } catch(e) {
    reject(e);
  }
});
promise.catch(function(error) {
  console.log(error);// Error: test
});

// 写法二
const promise = new Promise(function(resolve, reject) {
  reject(new Error('test'));
});
promise.catch(function(error) {
  console.log(error);// Error: test
});

Promise 对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。 

getJSON('/post/1.json').then(function(post) {
  return getJSON(post.commentURL);
}).then(function(comments) {
  // some code
}).catch(function(error) {
  // 处理前面三个Promise产生的错误
});

上面代码中，一共有三个 Promise 对象：一个由getJSON()产生，两个由then()产生。它们之中任何一个抛出的错误，都会被最后一个catch()捕获。 

参考文档：

Promise 对象 - ECMAScript 6入门 (ruanyifeng.com)https://es6.ruanyifeng.com/#docs/promise

四、XMLHttpRequest 的使用及封装

方法：open()、send()，

属性：readyState、onreadystatechange、responseType、response、status；

（一）、方法

 1、open（）

        XMLHttpRequest.open() 方法初始化一个新创建的请求，或重新初始化一个请求。

        语法：

xhrReq.open(method, url);
xhrReq.open(method, url, async);
xhrReq.open(method, url, async, user);
xhrReq.open(method, url, async, user, password);

        主要参数（后三个为可选参数）：

   method：要使用的 HTTP 方法，如 GET、POST、PUT、DELETE 等。

   url：  一个 DOMString 表示要向其发送请求的 URL。

2、send（）

   XMLHttpRequest.send() 方法用于发送 HTTP 请求。如果是异步请求（默认为异步请求），则此方法会在请求发送后立即返回；如果是同步请求，则此方法直到响应到达后才会返回。XMLHttpRequest.send() 方法接受一个可选的参数，其作为请求主体；如果请求方法是 GET 或者 HEAD，则应将请求主体设置为 null。

        如果没有使用 setRequestHeader() 方法设置 Accept 头部信息，则会发送带有 "* / *" 的Accept 头部。

语法

XMLHttpRequest.send(body)

参数

body （可选）：如果 body 没有指定值，则默认值为 null。

返回值

undefined.

案例：GET

var xhr = new XMLHttpRequest();
xhr.open('GET', '/server', true);

xhr.onload = function () {
   // 请求结束后，在此处写处理代码
};

xhr.send(null);
// xhr.send('string');
// xhr.send(new Blob());
// xhr.send(new Int8Array());
// xhr.send(document);

案例：POST

var xhr = new XMLHttpRequest();
xhr.open("POST", '/server', true);

//发送合适的请求头信息
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xhr.onload = function () {
    // 请求结束后，在此处写处理代码
};
xhr.send("foo=bar&lorem=ipsum");
// xhr.send('string');
// xhr.send(new Blob());
// xhr.send(new Int8Array());
// xhr.send(document);

（二）、属性

1、readyState

        XMLHttpRequest.readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态。一个 XHR 代理总是处于下列状态中的一个：

值	状态	描述
0	UNSENT	代理被创建，但尚未调用 open() 方法。
1	OPENED	open() 方法已经被调用。
2	HEADERS_RECEIVED	send() 方法已经被调用，并且头部和状态已经可获得。
3	LOADING	下载中；responseText 属性已经包含部分数据。
4	DONE	下载操作已完成。

 

2、onreadystatechange

        当 readyState 属性发生变化时，调用的 event handler。

语法

   XMLHttpRequest.onreadystatechange = callback;

取值

        当 readyState 的值改变的时候，callback 函数会被调用。

示例

var xhr= new XMLHttpRequest(),
    method = "GET",
    url = "https://developer.mozilla.org/";

xhr.open(method, url, true);
xhr.onreadystatechange = function () {
  if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText)
  }
}
xhr.send();

 

3、responseType

        responseType 是一个枚举字符串值，用于指定响应中包含的数据类型。它还允许作者更改响应类型。如果将 responseType 的值设置为空字符串，则会使用 text 作为默认值。

语法

        var type = XMLHttpRequest.responseType;

        XMLHttpRequest.responseType = type;

值

        Global_Objects/String类型的值，指定响应包含的数据类型。它可以采用以下值：

""

        空的 responseType 字符串与默认类型 "text" 相同。

"arraybuffer"

        response 是一个包含二进制数据的 JavaScript ArrayBuffer。

"blob"

        response 是一个包含二进制数据的 Blob对象。

"document"

        response 是一个 HTML Document 或 XML XMLDocument，根据接收到的数据的 MIME 类型而定。

"json"

        response 是通过将接收到的数据内容解析为 JSON 而创建的 JavaScript 对象。

"text"

        response 是 DOMString 对象中的文本。

"ms-stream" 非标准

        response 是流式下载的一部分；此响应类型仅允许用于下载请求，并且仅受 Internet Explorer 支持。

4、response

        XMLHttpRequest 的 response 属性返回响应的正文。返回的类型为 ArrayBuffer、Blob、Document、JavaScript Object 或字符串中的一个。这取决于请求的 responseType 属性。

值
        一个对象，其类型取决于 responseType 的值。你可以尝试设置 responseType 的值，以便请求特定的类型的数据。 responseType 要在调用 open() 初始化请求之后以及在调用 send() 发送请求到服务器之前设置。

        如果请求尚未完成或未成功，则取值是 null。例外的，读取文本数据时如果将 responseType 的值设置成 "text" 或空字符串（""）而请求状态还是 LOADING readyState（3）时，response 包含到目前为止该请求已经取得的内容。

示例
此示例提供了一个方法——load()，它可以从服务器加载和处理页面。它通过创建一个 XMLHttpRequest 对象并为 readystatechange 事件创建一个监听器。这样的话，当 readyState 变成 DONE（4）时就会获取 response 并将其传递给 load() 中提供的回调函数。

返回的内容会被作为原始文本数据处理（因为这里没有覆盖 responseType 的默认值）。

const url = 'somePage.html'; // 一个本地页面

function load(url, callback) {
  const xhr = new XMLHttpRequest();

  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4) {
      callback(xhr.response);
    }
  }

  xhr.open('GET', url, true);
  xhr.send('');
}

5、status；

        只读属性 XMLHttpRequest.status 返回了 XMLHttpRequest 响应中的数字状态码。status 的值是一个无符号短整型。在请求完成前，status 的值为 0。值得注意的是，如果 XMLHttpRequest 出错，浏览器返回的 status 也为 0。status 码是标准的 HTTP status codes。举个例子，status 200 代表一个成功的请求。如果服务器响应中没有明确指定 status 码，XMLHttpRequest.status 将会默认为 200。

示例

var xhr = new XMLHttpRequest();
console.log('UNSENT', xhr.status);

xhr.open('GET', '/server', true);
console.log('OPENED', xhr.status);

xhr.onprogress = function () {
  console.log('LOADING', xhr.status);
};

xhr.onload = function () {
  console.log('DONE', xhr.status);
};

xhr.send(null);

/**
 * 输出如下：
 *
 * UNSENT（未发送）0
 * OPENED（已打开）0
 * LOADING（载入中）200
 * DONE（完成）200
 */

参考文档：

XMLHttpRequest - Web API 接口参考 | MDN (mozilla.org)https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

五、数组的操作（主要复习了join和push）

1. join (原数组不受影响)

​ 该方法可以将数组里的元素,通过指定的分隔符,以字符串的形式连接起来。
 返回值:返回一个新的字符串

//将数组用 - 符号连接起来
let arr = [1,2,3,4,5];
let str = arr.join('-');
console.log(str)//str = 1-2-3-4-5;

2. split (原数组不受影响)

​ 该方法是用过指定的分隔符,将字符串分割成数组。
 返回值:返回一个新的数组

let str = wqz-ttj；
let arr = str.split('-');
console.log(arr);// arr=['wqz','ttj'];

 3、push（数组的增删操作会直接改变原数组）

 该方法可以在数组的最后面,添加一个或者多个元素 arr.push(值)
 返回值:返回的是添加元素后数组的长度.

其余的数组常见方法，请参考文档：

http://t.csdn.cn/swg2chttp://t.csdn.cn/swg2c

六、安全过滤（encodeURI()和encodeURIComponent()）

encodeURI 、encodeURIComponent 编码，对应的解码是decodeURI及decodeURIComponent；

encodeURI()和encodeURIComponent()都是Javascript中对URL编码的函数。
区别：
        encodeURI()着眼于对整个URL进行编码，特殊含义的符号"; / ? : @ & = + $ , #“不进行编码
        encodeURIComponent()对URL的组成部分进行个别编码，所以”; / ? : @ & = + $ , #"在这里是可以进行编码

测试代码：

<html>
<body>

<script type="text/javascript">

document.write(encodeURI("http://www.w3school.com.cn")+ "<br />")
document.write(encodeURI("http://www.w3school.com.cn/My first/")+ "<br />")
document.write(encodeURI(",/?:@&=+$#")+ "<br />")

document.write(encodeURIComponent("http://www.w3school.com.cn")+ "<br />")
document.write(encodeURIComponent("http://www.w3school.com.cn/My first/")+ "<br />")
document.write(encodeURIComponent(",/?:@&=+$#")+ "<br />")
</script>

</body>
</html>

编译结果：

//使用encodeURI

http://www.w3school.com.cn
http://www.w3school.com.cn/My%20first/
,/?:@&=+$#

//使用encodeURIComponent

http%3A%2F%2Fwww.w3school.com.cn
http%3A%2F%2Fwww.w3school.com.cn%2FMy%20first%2F
%2C%2F%3F%3A%40%26%3D%2B%24%23
 

参考文档：

http://t.csdn.cn/1oLtIhttp://t.csdn.cn/1oLtI

总结：

1，模块化编程思想：export  import；
2，class的使用及静态方法定义：stataic；
3，Promise的使用：异步处理、then、catch、resolve、reject；
4，XHR的使用及封装：方法：open()、send()，属性：readyState、onreadystatechange、responseType、response、status；
5，数组的操作：push、join等数组常用方法要熟悉；
6，安全过滤：encodeURI 、encodeURIComponent 编码，对应的解码是decodeURI及decodeURIComponent；

7，数据的打印和观察，学会打印数据并分析数据，去拿自己要的部分；