es6-es11入门

我是一只代码狗

已于 2023-06-24 19:33:14 修改

阅读量175

点赞数

分类专栏： vue 文章标签： es es6

于 2023-06-23 14:15:30 首次发布

原文链接：http://t.csdn.cn/TLdpm

版权

vue 专栏收录该内容

38 篇文章 3 订阅

订阅专栏

声明变量


        <script type="text/javascript">
           //声明变量 只作用于局部
            let a;
            let b,c,d;
            let e='aa'
            console.log(e);
            console.log(a,b,c,d)
            {
            let dd='ddddd'
            console.log('块级作用域:',dd)
            }
            //块级作用域只能再块级作用域内使用
            console.log(dd)

        </script>

声明常量

 <script type="text/javascript">
            //声明常量，不可以被修改，一定要赋予初始值
           const aa='123';
           aa=456
           console.log(aa)

        </script>

变量的解构赋值

  <script type="text/javascript">
           //解构赋值就是把 对象和数组里面的数据 通过一个变量 然后直接使用 就可以得到对应的内容
           
           //数组解构
           const res=['你好','世界']
           //数组的名字可以随便起，但是顺序要一致
           let [a,b]=res
           console.log(a)
           console.log(b)

           //对象解构
           const ans1={
                name:'张三',
                fangfa : function(){
                    console.log('aaaaaaaaaaaa')
                }
           };

           //名字要和对象里面的名字一样
           let {name,fangfa} = ans1;
           console.log(name);
           console.log(fangfa);
           //直接调用方法
           fangfa();

        </script>

模板字符串

 <script type="text/javascript">
           //通过两个``表示模板字符串
           let aa=`我是模板字符串`
           console.log(aa)
           //换行不需要加其他的符号
           let bb=`<ul><li>aaa
            </li></ul>`;
            console.log(bb);
           //拼接字符串
           let cc='你好'
           let dd=`${cc}我是模板字符串`
           console.log(dd)  
           

        </script>

对象的简化写法


        <script type="text/javascript">
           //对象的简化写法
           let name='张三'
           let fangfa=function(){
            console.log('我是一个方法')
           }
           //复杂写法
           let aa={
                name:name,
                fangfa:fangfa,
                cc:function(){
                    console.log('我是一个复杂的方法')
                }
           }
           console.log(aa);
           //简化写法如果两个名字一样 可以简写,方法可以把:function去掉
           let bb={
                name,
                fangfa,
                cc(){
                    console.log('我是一个简单的方法')
                }
           }
           console.log(bb)
        </script>

方法的简化，使用箭头函数

 <script type="text/javascript">
           //function的简化
           //正常的定义函数
           let aa=function(){
                console.log('aaaaaaaaaaaaa')
           }
           aa();
           //简写的定义函数 => 去掉function 
           let bb=(a)=>{
            console.log('参数是:',a)
            return a;
           }
           bb(1)
           //如果只有一条语句 还可以简写 去掉小括号 和大括号 和return 
           let cc=a=>a+1;
           let dd=cc(1)
           console.log(dd)

        </script>

函数的默认初始值

 <script type="text/javascript">
           //函数的默认初始值
           function aa(a,b=10){
                return a+b;
           }
           let cc=aa(1);
           console.log(cc)

           //与解构赋值 结合
           function bb({name,pwd}){
                console.log(name)
                console.log(pwd)
           }
           bb({
            name:'张三',
            pwd:111
           })

        </script>

rest参数

 <script type="text/javascript">
           //正常的方法
           function aa(){
            console.log(arguments)
           }
           aa('张三','里斯')
            //rest 参数 用于获取函数的实际参数
           //用三个点替代多个参数
           function bb(...args){
                console.log(args)
           }
           bb('123','456');
           //注意...args不能再前面，要放在最后，否则报错
           

        </script>

扩展运算符

 <script type="text/javascript">
          //扩展运算符... 将数组 转换成逗号分割的参数
          const aa=['张三','lisi'] 
          function bb(){
            console.log(arguments)
          }
          bb(aa)
          bb(...aa)

        </script>

迭代器

    <script type="text/javascript">
          //迭代器
          const ans=['张三','里斯']

          //for in打印的是数字 索引
          for (let v in ans){
            console.log(v)
          }
          //for of 打印的是 值
          for(let v of ans){
            console.log(v)
          }
          //Symbol的迭代器  
          let aa=ans[Symbol.iterator]();
          console.log(aa)
          //打印单条对象信息
          console.log(aa.next())
          console.log(aa.next())

        </script>

