您的位置:首页 > 移动开发 > 微信开发

ES6基础知识笔记汇总(学习微信前端教程)

2018-03-19 20:24 736 查看

1. let 关键字:用来声明变量;

 弥补Var不足之处:
(1)let声明的变量仅仅在自己的块级作用域起作用,出了这个作用域就不起作用。任何一对花括号{}中的语句都属于一个块,在花括号里面用let定义的所有变量在花括号外都是不可见的,称为块级作用域。
(2)用var声明变量时候会出现“变量提升”的现象;用let就不会;
使用let注意:
(1)同一个块级作用域内,不允许重复声明同一个变量;
(2)函数内不能用let重新声明函数的参数

2. const关键字:用来声明常量的;

常量的特点
(1)不可修改;
(2)只在块级作用域起作用(与let关键词一样);
(3)不存在变量提升,必须先声明后使用(与let关键词一样);
(4)不可重复声明同一个变量;
(5)声明后必须要赋值;
Const常量是个对象:传址赋值
传址:在赋值过程中,变量实际存储的是数据地址(对数据的引用),而不是原始数据或者数据的拷贝;
 var student1={“name”:”张三”};
var student2=student1;
Student2.name=”李四”;
console.log(student1);//结果:{name:”李四”}
console.log(student2);//结果:{name:”李四”}

3. ES6兼容问题

语法解析转换工具:babel,jsx,traceur,es6-shim等
各大转换工具、JavaScript解析引擎对ES6的支持程度情况:http://kangax.github.io/compat-table/es6

4. 新特性--解构赋值

解构:按照一定模式,从数组和对象中提取值,对变量进行赋值;
变量的赋值:
var [a,b,c]=[1,2,3];
数组的解构赋值:
(1)解构赋值可以嵌套的
(2)不完全解构:左边与右边不完全一样的时候,只会给模式匹配成功的部分赋值;
(3)赋值不成功,变量的值为undefined(相当于只声明,没赋值);
(4)允许默认值:var [a,b,c=3]=[1,2];
注意:当新的值为undefined时,不会覆盖默认值;
对象的解构赋值:
var {a,b,c}={“a”:1,”b”:2,”c”:3};
(1) 对象的赋值不会受到属性的排列次序影响(数组会受影响);变量名和属性名一致,才会赋值成功;
(2) 找不到与之匹配的属性,则赋值不成功,输出 undefined;
(3) 对象解构赋值也可以嵌套;
(4) 可以指定默认值;
字符串的解构赋值:
var [a,b,c,d,e,f]=”我就是前端君”;
解构赋值的用途:
(1)交换变量的值
var x=1,y=2;
[x,y]=[y,x];
(2) 提取函数返回的多个值
函数只能返回一个值,我们可以将多个值装在一个数组或对象中,再解构赋值快速提取其中的值;
(3) 定义函数变量
(4) 函数参数的默认值设定
(5) 函数参数的定义

5.字符串的扩展

新特性:模板字符 <script type="text/javascript">
    let name="Jack";
    let age="8岁";
   let str=`write once,run anywhere`;
   let ss=`My name is${name},I am${age}`;
   alert(ss);
</script>
(1) 可以定义多行字符串:所有的空格和缩进都会被保留在输出中;
(2) ${ }中可以放任何的JavaScript表达式;
${}中可以是运算表达式:${a+b };
${}中可以是对象的属性: var obj={“a”:1,”b”:2} --${obj.a+obj.b};
${}中可以是函数的调用:${fn()};
新特性:标签模板 常用来实现过滤用户的非法输入和多语言转换;
标签:指一个函数,一个专门处理模板字符串的函数;<script type="text/javascript">
    let name="张三";
    let height=1.8;
    tagFn`他叫${name},身高${height}米`;
    function tagFn(arr,v1,v2) {
        console.log(arr); //结果: ["他叫", ",身高", "米", raw: Array(3)]
        console.log(v1);//张三
        console.log(v2);//1.8
    }

