小白路程之----浅谈ES6部分语法

一、新的变量声明let和const

  • 新的变量声明形成新的作用域区域叫,块级作用域,即在一个{}内有let或者const声明的变量,那么这个变量就只会在这个{}内产生作用。

1、let声明的注意事项

在ES6中,告别了单一的基础变量的声明var,迎来了两个新的变量声明,拥有块级作用域的let以及常量声明const,对于这新两个变量声明,在我看来是JS向C语言以及Java语言的学习。

  • 1、let声明的变量在预编译时不会提升。

    var变量在预编译时会将声明提升至代码开始的部分,但是不包括变量的赋值部分。而let直接不提升。因此,不可在let声明的变量前面访问变量。

console.log(a);//undefined
var a=1;
console.log(b);
let b=1;//ReferenceError:b is not defined
复制代码
  • 2、不能使用let重复声明变量。var重复声明变量会形成覆盖,但是let不会,直接报错。
var a=1;
var a=2;
console.log(a);//2
let b =1;
let b =2;
console.log(b);//SyntaxError: Identifier 'b' has already been declared
复制代码
  • 3、当let在{}内声明时,会形成一个块级作用域。在块级作用域外无法调用其内的变量
  • 例如在下面的闭包函数内,由于i的作用域是整个函数,导致计数的变量i泄露为全局变量,i与arr[0],arr[1],arr[2]三个函数处于并列状态,当调用三个函数时,输出的不是1、2、3,而都是i循环完成后的3。
function f(){
    var arr = [];
    for (var i = 0;i<3;i++){
        arr[i]=()=>i;
    }
    return arr;
}
var arr = f();
console.log(arr[0](),arr[1](),arr[2]());//3 3 3
复制代码

对于这个函数的处理,在let变量未出现时,需要使用将i的值传递给一个立即执行函数,或者将i本地化的方法来实现。但是let变量的块级作用域使得这个函数的处理变得简单起来,只需将for (var i = 0;i<3;i++)改成for (let i = 0;i<3;i++)即可。

  • 4、let的暂时性死区问题,即在let声明的块级作用域内它所声明的变量就会绑定在这个区域内,不受外部影响。
var a = 1;
{
    console.log(a);
    let a=2;
}//ReferenceError: a is not defined
复制代码

2、const声明的注意事项

  • 1、const声明的是常量,不可更改,不可重复声明。
const a=1;
a=2;//TypeError: Assignment to constant variable.
const b=1;
const b=2;//SyntaxError: Identifier 'b' has already been declared
复制代码
  • 2、const声明的变量不会提升。
console.log(c);
const c=3;//ReferenceError: c is not defined
复制代码
  • 3、const命令也会形成一个块级作用域,在作用域外无法访问其内声明的常量。
{const d=4;}
console.log(d);//ReferenceError: d is not defined
复制代码
  • 4、const无法声明引用数据类型的常量。const只能保障声明的数据在栈区中的值不变,堆区中的数据就无能为力了。
const a=[1,2,3];
a[2]=5;
console.log(a);//[ 1, 2, 5 ]
复制代码

二、字符串模板

  • 在ES6中新增了字符串模板,方便了变量以及字符串在文字间的插入。
模板形式:`${value}`
使用模板字符串:
var a = "Hello";
console.log(`你好的英文是:${a}。`);//你好的英文是:Hello。
原始字符串:
var b = "Hello";
console.log('你好的英文是:'+b+'。');//你好的英文是:Hello。
复制代码
  • 需要注意的是模板字符串的是两个引号是反引号而不是单引号。

三、变量的解构赋值

1、字符串的解构赋值

  • 在ES6中允许以以下的方式为b变量赋值。
let [a,b,c]=[1,2,3];
console.log(a,b,c)//3 2 1
复制代码
  • 解构赋值会将‘=’右边的值赋予与其位置相对应的左边的变量,而且允许使用ES6的新语法扩展运算符。
let [a,[b],c]=[1,[2,3],4];
console.log(a,b,c);//1 2 4
let [a,...b] = [1,2,3,4];
console.log(a,b);//1 [ 2, 3, 4 ]
复制代码
  • 若解构赋值的左右两边不是一一对应时,会导致解构失败,而赋值undefined
let [a,b,c]=[1,,4];
console.log(a,b,c);//1 undefined 4
复制代码
  • 解构赋值允许设置默认值,当=右边没有相对应的值时,则给变量赋于默认值。