实例化promise对象

如果接收数据库的数据成功了，调用resolve方法，如果失败调用reject方法

   <script type="text/javascript">
          //实例化promise对象
          const p=new Promise(function(resolve,reject){
                let v='成功了'
                resolve(v)
                
          })
          p.then(function(value){
            console.log('打印成功的信息:',value)
          },function(msg){
                console.log('打印失败的信息:'+msg)
          })

        </script>

   <script type="text/javascript">
          //实例化promise对象
          const p=new Promise(function(resolve,reject){
                let v='失败了'
                reject(v)

          })
          p.then(function(value){
            console.log('打印成功的信息:',value)
          },function(msg){
                console.log('打印失败的信息:'+msg)
          })

        </script>

Set集合

<script>
   //创建set集合 
   let set=new Set();
   //添加
   set.add('aaa')
   set.add('bb')
   //自动去重复
   set.add('bb')
   console.log(set)
   //集合长度
   console.log(set.size)
    //删除
    set.delete('aaa')
    console.log(set)
    //是否存在，true 存在，false 不存在
    console.log(set.has('bb'))
    //循环遍历
    for(let v of set){
        console.log(v)
    }
    //清空集合
    set.clear()
    console.log(set)

</script>

Map集合

<script>
  //创建map集合
  let map=new Map();
  //添加
  map.set('key','123')
  map.set('ke1',['aa','bb'])
  console.log('集合长度'+map.size)
  //遍历
  for (let x of map) {
    //key和value
    console.log(x)
  }  
  //删除
  map.delete('key')
 
  console.log(map)
   //清空
   map.clear();
   console.log(map)

</script>

class

<script>
 //创建类
 class Lei{
    //构造方法 名字不可修改 在new的时候触发
    constructor(name,age){
        this.name=name
        this.age=age
    }

    

    //方法1 随便命名
    aa(){
        console.log('我是方法1')
    }
    //方法2 随便命名
    bb(){
        console.log('我是方法2')
    }

    
    static cc(){
        console.log('静态方法只能Lei.cc')
    }
    
 }

 //new对象
 let l=new Lei('张三',20)
 console.log(l)
 //调用方法
 l.aa()
 l.bb()
//静态方法调用
Lei.cc();
</script>

继承父类

<script>
 //创建类
 class Lei{
    //构造方法 名字不可修改 在new的时候触发
    constructor(name,age){
        this.name=name
        this.age=age
    }
    //方法1 随便命名
    aa(){
        console.log('我是方法1')
    }
 }

 //通过extends 继承父类
 class Zi extends Lei{
    constructor(name,age,price){
        //调用父类构造方法
        super(name,age)
        this.price=price;
    }

    bb(){
        console.log('我是子类的方法')
    }
 }

 let z=new Zi('张三',20,666);
 z.aa();
 z.bb();
</script>

重写父类方法aa

<script>
 //创建类
 class Lei{
    //构造方法 名字不可修改 在new的时候触发
    constructor(name,age){
        this.name=name
        this.age=age
    }
    //方法1 随便命名
    aa(){
        console.log('我是方法1')
    }
 }

 //通过extends 继承父类
 class Zi extends Lei{
    constructor(name,age,price){
        //调用父类构造方法
        super(name,age)
        this.price=price;
    }

    bb(){
        console.log('我是子类的方法')
    }
    aa(){
        console.log('我重写了父类的方法')
    }
 }

 let z=new Zi('张三',20,666);
 z.aa();
 z.bb();
</script>

class的get set方法

<script>
 //创建类
 let _age=20;
 class Lei{
   
    get age(){
        console.log('被读取了')
        return _age; 
    }

    set age(value){
        console.log('新的值为:',value)
        _age=value
    }
 }

 let l=new Lei()
 l.age=66
 console.log(l.age)

</script>

对象的方法扩展

<script>

//判断是否相等
console.log(Object.is(123,123))
//合并2个对象,如果有相同的数据,后面的会覆盖前面的
let aa={name:'aa',age:18}
let bb={name:'bb',test:666}
let cc=Object.assign(aa,bb)
console.log(cc)

        let p={
            name:'张三',
            aa:['bb','cc']
         }
         //获取 所有的key
         console.log(Object.keys(p))
         //获取所有的value
         console.log(Object.values(p))
         //获取数组
         console.log(Object.entries(p))
         //获取对象描述信息
         console.log(Object.getOwnPropertyDescriptors(p))

   

