ES6常用方法

最新推荐文章于 2023-02-24 11:40:41 发布

正一品程序员

最新推荐文章于 2023-02-24 11:40:41 发布

阅读量736

点赞数

文章标签： javascript es6 前端

本文链接：https://blog.csdn.net/weixin_46060121/article/details/121333979

版权

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>25、ES6常用方法</title>
</head>

<body>
  <script>
    //一：从对象取值
    const obj = {a: 1,b: 2,c: 3,d: 4,e: 5}
    const {a,b,c,d,e}=obj//解构赋值
    const {a:a1}=obj//想创建的变量名与对象的属性名不一致时
    console.log(a1);//1

    //二、合并数组
    const aa=[1,2,3]
    const bb=[1,5,6]
    const cc=[...new Set([...aa,...bb])];//[1,2,3,5,6]
    const obj1={aa:1}
    const obj2={bb:1}
    const obj3={...obj1,...obj2};//{a:1,b:1}

    //三、拼接字符串
    const name ="小明"
    const scone=59
    const result =`${name}${scone>60?'的考试成绩合格':'的考试成绩不合格'}`
        const str=`${name}${scone}`
    console.log(str);//小明59
    console.log(result);//小明的考试成绩不合格

    //四、if判断
    const type=Math.round(Math.random()*10)
    //ES5
    if(type == 1 ||type == 2 ||type == 3 ||type == 4){
      //console.log('包含')
    }else{
      //console.log('不包含');
    }
    //ES6
    const condition=[1,2,3,4]
    if(condition.includes(type)){
      console.log('包含');
    }else{
      console.log('不包含');
    }

    //五、列表搜索
    const arr = [1,2,3,4,5]
    const resultNew = arr.find(item=>{
      console.log(item);
      return item===3//find方法找到符合条件的项，停止遍历数组
    })

    //六、数组扁平化
    //ES5
    const deps={
      '采购部':[1,2,3],
      '人事部':[5,8,12],
      '行政部':[5,14,79],
      '运输部':[3,64,105],
    }
    let member = []
    for(let item in deps){//for in 用于遍历对象的value
      const value = deps[item]
      if(Array.isArray(value)){
        member=[...member,...value]
      }
    }
        member=[...new Set(member)]//合并去重
    console.log(member);//[1,2,3,5,8,12,14,79,64,105]
    //ES6
    //使用Infinity作为flat的参数，可无需知道被被扁平化的数组的维度（flat方法不支持IE浏览器。）
    //Infinity是一个数值，表示无穷大
    let member2 = Object.values(deps).flat(Infinity)
    let member3= [...new Set(member2)]
    console.log(member3);//[1,2,3,5,8,12,14,79,64,105]

    //七、获取对象属性值
    //ES5
    let objNew = {name:"李四"}
    const nameNew = objNew && objNew.name
    console.log(nameNew);//李四
    //ES6
    let nameNews = objNew?.name 
    console.log(nameNews);//李四
    
    //八、添加对象属性值(属性名动态变化)
    //ES5
    let object = {}
    let index = 1
    let key = `topic${index}`
    object[key]='话题内容'
    //ES6
    object[`topic${index}`]='话题内容'//{topic:"话题内容"}

    //九、输入框非空判断
    let value="value"
    //ES5
    if(value !== null && value !== undefined && value !== ''){
      //业务代码
    }
    //ES6
    if((value??'')!==''){
      console.log(value);
    }
    if(!!value){
      console.log(value);
    }
    
    //十、异步函数
    //ES5
    const fn1=()=>{
      return new Promise((resolve,reject)=>{
        setTimeout(()=>{
          resolve(1)
        },300)
      })
    }
    const fn2=()=>{
      return new Promise((resolve,reject)=>{
        setTimeout(()=>{
          resolve(2)
        },600)
      })
    }
    const fn=()=>{
     fn1().then(res1=>{
       console.log(res1);//1
       fn2().then(res2=>{
         console.log(res2);//2
       })
     })
    }
        // fn()
    // ES6
    const fnNew = async()=>{
      const res1 = await fn1()
      const res2 = await fn2()
      console.log(res1);//1
      console.log(res2);//2
    }
    fnNew()

    //并发请求
    /* 如果并发请求时，只要其中一个异步函数处理完成，就返回结果，要用到Promise.race()。 */
    const fnNews=()=>{
      Promise.all([fn1(),fn2()]).then(res=>{
        console.log(res);//[1,2]
      })
    }
    fnNews()
  </script>
</body>

</html>

正一品程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6常用方法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>25、ES6常用方法
复制链接

扫一扫