let [a=1,b=2]=[3,,];
console.log(a,b);//3 2
复制代码

2、对象的解构赋值

  • 对象的解构与数组的最重要的不同在于,数组需要按照元素的排列顺序按位置赋值,而对象需要属性与变量同名,才能正确赋值。
let {a,b}={b:'aaa',a:'bbb'};
console.log(a,b);//bbb aaa
复制代码
  • 与数组一样,对象的解构也可用于嵌套模式,但是格式不一样。
a是按照数组的格式解构的,b和c是按照对象解构的格式赋值的。
let {p:[a,{b,c}]}={p:['aaa',{c:'ccc',b:'bbb'}]};
console.log(a,b,c);//aaa bbb ccc
复制代码
  • 对象的解构也允许默认值,以及解构失败也是undefined,但是注意undefined和null不同,null会是个有效的赋值
let {a=1,b=2,c=3,d}={a:'ccc',b:undefined,c:null};
console.log(a,b,c,d);//ccc 2 null undefined
复制代码

3、字符串的解构赋值

  • 字符串在解构赋值时会被转换成类似数组的对象。
let [a,b,c,d]='ABCD';
console.log(a,b,c,d);//A B C D
复制代码
  • 还可以对数组对象的length属性解构赋值。
let {length:a}='hello';
console.log(a);//5
复制代码

4、解构赋值的用途

  • 交换变量的值
let x = 1;
let y = 2;
[x, y] = [y, x];
console.log(x,y)//2 1
复制代码
  • 函数参数的传值与返回。
function f([x,y,z]){
    x+=1;
    y+=1;
    z+=1;
    return [x,y,z]
}
let [a,b,c]=f([1,2,3]);
console.log(a,b,c);//2 3 4
复制代码

四、字符串操作方法的扩展

1、charAt

  • 返回字符串指定位置的字符。
var str='hello';
console.log(str.charAt(0));//h
复制代码

2、trim

  • 对字符串首尾两边的空格进行处理,不修改原字符,返回处理过的字符串,对字符串内的空格不进行处理。
  • trim:去除字符串左右两边的空格,
  • trimLeft:去除字符串的左空格,
  • trimRight:去除字符串的右空格。
var str = "  a b c ";
console.log(str);//  a b c 
console.log(str.trim());//a b c
console.log(str.trimLeft());//a b c 
console.log(str.trimRight());//  a b c
console.log(str);//  a b c 
复制代码

3、repeat

  • 重复原字符串,可设置重复次数,不修改原字符串,返回修改过后的字符串。
var str = '123';
console.log(str.repeat(2));//123123
console.log(str.repeat(0));//空
console.log(str);//123
复制代码

4、includes

  • 判断是否含有匹配的字符串,而且可以自动匹配空格,返回true|false,一般和正则表达式一起用。
var str = "asdasdas sd ad"
console.log(str.includes('asd'));//true
console.log(str.includes('as sd'));//true
console.log(str.includes('assd'));//false
复制代码

5、strartsWith和endsWidth

  • strartsWith:判断字符串的开始字符串。
  • endsWidth:判断字符串的结束字符串。
var str = "asd dsad";
console.log(str.startsWith('asd'));//true
console.log(str.startsWith('asdds'));//false
console.log(str.endsWith('ad'));//true
console.log(str.endsWith('ad '));//false
复制代码

6、padStart和padEnd

  • 字符串补全长度的方法,不够设置长度的用指定字符补全
  • padStart:如果字符串不够指定长度,在头部补全
  • padEnd:如果字符串不够指定长度,在尾部补全
var str = "asdas dsad";
console.log(str.padStart(15,'$'));//$$$$$asdas dsad
console.log(str.padEnd(15,'$'));//asdas dsad$$$$$
console.log(str);//asdas dsad
复制代码

7、for...of循环遍历

  • 循环遍历数组字符串,或者新的数据结构set。其循环的不是数组或字符串的下标,而是相对应的数组或字符串的值。
var str=['a','b','c','d'];
for (var i of str){
    console.log(i);
};//声明的i变量是循环时与数组位置相对应的值,a b c d
var a='hello';
for (var i of a){
    console.log(i);
};//声明的i变量是循环时与字符串位置相对应的值,h e l l o
复制代码

五、函数的扩展

1、箭头函数

