es6的一些用法

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