</script>
函数参数:第一个参数arr是数组类型,内容是除模板字符串除了${}以外的其他字符;v1是变量name的值;v2是变量height的值;
新特性:repeat函数
repeat()函数:将目标字符串重复N次,返回一个新的字符串,不影响目标字符串;<script type="text/javascript">
    let name="张三";
    let name2=name.repeat(3);
    console.log(name); //结果:张三
   console.log(name2);//结果:张三张三张三
</script>
新特性:include
Include()函数:判断字符串中是否含有指定的字符串,返回true表含有,false表示未含有;第二个参数选填,表示开始搜索的位置;
IndexOf()函数:通过返回是否为-1判断是否含有指定子字符串;
新特性:startsWith函数
StartWith()函数:判断指定的字符串是否出现在目标字符串的开头位置,第二个参数选填,表示开始搜索的位置;
新特性:endWith函数
endWith()函数判断指定的字符串是否出现在目标字符串的尾部位置,第二个参数选填,表示针对前N个字符;
新特性:codePointAt函数
JavaScript无法正确读取四字节字符,codePointAt方法可以正确识别四个字节的字符,并正确返回码点的十进制;
charAt():返回指定位置的字符;
新特性:fromCodePointAt函数
fromCodePointAt()函数:函数参数是一个字符对应的码点,返回的结果就是对应字符;4字节字符也能实现;
新特性:String.raw函数
String.raw():返回字符串最原始的样貌,即使字符串中含有转义符,都直接输出;
Console.log(String.raw`hellp\nworld`);

6.数值扩展  

全局函数移植到其他对象下:慢慢减少全局性函数,把全局函数合理地规划到其他对象下,渐渐实现语言的模块化;

被移植的函数-新特性:Number.isNaN  判断传入的是否非数值
(isNaN:is not a number)
传统的isNaN函数会把非数值参数转化成数值再进行判断,而Number.isNaN只对数值有效,非数值类型参数一律返回false;(注意:当返回false时:不一定是一个数值,也可能是非数值类型的参数)
被移植的函数-新特性:Number.isFinite函数  检查一个数值是否非无穷
非数值类型参数一律返回false,所以返回false时:不一定是一个非无穷,也可能是非数值类型参数;
被移植的函数-新特性:Number.parseInt 解析一个字符串,返回一个整数
被移植的函数-新特性:Number.parseFloat 解析一个字符串,返回一个浮点数
新增的函数-新特性:Number.isInteger  判断是否为整数(注意:在JavaScript内部,对整数和浮点数采用一样的存储方式,小数点后面是0的浮点数,会被认为是整数)
新增的函数-新特性:极小常量Number.EPSILON 定义一个极小的数值
作用:用来判断浮点数的计算误差,如果浮点数的计算得到误差 不超过Number.EPSILON 的值,就表示接受这样的误差;
安全整数  JavaScript能准确表示整数在-2^53到2^53之间,超过这个范围,无法精确表示这个值,称为不安全;
Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER
判断是否超过安全范围,用Number.isSafeInteger进行判断
Math对象新增17个函数
Math.trunc函数:用于去除一个数的小数部分,返回整数部分;
Math.sign函数:用来判断一个数到底是正数、负数、还是零;参数是正数 结果返回1,参数是负数 返回-1,参数是0 返回0 ,参数是非数值类型的参数 返回NaN;
Math.cbrt函数:用于计算一个数的立方根;
Math.acosh(x) 返回 x 的反双曲余弦。
Math.asinh(x) 返回 x 的反双曲正弦。
Math.atanh(x) 返回 x 的反双曲正切。
Math.clz32(x) 返回 x 的 32 位二进制整数表示形式的前导 0 的个数。
Math.sinh(x) 返回x的双曲正弦。
Math.cosh(x) 返回 x 的双曲余弦。
Math.expm1(x) 返回 eˆx - 1。
Math.fround(x) 返回 x 的单精度浮点数形式。
Math.hypot(...values) 返回所有参数的平方和的平方根。
Math.imul(x, y) 返回两个参数以 32 位整数形式相乘的结果。
Math.log1p(x) 返回 1 + x 的自然对数。
Math.log10(x) 返回以 10 为底的x的对数。
Math.log2(x) 返回以 2 为底的 x 的对数。
Math.tanh(x) 返回 x 的双曲正切。