箭头函数的普通形式和原本的函数并没有多大的差别,只是在部分简写的形式下,箭头函数更加的方便,以及简洁。

  • 1、普通形式
  普通函数:function f(形参){表达式;return 返回值;}
  箭头函数:var f=(形参)=>{表达式;return 返回值} 
复制代码
  • 2、当函数中只有一个形参时,箭头函数的形参的()可以省略。但是没有参数时,参数的括号不可以省略,见第三条。
  普通函数:function f(x){return x*x;} 
  箭头函数:var f=x=>{return x*x;} 
复制代码
  • 3、函数体只有一条非return语句时,箭头函数的{}也可以省略。
  普通函数:function f(){console.log("Hello")} 
  箭头函数:var f=()=>console.log("Hello"); 
复制代码
  • 4、当函数体只有一条return返回语句时,箭头函数的return语句亦可以省略。
 普通函数:function f(x){return x*x;} 
 箭头函数:var f=x=>x*x 
复制代码
  • 5、在一些数组的方法中可见,箭头函数的简便之处。
var arr = [1,2,3]
普通函数:
var rs = arr.map(function(item){
   return item +=10;
})
 箭头函数:
var rs = arr.map(item => item+=10;)
console.log(rs)//[ 11, 12, 13 ]
复制代码
  • 由此可见,在一些对于数据的简短处理上,箭头函数不仅可以更清晰的显示数据关系以及用更简洁的表达式处理数据。

2、函数参数的默认值

  • 在ES6中可以为函数的指定参数设置默认值。
function f(x=1,y=2){
    console.log(x+y);
}
f();//3
f(3)//5
f(3,3)//6
复制代码
  • 参数变量是默认声明的,不可以重复声明。
function f(x=2){
    let x=1;
}
f();//SyntaxError: Identifier 'x' has already been declared
复制代码
  • 若函数内设置默认参数,函数声明时不能有同名参数
function f(x,x,y){};
f();//不报错
function h(x,x,y=1){}
h();//SyntaxError: Duplicate parameter name not allowed in this context
复制代码

3、函数参数的扩展运算符赋值

  • ES6中,新增的扩展运算符在函数的传参的过程中也可使用。与arguments相比,扩展运算符的形式更简洁。
function f(...val) {
    let sum = 0;
    for (var i of val) {
        sum += i;
    }
    return sum;
}
console.log(f(2, 5, 3));//10
复制代码

六、数组的扩展

1、扩展运算符

  • 数组的扩展运算符的应用:复制数组,合并数组,与解构赋值结合,将字符串转化成数组...

对于数组的赋值,是深拷贝:

var str=[1,2,3];
var str1=[...str];
console.log(str1)//[ 1, 2, 3 ]
str1[1]=6;
console.log(str)//[ 1, 2, 3 ]
console.log(str1)//[ 1, 6, 3 ]
复制代码

合并数组:

var str2=[...str,...str1]
console.log(str2);//[ 1, 2, 3, 1, 6, 3 ]
复制代码

与解构赋值结合:

const [f, ...g] = [1, 2, 3, 4, 5];
console.log(f);//1
console.log(g);//[ 2, 3, 4, 5 ]
复制代码

将字符串转化成数组:

var str='asdfg';
console.log([...str]);//[ 'a', 's', 'd', 'f', 'g' ]
复制代码

2、Array.from()

  • 这个方法时Array构造器的静态方法,可以将类数组对象转化成真正的数组。
let arr={0:"a",1:"b",2:"c",length:3}
let arr1=Array.from(arr)
console.log(arr1);//[ 'a', 'b', 'c' ]
复制代码

3、Array.of()

  • 将一组值转化成数组。
let arr=Array.of(1,2,3,4);
console.log(arr);//[ 1, 2, 3, 4 ]
复制代码

4、find()和findIndex()

  • find(),找出第一个符合条件的数组元素,并返回,找不到则返回undefined。
  • findIndex(),返回第一个符合条件的数组元素的索引,找不到则返回-1。
格式:
arr.find(function(item,index){
  return 条件;
})//findIndex()与find()的格式一样
复制代码
let str=['d','s','a','b',2,3];
find()方法:
let rs=str.find(item=>item=='a')
let rs1=str.find(item=>item=='c')
console.log(rs);//a
console.log(rs1);//undefined,未找到返回undefined
findIndex方法:
let rs2=str.findIndex(item=>item>2)
let rs3=str.findIndex(item=>item=='c')
console.log(rs2);//5
console.log(rs3);//-1,未找到返回-1
复制代码

