当前位置:   article > 正文

es6的一些用法_写箭头函数使用.then

写箭头函数使用.then

1.解构赋值

按照一定的数据结构将数据直接赋值,例如:

let [[a,b],c,d] = [[1,2],3,4];  //abcd四个的值为1234

let arr=[1,2,3,'a','b']

let [one,two,three,four,five]=arr //one的值就是1,后边依此类推

let obj = {
  name:"张三",
  age:14,
  work:function(){
    console.log("66666")
  },
  like:["唱歌","跳舞"],
  car:{
    color:'red',
    price:10
  }
}
let {name,age,work,like:[a,b],car:{color,price}}=obj;  //对象解构赋值时,必须使用属性结构,里面的值是等于的对象里面的key值

console.log(name) //输出结果是张三

2.字符串模板

在es5中对于字符串或者变量的拼接用的是引号和加号,在es6中用法为`字符串${变量}`如下:

let name='张三'

console.log(`我的名字是${name},我今年3岁`  //输出结果为我的名字是张三,我今年3岁

3.新增的处理字符串的方法

includes:判断该字符是否存在字符串中,不存在返回false,存在返回true,里面有两个参数,参数一:要查询的字符串,参数二:从当前哪个索引开始查询(查询的位置),不写默认从头开始,例如:

let  str = 'bdgbui';

console.log(str.includes("b",1))  //结果为false

 startsWith:判断字符串是否存在于原字符串开头,不存在返回false,存在返回true,有两个参数,参数一:要查询的字符串,参数二:从当前哪个索引开始查询(查询的位置),不写默认从头开始,例如:

let  str = 'bdgbui';
 console.log(str.startsWith("b",1));   //结果是false
 //endsWith:判断字符串是否存在于原字符串结尾,不存在返回false,存在返回true,有两个参数,参数一:要查询的字符串,参数二:从当前哪个索引开始查询(查询的位置),参数二默认不写,不写默认从头开始,例如:

let  str = 'bdgbui';

console.log(str.endsWith("e"))  //结果是false

repeat 返回一个新的字符串,表示将原字符串复制n次,只有一个参数,为想要复制的次数,参数为小数时向下取整,为0时返回空字符串,为负数时直接报错
let str1 = 'hello';

let str2 = str1.repeat(2);

console.log(str2)   //结果是hellohello

trim 过滤字符串中的空格  trimStart 表示过滤字符串前面的空格  trimEnd 表示过滤字符串后面的空格,例如:

let str3 = "      abc        ";

console.log(str3.trim())       //结果是‘abc’

console.log(str3.trimStart())       //结果是‘abc   ’

console.log(str3.trimEnd ())       //结果是‘    abc’

4.箭头函数

ees5写法为:let  fun=function(一个参数){

console.log('666')

}

es6写法为:

let  fun= (一个参数)=>{

console.log('666')   //执行语句

}

在es6中,如果参数只有一个()可以省略不写,如果执行语句只有一个,那么{}可以省略不写,如果有多个不可以从省略,具体省略大小括号哪个看具体情况,比如上边的可以省略成:

let  fun= 一个参数 => console.log('666')   //执行语句

在箭头函数中若直接返回数据 可以省略return 和 大括号,比如

let data=()=> '张三'

console.log(data())

es6箭头函数this指向:

es5中,谁调用的函数this指向谁,es6中不存在this指向,只能继承父级元素的指向,比如:

  let obj = {

name:"张三",

age:18,

say:function(){

console.log(this)

 }
    obj.say();  //this指向obj

  let user ={

name:"李四",

age:20,

say:()=>{

      console.log(this)

 }  //匿名函数

}

user.say()   //this指向window

5.新增的处理数组的方法

sort 将数组进行排序,会返回一个排好序的新数组,例如:

let arr=[1,2,4,65,121,13]

let arr1=arr.sort((a,b)=>{

return a-b //把数组从小到大排列

// return b-a //把数组从大到小排列

})

console.log(arr1) //输出一个从小到大排列好的新数组

find 判断当前数组中是否存在某个条件,若存在则返回存在的这个元素 find方法只会返回满足条件的第一个元素,不存在的话返回undefined,例如:

let arr=[1,2,4,65,121,13]

let arr1=arr.find ((value,index)=>{  // value代表数组中的每一个元素,index是这些元素的索引

     return  value>2

})

console.log(arr1)   //结果为4

findIndex  查询数组中是否存在某个元素 ,若存在返回满足条件的第一个元素的索引,不存在的话返回-1,例如:

let arr=[1,2,4,65,121,13]

let arr2=arr.findIndex((value,index)=>{

   return  value>2000

})

console.log(arr2)  //  结果为-1

forEach 用来遍历数组,没有返回值,例如:

let arr=[1,2,4,65,121,13]

let arr3=arr.forEach((value,index)=>{

    console.log(value)  //打印出来是arr的每一个值

})

map 遍历数组 ,有返回值,例如:

let arr=[1,2,4,65,121,13]

let arr4=arr.map((value,index)=>{

    return value

})

console.log(arr4)  //输出结果是[ 1, 2, 4, 65, 121, 13 ]

 filter 过滤数组,返回值为过滤后的新数组,例如:

let arr=[1,2,4,65,121,13]

let arr5=arr.filter((value,index)=>{

    return value>10

})

console.log(arr5)   //结果为[ 65, 121, 13 ]

 some 判断当前数组中是否存在符合条件的元素,存在返回true,不存在返回false,例如:

let arr=[1,2,4,65,121,13]

let arr6=arr.some((value,index)=>{

    return value>10

})

console.log(arr6)  //结果为true

every  判断当前数组中是否存在符合条件的元素,都符合才返回true 若有一个或有多个不符合则返回false,例如:

let arr=[1,2,4,65,121,13]

let arr7=arr.every((value,index)=>{

    return value>10

})

console.log(arr7)    //结果为false

...    数组扩展运算符,相当于遍历数组,例如:

let arr1=[1,2,3,5,35,4]

console.log(...arr1)   //输出结果就是 1,2,3,5,35,4

let arr1=[1,2,3,5,35,4]

let arr2=[3,56,43,22,346]

let arr3=[...arr1,...arr2]

console.log(arr3)    //输出结果就是 [1, 2,  3,  5, 35, 4, 3, 56, 43, 22,346],相当于拼接数组

6.新增的对象的写法

let name='张三'

let age=18

let hobby='学习'

let obj2={name,age,hobby}  //  当对象的属性名和属性值一样的时候,可以省略属性值,属性名与属性名之间有逗号隔开

es6对象里面的方法的写法例如:

let people={

    name:'王五',

    say(age){

        console.log(`今年${age}岁了`)

    }

}

people.say(12)   //  结果是今年12岁了

9.map和set

 map 是es6中一个新的有序对象列表,类似于对象,map数据结构中的key可以是任意值,例如:

let map = new Map();

 //set用于向map中添加键值对,有两个参数,第一个参数是key,第二个是value

map.set('name','张三') 

map.set('age',18)

map.set('data',{sex:'boy',hobby:'学习'})

map.set('grade',[66,29,88,101])

console.log(map)  //结果是

                                   Map(4) {

                                        'name' => '张三',

                                         'age' => 18,

                                         'data' => { sex: 'boy', hobby: '学习' },

                                         'grade' => [ 66, 29, 88, 101 ]

                                     }

 // 获取map对象的大小;
  console.log(map.size)  //4
  // 获取map对象中的value值,参数为key值
  console.log(map.get('name'))  //张三
  // 删除map中的值,如果key值为复杂的字符类型,比如对象或者数组时,删不掉
  map.delete(‘name’);
  console.log(map) 

                    //         Map(3) {

                                  'age' => 18,

                                  'data' => { sex: 'boy', hobby: '学习' },

                                  'grade' => [ 66, 29, 88, 101 ]

                                       } 

 //  has判断map对象中是否存在对应的键值对,存在返回true,不存在返回false;
   let isSex= map.has("sex");
   console.log(isSex)   //false

//foreach遍历其中的元素

map.forEach((value,key)=>{   //key代表的键值对中的key值,value代表对应的值

    console.log(value)    //value值

})

set 是es6新提出来的一个集合的概念,类似于数组,每一个成员都是唯一的,集合中的数据可以是任意数据类型,例如:

let set = new Set();

//add用来向集合中添加数据,只有一个参数,表示添加进去的值

set.add('张三')

set.add('张三')

set.add(666)

set.add({

    yuwen:88,

    shuxue:101

})

set.add([1,2,3,4])

set.add(true)

console.log(set)   //Set(5) { '张三', 666, { yuwen: 88, shuxue: 101 }, [ 1, 2, 3, 4 ], true },因为set每

个成员都是唯一的,所以有重复的会自动去掉

//delete代表删除的数据,不能删除数组,对象等复杂数据

set.delete(666)

console.log(set)    //  { '张三', { yuwen: 88, shuxue: 101 }, [ 1, 2, 3, 4 ], true }

//  has判断set集合中是否存在对应的数据,存在返回true,不存在返回false;

console.log(set.has('张三'))   //true

//foreach遍历其中的元素

set.forEach((value)=>{

    console.log(value)    

})

输出是:

张三

{ yuwen: 88, shuxue: 101 }

[ 1, 2, 3, 4 ]

true

//clear清空集合中的元素
set.clear()

console.log(set)  //Set(0) {}

//使用set进行数组去重

 let arry = [12,23,12,52,25,25,12,23];

let set1 = new Set(arry);

console.log(set1)    //Set(4) { 12, 23, 52, 25 },想要让结果是数组,[...set1]

10.promise,通常是用来解决地狱回调问题的;

//有三个状态: pending(等待)   fulfilled(成功)  rejected("失败")

// 两个过程  pending=>fulfilled     pending=>rejected,具体用法如下:

let p1=new Promise((resolve,reject)=>{  //第一个参数代表成功,第二个参数代表失败

    let num=Math.floor(Math.random()*10)  //取0-10随机数

    if(num>5){  

        resolve('大于5,成功了')  //如果大于5,成功状态输出的语句

    }else{

        reject('小于五,失败了')  //如果小于5,失败状态输出的语句

    }

})  //这个代码整体为等待状态,不会输出任何数据,想要改变状态的话需要用到then,如下

p1.then(  //then有两个参数,第一个代表成功状态,第二个代表失败状态

    (chenggong)=>{  //参数为成功时上边成功状态发送过来的语句

        console.log(chenggong)  

    },(shibai)=>{ //参数为失败时上边失败状态发送过来的语句

        console.log(shibai)

    }

)

promise的链式调用,例如:

let p1=new Promise((resolve,reject)=>{

    let num=Math.floor(Math.random()*10)

    if(num>5){

        resolve('大于5,成功了')

    }else{

        reject('小于五,失败了')

    }

})

p1.then(

    (chenggong)=>{

        console.log(chenggong)

        return new Promise((yes,no)=>{

            yes('66666666')

        })

    },(shibai)=>{

        console.log(shibai)

    }

).then((cheng)=>{  

    console.log(cheng)  //只有p1成功时才会输出语句666666,因为只有成功时p1.then才会有才会                                       有返回值

})

11.async,await

async 是es7才有的异步关键字,和promise非常类似,async函数的返回值为一个promise对象,可以使用.then的方法添加回调函数获取返回值,例如:

async function getUser(){
  console.log("aaaa")
  return "bbbb"
}

getUser().then((res)=>{
  console.log(res)
})   //  aaaa

         bbbb

//async 函数中可以有一个 await 表达式,当async函数遇到await时就会先暂停执行,等到awiat表达拾执行完成后再恢复执行, 并且只有await后面为 promise对象时 async函数才会暂停执行,await关键字只在async函数中有效,例如:

function testAwait(){
    return new Promise((reslove,reject)=>{
      setTimeout(()=>{
        console.log( "test")
        reslove("testAwait")
     },1000)
    })
}

async function getAwait(){
    await testAwait();
    console.log("async")
}
getAwait();  //  test       async,如果testAwait不是promise对象结果就是async   test       

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Cpp五条/article/detail/131203
推荐阅读
相关标签
  

闽ICP备14008679号