7. 数组扩展

Array.of()函数 将一组值转换成数组;
Array.from()函数 将类似数组的对象或者可遍历的函数转换成真正的数组;将字符串转换成数组;
实例方法:
find()函数:找出数组中符合条件的第一个元素;不符合条件返回undefined;<script type="text/javascript">
    let arr=[1,2,4,5];
    arr.find(function (value) {
        return value>2;
    })  // 结果:4

</script>
findIndex()函数:返回符合条件的第一个数组成员的位置;不符合条件返回-1;
fill()函数:用指定的值,填充到数组;
fill函数的参数会把原数组的每个元素填充成指定的参数。<script type="text/javascript">
   let arr=[1,2,3];
   arr.fill(4,1,3);//第二个参数和第三个参数:从第1个位置到第3个位置之前填充数字4
</script>
entries()函数: 对数组的键值进行遍历,返回遍历器,可以用for...of对其进行遍历;<script type="text/javascript">
  for(let [i,v] of ['a','b'].entries()){
    console.log(i,v);
  }
</script>
keys()函数:对数组的索引进行遍历,返回遍历器;
value()函数:对数组的元素进行遍历,返回遍历器;
数组推导:用简洁的写法,直接通过现有的数组生成新函数;(有些浏览器不支持推导,可以火狐浏览器)<script type="text/javascript">
 let arr1=[1,2,3,4];
 let arr2=[for(i of arr1) if(i>3) i];
 console.log(arr2);
</script>

8. 对象扩展

<script type="text/javascript">
 let name="lisa";
 let age="18岁";
 let he={name,age};   //ES6对象的属性写法
 console.log(he);
 let he2={
     say(){
         alert("这是ES6的表示法");   //ES6对象的方法表示法
     }
 };
 he2.say();
</script>属性名可以是表达式:用字面量定义一个对象时,可以用表达式作为对象的属性名或者方法名;<script type="text/javascript">
 var f="first";
 var n="Name";
 var s="say";
 var h="Hello";
 var person={
     [f+n]:"zhang",
     [s+h](){
         return "你好吗";
     }

 };
 console.log(person.firstName);
 console.log(person.sayHello());
</script>
 
新增函数:
Object.is()函数:比较两个值是否严格相等,或者说全等;
Object.assign()函数:将源对象的属性赋值到目标对象上;对象属性出现相同名字,后面的属性值就会覆盖前面的属性值;(可完成效果:给对象添加属性和方法,克隆对象,合并多个对象,为对象的属性指定默认值)
Object.getPrototypeOf()函数:获取一个对象的prototype属性;
Object.setPrototypeOf()函数:设置一个对象的prototype属性
模拟面向对象编程有几个关键步骤:
1、构造函数;
2、给prototype对象添加属性和方法;
3、实例化;
4、通过实例化后的对象调用类的方法或者属性。

9. 函数扩展

参数的默认:默认参数一定放到最后,有默认值的参数后面不能再跟不需默认值的参数;<script type="text/javascript">
 function person(name='zhang',age="15") {  //指定默认值
     console.log(name,age);
 }
 person();
 person("Lili",18);
</script>
rest参数:在实参中,除了第一个参数以外,剩余的参数都会被...values获取到;rest参数必须是函数的最后一个参数,后面不能再跟其它参数;<script type="text/javascript">
 function sum(result,...values) {    
     console.log(values);
     values.forEach(function (v,i) {
         result+=v;
     });
 console.log(result);
 }
 let res=0;
 sum(res,1,2,3,4);
</script>
扩展运算符:  ...(三个点)  一般结合数组使用,把数组的元素用逗号分隔开来,组成一个序列,将一个数组转成一个对应的参数数列;
箭头函数:(=>)一种全新的定义函数的方式:第一个a代表传进去的参数,箭头=>后面的a表示函数体;<script type="text/javascript">
 let sum=a=>a;
 console.log(sum(5));