5、fill()

  • 在数组内填充指定的值或符号,或者在指定位置填充值或者符号。
格式:arr.fill(值或符号);
格式:arr.fill(值,起点,终点);包括起点,不包括终点
let arr=Array(5);
let rs=arr.fill('a');
console.log(rs);//[ 'a', 'a', 'a', 'a', 'a' ]
let rs1=arr.fill('b',1,3)
console.log(rs1);[ 'a', 'b', 'b', 'a', 'a' ]
复制代码

6、keys()和valueOf()

  • 都用于数组的遍历,一般和for...of循环遍历一起使用,它们都返回一个遍历器对象,keys()是对键名的遍历、valueOf()是对键值的遍历。
var str=['a','b','c','d'];
for (let i of str.keys()){
    console.log(i);
}//0 1 2 3
for (let i of str.valueOf()){
    console.log(i);
}//a b c d
复制代码

7、includes()

  • 判断元素是否在数组中存在。返回值是 true | false。
var str=['a','b'];
console.log(str.includes('a'));//true
复制代码

七、对象的扩展

1、属性名扩展

  • 在ES6中,对于对象的属性名可以用更简洁的方式表达,而且可以使用表达式的方法,虽然表达式的方法很少使用。
  • 当属性名和属性变量相同时,可以省略。
  • 对象内方法的function声明可以省略。
let name='zz';
let obj={
    name,//属性名和属性值一致,可以省略
    ['a'+'g'+'e']:12,//属性名用表达式的方式
    say(){
        console.log(`我是:${this.name},今年${this.age}岁了。`);
    }
}
obj.say();//我是:zz,今年12岁了。
复制代码

2、Obect.getOwnProertyDescriptor();

  • 获取一个对象中某个属性的详细信息。
let obj = { f: 1 };
console.log(Object.getOwnPropertyDescriptor(obj, 'f'));
{ value: 1,
  writable: true,
  enumerable: true,
  configurable: true }
复制代码

3、Object.defineProperty()和Object.defineProperties()

  • Object.defineProperty()精细化设置一个对象的属性。
  • Object.defineProperties()一次性精细化设置多个对象的属性。格式和Object.defineProperty()一样。
var obj={};
Object.defineProperty(obj,'name',{
    value: 'abcd',//属性值
    writable: false,//是否可以修改
    enumerable: true,//是否可以枚举
    configurable: false//是否可以删除
})
console.log(obj.name);//abcd
delete obj.name;
console.log(obj.name);//abcd未删除成功
复制代码

4、getOwnPropertyNames()

  • 获取自身属性名,以数组的格式返回
var obj={
    name:'zzz',
    age:222
};
console.log(Object.getOwnPropertyNames(obj));//[ 'name', 'age' ]
复制代码

5、Object.keys()和Object.values()

  • Object.keys()获取对象的属性名,Object.values()获取对象的属性值,都是以数组的格式返回,一般和for...of循环遍历一起用。
var obj={
    name:'zzz',
    age:222
};
console.log(Object.keys(obj));//[ 'name', 'age' ]
console.log(Object.values(obj));//[ 'zzz', 222 ]
复制代码

6、与继承相关的方法

  • 1、Object.create():使用Object.create()比较适合对字面量对象的继承。
  • 2、Object.getPrototypeOf():获取创建这个对象的那个构造器的prototype属性。 如图所示:
  • 3、Object.preventExtensions():不允许新增,但是可以修改和删除。
  • 4、Object.seal():不允许新增,也不允许删除,但是可以修改。
  • 5、Object.freeze():不允许新增,也不允许删除和修改。

7、Object.assign

  • 用于对象的合并,将源对象的所有的可枚举属性,复制到目标对象。
格式:
Objext.assign(目标对象,源对象,源对象...)
复制代码
let obj={};
let obj1={name:'zz'};
let obj2={age:21};
console.log(Object.assign(obj,obj1,obj2));//{ name: 'zz', age: 21 }
复制代码
  • 1、Objext.assign()不能拷贝源对象继承过来的属性以及不可枚举的属性。
  • 2、Objext.assign()会把源对象原型上面的发展也拷贝过来。
  • 3、Objext.assign()是浅拷贝。

8、对象扩展运算符

  • 与数组的扩展运算符类似,可以拷贝对象,但是是浅拷贝。可以合并对象,以及解构赋值等。

八、Set与Maps数据结构

