日常学习知识点总结（ES6篇）

let 声明：

1、存在暂时性死区，没有预解析，不存在变量提升；必须先定义，再使用

2、不能重复定义变量

3、for循环，for(let i=0;i<10;i++){let i = 9;}  //两个i属于不同作用域，所以并不重复

const声明：

1、const定义变量不能修改（基本数据类型，string，number，bool），引用型可以修改（数组，对象）

2、const定义变量，必须有值，不能后赋值，不能修改

块级作用域：

{  // 块级};

{{{ let a = 12;}}};

if(  ){  XXXX; };

for(  ){    };

while(  ){  }

之前没有块级作用域，用IIFE（立即执行函数）:

(function(){

//TODO

})( )

类Class：

1、ES6里面class无提升功能，ES5里用函数模拟可以，默认函数提升。

2、ES6，this比之前轻松多了

this.showName = this.showName.bind(this);

矫正this：fn.call(this指向，arg1,arg2……)

fn.apply(this指向，[arg1,arg2……])

fn.bind()

3、class里面取值函数（getter），存值函数（setter）

4、静态方法（static），就是类身上方法。static aaa(){  },调用方式：父类.aaa();

// 子类 继承自 Animal

    class Dog extends Animal {

        master = ''; // Dog 比父类Animal 多了新属性master

        constructor(name, master) {

            super(name); // 调用 super() 代替父类构造函数,初始化与父类共同的属性name

            this.master = master; // 初始化子类新属性master

        }

  }

symbol:

1、新的原始数据类型，表示独一无二的值，用来定义独一无二的对象属性名。

2、定义：可以通过Symbol()函数来生成，Symbol()函数可以接收一个字符串作为参数。

3、使用场景：因为symbol的值均不相等，所以Symbol类型的值作为对象属性名，不会出现重复；代码形成强耦合的某一个具体的字符串。

4、获取：Object.getOwnPropertySymbol()方法获取指定对象的所有Symbols属性名。

注意点：Symbol不能用new；

            Symbol()返回的是一个唯一值；

              Symbol是一个单独的数据类型，就叫symbol，基本类型；

            如果Symbol作为key,用for-in循环，出不来。

promise对象：

1、用于表示一个异步操作的最终结果是成功（或是失败），及其结果。

2、几种状态：a).pennding---等待状态，既不成功也不失败

b).fulfilled---操作成功状态

c).rejected---操作失败状态

3、then方法：任何一种状态出现，then()方法就会被调用；该方法包含两个参数，成功执行与失败执行的

4、方法：promise.resolve( ),将现有的东西转化为一个promise对象，resolve状态，成功的状态

promise.reject( ),将现有的东西转化为一个promise对象，reject状态，失败的状态

promise.all([p1,p2,p3]),把promise打包，扔到一个数组里面仍是一个promise对象。所有的promise对象，都是resolve成功状态

promise.race([p1,p2,p3]),只要有一个成功，就返回

5、个人使用方法：  new  Promise(  ).then( res => {  }).catch(err => {  })

Iterator遍历器：

1、定义：Iterator遍历器是一种接口，为各种不同的数据结构提供统一的访问机制。

2、任何数据结构只要部署Iterator接口，就可以完成遍历操作。

3、作用：a).为各种数据结构，提供一个统一的，简便的访问接口。

b).使得数据结构的成员能够按某种次序排列

c).ES6创造了一种新的遍历命令for...of循环

4、原生具备Iterator接口的数据结构：数组，类似数组的对象，Set结构，Map结构。

generator函数：

1、生成器，解决异步问题，深层嵌套的问题async

2、定义：function * gen( ){

  yield  'welcome';   

    yield 'to';

    return 'XXXXX';

}

      调用：let g1 = gen();

g1.next(); //{value:'welcome',done:false}

g1.next(); ///{value:'to',done:true}

3、for ……of自动遍历generator，return的东西，它不会遍历

4、调用方法：解构赋值，let [a,...b] = gen();  扩展运算符，consle.log(...gen);  Array.from()  console.log(Array.from(gen());

5、generator结合axios数据请求

异步：不连续，上一个操作没有执行完，下一个操作照样开始。

同步：连续执行，上一个操作没有执行完，下一个没法开始。

        关于异步，解决方案：

a).回调函数，callback

定义函数的时候将另一个函数（回调函数，如resolve，reject）,作为参数传入定义的函数中。异步操作执行完毕后，再执行该回调函数，确保回调在异步操作之后执行。