</script>
传入两个参数:如果参数超过一个,需要用小括号()括起来,函数体语句超过1条,需要用大括号{}括起来;<script type="text/javascript">
 let sum=(a,b)=>{return a+b};
 console.log(sum(4,5));
</script>
▲箭头函数的this指向定义时的this对象,而不是执行时的this对象;

10. 全新数据类型

JavaScript数据类型:
String 字符串类型
Number 数字类型  
Object 对象类型
Boolean布尔值类型  
Undefined未定义
全新数据类型:Symbol 解决对象的属性名冲突
即使参数一样,描述一样,得到的两个值也是不相等的;
(1)当symbol值作为对象的属性名的时候,不能用点运算符获取对应的值,一定要用中括号[];
(因为点运算会导致JavaScript把后面的属性名理解为一个字符串类型,而不是symbol类型)<script type="text/javascript">
 let name=Symbol();
 let person={
     [name]:"张三"
 };
 console.log(person[name]);  //张三
 console.log(person.name);  //undefined
</script>
(2)当symbol类型的值作为属性名的时候,该属性不会出现在for...in和for...of中,也不会被Object.keys()获取到;<script type="text/javascript">
 let name=Symbol();
 let person={
     [name]:"张三",
     age:18
 };
 console.log( Object.keys(person));  //["age"]
 for(let key in person){
     console.log(key);          //age
 }
</script>
(3)getOwnPropertySymbols()函数  会找到symbol类型的属性并且返回一个数组,数组成员就是symbol类型的属性值;<script type="text/javascript">
 let name=Symbol("name");
 let age=Symbol("age");
 let person={
     [name]:"张三",
     [age]:19
 }
console.log(Object.getOwnPropertySymbols(person)); //[Symbol(name), Symbol(age)]
</script>
(4)Reflect.ownKeys()  获取所有类型的属性<script type="text/javascript">
 let person={
     [Symbol('name')]:"张三",
     "age":30
 };
 console.log(Reflect.ownKeys(person));  //["age", Symbol(name)]
</script>
(5)Symbol.for()函数 根据参数名,去全局环境中搜索是否以该参数为名的symbol值,有就返回,没有就以该参数名来创建一个新的symbol值;Symbol.for()创建的symbol值会被登记在全局环境中,供以后Symbol.for()来搜索;
(6)Symbol.keyFor()函数  返回一个以登记在全局环境的symbol值(被Symbol.for()创建的)的key,没有就返回undefined。

11. 新特性 Proxy代理  将一个对象交给Proxy代理,然后通过编写处理函数,来拦截目标对象的操作;

<script type="text/javascript">
 let person={"name":"张三"};

 var pro=new Proxy(person,{
     get:function (target,property) {
         return "李四"
     }
 });
    console.log(pro.name);           //李四
</script>set方法  用于拦截对对象的写操作;
ownKeys拦截操作,拦截过滤Object.ownKey()对对象的属性遍历;<script type="text/javascript">
 let person={"name":"张三","age":20,"height":180};
 var pro=new Proxy(person,{
     ownKeys:function (target) {
         return ["name","age"]
     }
 });
    console.log(Object.keys(person));// ["name", "age", "height"]
    console.log(Object.keys(pro));// ["name", "age"]
</script>
has()拦截操作:拦截 key in object的操作,结果返回一个布尔值;用于判断是否含有指定的键值对,有就返回true,否则返回false;<script type="text/javascript">
 let person={"name":"张三","age":20,"height":180};
 var pro=new Proxy(person,{
     has:function (target,prop) {
         if(target[prop]===undefined){
             return false;
         }else {
             return true;
         }
     }
 });
    console.log("name" in person);           //true
    console.log("body" in person);          // false
</script>
apply()方法:被代理的变量是函数;<script type="text/javascript">
 let fn=function () {
     alert("我是小王");
 };
 let proxy=new Proxy(fn,{
     apply:function () {
         alert("我不是小王")
     }
 });
    proxy();
</script>
Proxy.revocable()取消代理函数:返回一个对象,对象中含有一个Proxy的代理实例对象,还有一个revoke属性,是一个方法,用于取消代理; <script type="text/javascript">
 let person={"name":"张三"};
 let handle={
     get:function (target,prop) {
         return "李四";
     }
 };
 let object=Proxy.revocable(person,handle); 