Set数据结构

  • set类似于数组,是一种集合,但是里面的值都是唯一的,没有重复。
  • 存数组时,空的位置会用undefined代替,但是只有第一个空的位置会有undefined,其后空的位置自动去除。
  • 创建时必须使用new创建一个set数据
  • 格式:var set1 = new Set();

存数据的两种方式如下:

方式一,声明时直接存储:
var set2 = new Set([1,2,2,3,3,4,4,5,'true','true']);
方式二,利用set.add()方法存储:
set2.add(false).add('zz').add('zz')
console.log(set2);//Set { 1, 2, 3, 4, 5, 'true', false, 'zz' }
console.log(set2.size);//8,获取元素个数
复制代码
  • 还可以存放对象,可以通过set.add的方式,或者直接存储的方式。但是要记得直接存储时,需要在对象外加上一个[],如下所示。
方式一:
var obj = {
    name:"jj",
    say:function(){console.log('aaaaa')}
}
set2.add(obj);
console.log(set2);//Set {1,2,3,4,5,'true',false,'zj',{ name: 'jj', say: [Function: say] } }
方式二:
var set3 = new Set([ {name:'zj'} ]) 
console.log(set2);//Set { { name: 'zj' } }
复制代码
  • set的遍历只可以使用for..of或者for..each,不能使用for..in,for..in遍历是通过键值对的键来取值的,而set里无法通过与值相对应的键来调用数据。
var set4 = new Set(['a','b','c','d','a','c','sad','as','das','sda']);
方式一:
set4.forEach(item=>console.log(item));//a b c d sad as das sda
方式二:
for(var i of set4){
    console.log(i);
}//a b c d sad as das sda
复制代码
  • set在浏览器内虽然有下标表示数据的键,但是set不是数组,是一个伪数组,不可像数组一样通过下标取值,但是可以通过Array.from()的方式将set暂时转换成数组,并可通过下标来调用其内的数据。 console.log(Array.isArray(Array.from(set2)));//true

  • Array.from()转换,只能将set数据结构暂时转换成数组,因此不可转换后再调用。

使用方式如下:

方式一:
for(var p in Array.from(set4)){
    console.log(Array.from(set4)[p]);
}//a b c d sad as das sda
方式二:
for(var p in [...set4]){
    console.log(Array.from(set4)[p]);
}//a b c d sad as das sda
复制代码
  • 利用set,达到数组去重的,方法如下:
var arr = [1,2,3,,3,4,5,234,,4,'sad','sad',true]
var arr1 = [...(new Set(arr))];
console.log(arr1);//[ 1, 2, 3, undefined, 4, 5, 234, 'sad', true ]
复制代码

Map数据结构

  • map数据结构类似于对象,存放键值对,使用时和set一样必须使用new创建。 格式:var m = new Map();
  • 存放数据,相同属性名,后面的会覆盖前面的,非数字必须使用''或者“”。
  • 前面是键值对的“键”,后面是键值对的“值”,键值对之间用逗号隔开。
  • []内只存放一个数据时,根据在逗号的前后判断是键或者值,未存的数据默认为undefined
  • 可以存放任何数据类型
var m = new Map([
    [1,'asd'],//被覆盖
    ['a','ad'],
    [1,'12'],//  1 => '12',字符串12
    [2,12],//  2 => 12,
    [[1,2,3],{naem:'zj'}],
    [,3],//undefined => 3,
    [3,]//3 => undefined,
]);
m.set(false,'asd');
复制代码
  • 通过属性的键来获取属性值
m.get(undefined);//3
m.get([1,2,3]);//获取不到对象,get()是比较栈区中的地址,而不是堆区中的数据
复制代码

因此如果想要访问引用数据类型的键所对应的值,需要用如下方式:

var arr = [1,2,3];
m.set(arr,'asd');
m.get(arr);//运行结果:"asd"
复制代码

九、类Class

  • class创建对象,类名首字母大写,使用大驼峰命名法则。
  • {}中只能写方法,不需要使用关键字。
  • 方法与方法之间没有逗号,不是键值对。

格式如下:

class 类名{                 
  constructor(参数){       
    this.属性 = 参数;   
  }
  method(){  }//对象中的简写方法
  static met(){  }//静态方法,可以直接调用
}
复制代码
class Person{
    constructor(name,age){
        this.name = name;
        this.age =age;
    }
    say(){
         console.log(`我是${this.name},今年${this.age}岁了。`);
    }
    static eat(){   //静态方法,可以直接调用
        console.log('eat...');
    }
}
var p1 = new Person("zz","21");
p1.say();//我是zz,今年21岁了。  
Person.eat();//eat...
复制代码
  • class类之间可以使用extends实现继承。
  • 利用super(属性名,属性名...),继承父元素的属性。
  • 方法会自动在父元素和子元素之间继承。
class Student extends Person{
    constructor(name,age,adds){
        super(name,age);
        this.adds = adds;
    }
    show(){
        console.log(`我是${this.name},现在在${this.adds}。`);
    }
}
var s1 = new Student('zz','22','家');
s1.say();//我是zz,今年22岁了。
s1.show();//我是zz,现在在家。
复制代码

十、Promise对象

简单理解promise是一种异步编程的解决方案。所谓 promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise提供统一的 API,各种异步操作都可以用同样的方法进行处理。

1、四大术语

  • 解决(fulfill ):指一个 promise 成功时进行的一系列操作,如状态的改变、回调的执行。虽然规范中用 fulfill 来表示解决,但在后世的 promise 实现多以 resolve 来指代之。
  • 拒绝(reject ):指一个 promise 失败时进行的一系列操作。
  • 终值(eventual value ):所谓终值,指的是 promise 被解决时传递给解决回调的值,由于promise 有一次性的特征,因此当这个值被传递时,标志着 promise 等待态的结束,故称 之终值,有时也直接简称为值(value)。
  • 据因(reason ):也就是拒绝原因,指在 promise 被拒绝时传递给拒绝回调的值。

2、三种状态

  • 等待态(Pending)处于等待态时,promise 需满足条件:可以迁移至执行态或拒绝态。
  • 执行态(Fulfilled)处于执行态时,promise 需满足条件:(1)不能迁移至其他任何状态,(2)必须拥有一个不可变的终值。
  • 拒绝态(Rejected)处于拒绝态时,promise 需满足条件:(1)不能迁移至其他任何状态,(2)必须拥有一个不可变的据因。

3、两种事件

对于三种状态,有两种转换方向。

  • 如果是 pending --> fulfiied,就会触发 onFulFilled 事件
  • 如果是 pendeing --> rejected,就会触发 onRejected 事件

4、一个对象

  • promise对象

promise的基本用法

基本格式:

let pro=new Promise(function(resolve,reject){
  if(/*异步操作成功*/){
    resolve("ok");//状态从 pending --> fullFilled时执行的函数。传递终值(value)。
  }else{
    reject("not");//状态从 pending --> rejected执行的函数。传递据因(reason)。
  }
})
复制代码

then方法

针对事件的注册,promise对象提供了then方法。 格式如下:promise.then(onFulfilled,onRejected)

  • 针对 onFulFilled,会自动提供一个参数,作为终值(value)
  • 针对 onRejected,会自动提供一个参数,作为据因(reason)
let p1=new Promise(function(resolve,reject){
    let n=Math.random();
    if(n>0.5){
        resolve('ok')
    }else{
        reject('error')
    }
})
p1.then(function(res){<!--成功时,调用的函数-->
    console.log(res);<!--输出传递的参数-->
    console.log("响应pending-->fulfined转换事件");
},function(err){<!--失败时,调用的函数-->
    console.log(err);<!--输出传递的参数-->
    console.log("响应pending-->rejected转换事件");  
})
console.log(p1);
当异步操作成功时:
<!-- Promise { 'ok' }
ok
响应pending-->fulfined转换事件 -->
当异步操作失败时:
<!-- Promise { <rejected> 'error' }
error
响应pending-->rejected转换事件 -->
复制代码

catch方法

  • 用于注册 onRejected 回调。
  • .catch()方法其实是 then 的简写,then(null,callback)
  • then 方法调用之后,仍然返回的是 promise 对象,所以可以链式调用,如下:
p1.then(res=>console.log(res)).catch(err=>console.log(err))
复制代码
  • 在使用 promise 对象时,一般这么描述,异步操作成功的时候,走 then,失败的时候就走 catch。

所以上面的p1的回调事件可以写成如下形式:

p1.then(function(res){
    console.log(res);
    console.log("响应pending-->fulfined转换事件");
}).catch(function(err){
    console.log(err);
    console.log("响应pending-->rejected转换事件");  
})
复制代码

转载于:https://juejin.im/post/5b6d9858f265da0f563e07cd

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值