function ayncreq(){

    return new Promise((resolve, reject) => {

        cwx.request({

            url: "/restapi/soa2/10398/json/LBSLocateCity",

            method: "POST",

            data: {

                Latitude: latitude,

              Longitude: longitude,

                Language: "CN"

          },

            success: function (res) {

              resolve(res)

          },

            fail: function () {

                var cbData = {};

                cbData.error = "Request_Failed";

                reject(cbData)

            }

        });

  })

}

优点：比较容易理解

缺点：高耦合，维护困难；每个任务只能指定一个回调函数；如果几个异步操作之间并灭有顺序之分，同样也要等待上一个操作执行结束再进行下一个操作。

b).promise对象

理解promise用法的关键点：then方法是promise实例的方法，即Promise.prototype上的，它的作用是为Promise实例添加状态改变时的回调函数。链式中第二个then开始，它们的resolve中的参数，是前一个then中resolve的return语句的返回值。执行顺序，Promise在实例化的时候就会执行，也就是如果Promise的实例化语句中函数console.log输出语句，它会比then中的先执行。Promise.all中传入的Promise对象的数组（假设为P1,P2）,即使P2的运行速度比P1快，Promise.all方法仍然会按照数组中的顺序将结果返回。

Promise的缺点：

当处于未完成状态时，无法确定目前处于哪一阶段；如果不设置回调函数，Promise内部的错误不会反映到外部；无法取消Promise，一旦新建它就会立即执行，无法中途取消。

c）async/await

理解：只要在函数名之前加上async关键字，就表明这个函数内部有异步操作。这个异步操作返回一个Promise对象，前面用await关键字注明。函数执行的时候，一旦遇到await，就会先执行await后面的表达式中的内部（异步），不再执行函数体后面的语句。等到异步操作执行完毕后，再自动返回到函数体内，继续执行函数体后面的语句。

async，定义异步函数：

自动把函数转换为Promise；当调用异步函数时，函数返回值会被resolve处理；异步函数内部可以使用await.

await，暂停异步函数的执行：

当使用在Promise前面时，await等待Promise完成，并返回Promise的结果；await只能和Promise一起使用，不能和callback一起使用；await只能用在async函数中

async/await并不会取代promise，因为async/await底层依然使用promise.

set数据结构：

1、特点：类似数组，但里面数据不能有重复的值

2、用法：let setArr = new  Set(['a','b']);

setArr.add('a');  //  往setArr里添加一项

setArr.delete('b');  //删除一项

setArr.has('c');  //判断setArr里面有没有此项

setArr.size;  //setArr里值的个数

setArr.clear();  //清空所有数值

3、循环：for(let [k,v]  of  setArr.entries()){    }

setArr.forEach((value,index) =>{ console.log(value,index); })

4、用途：数组去重，let  arr = [1,2,3,6,8,9,2,1,6,4,5,7,4,3,5];

let newArr = [...new Set(arr)];

console.log(newArr);// 1,2,3,4,5,6,7,8,9

5、set数据结构变成数组，[...Set]；变成数组可以使用数组的map与filter

map数据结构：

1、特点：类似Json,但是Json的键（key）只能是字符串，map的key可以是任意类型。

2、用法：let map = new  Map( );

map.set(key,value); //设置一个值

map.get(key);  //获取一个值

map .delete(key);  //删除一项

map .has(key);  //判断有没有此项

map .clear();  //清空所有数值

3、循环：for(let [key,value]  of  map){    }

解构赋值（*非常有用，特别在做数据交互，ajax）：

let [a,b,c] = [12,5,6]; 

注意：      左右两边的结构格式要保持一致。

对象结构没有次序，变量必须与属性同名

let {x:a} = {x:'1',y:'2'};  -------x:a    x是匹配模式，a是变量

应用场景：

1）变量交换

2）获取函数返回值是数组的情况

3）返回多个值，选择性的接受某几个变量

4）不知道函数返回的数组的长度是多少，只关心第一个，其余的放到一个数组中

字符串模板（`  `）：

1、优点，可以随时换行

let name = 'OOO',  let age = 15;

let str = `这个叫 ${name} ,年龄是 ${age}。`;

2、字符串查找:

str.indexOf( 要查找的)      返回索引（位置），没有找到返回-1

str.includes(要查找的)        返回值 true/false

str.startsWith(要检测的)    字符串以谁开头，用途，检测地址

str.endsWith(要检测的)      字符串以谁结尾，用途，图片.png

str.repeat(次数)        查找重复的字符串

判断浏览器：if(navigator.userAgent.includes('chrome')){

alert('是chrome')；

}else{  alert('非chrome') }

3、填充字符串;

str.padStart(整个字符串的长度，要填充的东西)    往前填充