console.log(object.proxy.name);   //李四
object.revoke();
 console.log(object.proxy.name);   //报错
 </script>
其他拦截操作
defineProperty( )   deleteProperty( )    enumerate( )
getOwnPropertyDescriptor( ) getPrototypeOf( )  isExtensible( )   preventExtensions( )  setPrototypeOf( )

12. 新特性for...of

for...of一种用于遍历数组结构的方法,可遍历对象包括数组,对象,字符串,set和map结构等具有iterator接口的数据结构;
for...of优势:
(1)写法比for循环简洁很多;
(2)可以用break来终止整个循环,或者continute来跳出当前循环,继续后面的循环;
(3)结合keys( )获取到循环的索引,并且是数字类型,而不是字符串类型。循环可以终止:<script type="text/javascript">
var arr=[1,2,3,4,5];
for(let value of arr){
    if (value == 3){
        break;
    }
    console.log(value);      //1 2
}
 </script>跳过当前循环: <script type="text/javascript">
var arr=[1,2,3,4,5];
for(let value of arr){
    if (value == 3){
        continue;
    }
    console.log(value);      //1 2 4 5
}
 </script>得到数字类型索引: <script type="text/javascript">
var arr=[1,2,3,4,5];
for(let index of arr.keys()){
    console.log(index);        //0 1 2 3 4
    }
 </script>遍历字符串: <script type="text/javascript">
let word="我是前端君";
 for(let w of word){
     console.log(w);        //我 是 前 端 君
     }
  </script>遍历DOM.List:<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    let Plist=document.getElementsByTagName("p");
    for (let p of Plist)
        console.log(p);          //</script>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
</body>

13. ES6的Iterator遍历器(迭代器)

for...of 不能遍历Object对象:没有内置遍历器Iterator
Iterator遍历器原理:当可遍历对象被for...of遍历的时候,[Symbol.iterator]()会被调用,返回一个iterator对象;其中还有一个很重要的方法:next():done的值为false表示循环没有结束,继续遍历,done的值为true表示遍历结束;<script type="text/javascript">
    let arr=['a','b','c'];
    let iter=arr[Symbol.iterator]();
    console.log(iter.next());  //{value: "a", done: false}
    console.log(iter.next());  //{value: "b", done: false}
    console.log(iter.next());  //{value: "c", done: false}
    console.log(iter.next());    //{value: undefined, done: true}
</script>
for...of原理:先遍历可遍历对象的[Symbol.iterator]()方法,得到一个Iterator遍历器对象,然后在遍历器上不断调用next()方法,直到done的值为true的时候,就表示遍历完成结束了;
自定义Iteration遍历器
给Object对象加一个[Symbol.iterator]()方法,把一个不可遍历的Object对象,变成可遍历的对象: <script type="text/javascript">
    let obj={
        0:"我是0",
        1:"我是1",
        2:"我是2",
        length:3,
        [Symbol.iterator]:function () {
            let _this=this;
            let index=0;
            return{
                next:()=>{
                    let value=_this[index];
                    let done=(index>=_this.length);
                        index++;
                        return {value,done}
                }
            }
        }
    };
    for(let v of obj){
        console.log(v);  // 我是0 我是1 我是2
    }
</script>

14. 特殊函数:Generator函数

Generator函数又叫生成器函数,是ES6重要的特性;
(1)普通函数用function来声明,Generator函数用function*声明。
(2)Generator函数内部有新的关键字:yield,普通函数没有。
可以把Generator函数被调用后得到的生成器理解成一个遍历器iterator,用于遍历函数内部的状态。<script type="text/javascript">
   function* Hello(name) {
       yield `hello ${name}`;
       yield `how are you`;
       yield `bye`;
   }
   let ite=Hello('前端君')
   console.log(Hello('前端君')); //Hello {<suspended>}
   console.log(ite.next());//{value: "hello 前端君", done: false}
   console.log(ite.next());//{value: "how are you", done: false}
   console.log(ite.next());//{value: "bye", done: false}
   console.log(ite.next());//{value: undefined, done: true}