</script>

模块化

就是把一个大的文件拆成多个小文件，然后暴露和引入

分别暴露和解构引入

创建aa.js

//分别暴露
export let name='张三'
export function age(){
    console.log('aaaaaa')
}

在test.html引入

<!DOCTYPE html>
<html>
    <head></head>
    <meta charset="utf-8"/>
    <title>初始vue</title>
   <style>
      
    </style>
    <body>
        
       
      
    </body>

    <script type="module" >
      //解构导入
      import {name,age} from './aa.js'
      console.log(name)
      age();

     </script>
</html>

统一暴露


let name='张三'
function age(){
    console.log('aaaaaa')
}
//统一暴露
export {name,age}

默认暴露

//默认暴露
export default{
     name:'张三',
     age:()=>{
        console.log('aaaaaa')
    }
}

修改test.html

<!DOCTYPE html>
<html>
    <head></head>
    <meta charset="utf-8"/>
    <title>初始vue</title>
   <style>
      
    </style>
    <body>
        
       
      
    </body>

    <script type="module" >
      //默认暴露对应的引入 要起一个别名 然后去调用其他字段
      import {default as aa} from './aa.js'
      console.log(aa.name)
      aa.age();

     </script>
</html>

includes

 <script type="module" >
      let ans=['aa']
      //判断数组中的内容是否存在，true 存在，false不存在
      console.log(ans.includes('aa'))
      console.log(ans.includes('bb'))
      

     </script>

async


    <script type="module" >
      //当使用了async的时候 返回结果就是一个Promise对象
       async function aa(){
         return '123'
        }

        let bb=aa();
        console.log(bb)
        bb.then(res=>{
            console.log('成功:',res)
        },msg=>{
            console.log('失败',msg)
        })
      

     </script>

await


    <script type="module" >
         const p=new Promise((reslove,reject)=>{
            //成功调用
            reslove('123')        
         })

         //await必须放在async里面
         async function aa(){
            //通过await 可以拿到p中成功的值
            let bb=await p;
            console.log(bb)
         }
         //调用方法
         aa();

     </script>

Object.fromEntries创建对象

    <script type="module" >
         //创建二维数组
         const aa=Object.fromEntries([
            ['name','张三'],
            ['age','18']
         ]);
         console.log(aa)
         //创建map
         let map=new Map();
         map.set('name','李四')
         map.set('age',60) 
         console.log(map)
         //创建对象
         console.log(Object.fromEntries(map))

         
     </script>

清除空格

    <script type="module" >
        let aa='  sdf   '
        console.log(aa)
        //清除左侧空格
        console.log(aa.trimStart())
         //清除右侧空格
         console.log(aa.trimEnd())
         
     </script>

flat和flatMap

   <script type="module" >
       //把二维数组转换成一维数组
       let arr=[1,[2,3]];
       console.log(arr.flat())
       //把4维数组转为1维数组
       let aa=[1,[2,[3,[4]]]]
       //这里的数字对应 如果3 那么4维数组-3维数组=1维数组，如果是2，那么4维数组-2维数组=2维数组
       console.log(aa.flat(3))


       let bb=[1,2,3,[4]]
       //把多个数组，转换成一个数组
       let dd=bb.flatMap(x=>[x*10])
       console.log(dd)
       
     </script>

私有属性


    <script type="module" >
         class P{
            //公有属性
            name;
            //私有属性 必须带#
            #age;
            constructor(name,age){
               this.name=name;
               //私有属性必须带#
               this.#age=age;
            }
         }
         //私有属性不能直接在外部调用
         let p=new P('张三',11)
         console.log(p)
     </script>

Promise.allSettled合并2个对象的结果

  <script type="module" >
         let aa=new Promise((resolve,reject)=>{
               resolve('成功了')
         })
         let bb=new Promise((resolve,reject)=>{
               reject('失败了')
         })
         let dd=Promise.allSettled([aa,bb])
         console.log(dd)
         
     </script>

可选链操作符

    <script type="module" >
         function aa(config){
              //?. 表示 这个字段如果不存在，返回undefined,而不报错
              let bb=config?.age;
              console.log(bb) 
         }
         aa({
            name:'aaa',
            pwd:66
         })

     </script>

globalThis

<script type="module" >
         //绝对全局对象
         console.log(globalThis)
     </script>