str.padEnd(整个字符串的长度，要填充的东西)      网后填充

str.padStart(str.length+padStr.length, sadStr)

函数变化：

1、函数默认参数：function show({x=0,y=0} = { }){

console.log(x,y);

}

show();

2、函数参数默认已定义了，不能再使用let,const声明。

箭头函数：

(  ) => {  };  (  ) => { return  }

注意点：this问题，定义函数所在的对象，不再是运行时所在的对象

箭头函数没有arguments,可以用扩展符（...args）

箭头函数不能当构造函数

数组的扩展方法：

Array.from()：用于将类数组对象、可遍历的对象转为真正的数组

Array.of()：用于将一组值转换为数组

Array.find()：用于查找第一条符合要求的数据，找到返回该数据，否则返回undefined

Array.findIndex()：用于找到第一条符合要求的数组位置，找到返回index,否则返回-1

Array.includes()：检查数组中是否包含某个元素

Array.entries()：返回一个数组的迭代对象，该对象包含数组的键值对数组对象。

Array.values()：返回一个数组的迭代对象，该对象包含数组的每一项

Array.keys()：返回一个包含数组中每个索引的迭代对象

Array.fill()：方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引

对象的操作方法：

Object.is()：比较两个值是否相等

Object.assign()：用于将对象进行合并

Object.getOwnPropertyDescriptor：返回对象属性的描述

Object.keys()：返回一个数组，包含对象自身所有的可枚举属性

模块化：

通行的js模块规范主要有：CommonJS 和 AMD ES6.

es6：import / export

commonjs：require / module.export / exports

amd：require / defined

require 与 import的区别：

1）require是AMD规范引入方式

2）import是es6的一个语法标准

3）require是运行时调用，所以require理论上可以运用在代码的任何地方

4）import是编译时调用，所以必须放在文件开头

5）require是值拷贝过程，导出值改变不会影响导入值，其实require的结果就是对象，数字，字符串，函数等，再把require的结果赋值给某个变量

6）import是解构赋值过程，指向内存地址，导入值会随导出值而变化，但是目前所有的引擎都还没有实现import，我们使用babel支持ES6，将ES6转码为ES5再执行，import语法会被转码为require。

axios

1、基于promise用于浏览器和node.js的http客户端。

2、特点：

支持浏览器和node.js

支持promise

能拦截请求和响应

能转换请求和响应数据

能取消请求

自动转换JSON数据

浏览器端支持防止CSRF(跨站请求伪造)

ES7:

Array.prototype.includes( ),用来判断一个数组是否包含一个指定的值，如果包含则返回true，否则返回false

指数操作符**，具有与Math.pow(..)等效的计算结果。console.log(2**10);// 输出1024

ES8:

Object.values( )是一个与Object.keys( )类似的新函数，但返回的是Object自身属性的所有值，不包括继承的值。

const obj = {a: 1, b: 2, c: 3};

// 不使用es8之前

const vals=Object.keys(obj).map(key=>obj[key]);

console.log(vals);//[1, 2, 3]

//es8

const values=Object.values(obj1);

console.log(values);//[1, 2, 3]

Object.entries( )函数返回一个给定对象自身可枚举属性的键值对的数组

// ES8以前

Object.keys(obj).forEach(key=>{

console.log('key:'+key+' value:'+obj[key]);

})

//key:a value:1

//key:b value:2

//key:c value:3

//ES8

for(let [key,value] of Object.entries(obj1)){

console.log(`key: ${key} value:${value}`)

}

//key:a value:1

//key:b value:2

//key:c value:3

Object.getOwnPropertyDescriptors( )函数用来获取一个对象的所有自身属性的描述符，如果没有任何自身属性，则返回空对象。

String.prototype.padStart和String.prototype.padEnd,允许将空字符串或其他字符串添加到原始字符串的开头或结尾。

String.padStart(targetLength,[padString]) / String.padEnd(targetLength,padString])

targetLength:当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。

padString:(可选) 填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断，此参数的缺省值为 “ “；

async/await

async函数：

1、定义：async function(){  //表示异步，这个函数里有异步任务

let result = await XXX;  //表示后面的结果需要等待

}

2、特点：await只能放到async函数中

相比generator语义化更强

await后面可以是promise对象，也可以是数字/字符串/布尔值

async函数返回的是一个promise对象

只要await语句后面promise状态变成reject，那整个async函数就会中断执行

3、如何解决async函数中抛出的错误不影响后续代码：

a).try{  }catch(e){  }; 

b).promise本身的catch

4、个人建议，任何有await的地方，都要try{  }catch(e){  }