</script>
Generator函数的行为:
Generator函数被调用后并不会一直执行到最后,它是先回返回一个生成器对象,然后hold住不动,等到生成器对象的next( )方法被调用后,函数才会继续执行,直到遇到关键字yield后,又会停止执行,并返回一个Object对象,然后继续等待,直到next( )再一次被调用的时候,才会继续接着往下执行,直到done的值为true。
yield语句作用:
相当于暂停执行并且返回信息。有点像传统函数的return的作用,但不同的是普通函数只能return一次,但是Generator函数可以有很多个yield。而return代表的是终止执行,yield代表的是暂停执行,后续通过调用生成器的next( )方法,可以恢复执行。
next()方法接受参数:next()的参数会作为上一个yield的返回值 ;
关键词yield* :调用另一个Generator函数,用到关键词yield*;yield* gen1();
yield* gen2();
注意:如果一个Generator函数A执行过程中,进入(调用)了另一个Generator函数B,那么会一直等到Generator函数B全部执行完毕后,才会返回Generator函数A继续执行。
Generator函数的用途:
用途:可以控制函数的内部状态,依次遍历每个状态;可以根据需要,轻松地让函数暂停执行或者继续执行。
根据这个特点,我们可以利用Generator函数来实现异步操作的效果。
 原理是:利用Generator函数暂停执行的作用,可以将异步操作的语句写到yield后面,通过执行next方法进行回调。

15. Set结构和Weakset

Set结构:新的数据结构,理解为值的集合;它的值不会有重复项;Set本身是一个构造函数,可以理解为一个类; <script type="text/javascript">
 var s=new Set([1,2,3]);
 console.log(s);var v=new Set();
v.add(1);
v.add(2);
</script>
成员值唯一:添加相同的成员值会自动忽略相同的值,只会保留一个相同的值;
size属性:获取成员个数  
delete()方法:用户删除Set结构中的指定值,删除成功返回:true,删除失败返回:fasle;
clear()清除所有成员;
has()方法:判断set结构中是否含有指定的值;
entries()方法:返回一个键值对的遍历器;Set结构是键名和键值是同一个值;
keys():返回键名的遍历器;
values():返回键值的遍历器;
forEach( )方法:遍历每一个成员。
Set用途之一:给数组去重; <script type="text/javascript">
  let arr=[1,2,2,3,3,3,4,4];
  let s=new Set(arr);
    console.log(s);           //{1,2,3,4}
  let newArr=Array.from(s);
    console.log(newArr);      //[1,2,3,4]
</script>
WeakSet结构:同样不会存储重复的值,不同的是,它的成员必须是对象类型的值。(严格来说是:具有 iterable 接口的对象)
相同:WeakSet结构也提供了add( ) 方法,delete( ) 方法,has( )方法给开发者使用,作用与用法跟Set结构完全一致。
另一个不同点是:WeakSet 结构不可遍历。因为它的成员都是对象的弱引用,随时被回收机制回收,成员消失。所以WeakSet 结构不会有keys( ),values( ),entries( ),forEach( )等方法和size属性。

16. Map和WeakMap

Map基本用法:key键名的类型不再局限于字符串类型,可以是各种类型是值;<script type="text/javascript">
    let m = new Map([["name","前端君"],["gender",1]]);
    console.log(m);
</script>
 
set()方法作用:给实例设置一对键值对,返回Map实例;如果设置一个已经存在的键名,后面是键值会覆盖前面的键值;
get()方法作用:获取指定键名的键值,返回键值;不存在返回undefined;
delete()方法作用:删除指定的键值对,删除成功返回:true,否则返回:false;
clear()方法:一次删除完所有键值对;
has()方法作用:判断Map实例内是否含有指定键值对,有就返回true,否则返回false;
可遍历:可以使用ES6新特性for...of遍历键名或键值;
entries()方法:返回实例的键值对遍历器;
keys()方法:返回实例所有键名的遍历器;
values()方法:返回实例所有键值的遍历器;
forEach()方法:遍历每个键值对;
size属性:获取实例的成员数;
WeakMap()结构:键名支持引用类型的数据;(数组,对象,函数)
与Map()结构不同点:
(1)如果是普通的值类型则不允许。比如:字符串,数字,null,undefined,布尔类型。而Map结构是允许的,这就是两者的不同之处,谨记。
(2)跟Map一样,WeakMap也拥有get、has、delete方法,用法和用途都一样。不同地方在于,WeakMap不支持clear方法,不支持遍历,也就没有了keys、values、entries、forEach这4个方法,也没有属性size。
(3)理由跟WeakSet结构一样:键名中的引用类型是弱引用,你永远不知道这个引用对象什么时候会被垃圾回收机制回收了,如果这个引用类型的值被垃圾机制回收了,WeakMap实例中的对应键值对也会消失;

17.全新特性 Promise: 更合理,更规范处理异步操作;

Promise对象有三种状态:
pending:刚刚创建一个Promise实例的时候,表示初始状态;
fulfilled:resolve方法调用的时候,表示操作成功;
rejected:reject方法调用的时候,表示操作失败;
注意:状态只能从 初始化 -> 成功  或者  初始化 -> 失败,不能逆向转换,也不能在成功fulfilled 和失败rejected之间转换;<script type="text/javascript">
    let pro=new Promise(function (resolve,reject) {   //实例后状态:pending
        if("操作成功"){
            resolve();   //状态为:fulfilled
        }else {
            reject();//状态为:rejected
        }
    });
</script>
then()方法:用于绑定处理操作后的处理程序pro.then(function (res) {
    //操作成功的处理程序
    
},function (error) {
    //操作失败是处理程序
});
catch()方法:只接受一个参数处理操作异常后的业务;
综合两个方法:将then方法用于处理操作成功,catch方法用于处理操作异常;(之所以能链式调用,是因为then方法和catch方法调用,都会返回promise对象)pro.then(function (res) {
    //操作成功的处理程序

}).catch(function (error) {
    //操作失败的处理程序
})
完整案例:<script type="text/javascript">
    let pro=new Promise(function (resolve,reject) {   //实例后状态:pending
        if(true){
            resolve("操作成功");   //状态为:fulfilled
        }else {
            reject("操作失败");//状态为:rejected
        }
    });
    pro.then(requestA).then(requestB).then(requestC).catch(requestError);
    function requestA() {
        console.log("请求A成功");
        return '请求B,下一个就是你了';

    }
    function requestB(res) {
        console.log("上一步的结果"+res);
        console.log("请求B成功");
        return '请求C,下一个就是你了';

    }
    function requestC(res) {
        console.log("上一步的结果"+res);
        console.log("请求C成功");
    }
    function requestError(res) {
        console.log("请求失败");
    }
    //打印结果:
    //请求A成功
    //上一步的结果:请求B,下一个就是你了
    //请求B成功
    //上一步的结果:请求C,下一个就是你了
    //请求C成功
</script>
 
 
 
Promise.all()方法:接受一个数组作为参数,数组的元素是Promise实例对象,当参数中实例对象的状态都为fulfilled时,Promise.all()才会返回;<script type="text/javascript">
   let pro1=new Promise(function (resolve,reject) {
      setTimeout(function () {
          resolve('实例1操作成功');
          
      },4000);
   });
   let pro2=new Promise(function (resolve,reject) {
       setTimeout(function () {
           resolve('实例1操作成功');

       },2000);
   })
    Promise.all([pro1,pro2]).then(function (result) {
        console.log(result);    //延迟五秒输出结果
    })
</script>
Promise.race()方法:只要有一个状态发生变化,就会返回,不管是成功还是失败;

18.类的概念

基本用法:constructor构造方法是一个类必须要有的方法;
类的属性和方法和创建实例对象:必须使用new创建来创建;先声明定义,再创建实例,否则会报错;  <script type="text/javascript">
       class Animal{
           constructor(name){   //constructor构造方法,不能含有多个constructor构造函数
               this.name=name;   //name属性
           }
           getName(){          //自定义方法
               return 'This is a'+this.name;
           }
       }
       let dog=new  Animal('dog');    // 创建实例对象
       console.log(dog.name);    //dog
       console.log(dog.getName); //This is adog
</script>
类的静态方法:直接使用类名即可访问的方法;而实例方法通过实例对象来调用; <script type="text/javascript">
       class Animal{
           constructor(name){   //constructor构造方法,不能含有多个constructor构造函数
               this.name=name;   //name属性
           }
           static friends(a1,a2){
               return `${a1.name} and ${a2.name} are friends`
           }
       }

       //创建实例
       let dog=new  Animal('dog');    // 创建实例对象
       let cat=new Animal('cat');
       //调用静态方法;
       console.log(Animal.friends(dog,cat)); //dog and cat are friends
</script>
类的继承:关键词:extends实现子类继承父类;
super:父类中的this<script type="text/javascript">
       class Animal{}  //父类
       class Dog extends  Animal {
           constructor(name, color) {
               super(name);       //super:父类中的this
               this.color = color;
           }
       }
</script>
  使用super有几个要注意的事项:
(1)子类必须在constructor方法中调用super方法;
(2)必须先调用super( ),才可以使用this,否则报错;super( )相当于父类构造函数的调用;    <script type="text/javascript">
       class Animal{
           constructor(name){
               this.name=name;
           }
           say(){
               return `This is a animal`;
           }
       }
       //子类
       class Dog extends  Animal {
           constructor(name, color) {
               super(name);       //super:父类中的this
               this.color = color;
           }
           //子类实例方法
           getAttritube(){
               return `${super.say()},
               name:${this.name},
               color:${this.color}`;
           }
       }

       let d=new Dog("dog","black"); //创建Dog实例
       console.log(d.getAttritube()); //调用子类实例
       //This is a animal, name:dog, color:black
</script>

19. 缺失已久的特性:module模块;

目前还没有浏览器支持ES6的module模块;
module模块:一个模块,就是一个对其他模块暴露自己的属性或者方法的文件;
导出Export:作为一个模块,可以选择性的给其他模块暴露(提供)自己的属性和方法,供其他模块使用;
//---module-B.js文件---
//导出变量:name
export var name = "前端君";
 
导入Import:作为一个模块,引入给其他模块提供的属性和方法,供自己模块使用;//---module-A.js文件---
//导入 模块B的属性 name
import { name } from "./module-B.js";
console.log(name)
//打印结果:前端君
批量导出://属性name
var name = "前端君";
//属性age
var age  = 25;
//方法 say
var say = function(){
    console.log("say hello");
}
//批量导出
export {name,age,say}
批量导入:变量名字必须跟导出的一致才能准确获取,位置顺序无要求;//---module-A.js文件---

//导入 模块B的属性 name
import { name,age,say } from "./module-B.js";

console.log(name)
//打印结果:前端君

console.log(age)
//打印结果:25

say()
//打印结果:say hello
使用关键字as,可以实现给变量name更换名字为myname。import { name as myname } from "./module-B.js";
console.log(myname)
//打印结果:前端君
 
整体导入:使用星号符*将模块B提供的所有属性和方法整体导入赋值给变量obj,我们可以点运算符来获取它的属性和方法。//使用*实现整体导入
import * as obj from "./module-B.js";
默认导出:每个模块支持我们导出一个没有名字的变量,我们使用关键语句export default来实现;export default function(){
    console.log("I am default Fn");
}
 我们使用export default关键字对外导出一个匿名函数,导入这个模块的时候,可以为这个匿名函数取任意的名字;(同样是使用import关键字导入模块B,但是这次不需要使用大括号{ }。我们使用新的名字:sayDefault来代替导入的匿名函数,最后调用一下,打印结果正是模块B默认导出的匿名函数的执行效果。);//取任意名字均可
import sayDefault from "./module-B.js";

sayDefault();
//结果:I am default Fn
注意事项:
(1)声明的变量,对外都是只读;但是,如果导出对象是对象类型,就可以修改;
(2)导入不存在的变量,值为undefined;不会抛出异常;
 
 
 
 
 
 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  ES6